ทำให้เพิ่มผลิตภัณฑ์ในโพสต์และเพจได้ง่ายขึ้นด้วยบล็อกผลิตภัณฑ์สำหรับ Gutenberg

กลุ่มผลิตภัณฑ์แสดงถึงขั้นตอนที่หนึ่งของโครงการที่เราเรียกกันอย่างสนิทสนมว่า "Wootenberg" ซึ่งเป็นการเตรียม WooCommerce สำหรับการมาถึงของบรรณาธิการ Gutenberg

กูเตนเบิร์ก?

หากคุณพลาดไป Gutenberg เป็นเครื่องมือแก้ไขเนื้อหารูปแบบใหม่ที่ขับเคลื่อนด้วยภาพซึ่งสร้างขึ้นสำหรับ WordPress และกำหนดให้รวมอยู่ในรุ่น 5.0 อ่านข้อมูลทั้งหมดและดาวน์โหลดปลั๊กอินฟีเจอร์ Gutenberg เวอร์ชันล่าสุด

บล็อกผลิตภัณฑ์คืออะไร?

โดยพื้นฐานแล้ว กลุ่มผลิตภัณฑ์เป็นเวอร์ชันใหม่ของรหัสย่อผลิตภัณฑ์ ซึ่งสร้างขึ้นสำหรับโลกของ Gutenberg ที่เราทุกคนกำลังจะย้ายเข้าไปอยู่ในเร็วๆ นี้

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

ด้วยบล็อกผลิตภัณฑ์ คุณสามารถเพิ่มผลิตภัณฑ์ในโพสต์และเพจได้อย่างรวดเร็วและง่ายดาย ซึ่งรวมถึง:

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

หรือเพียงแค่เพิ่มผลิตภัณฑ์ ทั้งหมด ของคุณ

ดูวิดีโอสั้น ๆ นี้เพื่อดูว่าบล็อกผลิตภัณฑ์ทำงานอย่างไร:

การปรับปรุงอย่างมากจากประสบการณ์การใช้รหัสย่อที่มีอยู่ คุณว่าไหม พวกเราทำ!

รับบล็อกผลิตภัณฑ์

ปลั๊กอินคุณสมบัติ

ขณะนี้ กลุ่มผลิตภัณฑ์เป็นแนวคิดใหม่และขึ้นอยู่กับ Gutenberg เนื่องจากตัว Gutenberg ยังคงเป็นปลั๊กอินคุณลักษณะ เราจึงเปิดตัวบล็อกผลิตภัณฑ์เป็นปลั๊กอินคุณลักษณะด้วยเช่นกัน ด้วยวิธีนี้ เราจึงสามารถสร้างคุณลักษณะได้อย่างรวดเร็ว โดยไม่ขึ้นกับแกนหลักของ WooCommerce อ่านข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอินคุณลักษณะ เหนือสิ่งอื่นใด มันมีวิธีที่สะดวกสำหรับคุณในการติดตั้งและเล่นกับมัน

เมื่อเราพอใจกับความเสถียรของการออกแบบและโค้ดแล้ว เราจะรวมคุณสมบัติเข้ากับ WooCommerce core เพื่อให้สามารถเข้าถึงร้านค้า WooCommerce ทั้งหมดได้ เมื่อถึงจุดนั้น คุณสามารถปิดใช้งานและลบปลั๊กอินคุณลักษณะ และบล็อกผลิตภัณฑ์ใดๆ ที่คุณแทรกด้วยปลั๊กอินคุณลักษณะจะยังคงทำงานอยู่

แนวทางของเรา

Gutenberg สร้างความเป็นไปได้ที่น่าตื่นเต้นมากมายสำหรับปลั๊กอินขนาดใหญ่ เช่น WooCommerce สำหรับตอนนี้ เป็นสิ่งสำคัญสำหรับเราที่จะจำกัดขอบเขตของการสำรวจเบื้องต้นเพื่อให้แน่ใจว่าเราได้สร้างรากฐานที่มั่นคงด้วยรูปแบบการออกแบบของ Gutenberg และ codebase ที่พัฒนาอย่างรวดเร็ว ก่อนที่จะไปยังงานที่ซับซ้อนมากขึ้น เช่น การเพิ่มผลิตภัณฑ์ ผลปรากฏว่า แม้แต่โครงการที่มีขอบเขตน้อยกว่าของเราก็ยังพบโอกาสที่เราไม่คาดคิด

การวิจัย

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

เนื่องจากเรามุ่งเน้นที่รหัสย่อของผลิตภัณฑ์ เราจึงวิเคราะห์การใช้งานบนเว็บไซต์ 10,000 WooCommerce เราได้เรียนรู้ว่าแอปพลิเคชันยอดนิยมของรหัสย่อคือการแสดงผลิตภัณฑ์เฉพาะ ประเภทผลิตภัณฑ์ และผลิตภัณฑ์เด่น ที่น่าสนใจคือมีร้านค้าเพียงไม่กี่แห่งที่ใช้เพื่อแสดงสินค้ายอดนิยม สินค้าขายดี หรือสินค้าที่มีคุณลักษณะเฉพาะ

แอปพลิเคชันยอดนิยมของรหัสย่อของผลิตภัณฑ์คือการแสดงผลิตภัณฑ์เฉพาะ ประเภทผลิตภัณฑ์ และผลิตภัณฑ์เด่น

เป็นเรื่องที่น่าสนใจที่ได้เห็นผู้คนใช้งานคุณลักษณะนี้จริง ๆ และข้อมูลเชิงลึกนี้เป็นกุญแจสำคัญในการช่วยให้เราทราบว่าโฟลว์ใดสำคัญที่สุด นอกจากนี้ยังท้าทายสมมติฐานของเรา ดังนั้นเราจึงสามารถตัดสินใจอย่างชาญฉลาดเกี่ยวกับสิ่งที่เราแก้ไขในขั้นตอนการออกแบบถัดไป

ทดสอบแล้ว รอบที่หนึ่ง

การออกแบบรอบแรกของเราได้สำรวจวิธีที่เจ้าของร้านค้าอาจต้องการแสดงผลิตภัณฑ์บนหน้าหรือโพสต์ เราได้สัมภาษณ์ผู้สร้างร้านค้าและเจ้าของ/ผู้จัดการร้านค้า สร้างสถานการณ์ทดสอบสองสามแบบเพื่อฝังผลิตภัณฑ์ จากนั้นขอให้พวกเขาลองใช้ปลั๊กอินและพูดคุยถึงปฏิกิริยาและข้อเสนอแนะ

การรวบรวมข้อเสนอแนะนี้ตั้งแต่เนิ่นๆ ในกระบวนการออกแบบ ก่อนเริ่มการพัฒนา จะแจ้งให้ทราบถึงการออกแบบซ้ำครั้งถัดไปเพื่อให้สอดคล้องกับวิธีที่ลูกค้าคาดหวังที่จะใส่และแสดงผลิตภัณฑ์ของตนมากขึ้น สิ่งนี้ทำให้เรามั่นใจที่จะก้าวไปข้างหน้าด้วยปลั๊กอินคุณสมบัติรุ่นแรกสำหรับการทดสอบเพิ่มเติม

แนวทางหลักของเราจากการทดสอบรอบนี้คือแม้ว่าโฟลว์ของเราจะค่อนข้างดี แต่ผู้คนก็ประสบปัญหาในการโต้ตอบกับการตั้งค่าบล็อก นี่เป็นส่วนหนึ่งของปัญหาการค้นพบได้ แต่ยังเป็นผลมาจากการตั้งค่าโอเวอร์โหลดด้วย ดังนั้นเราจึงนำตัวเลือกบางตัวออก (เช่น การสลับการแสดงข้อมูลผลิตภัณฑ์ – สิ่งที่เราจะสามารถจัดการได้ดีขึ้นผ่านแกนหลักของ Gutenberg ในเร็วๆ นี้) และย้ายตัวเลือกอื่นๆ (เช่น ตัวเลือกขอบเขตผลิตภัณฑ์) ไปที่ส่วนการตั้งค่าบล็อกหลัก ทำให้มองเห็นได้ทันทีหลังการบล็อก ถูกแทรก

ทดสอบแล้ว รอบสอง

เมื่อปลั๊กอินคุณสมบัติพร้อมและเราได้อัปเดตการออกแบบของเราแล้ว เราได้ทำการทดสอบการใช้งานรอบที่สอง ครั้งนี้ เราได้เตรียมสภาพแวดล้อมการทดสอบแบบสดเพื่อให้ผู้เข้าร่วมการทดสอบสามารถโต้ตอบกับอินเทอร์เฟซของ Gutenberg จริง แทนที่จะเป็นแบบต้นแบบ การดูผู้คนใช้ผลิตภัณฑ์จริงเป็นการเปิดหูเปิดตา — และประเมินค่าไม่ได้

บทเรียนสำคัญสองข้อไม่ได้เกี่ยวกับกลุ่มผลิตภัณฑ์โดยเฉพาะ แต่เกี่ยวกับ Gutenberg เอง ผู้เข้าร่วมการทดสอบทุกคน (ซึ่งส่วนใหญ่ไม่เคยใช้ Gutenberg มาก่อน) ติดขัดเมื่อเพิ่มบล็อก และมีปัญหาในการค้นหาการตั้งค่าขั้นสูง เราได้แชร์ผลการทดสอบของเรากับทีม Gutenberg การแก้ไขได้ถูกนำไปใช้กับปัญหาที่สองแล้ว และขณะนี้เรากำลังสำรวจตัวเลือกการออกแบบเพื่อแก้ไขปัญหาแรก

สำหรับตัวบล็อกผลิตภัณฑ์ เราได้ทำการปรับปรุงบางอย่าง เช่น ลบขั้นตอนที่ไม่เกี่ยวข้องเมื่อแสดงผลิตภัณฑ์ที่ไม่ต้องการข้อมูลเพิ่มเติมจากผู้ใช้ระหว่างการเลือก — หากคุณเลือกที่จะแสดงผลิตภัณฑ์ที่แนะนำ เราไม่ต้องการอะไรเพิ่มเติม การดำเนินการเพื่อยืนยันว่าชอบเมื่อเลือกหมวดหมู่ นอกจากนี้ เรายังสังเกตเห็นว่าไม่มีขั้นตอนที่สอดคล้องกันในการเปลี่ยนขอบเขตของผลิตภัณฑ์ที่แสดง และผู้เข้าร่วมทดสอบทั้งหมดมองหาการตั้งค่าเหล่านี้ในตำแหน่งต่างๆ กัน ดังนั้นเราจึงเพิ่มเส้นทางอื่นๆ กลับไปยังการตั้งค่าบล็อกเริ่มต้น

ผลลัพธ์? ปลั๊กอินฟีเจอร์นี้พร้อมให้ดาวน์โหลดแล้ววันนี้

รับบล็อกผลิตภัณฑ์

สนใจทดสอบต้นแบบ WooCommerce กับเราไหม

หากคุณสนใจในการพัฒนา WooCommerce ล่าสุด โปรดลงทะเบียนสำหรับ Design Feedback Group ของเรา เพื่อให้คุณกำหนดอนาคตของ WooCommerce ได้ เราติดต่อสมาชิกเป็นระยะเพื่อขอความช่วยเหลือในการค้นคว้าโครงการใหม่และทดสอบต้นแบบและ MVP ของเรา