เพิ่มตัวเลือกวันที่จัดส่งไปยังตะกร้าสินค้าของคุณ

คุณสามารถเพิ่มปฏิทินในหน้าตะกร้าสินค้าของคุณเพื่อให้ลูกค้าสามารถระบุวันที่จัดส่งสำหรับคำสั่งซื้อของตนได้

ตัวเลือกวันที่จัดส่ง

เพิ่ม jQuery ใน theme.liquid ของคุณ

เพื่อให้การปรับแต่งนี้ใช้งานได้ บางธีมจำเป็นต้องเพิ่มแท็กสคริปต์สำหรับ jQuery ลงในไฟล์เลย์เอาต์ theme.liquid หากคุณใช้ธีมฟรีของ Shopify คุณอาจต้องทำตามขั้นตอนถัดไป

  1. ในไดเรกทอรี Layout ให้คลิก theme.liquid

  2. ในโค้ด ให้ค้นหาแท็กปิด </head> จากนั้นในบรรทัดใหม่ที่อยู่เหนือแท็กปิดดังกล่าว ให้วางโค้ดต่อไปนี้

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. คลิกบันทึก

สร้างส่วนย่อยสำหรับวันที่จัดส่ง

วิธีสร้างส่วนย่อยสำหรับตัวเลือกวันที่จัดส่ง

เดสก์ท็อป
  1. จากส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

  2. ค้นหาธีมที่คุณต้องการแก้ไข คลิกปุ่ม เพื่อเปิดเมนูการดำเนินการ จากนั้นคลิกแก้ไขโค้ด

  3. ในไดเรกทอรี Snippets ให้คลิกเพิ่มส่วนย่อยใหม่

  4. สร้างส่วนย่อย

  5. ตั้งชื่อส่วนย่อยของคุณว่า delivery-date

  6. คลิกสร้างส่วนย่อย ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด

  7. ในส่วนย่อย delivery-date.liquid ใหม่ของคุณ ให้วางโค้ดต่อไปนี้

{{ '//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. คลิกบันทึก
มือถือ
  1. จาก แอป Shopify ให้แตะไอคอน Menu

  2. ในส่วนช่องทางการขาย ให้แตะร้านค้าออนไลน์

  3. แตะจัดการธีม

  4. ค้นหาธีมที่คุณต้องการแก้ไข แตะที่ปุ่ม เพื่อเปิดเมนูการดำเนินการ จากนั้นแตะแก้ไขโค้ด

  5. ในไดเรกทอรี Snippets ให้แตะเพิ่มส่วนย่อยใหม่

  6. สร้างส่วนย่อย

  7. ตั้งชื่อส่วนย่อยของคุณว่า delivery-date

  8. แตะสร้างส่วนย่อย ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด

  9. ในส่วนย่อย delivery-date.liquid ใหม่ของคุณ ให้วางโค้ดต่อไปนี้

{{ '//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. แตะบันทึก

เพิ่มส่วนย่อยในหน้าตะกร้าสินค้าของคุณ

วิธีเพิ่มส่วนย่อยวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ

  1. ในไดเรกทอรี Sections ให้คลิก main-cart-items.liquid

  2. ในโค้ด ให้ค้นหาแท็กปิด </form> จากนั้นในบรรทัดใหม่ที่อยู่เหนือแท็กปิดดังกล่าว ให้วางโค้ดต่อไปนี้

{% render 'delivery-date' %}
  1. คลิกบันทึก

ตอนนี้คุณจะมีช่องป้อนข้อมูลวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณแล้ว เมื่อคุณคลิกภายในช่องข้อความ ปฏิทินจะปรากฏขึ้น

ตัวเลือกวันที่จัดส่ง

ตัวเลือกวันที่ที่ใช้ในการปรับแต่งนี้เป็นวิดเจ็ตจากไลบรารี jQuery UI