Aggiunta di un selettore per la data di consegna al carrello

Sulla pagina del carrello puoi includere un calendario per consentire ai clienti di specificare la data di consegna dell'ordine.

Su questa pagina

Inclusione di jQuery in theme.liquid

Per far funzionare questa personalizzazione, alcuni temi richiedono l'aggiunta di un tag script per jQuery al file di layout theme.liquid. Se utilizzi Boundless, Debut versione 17.2.0 o più recente, Express, Narrative o Venture, potresti dover seguire il passaggio successivo:

Nella directory Layout, clicca su theme.liquid.
Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

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

Clicca su Salva.

Creazione di un frammento della data di consegna

Desktop

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Crea il frammento:
1. Assegna al frammento il nome delivery-date.
2. Clicca su Crea frammento. Il nuovo file del frammento verrà aperto nell'editor di codice.
Nel nuovo frammento delivery-date.liquid incolla il codice seguente:

{{ '//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>

Clicca su Salva.

iPhone

Nell'app di Shopify tocca il pulsante ….
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Crea il frammento:
1. Assegna al frammento il nome delivery-date.
2. Clicca su Crea frammento. Il nuovo file del frammento verrà aperto nell'editor di codice.
Nel nuovo frammento delivery-date.liquid incolla il codice seguente:

{{ '//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>

Clicca su Salva.

Android

Nell'app di Shopify tocca il pulsante ….
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Crea il frammento:
1. Assegna al frammento il nome delivery-date.
2. Clicca su Crea frammento. Il nuovo file del frammento verrà aperto nell'editor di codice.
Nel nuovo frammento delivery-date.liquid incolla il codice seguente:

{{ '//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>

Clicca su Salva.

Inclusione del frammento nella pagina del carrello

Per includere il frammento della data di consegna nella pagina del carrello:

Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene questo file, clicca su cart.liquid nella directory Modelli.
Trova il tag di chiusura </form> nel codice. Su una nuova riga sopra il tag di chiusura </form> incolla il codice seguente:

{% render 'delivery-date' %}

Clicca su Salva.

Ora hai un campo di inserimento per la data di consegna sulla pagina del carrello. Quando clicchi all'interno del campo di testo, verrà visualizzato un calendario:

Il selettore della data utilizzato in questa personalizzazione è un widget della libreria UI di jQuery. Questo articolo del blog spiega come disabilitare date specifiche nel calendario del selettore della data.