Lieferdatumsauswahl zum Warenkorb hinzufügen

Diese Seite wurde gedruckt um Apr 23, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-date-picker.

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

Lieferdatumsauswahl

Auf dieser Seite

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:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Klicke auf Speichern.

Lieferdatum-Snippet erstellen

  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
  2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  3. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen:

  4. Snippet erstellen:

    1. Benenne dein Snippet delivery-date.
    2. Klicke auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.

  5. Füge den folgenden Code in dein neues Snippet delivery-date.liquid ein:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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.
  1. Tippe in der Shopify-App auf die Schaltfläche ....
  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen:

  6. Snippet erstellen:

    1. Benenne dein Snippet delivery-date.
    2. Klicke auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.

  7. Füge den folgenden Code in dein neues Snippet delivery-date.liquid ein:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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.
  1. Tippe in der Shopify-App auf die Schaltfläche ....
  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen:

  6. Snippet erstellen:

    1. Benenne dein Snippet delivery-date.
    2. Klicke auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.

  7. Füge den folgenden Code in dein neues Snippet delivery-date.liquid ein:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<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 das abschließende Tag </form> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </form> den folgenden Code ein:

{% 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 testen