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

Observera

Om du använder ett kostnadsfritt tema från Shopify kan du kontakta Shopify-supporten och få hjälp via denna handledning. Det kräver 15 minuters designtid. Mer information om Shopifys designpolicy.

Observera

Denna anpassning är för teman för Online Store 2.0 och gäller inte för Shopifys vintageteman. Lär dig om temats arkitekturversion.

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

Varning

Den här anpassningen fungerar inte för varukorgsstilarna panel och popup och fungerar endast för en varukorgssida (på URL your-store.com/cart). Om du använder en varukorgspanel eller -popup måste du ändra din varukorgsstil till Sida i temaredigeraren. Lägg till en produkt i varukorgen i temaförhandsgranskningen och klicka sedan på fliken Varukorgssida i temaredigeraren för att se dina varukorgsinställningar.

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 ett gratis Shopify Online Store 2.0-tema kan du behöva följa nästa steg:

1. Klicka på theme.liquid i Layout-registret

2. 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 }}

1. Klicka på Spara.

Skapa ett fragment för leveransdatum

Så här skapar du ett fragment för din väljare av leveransdatum:

Dator

1. Från din Shopify-admin går du till Webbshop > Teman.
2. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
3. Klicka på Lägg till ett nytt fragment i katalogen Fragment:

4. Skapa fragmentet:

   1. Namnge ditt fragment delivery-date.
   2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.

5. 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 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. Klicka på Spara.

iPhone

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
4. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
5. Klicka på Lägg till ett nytt fragment i katalogen Fragment:

6. Skapa fragmentet:

   1. Namnge ditt fragment delivery-date.
   2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.

7. 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 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. Klicka på Spara.

Android

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
4. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
5. Klicka på Lägg till ett nytt fragment i katalogen Fragment:

6. Skapa fragmentet:

   1. Namnge ditt fragment delivery-date.
   2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.

7. 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 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. Klicka på Spara.

Inkludera fragmentet på din varukorgssida

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

1. Klicka på main-cart-items.liquid i registret Avsnitt.

2. Hitta sluttaggen </form> i koden. På en ny rad ovanför sluttaggen </form> klistrar du in följande kod:

{% render 'delivery-date' %}

1. 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 biblioteket jQuery UI.