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

Den här sidan skrevs ut den Apr 27, 2024. Besök https://help.shopify.com/sv/manual/online-store/themes/customizing-themes/add-date-picker för den aktuella versionen.

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 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:

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

Väljare av leveransdatum

Datumväljaren som används för denna anpassning är en widget från biblioteket jQuery UI.

Är du redo att börja sälja med Shopify?

Prova gratis