คู่มือสำหรับผู้เริ่มต้นใช้งาน Magento Blocks and Widgets

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

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

อย่างไรก็ตาม บล็อกจะถูกวางโดยใช้วิดเจ็ต ขั้นแรก คุณสร้างบล็อก จากนั้นคุณใช้วิดเจ็ตเพื่อตัดสินใจว่าบล็อกนั้นจะแสดงที่ใด

มาแนะนำตัวอย่างและแสดงให้คุณเห็นว่า Blocks and Widgets ทำงานอย่างไรใน Magento

คู่มือนี้นำมาจาก Magento 2 Explained ซึ่งเป็นหนังสือขายดีที่สุดของ Magento 2 เราใช้ตัวอย่างของร้านค้าที่ชื่อว่า "Orangeville" ในหนังสือเล่มนั้น ดังนั้นคุณจะเห็นมันอ้างอิงถึงที่นี่

อธิบายการสร้างบล็อกวีโอไอพี

มาดูขั้นตอนการสร้างบล็อคแรกของเรากัน ซึ่งจะมีลิงก์ HTML

• ไปที่ "เนื้อหา" จากนั้น "บล็อก"
• คลิก "เพิ่มบล็อกใหม่" ที่มุมบนขวา

• ป้อน "Key Links" เป็น "Block Title" นี่คือสิ่งที่ผู้เข้าชมจะเห็นบนหน้าจอ
• ป้อน "key_links" เป็นตัวระบุ สตริงนี้คือสิ่งที่ Magento ใช้ในการระบุบล็อก แต่ผู้เยี่ยมชมจะไม่เห็นมัน

• คลิกไอคอนสัญลักษณ์แสดงหัวข้อย่อยในแถบเครื่องมือแก้ไข:

• พิมพ์ "About Orangeville" เป็นสัญลักษณ์แสดงหัวข้อย่อย:
• เลือกข้อความ "เกี่ยวกับ Orangeville" และคลิกไอคอนลิงก์

• ตอนนี้คุณจะเห็นหน้าต่างป๊อปอัป ป้อน URL ของหน้า "เกี่ยวกับ Orangeville" ของคุณ หากคุณไม่แน่ใจว่านี่คืออะไร คุณสามารถเปิดไซต์ Magento ของคุณในแท็บเบราว์เซอร์ใหม่และค้นหา URL ซึ่งน่าจะเป็น example.com/about-orangeville/
• คลิก "แทรก"
• ตอนนี้คุณมีลิงก์ "เกี่ยวกับ Orangeville" ในบล็อกของคุณแล้ว:

• คลิก "บันทึกบล็อก"

อธิบายการสร้างวิดเจ็ตวีโอไอพี

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

อย่างไรก็ตาม นั่นไม่ใช่ทั้งหมดที่ Widget สามารถทำได้ วิดเจ็ตสามารถวางบล็อกใหม่ที่เรียบง่ายของเราได้ แต่ยังสามารถวางคุณสมบัติอื่นๆ ได้อีกมากมาย

• ไปที่ "เนื้อหา" จากนั้น "วิดเจ็ต"
• คลิก "เพิ่มวิดเจ็ต"
• สำหรับ "ประเภท" ให้เลือก "CMS Static Block"
• สำหรับ "ธีมการออกแบบ" ให้เลือก "Magento Luma"
• คลิก "ดำเนินการต่อ"

• ป้อน "Key Orangeville Links" สำหรับ "Widget Title"
• ในส่วน "กำหนดไปยังมุมมองร้านค้า" ให้เลือก "มุมมองร้านค้าทั้งหมด"

ต่อไป เราจะควบคุมว่าบล็อกนี้จะปรากฏบน URL ใด

• คลิก "เพิ่มการอัปเดตเค้าโครง"

• เลือก "ทุกหน้า"

• เลือก "CMS Footer Links" สำหรับตัวเลือก "Container"

ตัวเลือกทั้งสองนี้ "ทุกหน้า" และ "ลิงก์ส่วนท้ายของ CMS" อาจยังไม่สมเหตุสมผลสำหรับคุณ อย่างไรก็ตาม เราจะสร้างวิดเจ็ตให้เสร็จ และในบทนี้ ในส่วนที่เรียกว่า "คำอธิบายตำแหน่งวิดเจ็ต Magento" เราจะอธิบายเพิ่มเติมเกี่ยวกับสาเหตุที่เราตัดสินใจเลือกเหล่านี้

ภายใต้ "การอัปเดตเลย์เอาต์" เราจะทำทางเลือกที่สองสำหรับตำแหน่งที่จะวางวิดเจ็ตของเรา

• เลือก "ประเภทสินค้าทั้งหมด"
• เลือก "CMS Footer Links" อีกครั้ง
• หลังจากเพิ่มตัวเลือกทั้งสองนี้แล้ว หน้าจอของคุณจะมีลักษณะเหมือนภาพด้านล่าง

ณ จุดนี้ คุณได้สร้างวิดเจ็ตและแจ้ง Magento ว่าควรปรากฏที่ใดบนไซต์ของคุณ: วิดเจ็ตนี้จะปรากฏบนหน้าเพจและผลิตภัณฑ์ทั้งหมดของเรา

ตอนนี้ได้เวลาเลือกเนื้อหาของวิดเจ็ตซึ่งจะเป็นบล็อกที่คุณสร้างไว้ก่อนหน้านี้

• คลิก "ตัวเลือกวิดเจ็ต" ในแถบด้านข้าง
• คลิก "เลือกบล็อก"

• ตอนนี้ คุณสามารถเลือกบล็อค "คีย์ลิงก์" ที่คุณสร้างไว้ก่อนหน้านี้:

• คลิก "บันทึก"
• ไปที่ด้านหน้าของไซต์ของคุณ แล้วคุณจะเห็นลิงก์ของคุณได้รับการเผยแพร่ในส่วนท้ายแล้ว คุณสร้างบล็อกที่มีเนื้อหาและเผยแพร่ในวิดเจ็ต

การสร้างบล็อกและวิดเจ็ตร่วมกัน

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

• ไปที่ "เนื้อหา" จากนั้น "บล็อก"
• คลิก "เพิ่มบล็อกใหม่"
• ชื่อเรื่อง: รับประกันความพึงพอใจ
• ตัวระบุ: รับประกัน

• ป้อนข้อความสำหรับบล็อกของคุณ ฉันเขียนว่า "ที่ Orangeville ความพึงพอใจของคุณคือสิ่งสำคัญที่สุดของเรา หากคุณไม่พอใจ เราจะคืนเงินให้คุณ"

ต่อไป เราจะอัปโหลดรูปภาพสำหรับบล็อกของเรา

• วางเคอร์เซอร์ของคุณลงในพื้นที่เนื้อหาหลัก ใต้ข้อความที่คุณเพิ่งเขียน
• คลิกไอคอนทรีในแถบเครื่องมือแก้ไขของคุณ
• เมื่อคุณเห็นกล่องป๊อปอัป ให้คลิกไอคอนกล่องเล็ก
• ค้นหาภาพที่คุณสามารถอัปโหลด ฉันเลือกตราสัญลักษณ์ 100%

• คลิก "แทรกไฟล์"
• คำอธิบายรูปภาพ: รับประกันความพึงพอใจ
• คลิก "แทรก"

• ตอนนี้คุณมีบล็อกที่มีทั้งข้อความและรูปภาพใหม่ของคุณ
• คลิก "บันทึกบล็อก" เพื่อสร้างบล็อกนี้ให้เสร็จ

ต่อไป มาสร้างวิดเจ็ตที่จะแสดงบล็อกนี้บนเว็บไซต์ของเรา

• ไปที่ "เนื้อหา" จากนั้น "วิดเจ็ต"
• คลิก "เพิ่มวิดเจ็ต"
• ชนิด: CMS Static Block
• ธีมการออกแบบ: Magento Luma

• ชื่อวิดเจ็ต: รับประกันความพึงพอใจ
• กำหนดมุมมองร้านค้า: มุมมอง ร้านค้าทั้งหมด

• อัปเดตเค้าโครง: หมวดหมู่สมอ
• คอนเทนเนอร์: แถบด้านข้างหลัก
• คลิก "ตัวเลือกวิดเจ็ต" และเลือกบล็อก "รับประกันความพึงพอใจ" ที่คุณเพิ่งสร้างขึ้น

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

ตำแหน่ง Magento Widget อธิบาย

คำถามทั่วไปที่ฉันได้รับจากผู้เรียน Magento คือเกี่ยวกับตำแหน่งของวิดเจ็ต

คุณรู้ได้อย่างไรว่าต้องเลือก "CMS Footer Links" หรือ "Sidebar Main" สำหรับคอนเทนเนอร์ ท้ายที่สุด มีทั้งหมด 22 ตัวเลือกดังที่คุณเห็นในภาพด้านล่าง

อะไรคือความแตกต่างระหว่าง "หลังส่วนหัว" และ "หลังส่วนหัวของหน้า" อะไรคือความแตกต่างระหว่าง "Page Footer" และ "Page Footer Container"? ชื่อเหล่านั้นคล้ายกันมากจนอาจทำให้สับสนได้

ขออภัย ไม่มีวิธีใดที่จะบอกล่วงหน้าได้อย่างแน่นอน แม้ว่าชื่อจะทำให้คุณมีความคิดที่ดีเกี่ยวกับตำแหน่ง:

• After Page Header: นี่น่าจะอยู่ใต้เมนูหลัก
• เนื้อหาหลักด้านล่าง: นี่อาจเป็นส่วนต่ำที่ส่วนกลางของหน้าจอ ใต้ผลิตภัณฑ์หรือเนื้อหาของหน้า
• ด้านบนของหน้า: สิ่งนี้จะปรากฏบนหน้าเพจ แต่ไม่ปรากฏบนหน้าจอผลิตภัณฑ์

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

ในทางกลับกัน บางครั้งรายการนี้อาจสั้นกว่ามาก ในส่วนถัดไปของบทนี้ เราจะเห็นว่าวิดเจ็ตบางตัวมีตัวเลือกคอนเทนเนอร์สามตัวเท่านั้น

ดังนั้นจึงไม่มีวิธีรับประกันว่าวิดเจ็ตของคุณจะปรากฏที่ใดหากคุณเลือกคอนเทนเนอร์เฉพาะ จะมีการทดสอบและการทดลองที่เกี่ยวข้องเมื่อคุณทดสอบตัวเลือกต่างๆ เหล่านี้

บล็อกวีโอไอพีและสรุปวิดเจ็ต

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

หากคุณพร้อมที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Magento ให้ลองดู Magento 2 Explained หนังสือขายดีที่สุดของ Magento 2

เรายังมีบทช่วยสอนวีโอไอพีออนไลน์ที่ยอดเยี่ยมอีกมากมาย รวมไปถึง:

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