Legg til en leveringsdatovelger i handlekurven

Merk

Hvis du bruker et gratis tema fra Shopify, kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer–.

Merk

Denne tilpasningen er for Online Store 2.0-temaer, og gjelder ikke for eldre Shopify-temaer. Finn ut temaets arkitekturversjon.

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

Advarsel

Denne tilpasningen vil ikke fungere for handlekurvstilene skuff eller popup, og vil bare fungere for en handlekurvside (på URL-adressen your-store.com/cart). Hvis du bruker en handlekurvskuff eller popup, må du endre handlekurvstilen til Side i temaredigeringsprogrammet. Legg til et produkt i handlekurven i temaforhåndsvisningen, og klikk så på Handlekurvside-fanen i temaredigeringsprogrammet for å vise handlekurvinnstillingene.

Inkluder jQuery i theme.liquid

For at denne tilpasningen skal fungere krever noen temaer at en skripttagg for jQuery legges til i oppsettfilen theme.liquid. Hvis du bruker et gratis Shopify Online Store 2.0-tema kan det hende du må utføre følgende trinn:

1. I Oppsett-katalogen klikker du på theme.liquid.

2. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like 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

For å opprette en kodebit for leveringsdatovelgeren:

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. I Kodebiter-katalogen klikker du på Legg til en ny kodebit.

4. Opprett kodebiten:

   1. Gi kodebiten navnet delivery-date.
   2. Klikk på Opprett kodebit. Den nye kodebitfilen åpnes i koderedigeringsprogrammet.

5. I den nye delivery-date.liquid-kodebiten limer du inn 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 weekend.</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. Klikk på Lagre.

iPhone

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Kodebiter-katalogen klikker du på Legg til en ny kodebit.

6. Opprett kodebiten:

   1. Gi kodebiten navnet delivery-date.
   2. Klikk på Opprett kodebit. Den nye kodebitfilen åpnes i koderedigeringsprogrammet.

7. I den nye delivery-date.liquid-kodebiten limer du inn 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 weekend.</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. Klikk på Lagre.

Android

1. Trykk på …-knappen fra Shopify-appen.
2. I Salgskanaler-seksjonen trykker du på Nettbutikk.
3. Trykk på Administrer temaer.
4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
5. I Kodebiter-katalogen klikker du på Legg til en ny kodebit.

6. Opprett kodebiten:

   1. Gi kodebiten navnet delivery-date.
   2. Klikk på Opprett kodebit. Den nye kodebitfilen åpnes i koderedigeringsprogrammet.

7. I den nye delivery-date.liquid-kodebiten limer du inn 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 weekend.</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. Klikk på Lagre.

Inkluder kodebiten på handlekurvsiden

Slik inkluderer du kodebiten for leveringsdato på handlekurvsiden:

1. I Deler-katalogen klikker du på main-cart-items.liquid.

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

{% render 'delivery-date' %}

1. Klikk på Lagre.

Du har nå et tekstfelt for leveringsdato på handlekurvsiden. Når du klikker i tekstfeltet, vises det en kalender:

Datovelgeren som brukes i denne tilpasningen er et kontrollprogram fra jQuery UI-biblioteket.