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 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. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen:

  2. Snippet erstellen:

  3. 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