Súgó
Bejelentkezés

Kézbesítési dátumválasztó hozzáadása a kosárhoz

A kosároldalon elhelyezhet egy naptárt, amely lehetővé teszi a vásárlók számára, hogy megadják a rendelésük kézbesítési dátumát.

Kézbesítési dátumválasztó

Ezen az oldalon

A jQuery hozzáadása a theme.liquid fájlhoz

Ahhoz, hogy ez a testreszabás működjön, egyes témák megkövetelik, hogy a jQuery script tagje hozzá legyen adva a theme.liquid elrendezési fájlhoz. Ha a Shopify valamelyik ingyenes témáját használja, akkor lehetséges, hogy követnie kell a következő lépést:

  1. A Layout könyvtárban kattintson a theme.liquid fájlra.

  2. Keresse meg a </head> zárótaget a kódban. A </head> zárótag feletti új sorba illessze be a következő kódot:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Kattintson a Mentés gombra.

Kézbesítési dátum kódrészlet létrehozása

A kézbesítési dátumválasztó kódrészletének létrehozásához:

Asztali gép

  1. A Shopify adminisztrációs felületén lépjen az Online áruház > Témák menüpontra.

  2. Keresse meg a szerkeszteni kívánt témát, kattintson a … gombra a műveletek menü megnyitásához, majd kattintson a Kód szerkesztése gombra.

  3. A Snippets könyvtárban kattintson az Új kódrészlet hozzáadása lehetőségre:

  4. Hozza létre a kódrészletet:

  5. Nevezze el a kódrészletet delivery-date néven.

  6. Kattintson a Kódrészlet létrehozása gombra. Az új kódrészletfájl megnyílik a kódszerkesztőben.

  7. Az új delivery-date.liquid kódrészletbe illessze be a következő kódot:

{{ '//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. Kattintson a Mentés gombra.
Mobil

  1. A Shopify appban koppintson a Menu ikonra.

  2. Az Értékesítési csatornák szakaszban koppintson az Online áruház lehetőségre.

  3. Koppintson a Témák kezelése lehetőségre.

  4. Keresse meg a szerkeszteni kívánt témát, koppintson a … gombra a műveletek menü megnyitásához, majd koppintson a Kód szerkesztése lehetőségre.

  5. A Snippets könyvtárban koppintson az Új kódrészlet hozzáadása lehetőségre:

  6. Hozza létre a kódrészletet:

  7. Nevezze el a kódrészletet delivery-date néven.

  8. Koppintson a Kódrészlet létrehozása gombra. Az új kódrészletfájl megnyílik a kódszerkesztőben.

  9. Az új delivery-date.liquid kódrészletbe illessze be a következő kódot:

{{ '//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. Koppintson a Mentés gombra.

A kódrészlet hozzáadása a kosároldalhoz

A kézbesítési dátum kódrészletének a kosároldalhoz való hozzáadásához:

  1. A Sections könyvtárban kattintson a main-cart-items.liquid fájlra.

  2. Keresse meg a </form> zárótaget a kódban. A </form> zárótag feletti új sorba illessze be a következő kódot:

{% render 'delivery-date' %}
  1. Kattintson a Mentés gombra.

Mostantól van egy kézbesítési dátum beviteli mező a kosároldalán. Ha a szövegmezőbe kattint, megjelenik egy naptár:

Kézbesítési dátumválasztó

Az ebben a testreszabásban használt dátumválasztó a jQuery UI könyvtár egyik widgetje.