Hjelp
Logg på

Legg til en datovelger for levering i handlekurven

Du kan inkludere en kalender på handlekurvsiden som lar kundene angi en leveringsdato for bestillingen.

Datovelger for levering

På denne siden

Inkluder jQuery i theme.liquid

For at denne tilpasningen skal fungere, krever noen temaer at en skript-tagg for jQuery legges til i layoutfilen theme.liquid. Hvis du bruker et gratis Shopify-tema, må du kanskje følge neste trinn:

  1. Klikk på theme.liquid i Layout-katalogen.

  2. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje over den avsluttende </head>-taggen:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Klikk på Lagre.

Opprett en kodebit for leveringsdato

Slik oppretter du en kodebit for datovelgeren for levering:

Stasjonær datamaskin

  1. Gå til Nettbutikk > Temaer i Shopify-administrator.

  2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.

  3. Klikk på Legg til en ny kodebit i Snippets-katalogen:

  4. Opprett kodebiten:

  5. Gi kodebiten navnet delivery-date.

  6. Klikk på Opprett kodebit. Den nye kodebitfilen åpnes i koderedigeringsprogrammet.

  7. Lim inn følgende kode i den nye delivery-date.liquid-kodebiten:

{{ '//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. Klikk på Lagre.
Mobil

  1. Fra Shopify app, trykk på Menu-ikonet.

  2. Trykk på Nettbutikk i Salgskanaler-seksjonen.

  3. Trykk på Administrer temaer.

  4. Finn temaet du vil redigere, trykk på …-knappen for å åpne handlingsmenyen, og trykk deretter på Rediger kode.

  5. Trykk på Legg til en ny kodebit i Snippets-katalogen:

  6. Opprett kodebiten:

  7. Gi kodebiten navnet delivery-date.

  8. Trykk på Opprett kodebit. Den nye kodebitfilen åpnes i koderedigeringsprogrammet.

  9. Lim inn følgende kode i den nye delivery-date.liquid-kodebiten:

{{ '//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. Trykk på Lagre.

Inkluder kodebiten på handlekurvsiden

Slik inkluderer du kodebiten for leveringsdato på handlekurvsiden:

  1. Klikk på main-cart-items.liquid i Sections-katalogen.

  2. Finn den avsluttende </form>-taggen i koden. Lim inn følgende kode på en ny linje over den avsluttende </form>-taggen:

{% render 'delivery-date' %}
  1. Klikk på Lagre.

Du har nå et leveringsdatofelt på handlekurvsiden. Når du klikker i tekstfeltet, vises en kalender:

Datovelger for levering

Datovelgeren som brukes i denne tilpasningen er en widget fra jQuery UI-biblioteket.