Menambahkan pemilih tanggal pengiriman ke keranjang Anda

Anda dapat menyertakan kalender di halaman keranjang yang memungkinkan pelanggan untuk menentukan tanggal pengiriman untuk pesanan mereka.

Di halaman ini

Sertakan jQuery di theme.liquid

Agar kustomisasi ini berfungsi, beberapa tema mengharuskan tag skrip untuk jQuery ditambahkan ke file tata letak theme.liquid. Jika Anda menggunakan tema Shopify gratis, Anda mungkin perlu mengikuti langkah berikutnya:

Di direktori Tata Letak, klik theme.liquid.
Cari tag penutup </head> dalam kode. Di baris baru di atas tag penutup </head>, tempelkan kode berikut:

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

Klik Simpan.

Buat cuplikan tanggal pengiriman

Untuk membuat cuplikan untuk pemilih tanggal pengiriman Anda:

Desktop

Dari admin Shopify Anda, buka Toko Online > Tema.
Temukan tema yang ingin Anda edit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.
Di direktori Cuplikan, klik Tambahkan cuplikan baru:
Buat cuplikan:
Beri nama cuplikan Anda delivery-date.
Klik Buat cuplikan. File cuplikan baru akan terbuka di editor kode.
Di cuplikan delivery-date.liquid baru Anda, tempelkan kode 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>

Klik Simpan.

Seluler

Dari aplikasi Shopify, ketuk ikon .
Di bagian Channel penjualan, ketuk Toko Online.
Ketuk Kelola tema.
Temukan tema yang ingin Anda edit, ketuk tombol ... untuk membuka menu tindakan, lalu ketuk Edit kode.
Di direktori Cuplikan, ketuk Tambahkan cuplikan baru:
Buat cuplikan:
Beri nama cuplikan Anda delivery-date.
Ketuk Buat cuplikan. File cuplikan baru akan terbuka di editor kode.
Di cuplikan delivery-date.liquid baru Anda, tempelkan kode 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>

Ketuk Simpan.

Sertakan cuplikan di halaman keranjang Anda

Untuk menyertakan cuplikan tanggal pengiriman di halaman keranjang Anda:

Di direktori Bagian, klik main-cart-items.liquid.
Cari tag penutup </form> dalam kode. Di baris baru di atas tag penutup </form>, tempelkan kode berikut:

{% render 'delivery-date' %}

Klik Simpan.

Sekarang Anda memiliki kolom input tanggal pengiriman di halaman keranjang. Saat Anda mengeklik di dalam kolom teks, kalender akan muncul:

Pemilih tanggal yang digunakan dalam kustomisasi ini adalah widget dari pustaka jQuery UI.