Aggiunta di un selettore per la data di consegna al carrello

Nota

Se utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Per maggiori informazioni, consulta la pagina Assistenza per i temi.

Nota

Questa personalizzazione è per i temi dell'Online Store 2.0 e non si applica ai temi Shopify vintage. Scopri la versione della struttura del tuo tema.

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

Attenzione

Questa personalizzazione non funziona con gli stili che prevedono l'apertura del carrello in una finestra o in modalità pop up, ma solo con una pagina del carrello (all'URL your-store.com/cart). Se usi una finestra del carrello o un pop up, dovrai modificare lo stile del carrello in Pagina nell'editor del tema. Aggiungi un prodotto al carrello nell'anteprima del tema, quindi clicca sulla scheda Pagina del carrello dell'editor del tema per visualizzare le impostazioni del carrello.

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 un tema gratuito per l'Online Store 2.0 di Shopify, potresti dover seguire il passaggio successivo:

1. Nella directory Layout, clicca su theme.liquid.

2. 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 }}

1. Clicca su Salva.

Creazione di un frammento della data di consegna

Per creare un frammento per il selettore della data di consegna:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Crea il frammento:

3. 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 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. Clicca su Salva.

Inclusione del frammento nella pagina del carrello

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

1. Nella directory Sezioni, clicca su main-cart-items.liquid.

2. 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' %}

1. 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 di data utilizzato in questa personalizzazione è un widget della libreria UI di jQuery.