วิธีสร้างวิดเจ็ต Magento 2 แบบกำหนดเอง

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

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

เป้าหมายของบทความนี้คือการสาธิตวิธีสร้างวิดเจ็ตใน Magento 2 โดยเน้นที่วิดเจ็ตแบบกำหนดเอง

วิดเจ็ต Magento 2

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

แต่จากมุมมองทางเทคนิค…วิดเจ็ต Magento คืออะไร

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

วิดเจ็ตยังช่วยให้ผู้ดูแลระบบสามารถเพิ่มอินเทอร์เฟซและคุณสมบัติแบบโต้ตอบในส่วนหน้าของ Magento ได้โดยไม่ต้องใช้รหัส (อันที่จริงไม่รู้ด้วยซ้ำว่าต้องเขียนโค้ดอย่างไร)

Magento 2 เสนอวิดเจ็ตหลายประเภท

ก่อนที่เราจะดำเนินการต่อไปเรามาดูช่วงมาตรฐานของวิดเจ็ตที่รองรับใน Magento 2 กันดีกว่า:

• ผลิตภัณฑ์ที่เพิ่งเปรียบเทียบ - คุณต้องสังเกตวิดเจ็ตนี้ในขณะที่เรียกดูผลิตภัณฑ์บนไซต์อีคอมเมิร์ซที่คุณชื่นชอบ วิดเจ็ตนี้ใช้เพื่อแสดงผลิตภัณฑ์ที่ดูหรือเปรียบเทียบล่าสุดในแถบด้านข้างของหน้าแค็ตตาล็อก นอกจากนี้ยังอาจปรากฏในร้านค้าของคุณขึ้นอยู่กับธีม ประเด็นสำคัญประการหนึ่งคือจำนวนผลิตภัณฑ์ที่ระบุไว้ในทุกๆบล็อกสามารถกำหนดค่าได้
• คำสั่งซื้อและการคืนสินค้า - เมื่อใดก็ตามที่คุณซื้อสินค้าทางออนไลน์มีวิดเจ็ตที่ต้องมีซึ่งช่วยให้เข้าถึงคำสั่งซื้อและการคืนสินค้าได้อย่างรวดเร็ว หากผู้ใช้ต้องการตรวจสอบผลิตภัณฑ์ที่สั่งซื้อหรือส่งคืนสามารถกรอกรายละเอียดที่จำเป็นเช่นรหัสคำสั่งซื้อการเรียกเก็บเงินวันที่สุดท้ายค้นหาคำสั่งซื้อทางอีเมล ฯลฯ
• รายการสินค้าแค็ตตาล็อก - นี่เป็นอีกหนึ่งวิดเจ็ตที่ใช้กันอย่างแพร่หลาย ทุกคนคุ้นเคยกับส่วน 'ผลิตภัณฑ์ที่โดดเด่น' ในไซต์อีคอมเมิร์ซเนื่องจากเกือบทุกไซต์มี ผลิตภัณฑ์แนะนำมักจะวางไว้ที่หน้าแรกเพื่อวัตถุประสงค์ในการส่งเสริมการขายผลิตภัณฑ์ ผลิตภัณฑ์นั้น ๆ จะแสดงพร้อมรายละเอียดสั้น ๆ เช่นราคาคุณสมบัติและตัวเลือกต่างๆเช่นหยิบลงตะกร้าเพิ่มในรายการสิ่งที่อยากได้และเพิ่มในคุณสมบัติเปรียบเทียบ
• ลิงค์ผลิตภัณฑ์แคตตาล็อก - จุดประสงค์หลักของวิดเจ็ต Catalog Product Link คือช่วยให้ผู้ดูแลระบบสามารถจัดการลิงก์สำหรับผลิตภัณฑ์รวมถึงผลิตภัณฑ์ที่เกี่ยวข้องการขายต่อเนื่องการเพิ่มยอดขายและผลิตภัณฑ์ที่จัดกลุ่ม เมื่อคุณไปที่หน้าลิงค์ผลิตภัณฑ์แค็ตตาล็อกคุณจะเห็นหมวดหมู่แคตตาล็อกต่างๆที่เริ่มต้นด้วยการแนะนำ คุณจะพบลิงก์ผลิตภัณฑ์แคตตาล็อกพร้อมลิงก์ย่อยต่างๆเช่นการกำหนดลิงก์ผลิตภัณฑ์แคตตาล็อกแอตทริบิวต์ลิงก์ผลิตภัณฑ์แคตตาล็อกการลบลิงก์ผลิตภัณฑ์แคตตาล็อกประเภทลิงก์ผลิตภัณฑ์แคตตาล็อกและอื่น ๆ
• ลิงค์หมวดหมู่แค็ตตาล็อก - ในเว็บไซต์อีคอมเมิร์ซโดยเฉพาะอย่างยิ่งเว็บไซต์ที่อิงตามผลิตภัณฑ์คุณจะพบว่าวิดเจ็ตลิงก์หมวดหมู่แคตตาล็อกไม่ขาดแคลน
• วิดเจ็ตบล็อกที่กำหนดเอง - เป็นไปได้ที่จะรวมบล็อกวิดเจ็ตและเพจที่กำหนดเองเพื่อแสดงส่วนต่างๆของแคตตาล็อกหรือข้อมูลอื่น ๆ ที่ลูกค้าอาจพบว่ามีประโยชน์

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

• เพิ่มบล็อกแบบไดนามิก / ข้อมูลในแถบด้านข้าง
• เพิ่มแบนเนอร์ในหน้า CMS
• เพิ่มเมนูที่กำหนดเอง
• เพิ่มอินเทอร์เฟซผู้ใช้แบบโต้ตอบ

กรณีสำหรับวิดเจ็ตแบบกำหนดเอง Magento 2

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

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

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

อย่างไรก็ตามก่อนที่เราจะไปยังวิดเจ็ตที่กำหนดเองเราจำเป็นต้องตรวจสอบกรณีการใช้งานมาตรฐานสำหรับวิดเจ็ตใน Magento 2 เรามาดูสิ่งพื้นฐานและใช้กันอย่างแพร่หลายเช่น:

วิธีเพิ่มรายการผลิตภัณฑ์ใหม่ในโฮมเพจโดยใช้วิดเจ็ต

วิดเจ็ตง่ายๆนี้ช่วยให้เราสามารถเพิ่มรายการผลิตภัณฑ์ใหม่ได้ทุกที่ที่ต้องการบนเว็บไซต์และมีหลายวิธีที่สามารถแสดงผลิตภัณฑ์ใหม่ใน Magento 2

ในการเพิ่มรายการผลิตภัณฑ์ Magento ในโฮมเพจคุณเพียงแค่ทำตามขั้นตอนง่ายๆ:

• เข้าสู่หน้าผู้ดูแลระบบ Magento 2 และไปที่เนื้อหา> วิดเจ็ต

• คลิกที่ เพิ่มวิดเจ็ต ปุ่ม. หลังจากนั้นเราจะเปลี่ยนเส้นทางไปที่ การตั้งค่า แท็บที่เราต้องเลือก ประเภท และ ออกแบบ ตัวเลือกและธีม

• เราสามารถดูภาพหน้าจอด้านล่างซึ่งเราได้เลือกไฟล์ แค็ตตาล็อกรายการสินค้าใหม่ ที่เราจะแสดงไว้ที่ส่วนหน้า

• เราเลือก LUMA เป็นตัวเลือกธีมการออกแบบ

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

• ส่วนที่สำคัญที่สุดคือ การอัปเดตเค้าโครง ซึ่งจะแจ้งให้เราทราบว่าวิดเจ็ตนี้จะปรากฏที่ใด (เช่นหน้าแรกหน้ารายชื่อหน้าชำระเงิน ฯลฯ ) นอกจากนี้ยังสามารถกำหนดพื้นที่ที่คอนเทนเนอร์จะปรากฏได้เช่นด้านล่างส่วนหัวเหนือส่วนท้ายส่วนท้าย ฯลฯ

การอัปเดตเค้าโครง การตั้งค่าให้คุณมีตัวเลือกต่อไปนี้:

• แสดงบน: เพจที่ระบุหรือเพจทั้งหมด
• หน้า: โฮมเพจ CMS
• คอนเทนเนอร์: พื้นที่เนื้อหาหลัก
• แม่แบบ: ที่นี่คุณสามารถเลือกรูปแบบที่คุณต้องการแสดงผลิตภัณฑ์ใหม่โหมดกริดหรือโหมดรายการ

เมื่อเราเลือกไฟล์ หน้าที่ระบุ เราสามารถดำเนินการตั้งค่าคุณสมบัติเพื่อให้เราสามารถแสดงวิดเจ็ตในหน้าใดหน้าหนึ่งได้ ที่นี่เรามีไฟล์ หน้า ดรอปดาวน์ซึ่งให้เราเลือก โฮมเพจ CMS . ต่อไปเราต้องเลือกคอนเทนเนอร์และเทมเพลตที่เราจะใช้เพื่อแสดงวิดเจ็ตในส่วนใดส่วนหนึ่ง

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

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

ใน จำนวนผลิตภัณฑ์ที่จะแสดง เราสามารถกำหนดจำนวนผลิตภัณฑ์ที่จะแสดงในไฟล์ สินค้าใหม่ มาตรา. นอกจากนี้เราสามารถเปลี่ยนแปลงได้ อายุการใช้งานแคช การตั้งค่าหากจำเป็น

ตอนนี้เราต้องบันทึกวิดเจ็ตนี้และล้างแคช Magento 2 สามารถทำได้จากผู้ดูแลระบบหรือบรรทัดคำสั่ง เราสามารถใช้คำสั่งต่อไปนี้เพื่อล้างแคช:

php bin/magento cache:clean and php bin/magento cache:flush

จากนั้นเราจะสามารถดูผลิตภัณฑ์ใหม่ได้ที่หน้าแรก

วิธีสร้าง Custom Widget ใน Magento 2

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

เริ่มต้นด้วยพื้นฐาน เราทุกคนรู้วิธีสร้างโมดูลใช่ไหม? ในกรณีที่คุณไม่คุ้นเคยกับการสร้างโมดูลที่กำหนดเองใน Magento 2 เรามี กวดวิชาที่ดี ที่ครอบคลุมกระบวนการในเชิงลึก

ตอนนี้เรามาดูกระบวนการทีละขั้นตอนในการสร้างวิดเจ็ตที่กำหนดเองใน Magento 2

ขั้นแรกเราต้องสร้างโมดูลใหม่ซึ่งจะต้องใช้เนมสเปซและโฟลเดอร์โมดูล สำหรับตัวอย่างนี้เราจะใช้ ApeeScape สำหรับเนมสเปซและ CustomWidget สำหรับชื่อโมดูล เริ่มกันเลยตามปกติด้วย composer.json, registration.php และ etc/module.xml

app/code/ApeeScape/CustomWidget/composer.json

ไฟล์นี้จะถูกโหลดโดย Composer ทุกครั้งที่เราเรียกใช้แม้ว่าเราจะไม่ได้ใช้ Composer กับโมดูลของเราก็ตาม

ตอนนี้เราต้องลงทะเบียนโมดูลของเราด้วย Magento ดังนั้นเราจึงจำเป็นต้องสร้าง register.php ตามสถานที่ต่อไปนี้: app/code/ApeeScape/CustomWidget/registration.php.

|_+_|