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

คำเตือน: การปรับแต่งจะไม่สามารถใช้ได้กับสไตล์ตะกร้าสินค้าแบบลิ้นชักหรือป๊อปอัพ และจะสามารถใช้ได้กับหน้าตะกร้าสินค้าเท่านั้น (ที่ URL
your-store.com/cart
) หากคุณใช้ตะกร้าสินค้าแบบลิ้นชักหรือป๊อปอัพ คุณจำเป็นจะต้องเปลี่ยนสไตล์ตะกร้าสินค้าเป็นหน้าภายในตัวแก้ไขธีมเพิ่มสินค้าลงในตะกร้าสินค้าภายในตัวอย่างธีม แล้วให้คลิกที่แท็บหน้าตะกร้าสินค้าภายในตัวแก้ไขธีมเพื่อดูการตั้งค่าตะกร้าสินค้าของคุณ
ในหน้านี้
ใส่ jQuery ใน theme.liquid ของคุณ
ธีมบางธีมจำเป็นต้องมีการเพิ่มแท็กสคริปต์สำหรับ jQuery ลงในไฟล์เลย์เอาต์ theme.liquid เพื่อให้การปรับแต่งนี้ใช้งานได้ หากคุณใช้งานธีม Online Store 2.0 แบบฟรีของ Shopify อยู่ คุณอาจต้องดำเนินการตามขั้นตอนถัดไป:
ในไดเรกทอรีเลย์เอาต์ ให้คลิก
theme.liquid
ค้นหาแท็กปิด
</head>
ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด</head>
ให้วางโค้ดต่อไปนี้:
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
- แล้วคลิกที่บันทึก
สร้างส่วนย่อยของวันที่จัดส่ง
วิธีสร้างส่วนย่อยของเครื่องมือเลือกวันที่จัดส่ง:
เดสก์ท็อป
ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”
สร้างส่วนย่อย:
- ตั้งชื่อส่วนย่อย
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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: $.datepicker.noWeekends
});
});
}
}
</script>
- แล้วคลิกที่บันทึก
iPhone
จากแอป Shopify ให้แตะที่ปุ่ม …
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”
สร้างส่วนย่อย:
- ตั้งชื่อส่วนย่อย
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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: $.datepicker.noWeekends
});
});
}
}
</script>
- แล้วคลิกที่บันทึก
Android
จากแอป Shopify ให้แตะที่ปุ่ม …
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”
สร้างส่วนย่อย:
- ตั้งชื่อส่วนย่อย
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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
minDate: +1,
maxDate: '+2M',
beforeShowDay: $.datepicker.noWeekends
});
});
}
}
</script>
- แล้วคลิกที่บันทึก
ใส่ส่วนย่อยในหน้าตะกร้าสินค้าของคุณ
วิธีใส่ส่วนย่อยของวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
main-cart-items.liquid
ค้นหาแท็กปิด
</form>
ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด</form>
ให้วางโค้ดต่อไปนี้:
{% render 'delivery-date' %}
- แล้วคลิกที่บันทึก
ขณะนี้คุณมีช่องป้อนข้อมูลวันที่จัดส่งในหน้าตะกร้าสินค้าของคุณ เมื่อคุณคลิกภายในช่องข้อความ ปฏิทินจะปรากฏขึ้น:

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