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:

    liquid {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

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

    1. Döp ditt fragment delivery-date.
    2. Klicka på Skapa fragment. Den nya fragmentfilen öppnas i kodredigeraren.
  3. I ditt nya delivery-date.liquid-fragment klistrar du in följande kod:

```html {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

<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](/manual/productivity-tools/keyboard-shortcuts#find) sluttaggen `</form>` i koden. På en ny rad ovanför sluttaggen `</form>` klistrar du in följande kod:

```liquid

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