Guida
Accedi

Aggiungi un selettore della data di consegna al carrello

Puoi includere un calendario sulla pagina del carrello che consenta ai clienti di specificare una data di consegna per l'ordine.

Selettore della data di consegna

In questa pagina

Includere jQuery in theme.liquid

Affinché questa personalizzazione funzioni, alcuni temi richiedono che un tag script per jQuery venga aggiunto al file di layout theme.liquid. Se utilizzi un tema gratuito 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 seguente codice:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Clicca su Salva.

Crea un frammento per la data di consegna

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

Desktop

  1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.

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

  3. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento:

  4. Crea il frammento:

  5. Assegna al frammento il nome delivery-date.

  6. Clicca su Crea frammento. Il nuovo file del frammento si aprirà nell'editor di codice.

  7. Nel nuovo frammento delivery-date.liquid, incolla il seguente codice:

{{ '//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. Clicca su Salva.
Mobile

  1. Dall’app Shopify, tocca l’icona Menu.

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

  3. Tocca Gestisci temi.

  4. Trova il tema che desideri modificare, tocca il pulsante … per aprire il menu delle azioni, quindi tocca Modifica codice.

  5. Nella directory Frammenti, tocca Aggiungi un nuovo frammento:

  6. Crea il frammento:

  7. Assegna al frammento il nome delivery-date.

  8. Tocca Crea frammento. Il nuovo file del frammento si aprirà nell'editor di codice.

  9. Nel nuovo frammento delivery-date.liquid, incolla il seguente codice:

{{ '//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. Tocca Salva.

Includi il 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 seguente codice:

{% render 'delivery-date' %}
  1. Clicca su Salva.

Ora hai un campo di immissione della data di consegna sulla pagina del carrello. Quando clicchi all'interno del campo di testo, apparirà un calendario:

Selettore della data di consegna

Il selettore di data utilizzato in questa personalizzazione è un widget della libreria jQuery UI.