Logga in
Starta gratis testversion

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.

Väljare av leveransdatum

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:

  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

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 week-end.</span>
  </p>
</div>


<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;


$(function() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      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 week-end.</span>
  </p>
</div>


<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;


$(function() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      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 week-end.</span>
  </p>
</div>


<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;


$(function() {
      $(&#x22;#date&#x22;).datepicker({
      minDate: +1,
      maxDate: &#x27;+2M&#x27;,
      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å cart-template.liquid i katalogen Avsnitt. Om ditt tema inte har den här filen ska du klicka på cart.liquid i katalogen Mallar.

  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:

Väljare av leveransdatum

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.

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!