Hjälp
Logga in

Lägg till en leveransdatumväljare i din varukorg

Du kan inkludera en kalender på din varukorgssida som gör det möjligt för kunder att ange ett leveransdatum för sin order.

Leveransdatumväljare

På den här sidan

Inkludera jQuery i din theme.liquid

För att den här anpassningen ska fungera kräver vissa teman att en skripttagg för jQuery läggs till i layoutfilen theme.liquid. Om du använder ett gratistema från Shopify kan du behöva följa nästa steg:

  1. Klicka på theme.liquid i katalogen Layout.

  2. Leta rätt på den avslutande taggen </head> i koden. Klistra in följande kod på en ny rad ovanför den avslutande taggen </head>:

{{ '//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 leveransdatumväljare:

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

  4. Skapa fragmentet:

  5. Namnge ditt fragment till delivery-date.

  6. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.

  7. Klistra in följande kod i ditt nya fragment delivery-date.liquid:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Klicka på Spara.
Mobil

  1. Från Shopify-appen trycker du på ikonen Menu.

  2. Tryck på Webbshop i avsnittet Säljkanaler.

  3. Tryck på Hantera teman.

  4. Hitta det tema du vill redigera, tryck på knappen ... för att öppna åtgärdsmenyn och tryck sedan på Redigera kod.

  5. Tryck på Lägg till ett nytt fragment i katalogen Snippets:

  6. Skapa fragmentet:

  7. Namnge ditt fragment till delivery-date.

  8. Tryck på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.

  9. Klistra in följande kod i ditt nya fragment delivery-date.liquid:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Tryck 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 katalogen Sections.

  2. Leta rätt på den avslutande </form>-taggen i koden. Klistra in följande kod på en ny rad ovanför den avslutande </form>-taggen:

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

Leveransdatumväljare

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