Lieferdatumsauswahl zum Warenkorb hinzufügen

Du kannst einen Kalender zu deiner Warenkorbseite hinzufügen, in dem Kunden ein Lieferdatum für ihre Bestellung festlegen können.

Lieferdatumsauswahl

jQuery in theme.liquid einschließen

Damit diese Anpassung funktioniert, ist es bei einigen Themes erforderlich, ein Skript-Tag für jQuery zur Layout-Datei theme.liquid hinzuzufügen. Wenn du Boundless, Debut-Version 17.2.0 oder höher, Express, Narrative oder Venture verwendest, musst du möglicherweise den nächsten Schritt anwenden:

  1. Klicke in der Übersicht Layout auf theme.liquid .

  2. Suche das abschließende Tag </head> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </head> den folgenden Code ein:

    liquid {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

  3. Klicke auf Speichern.

Lieferdatum-Snippet erstellen

So erstellst du ein Snippet für die Lieferdatumsauswahl:

  1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen:

  2. Snippet erstellen:

    1. Benenne dein Snippet delivery-date.
    2. Klicke auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.
  3. Füge den folgenden Code in dein neues Snippet delivery-date.liquid ein:

```html {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
1. Klicke auf **Speichern**.

## Snippet in die Warenkorbseite einschließen

So schließt du das Lieferdatum-Snippet in deine Warenkorbseite ein:

1. Klicke im Verzeichnis **Abschnitte** auf `cart-template.liquid`. Wenn dein Theme nicht über diese Datei verfügt, klicke im Verzeichnis **Vorlagen** auf `cart.liquid`.

2. [Suche](/manual/productivity-tools/keyboard-shortcuts#find) das abschließende Tag `</form>` im Code. Füge in einer neuen Zeile über dem abschließenden Tag `</form>` den folgenden Code ein:

```liquid

{% render 'delivery-date' %}
  1. Klicke auf Speichern.

Auf deiner Warenkorbseite befindet sich nun ein Eingabefeld für das Lieferdatum. Wenn du in das Textfeld klickst, wird ein Kalender angezeigt:

Lieferdatumsauswahl

Die in dieser Anpassung verwendete Datumsauswahl ist ein Widget aus der jQuery UI-Bibliothek. In diesem Blog-Beitrag wird erläutert, wie bestimmte Tage in der Kalender-Datumsauswahl deaktiviert werden können.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren