Hjælp
Log ind

Føj en datovælger for levering til din indkøbskurv

Du kan inkludere en kalender på din side med indkøbskurv, der giver kunderne mulighed for at angive en leveringsdato for deres ordre.

Datovælger for levering

På denne side

Inkluder jQuery i din theme.liquid

For at denne tilpasning kan fungere, kræver nogle temaer, at der føjes et scripttag til jQuery til layoutfilen theme.liquid. Hvis du bruger et gratis Shopify-tema, skal du muligvis følge næste trin:

  1. Klik på theme.liquid i mappen Layout.

  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 til leveringsdato

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

Computer

  1. Gå til Webshop > Temaer i din Shopify-administrator.

  2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

  3. Klik på Tilføj et nyt kodestykke i mappen Snippets:

  4. Opret kodestykket:

  5. Giv dit kodestykke navnet delivery-date.

  6. Klik på Opret kodestykke. Den nye fil med kodestykket åbnes i kodeeditoren.

  7. Indsæt følgende kode i dit nye kodestykke 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. Klik på Gem.
Mobil

  1. Gå til Shopify app, og tryk på ikonet Menu.

  2. Tryk på Webshop i afsnittet Salgskanaler.

  3. Tryk på Administrer temaer.

  4. Find det tema, du vil redigere, tryk på knappen ... for at åbne handlingsmenuen, og tryk derefter på Rediger kode.

  5. Tryk på Tilføj et nyt kodestykke i mappen Snippets:

  6. Opret kodestykket:

  7. Giv dit kodestykke navnet delivery-date.

  8. Tryk på Opret kodestykke. Den nye fil med kodestykket åbnes i kodeeditoren.

  9. Indsæt følgende kode i dit nye kodestykke 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. Tryk på Gem.

Inkluder kodestykket på din side med indkøbskurv

Sådan inkluderer du kodestykket til leveringsdato på din side med indkøbskurv:

  1. Klik på main-cart-items.liquid i mappen Afsnit.

  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 et inputfelt til leveringsdato på din side med indkøbskurv. 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.