Legg til en leveringsdatovelger i handlekurven

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

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 eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

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 Boundless, Debut versjon 17.2.0 eller nyere, Express, Narrative eller Venture 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

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 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. 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 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. 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 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. Klikk på Lagre.

Inkluder kodebiten på handlekurvsiden

Slik inkluderer du kodebiten for leveringsdato på handlekurvsiden:

1. I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har denne filen, klikker du på cart.liquid i Maler-katalogen.

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 en kodebit fra jQuery UI-biblioteket. Dette blogginnlegget forklarer hvordan du deaktiverer bestemte datoer i datovelgerkalenderen.