Pagalba
Prisijungti

Pridėkite pristatymo datos rinkiklį į savo krepšelį

Galite įtraukti kalendorių į savo krepšelio puslapį, kad klientai galėtų nurodyti savo užsakymo pristatymo datą.

Pristatymo datos rinkiklis

Šiame puslapyje

Įtraukite „jQuery“ į savo „theme.liquid“

Kad šis pritaikymas veiktų, kai kurioms temoms reikia, kad į „theme.liquid“ išdėstymo failą būtų pridėta „jQuery“ skripto žyma. Jei naudojate nemokamą „Shopify“ temą, gali tekti atlikti kitą veiksmą:

  1. Kataloge Išdėstymas spustelėkite theme.liquid.

  2. Raskite kode uždarymo žymą </head>. Naujoje eilutėje virš uždarymo žymos </head> įklijuokite šį kodą:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Spustelėkite Išsaugoti.

Sukurkite pristatymo datos fragmentą

Norėdami sukurti pristatymo datos rinkiklio fragmentą:

Stalinis kompiuteris

  1. Savo Shopify administravimo priemonėje eikite į Internetinė parduotuvė > Temos.

  2. Suraskite norimą redaguoti temą, spustelėkite mygtuką …, kad atidarytumėte veiksmų meniu, tada spustelėkite Redaguoti kodą.

  3. Kataloge Fragmentai spustelėkite Pridėti naują fragmentą:

  4. Sukurkite fragmentą:

  5. Pavadinkite savo fragmentą delivery-date.

  6. Spustelėkite Sukurti fragmentą. Naujas fragmento failas bus atidarytas kodo rengyklėje.

  7. Į savo naują delivery-date.liquid fragmentą įklijuokite šį kodą:

{{ '//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. Spustelėkite Išsaugoti.
Mobilusis įrenginys

  1. „Shopify app“ bakstelėkite Meniu piktogramą.

  2. Skiltyje Pardavimo kanalai bakstelėkite Internetinė parduotuvė.

  3. Bakstelėkite Tvarkyti temas.

  4. Suraskite norimą redaguoti temą, bakstelėkite mygtuką …, kad atidarytumėte veiksmų meniu, tada bakstelėkite Redaguoti kodą.

  5. Kataloge Fragmentai bakstelėkite Pridėti naują fragmentą:

  6. Sukurkite fragmentą:

  7. Pavadinkite savo fragmentą delivery-date.

  8. Bakstelėkite Sukurti fragmentą. Naujas fragmento failas bus atidarytas kodo rengyklėje.

  9. Į savo naują delivery-date.liquid fragmentą įklijuokite šį kodą:

{{ '//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. Bakstelėkite Išsaugoti.

Įtraukite fragmentą į savo krepšelio puslapį

Norėdami įtraukti pristatymo datos fragmentą į savo krepšelio puslapį:

  1. Kataloge Skiltys spustelėkite main-cart-items.liquid.

  2. Raskite kode uždarymo žymą </form>. Naujoje eilutėje virš uždarymo žymos </form> įklijuokite šį kodą:

{% render 'delivery-date' %}
  1. Spustelėkite Išsaugoti.

Dabar savo krepšelio puslapyje turite pristatymo datos įvesties lauką. Spustelėjus teksto laukelį, atsiras kalendorius:

Pristatymo datos rinkiklis

Šiame pritaikyme naudojamas datos rinkiklis yra valdiklis iš „jQuery UI“ bibliotekos.