shopify wishlist

Shopify สิ่งที่อยากได้

ชุดไฟล์ที่ใช้เพื่อสร้างรายการสิ่งที่อยากได้ของลูกค้าแบบง่ายบนร้านค้า Shopify

เวอร์ชัน: 2.3.0 - เข้ากันได้กับร้านค้าออนไลน์ 2.0

เวอร์ชันก่อนหน้า:

• v2.1.0 (ร้านค้าออนไลน์ 1.0)
• เวอร์ชัน 2.0.0
• เวอร์ชัน 1.0.0

การติดตั้ง

หากต้องการเริ่มใช้ Shopify Wishlist คุณต้องคัดลอกไฟล์บางไฟล์ใน Repo นี้ไปยังโค้ดธีม Shopify ของคุณ

หมายเหตุ : การตั้งค่านี้จะถือว่าคุณมีตัวอย่างสำหรับการแสดงการ์ดผลิตภัณฑ์

ไฟล์ที่จะคัดลอก:

ไฟล์รีโป	Shopify ที่ตั้งธีม
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. วางข้อมูลโค้ด button-wishlist.liquid ไว้ภายในข้อมูลโค้ดการ์ดผลิตภัณฑ์ที่มีอยู่ หรือบนเทมเพลต product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • ซึ่งจะทำให้ลูกค้าสามารถเพิ่ม/ลบสินค้าเข้า/ออกจากสิ่งที่อยากได้ได้
2. แทนที่ข้อมูลโค้ดในส่วน product-card-template.liquid ด้วยข้อมูลโค้ดการ์ดผลิตภัณฑ์ที่มีอยู่
   • ข้อมูลโค้ดเดียวกันจากขั้นตอนที่ 1
   • ข้อมูลโค้ดการ์ดผลิตภัณฑ์ของคุณอาจใช้ชื่อตัวแปรผลิตภัณฑ์อื่น โปรดตรวจสอบอีกครั้ง ?
3. เพิ่มชื่อคลาสองค์ประกอบการ์ดผลิตภัณฑ์ของคุณไปยังออบเจ็กต์ selectors ใน Wishlist.js
   • ตัวอย่าง: หากชื่อคลาสการ์ดผลิตภัณฑ์ของคุณคือ .product-item ตัวแปร selectors จะมีลักษณะดังนี้:

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. สร้างหน้าใหม่ใน Shopify admin:
   • ผู้ดูแลระบบ > ร้านค้าออนไลน์ > เพจ > เพิ่มเพจ
   • ตั้งค่า template ของเพจใหม่เป็น page.wishlist
   • หน้านี้จะแสดงรายการสิ่งที่อยากได้ที่บันทึกไว้ของลูกค้า
5. วางสคริปต์ใน theme.liquid ก่อนแท็กปิด </head>
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

แค่นั้นแหละ! เมื่อดูร้านค้า Shopify ของคุณ คุณควรเห็นปุ่มสิ่งที่อยากได้ภายในการ์ดสินค้าของคุณ (อาจอยู่ในหน้าคอลเลกชัน) หรือบนเทมเพลตสินค้า การคลิกที่ปุ่มสิ่งที่อยากได้จะเป็นการเพิ่ม/ลบสินค้าออกจากสิ่งที่อยากได้ของลูกค้า และทริกเกอร์สไตล์ที่ใช้งานบนปุ่มนั้น หลังจากเพิ่มรายการสิ่งที่อยากได้แล้ว คุณสามารถดูรายการสิ่งที่อยากได้ได้โดยไปที่เพจที่สร้างในขั้นตอนที่ 3

สาธิตร้านค้า Shopify

หมายเหตุ

• สิ่งที่อยากได้นี้ใช้ Javascript และ localStorage เพื่อบันทึกสิ่งที่อยากได้ของลูกค้าบนเบราว์เซอร์ localStorage จะไม่คงอยู่หากผู้ใช้ล้างพื้นที่เก็บข้อมูลของเบราว์เซอร์หรือเรียกดูในโหมดไม่ระบุตัวตน
• ในขณะที่ลูกค้าเรียกดูผลิตภัณฑ์และเพิ่มลงในสิ่งที่อยากได้ สคริปต์จะตั้งค่าปุ่มสิ่งที่อยากได้ให้อยู่ในสถานะใช้งานโดยอัตโนมัติ หากผลิตภัณฑ์ที่เกี่ยวข้องนั้นรวมอยู่ในสิ่งที่อยากได้แล้ว
• ไฟล์เหล่านี้ไม่มีสไตล์หรือโครงสร้างเพื่อให้คุณปรับแต่งได้ตามต้องการ สิ่งนี้มีจุดมุ่งหมายเพื่อให้คุณได้รับฟังก์ชันพื้นฐานของรายการสิ่งที่อยากได้โดยไม่มีความหรูหราใดๆ
• หากคุณกำลังทำงานในธีมที่ยังไม่ได้เผยแพร่ คุณจะต้องสร้างเทมเพลตใหม่บนธีมที่เผยแพร่ด้วยเช่นกัน Shopify admin จะอนุญาตให้คุณกำหนดหน้าให้กับเทมเพลตได้ก็ต่อเมื่อมีเทมเพลตอยู่ในธีมที่เผยแพร่แล้วเท่านั้น
• หากคุณกำลังอัปเกรดเป็นเวอร์ชันร้านค้าออนไลน์ 2.0 คุณจะต้องลบรายการความปรารถนาและเทมเพลตการ์ดผลิตภัณฑ์เก่า .liquid