เพิ่มเครื่องมือเลือกวันที่จัดส่งไปยังตะกร้าสินค้าของคุณ
คุณสามารถใส่ปฏิทินในหน้าตะกร้าสินค้าของคุณ ซึ่งจะช่วยให้ลูกค้าสามารถระบุวันที่จัดส่งสำหรับคำสั่งซื้อของตนได้
ในหน้านี้
ใส่ 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 ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก “เพิ่มส่วนย่อยใหม่”
สร้างส่วนย่อย:
ในส่วนย่อย
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