Hilfe
Einloggen

Eine Datumsauswahl für das Lieferdatum zu deinem Warenkorb hinzufügen

Du kannst auf deiner Warenkorbseite einen Kalender einbinden, über den Kund:innen ein Lieferdatum für ihre Bestellung angeben können.

Datumsauswahl für das Lieferdatum

Auf dieser Seite

jQuery in deine theme.liquid einbinden

Damit diese Anpassung funktioniert, muss bei einigen Themes ein Skript-Tag für jQuery zur Layout-Datei „theme.liquid“ hinzugefügt werden. Wenn du ein kostenloses Shopify-Theme verwendest, musst du möglicherweise den nächsten Schritt ausführen:

  1. Klicke im Verzeichnis Layout auf theme.liquid.

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

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

Ein Snippet für das Lieferdatum erstellen

Um ein Snippet für deine Datumsauswahl für das Lieferdatum zu erstellen:

Desktop

  1. Gehe in deinem 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 im Verzeichnis Snippets auf Neues Snippet hinzufügen:

  4. Erstelle das Snippet:

  5. Benenne dein Snippet delivery-date.

  6. Klicke auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.

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

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Klicke auf Speichern.
Mobil

  1. Tippe in der Shopify-App auf das Symbol Menü.

  2. Tippe im Abschnitt Vertriebskanäle auf Onlineshop.

  3. Tippe auf Themes verwalten.

  4. Suche das Theme, das du bearbeiten möchtest, tippe auf die Schaltfläche …, um das Aktionsmenü zu öffnen, und tippe dann auf Code bearbeiten.

  5. Tippe im Verzeichnis Snippets auf Neues Snippet hinzufügen:

  6. Erstelle das Snippet:

  7. Benenne dein Snippet delivery-date.

  8. Tippe auf Snippet erstellen. Die neue Snippet-Datei wird im Code-Editor geöffnet.

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

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Tippe auf Speichern.

Das Snippet in deine Warenkorbseite einbinden

Um das Snippet für das Lieferdatum in deine Warenkorbseite einzubinden:

  1. Klicke im Verzeichnis Sections auf main-cart-items.liquid.

  2. Suche den schließenden </form>-Tag im Code. Füge in einer neuen Zeile über dem schließenden </form>-Tag den folgenden Code ein:

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

Du hast jetzt ein Eingabefeld für das Lieferdatum auf deiner Warenkorbseite. Wenn du in das Textfeld klickst, wird ein Kalender angezeigt:

Datumsauswahl für das Lieferdatum

Die in dieser Anpassung verwendete Datumsauswahl ist ein Widget aus der jQuery-UI-Bibliothek.