Ajutor
Conectați-vă

Adăugarea unui selector de dată de livrare în coșul dvs.

Puteți include un calendar pe pagina coșului, care le permite clienților să specifice o dată de livrare pentru comanda lor.

Selector dată de livrare

Pe această pagină

Includerea jQuery în fișierul theme.liquid

Pentru ca această personalizare să funcționeze, unele teme necesită adăugarea unei etichete script pentru jQuery la fișierul de aspect theme.liquid. Dacă utilizați o temă Shopify gratuită, este posibil să fie necesar să urmați pasul următor:

  1. În directorul Layout, faceți clic pe theme.liquid.

  2. Găsiți eticheta de închidere </head> în cod. Pe o linie nouă, deasupra etichetei de închidere </head>, lipiți următorul cod:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Faceți clic pe Salvare.

Crearea unui fragment pentru data de livrare

Pentru a crea un fragment pentru selectorul de dată de livrare:

Desktop

  1. Din panoul de administrare Shopify, accesați Magazin online > Teme.

  2. Găsiți tema pe care doriți să o editați, faceți clic pe butonul … pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.

  3. În directorul Snippets, faceți clic pe Adăugare fragment nou:

  4. Creați fragmentul:

  5. Denumiți fragmentul dvs. delivery-date.

  6. Faceți clic pe Creare fragment. Noul fișier de fragment se va deschide în editorul de cod.

  7. În noul dvs. fragment delivery-date.liquid, lipiți următorul cod:

{{ '//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. Faceți clic pe Salvare.
Mobil

  1. Din Shopify app, atinge pictograma Menu.

  2. În secțiunea Canale de vânzări, atingeți Magazin online.

  3. Atingeți Gestionare teme.

  4. Găsiți tema pe care doriți să o editați, atingeți butonul … pentru a deschide meniul de acțiuni, apoi atingeți Editare cod.

  5. În directorul Snippets, atingeți Adăugare fragment nou:

  6. Creați fragmentul:

  7. Denumiți fragmentul dvs. delivery-date.

  8. Atingeți Creare fragment. Noul fișier de fragment se va deschide în editorul de cod.

  9. În noul dvs. fragment delivery-date.liquid, lipiți următorul cod:

{{ '//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. Atingeți Salvare.

Includerea fragmentului în pagina coșului

Pentru a include fragmentul pentru data de livrare în pagina coșului:

  1. În directorul Sections, faceți clic pe main-cart-items.liquid.

  2. Găsiți eticheta de închidere </form> în cod. Pe o linie nouă, deasupra etichetei de închidere </form>, lipiți următorul cod:

{% render 'delivery-date' %}
  1. Faceți clic pe Salvare.

Acum aveți un câmp de introducere a datei de livrare pe pagina coșului. Când faceți clic în câmpul de text, va apărea un calendar:

Selector dată de livrare

Selectorul de dată utilizat în această personalizare este un widget din biblioteca jQuery UI.