> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Click and Collect

> Abholung und Bezahlung im Ladengeschäft als Kombination aus eigener Zahlungsart und eigener Versandart einrichten, mit Filialauswahl je Land.

Der Käufer soll seine Bestellung in einer Filiale abholen und dort bezahlen. Auf der Zahlungs- und Versandartenseite `ws_pay_deliv.htm` wählt er dazu "Click and Collect" und anschließend seinen Abholpunkt aus einer Liste.

Technisch ist das kein eigenes Modul, sondern die Kombination zweier Dinge, die WEBSALE V8s ohnehin kennt:

| Bestandteil | Was er leistet |
| - | - |
| eine frei definierte Zahlungsart | der Käufer zahlt nicht online, sondern vor Ort |
| eine frei definierte Versandart | es wird nicht zugestellt, sondern in der Filiale bereitgestellt |
| eine Zusatzeingabe zur Versandart | der Käufer wählt die Filiale aus |

Zusammengehalten wird das über `DelivererID-List`: Die Zahlungsart lässt nur diese eine Versandart zu, und umgekehrt.

Das Beispiel richtet Click and Collect für Filialen in Deutschland und Österreich ein.

![Clickandcollect](https://mintcdn.com/websaleag-44ee7ea6/HEgVg_TjwqZgFr_g/images/clickandcollect.png?fit=max\&auto=format\&n=HEgVg_TjwqZgFr_g\&q=85\&s=68470675d2ed2f7f3cb9fce1f0f3daeb)

## Schritt 1: Die Zahlungsart anlegen

In der Shopkonfiguration `shop.config` kommt ein neuer Abschnitt `<PaymentUserDef1-Txt>` dazu. Verwenden Sie einen der fünf freien Abschnitte, der noch nicht belegt ist.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<PaymentUserDef1-Txt>
   ...
   Allow                  = yes
   Name                   = Click and Collect
   NameSuffix             = Abholung und Bezahlung vor Ort
   ImgOnClick             = selectPaymentImage('~ID~');
   RadioOnClick           = selectPayment('~ID~');
   Img                    = <logo-XYZ.png>
   DelivererID-List       = clickandcollect
   DeliveryCountry-Rule   = AllowCountries
   DeliveryCountry-List   = DEU,AUT
   ...
</PaymentUserDef1-Txt>
```

| Parameter | Warum er hier steht |
| - | - |
| `DelivererID-List` | verknüpft die Zahlungsart mit der Versandart aus Schritt 2. Wählt der Käufer Click and Collect als Zahlungsart, bleibt nur noch diese eine Versandart übrig |
| `DeliveryCountry-Rule` und `DeliveryCountry-List` | blenden die Zahlungsart aus, sobald in ein Land geliefert werden soll, in dem es keine Filialen gibt |

Referenz: [Abschnitt PaymentUserDef1…5-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)

## Schritt 2: Die Versandart anlegen

Dazu ein neuer Abschnitt `<+Deliverer>`. Die `ID` ist der Wert, auf den sich die `DelivererID-List` der Zahlungsart bezieht.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<+Deliverer>
   ID                       = clickandcollect
   Allow                    = yes
   Country-Txt              = Abholung und Bezahlung vor Ort
   DeliveryCountry-Rule     = AllowCountries
   DeliveryCountry-List     = DEU,AUT
   DisplayInList-Flag       = yes
   Img                      = <logo-XYZ.png>
   ImgOnClick               = selectDelivererImage('~ID~');
   Name-Txt                 = Click and Collect
   NoCost-Txt               = (versandkostenfrei)
   RadioOnClick             = selectDeliverer('~ID~');
   Suffix-Txt               = Holen Sie Ihre Bestellung direkt in der Filiale vor Ort ab und bezahlen Sie diese in bar, mit EC- oder Kreditkarte.
   +UseAdditionalInput-ID   = candc_DEU
   +UseAdditionalInput-ID   = candc_AUT
</+Deliverer>
```

`+UseAdditionalInput-ID` steht hier zweimal. Jede Zusatzeingabe, die zu dieser Versandart gehören soll, bekommt eine eigene Zeile. Welche davon der Käufer tatsächlich zu sehen bekommt, entscheidet erst Schritt 3.

> [!WARNING]
>
> `NoCost-Txt` ist nur der Text, der anstelle eines Betrags erscheint. Er macht die Versandart nicht kostenlos. Wenn für diese Versandart Kosten hinterlegt sind, werden sie berechnet und der Käufer sieht trotzdem "versandkostenfrei". Lassen Sie die Kosten für `clickandcollect` deshalb bei null.

Referenz: [Abschnitt +Deliverer](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/versand-und-lieferung.md#deliverer)

## Schritt 3: Die Filialauswahl anlegen

Die Auswahlliste der Filialen ist eine Zusatzeingabe zur Versandart. Sie steht im Abschnitt `<DelivererAdditionalInput-Definitions>`, den es in der `shop.config` nur einmal geben darf.

Gibt es Filialen in mehreren Ländern, braucht jedes Land einen eigenen `<+AdditionalInput>`-Abschnitt. Der Unterabschnitt `<+VisibilityDependency>` sorgt dafür, dass der Käufer nur die Liste des Landes sieht, in das geliefert wird.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<DelivererAdditionalInput-Definitions>
  ...

  # Filialen Deutschland
  <+AdditionalInput>
    ID                       = candc_DEU
    FieldDescr               = Filiale
    Required                 = no
    AdditionalInfoText       = Filiale auswählen
    RequiredErrorMessage-Txt = Bitte wählen Sie die gewünschte Abholstation.
    Type                     = listbox

    <+listentry>
      ID         = 1
      Entry-Txt  = 90449 Nürnberg, Filiale Breite Gasse
    </+listentry>
    <+listentry>
      ID         = 2
      Entry-Txt  = 90762 Fürth, Filiale Neue Mitte
    </+listentry>
    <+listentry>
      ID         = 3
      Entry-Txt  = 91052 Erlangen, Filiale Erlangen Arcaden
    </+listentry>

    <+VisibilityDependency>
      <+Dependency>
        Input = delivaddress
        <+Condition>
            Field = CountryISO
            Type  = value
            Value = DEU
        </+Condition>
      </+Dependency>
    </+VisibilityDependency>

    <+RequiredDependency>
      <+Dependency>
        Input = delivaddress
        <+Condition>
            Field = CountryISO
            Type  = value
            Value = DEU
        </+Condition>
      </+Dependency>
    </+RequiredDependency>

  </+AdditionalInput>

  # Filialen Österreich
  <+AdditionalInput>
    ID                       = candc_AUT
    FieldDescr               = Filiale
    Required                 = no
    AdditionalInfoText       = Filiale auswählen
    RequiredErrorMessage-Txt = Bitte wählen Sie die gewünschte Abholstation.
    Type                     = listbox

    <+listentry>
       ...
    </+listentry>

    <+VisibilityDependency>
      ... Value = AUT ...
    </+VisibilityDependency>

    <+RequiredDependency>
      ... Value = AUT ...
    </+RequiredDependency>

  </+AdditionalInput>
  ...
</DelivererAdditionalInput-Definitions>
```

> [!WARNING]
>
> **`Required = yes` und `<+VisibilityDependency>` schließen einander aus.**
>
> Die Prüfung, ob eine Zusatzeingabe ein Pflichtfeld ist, beginnt mit `Required`. Steht dort `yes`, liefert sie sofort "Pflichtfeld" zurück und sieht sich `<+RequiredDependency>` gar nicht erst an. Die Sichtbarkeit wird dabei nicht berücksichtigt.
>
> Mit `Required = yes` in beiden Abschnitten wäre für einen österreichischen Käufer die ausgeblendete deutsche Filialliste ein leeres Pflichtfeld. Er könnte die Bestellung nicht abschließen und bekäme eine Fehlermeldung zu einem Feld, das er nicht sieht.
>
> Deshalb steht oben `Required = no`, und die Pflicht wird über `<+RequiredDependency>` an dieselbe Bedingung gehängt wie die Sichtbarkeit.
>
> Die Bedingung prüft das **Lieferland**, nicht das Rechnungsland. Zahlungsart und Versandart filtern über `DeliveryCountry-List` ebenfalls nach dem Lieferland. Mit `Input = billaddress` würden Filter und Sichtbarkeit auseinanderlaufen, sobald Rechnungs- und Lieferadresse verschiedene Länder haben.
>
> `Input = delivaddress` ist auch dann der sichere Weg, wenn Ihr Shop gar keine abweichende Lieferadresse anbietet: Wird keine Lieferadresse verwendet, prüft WEBSALE V8s in diesem Fall die Rechnungsadresse. `onlydelivaddress` tut das nicht und würde ohne Lieferadresse nie zutreffen.

Mehrere `<+VisibilityDependency>`-Abschnitte sind untereinander **oder**-verknüpft, die `<+Dependency>`-Abschnitte innerhalb eines Abschnitts **und**-verknüpft. Für `<+RequiredDependency>` gilt dasselbe. So fassen Sie beispielsweise Deutschland und Österreich in einer Liste zusammen, indem Sie zwei `<+VisibilityDependency>`-Abschnitte anlegen.

> [!WARNING]
>
> Eine Auswahlliste fasst höchstens **100** `<+listentry>`-Einträge. Bei einem größeren Filialnetz reicht ein `<+AdditionalInput>` je Land nicht aus. Teilen Sie die Filialen dann nach einem weiteren Merkmal auf, beispielsweise nach Postleitzahlenbereich oder Bundesland, und steuern Sie die Sichtbarkeit über eine entsprechende Bedingung.

`MaxLength` braucht eine Auswahlliste nicht. Der Parameter wirkt nur bei `Type = input`. Werte über dem internen Maximum werden ohnehin stillschweigend darauf zurückgesetzt.

Referenz: [Abschnitt DelivererAdditionalInput-Definitions](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/versand-und-lieferung.md#delivereradditionalinput-definitions)

## Schritt 4: Die Auswahl im Template ausgeben

Mit den drei Schritten oben ist die Konfiguration vollständig, der Käufer sieht die Filialauswahl aber noch nicht. Die Zusatzeingaben werden nicht von selbst gerendert, sondern vom Template ausgegeben. Zuständig ist die Schleife `DELIV-Data_AdditionalInput` auf der Zahlungs- und Versandartenseite.

Wenn Ihr Template aus einem aktuellen Materialien-Paket stammt, ist diese Schleife bereits enthalten und Sie müssen nichts weiter tun. Andernfalls ergänzen Sie sie.

Referenz: [DELIV- (Versandarten), Zusatzeingaben zur Versandart](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md)

> [!WARNING]
>
> Eine Auswahlliste ohne leeren ersten Eintrag ist nie leer. Der Browser wählt den ersten Eintrag vor, das Pflichtfeld gilt damit als ausgefüllt, und wer die Liste nie angefasst hat, bestellt zur erstgenannten Filiale.
>
> Setzen Sie im Template deshalb eine leere Option vor die Schleife:
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> <select id="~DELIV-Data_AdditionalInput_input~" name="~DELIV-Data_AdditionalInput_input~">
>    <option value="">~DELIV-Data_AdditionalInput_additionalinfotext~</option>
>    {@DELIV-Data_AdditionalInput_listbox}
>       ...
>    {/@DELIV-Data_AdditionalInput_listbox}
> </select>
> ```
>
> Erst dadurch wird aus `AdditionalInfoText` die sichtbare Aufforderung "Filiale auswählen", und erst dadurch greift `RequiredErrorMessage-Txt`.

## Was der Käufer am Ende durchläuft

| Schritt | Was passiert |
| - | - |
| Lieferland steht fest | Zahlungsart und Versandart erscheinen nur bei `DEU` oder `AUT` |
| Käufer wählt Click and Collect als Zahlungsart | über `DelivererID-List` bleibt nur die Versandart `clickandcollect` übrig |
| Versandart ist gewählt | die Filialliste des Lieferlands wird eingeblendet, die des anderen Lands nicht |
| Käufer wählt keine Filiale | `<+RequiredDependency>` greift, `RequiredErrorMessage-Txt` erscheint |
| Bestellung abgeschlossen | die gewählte Filiale steht als Zusatzeingabe in den Bestelldaten |

## Verwandte Themen

* Wegweiser: [Zahlungsarten anlegen](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/zahlungsarten-anlegen.md)
* Wegweiser: [Versandarten anlegen](https://dokumentation.websale.de/v8s/versandarten-anlegen/versandarten-anlegen.md)
* Wegweiser: [Spezielle Versandarten](https://dokumentation.websale.de/v8s/versandarten-anlegen/spezielle-versandarten.md)
* Referenz: [Versand und Lieferung in der shop.config](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/versand-und-lieferung.md)


## Related topics

- [$wsStores - Märkte & Filialen](https://dokumentation.websale.de/frontend/referenz/module/wsstores.md)
- [API-Referenz Stores](https://dokumentation.websale.de/schnittstellen/admin-interface-api/api-referenz-stores.md)
- [$wsCheckout - Checkout](https://dokumentation.websale.de/frontend/referenz/module/wscheckout.md)
- [Storefinder](https://dokumentation.websale.de/frontend/funktionsubersicht/storefinder.md)
- [Versandart abhängig von Mindestbestellwert und Lieferadresse](https://dokumentation.websale.de/v8s/anwendungsbeispiele/appex-versandart-ausgegraut.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.