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

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Disse temaer har ikke de funktioner, der er inkluderet i Shopifys Webshop 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer ud over sikkerhedsrettelser.

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

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

Advarsel

Denne tilpasning fungerer ikke for indkøbskurvskuffer eller pop op-indkøbskurve, og den vil kun fungere for en side med indkøbskurv (på webadressen your-store.com/cart). Hvis du bruger en indkøbskurvskuffe eller en pop op-indkøbskurv, skal du ændre indkøbskurvstilen til Side i temaeditoren. Læg et produkt i indkøbskurven i forhåndsvisningen af temaet, og klik derefter på fanen Side med indkøbskurv i temaeditoren for at se dine indstillinger for indkøbskurven.

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:

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

1. Klik på Gem.

Opret et kodestykke med leveringsdato

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
3. Klik på Opret et nyt kodestykke i mappen Kodestykker:

4. Opret kodestykket:

   1. Navngiv dit kodestykke delivery-date.
   2. Klik på Opret kodestykke. Den nye kodestykkefil åbnes i kodeeditoren.

5. I dit nye delivery-date.liquid-kodestykke skal du indsætte følgende kode:

{{ '//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. Klik på Gem.

iPhone

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
5. Klik på Opret et nyt kodestykke i mappen Kodestykker:

6. Opret kodestykket:

   1. Navngiv dit kodestykke delivery-date.
   2. Klik på Opret kodestykke. Den nye kodestykkefil åbnes i kodeeditoren.

7. I dit nye delivery-date.liquid-kodestykke skal du indsætte følgende kode:

{{ '//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. Klik på Gem.

Android

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Administrer temaer.
4. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
5. Klik på Opret et nyt kodestykke i mappen Kodestykker:

6. Opret kodestykket:

   1. Navngiv dit kodestykke delivery-date.
   2. Klik på Opret kodestykke. Den nye kodestykkefil åbnes i kodeeditoren.

7. I dit nye delivery-date.liquid-kodestykke skal du indsætte følgende kode:

{{ '//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. 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 det afsluttende </form>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </form>-tag:

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