Lieferdatumsauswahl zum Warenkorb hinzufügen

Diese Seite wurde gedruckt um Apr 27, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/themes/customizing-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 ein kostenloses Theme für Shopify Online Store 2.0 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

So erstellst du ein Snippet für die Lieferdatumsauswahl:

  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 weekend.</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 weekend.</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 weekend.</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 in der Übersicht Abschnitte auf main-cart-items.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.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen