Bantuan
Log masuk

Tambah pemilih tarikh penghantaran pada troli anda

Anda boleh menyertakan kalendar pada halaman troli anda yang membolehkan pelanggan menentukan tarikh penghantaran untuk pesanan mereka.

Pemilih tarikh penghantaran

Pada halaman ini

Sertakan jQuery dalam theme.liquid anda

Bagi memastikan penyesuaian ini berfungsi, sesetengah tema menghendaki tag skrip untuk jQuery ditambahkan pada fail susun atur theme.liquid. Jika anda menggunakan tema Shopify percuma, anda mungkin perlu mengikuti langkah seterusnya:

  1. Dalam direktori Susun atur, klik theme.liquid.

  2. Cari tag penutup </head> dalam kod. Pada baris baharu di atas tag penutup </head>, tampalkan kod yang berikut:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Klik Simpan.

Cipta cebisan kod tarikh penghantaran

Untuk mencipta cebisan kod bagi pemilih tarikh penghantaran anda:

Desktop

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang mahu anda sunting, klik butang … untuk membuka menu tindakan, kemudian klik Sunting kod.

  3. Dalam direktori Cebisan kod, klik Tambah cebisan kod baharu:

  4. Cipta cebisan kod:

  5. Namakan cebisan kod anda delivery-date.

  6. Klik Cipta cebisan kod. Fail cebisan kod baharu akan dibuka dalam penyunting kod.

  7. Dalam cebisan kod delivery-date.liquid baharu anda, tampalkan kod yang berikut:

{{ '//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. Klik Simpan.
Mudah alih

  1. Daripada aplikasi Shopify, ketik ikon Menu.

  2. Dalam bahagian Saluran jualan, ketik Kedai Dalam Talian.

  3. Ketik Urus tema.

  4. Cari tema yang mahu anda sunting, ketik butang … untuk membuka menu tindakan, kemudian ketik Sunting kod.

  5. Dalam direktori Cebisan kod, ketik Tambah cebisan kod baharu:

  6. Cipta cebisan kod:

  7. Namakan cebisan kod anda delivery-date.

  8. Ketik Cipta cebisan kod. Fail cebisan kod baharu akan dibuka dalam penyunting kod.

  9. Dalam cebisan kod delivery-date.liquid baharu anda, tampalkan kod yang berikut:

{{ '//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. Ketik Simpan.

Sertakan cebisan kod dalam halaman troli anda

Untuk menyertakan cebisan kod tarikh penghantaran dalam halaman troli anda:

  1. Dalam direktori Bahagian, klik main-cart-items.liquid.

  2. Cari tag penutup </form> dalam kod. Pada baris baharu di atas tag penutup </form>, tampalkan kod yang berikut:

{% render 'delivery-date' %}
  1. Klik Simpan.

Kini anda mempunyai medan input tarikh penghantaran pada halaman troli anda. Apabila anda mengklik dalam medan teks, kalendar akan dipaparkan:

Pemilih tarikh penghantaran

Pemilih tarikh yang digunakan dalam penyesuaian ini ialah widget daripada pustaka UI jQuery.