Føj en datovælger for levering til indkøbskurven

Du kan inkludere en kalender på siden med indkøbskurven, så dine kunder kan angive en leveringsdato for deres ordrer.

Datovælger for levering

Inkluder jQuery i theme.liquid

Nogle temaer kræver, at der føjes et scripttag for jQuery til theme.liquid-layoutfilen, hvis denne tilpasning skal virke. Hvis du bruger Boundless, Debut version 17.2.0 eller nyere, Express, Narrative eller Venture, skal du muligvis følge det næste trin:

  1. I mappen Layout skal du klikke på theme.liquid.

  2. Find det afsluttende </head>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>-tag:

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

  3. Klik på Gem.

Opret et kodestykke med leveringsdato

Sådan opretter du et kodestykke til din datovælger for levering:

  1. Klik på Opret et nyt kodestykke i mappen Kodestykker:

  2. Opret kodestykket:

    1. Navngiv dit kodestykke delivery-date.
    2. Klik på Opret kodestykke. Den nye kodestykkefil åbnes i kodeeditoren.
  3. I dit nye delivery-date.liquid-kodestykke skal du indsætte følgende kode:

```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. Klik på **Gem**.

## Inkluder kodestykket på siden med indkøbskurv

Sådan inkluderer du kodestykket for leveringsdato på siden med indkøbskurv:

1. Klik på `cart-template.liquid` i mappen **Afsnit**. Hvis dit tema ikke indeholder denne fil, skal du klikke på `cart.liquid` i mappen **Skabeloner**.

2. [Find](/manual/productivity-tools/keyboard-shortcuts#find) det afsluttende `</form>`-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende `</form>`-tag:

```liquid

{% render 'delivery-date' %}
  1. Klik på Gem.

Du har nu inputfeltet for leveringsdato på din side med indkøbskurven. Der vises en kalender, når du klikker i tekstfeltet:

Datovælger for levering

Datovælgeren, der bruges i denne tilpasning, er en widget fra jQuery UI-biblioteket. Dette blogopslag forklarer, hvordan du kan deaktivere specifikke datoer i kalenderen for datovælgeren.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis