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

ในหน้านี้
เพิ่ม jQuery ใน theme.liquid ของคุณ
เพื่อให้การปรับแต่งนี้ใช้งานได้ บางธีมจำเป็นต้องเพิ่มแท็กสคริปต์สำหรับ jQuery ลงในไฟล์เลย์เอาต์ theme.liquid หากคุณใช้ธีมฟรีของ Shopify คุณอาจต้องทำตามขั้นตอนถัดไป
ในไดเรกทอรี Layout ให้คลิก
theme.liquidในโค้ด ให้ค้นหาแท็กปิด
</head>จากนั้นในบรรทัดใหม่ที่อยู่เหนือแท็กปิดดังกล่าว ให้วางโค้ดต่อไปนี้
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}- คลิกบันทึก
สร้างส่วนย่อยสำหรับวันที่จัดส่ง
วิธีสร้างส่วนย่อยสำหรับตัวเลือกวันที่จัดส่ง
เดสก์ท็อป
จากส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข คลิกปุ่ม … เพื่อเปิดเมนูการดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรี Snippets ให้คลิกเพิ่มส่วนย่อยใหม่
สร้างส่วนย่อย
ตั้งชื่อส่วนย่อยของคุณว่า
delivery-dateคลิกสร้างส่วนย่อย ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด
ในส่วนย่อย
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>
- คลิกบันทึก
มือถือ
จาก แอป Shopify ให้แตะไอคอน
ในส่วนช่องทางการขาย ให้แตะร้านค้าออนไลน์
แตะจัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แตะที่ปุ่ม … เพื่อเปิดเมนูการดำเนินการ จากนั้นแตะแก้ไขโค้ด
ในไดเรกทอรี Snippets ให้แตะเพิ่มส่วนย่อยใหม่
สร้างส่วนย่อย
ตั้งชื่อส่วนย่อยของคุณว่า
delivery-dateแตะสร้างส่วนย่อย ไฟล์ส่วนย่อยใหม่จะเปิดขึ้นในตัวแก้ไขโค้ด
ในส่วนย่อย
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>
- แตะบันทึก
เพิ่มส่วนย่อยในหน้าตะกร้าสินค้าของคุณ
วิธีเพิ่มส่วนย่อยวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ
ในไดเรกทอรี Sections ให้คลิก
main-cart-items.liquidในโค้ด ให้ค้นหาแท็กปิด
</form>จากนั้นในบรรทัดใหม่ที่อยู่เหนือแท็กปิดดังกล่าว ให้วางโค้ดต่อไปนี้
{% render 'delivery-date' %}- คลิกบันทึก
ตอนนี้คุณจะมีช่องป้อนข้อมูลวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณแล้ว เมื่อคุณคลิกภายในช่องข้อความ ปฏิทินจะปรากฏขึ้น

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