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

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 layoutfilen theme.liquid. Om du använder Boundless, Debut version 17.2.0 eller nyare, 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

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

  1. Klicka på Lägg till ett nytt fragment i katalogen Fragment:

  2. Skapa fragmentet:

  3. 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>
  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 registret 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.

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

Prova gratis