Lägg till en väljare av leveransdatum i din varukorg

Du kan inkludera en kalender på din varukorgssida som låter kunder ange ett leveransdatum för sin order.

På den här sidan

Inkludera jQuery i din theme.liquid

För att denna anpassning ska fungera kräver vissa teman att en skripttagg för jQuery läggs till i theme.liquid-layoutfilen. Om du använder Boundless, Debut version 17.2.0 eller senare, Express, Narrative eller Venture kan du behöva följa nästa steg:

Klicka på theme.liquid i Layout-registret
Hitta sluttaggen </head> i koden. På en ny rad ovanför sluttaggen </head> klistrar du in följande kod:

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

Klicka på Spara.

Skapa ett fragment för leveransdatum

Dator

Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till ett nytt fragment i katalogen Fragment:
Skapa fragmentet:
1. Namnge ditt fragment delivery-date.
2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.
I ditt nya delivery-date.liquid-fragment klistrar du in följande kod:

{{ '//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>

Klicka på Spara.

iPhone

Från Shopify-appen trycker du på knappen ….
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till ett nytt fragment i katalogen Fragment:
Skapa fragmentet:
1. Namnge ditt fragment delivery-date.
2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.
I ditt nya delivery-date.liquid-fragment klistrar du in följande kod:

{{ '//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>

Klicka på Spara.

Android

Från Shopify-appen trycker du på knappen ….
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till ett nytt fragment i katalogen Fragment:
Skapa fragmentet:
1. Namnge ditt fragment delivery-date.
2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.
I ditt nya delivery-date.liquid-fragment klistrar du in följande kod:

{{ '//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>

Klicka på Spara.

Inkludera fragmentet på din varukorgssida

Så här inkluderar du fragmentet för leveransdatum på din varukorgssida:

Klicka på cart-template.liquid i registret Avsnitt. Om ditt tema inte har den här filen ska du klicka på cart.liquid i katalogen Mallar.
Hitta sluttaggen </form> i koden. På en ny rad ovanför sluttaggen </form> klistrar du in följande kod:

{% render 'delivery-date' %}

Klicka på Spara.

Du har nu ett inmatningsfält för leveransdatum på din varukorgssida. När du klickar i textfältet visas en kalender:

Datumväljaren som används för denna anpassning är en widget från jQuery UI-biblioteket. Det här blogginlägget förklarar hur du inaktiverar specifika datum i kalendern för datumväljare.