วิธีสร้างวิดเจ็ต 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:

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

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

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

กรณีสำหรับ Magento 2 Custom Widgets

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

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

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

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

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

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

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

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

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

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

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

• หลังจากเลือกทั้งสองค่าแล้ว เราต้องไปยังขั้นตอนที่สอง ซึ่งเราต้องกรอกคุณสมบัติหน้าร้าน ตอนนี้ เราต้องตั้งค่า Widget Title และ Storefront Properties เช่น Widget Title และ Store View เรากำลังใช้ Toptal New Product List และ All Store Views

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

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

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

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

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

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

ใน Number of Products to Display เราสามารถกำหนดจำนวนสินค้าที่สามารถแสดงได้ในส่วน New Products นอกจากนี้เรายังสามารถเปลี่ยนการตั้งค่า Cache Lifetime ได้หากจำเป็น

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

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

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

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

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

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

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

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

app/code/Toptal/CustomWidget/composer.json

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

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

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

ตอนนี้เราจะสร้างไฟล์การลงทะเบียนล่าสุด module.xml

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

หลังจากเสร็จสิ้นขั้นตอนการลงทะเบียน ต่อไปเราจะสร้างไฟล์คอนฟิกูเรชัน widget.xml

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

ในโค้ดด้านบนนี้ เราได้รับ Title และ Content เป็นพารามิเตอร์ที่จะแสดงทุกที่ที่เรียกใช้วิดเจ็ต แท็ก <widget> มีคลาสบล็อก Toptal\CustomWidget\Block\Widget\Samplewidget คลาสนี้ถูกลดความเร็วภายใน Block/Widget/Samplewidget.php ชั้นเรียนจะแนะนำวิดเจ็ตของเราว่าจะใช้เทมเพลตใด

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

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget ถูกประกาศเหนือโค้ด ในไฟล์นี้ เรากำหนดไฟล์เทมเพลตที่กำหนดเองภายในตัวแปร $_template

ต่อไป เราจะดูว่ามีอะไรอยู่ในเทมเพลตวิดเจ็ตของเรา

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

ที่นี่ เราสามารถเห็นวิธีการรับค่าจากพารามิเตอร์วิดเจ็ต มันง่าย:

$this->getData('widgettitle');

และ

$this->getData('widgetcontent');

ผลลัพธ์สุดท้ายของเราคืออะไร? ให้ฉันแสดงให้คุณเห็นว่าใน Magento Admin เป็นอย่างไร:

ตอนนี้เราต้องบันทึกวิดเจ็ตนี้และล้างแคช ตามที่ระบุไว้ก่อนหน้านี้ สามารถทำได้จากผู้ดูแลระบบหรือบรรทัดคำสั่ง โดยใช้ php bin/magento cache:clean และ php bin/magento cache:flush

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

สุดท้ายนี้ ฉันต้องการพูดถึงบล็อกส่วนตัวสำหรับนักพัฒนาซอฟต์แวร์ที่ฉันพบว่ามีประโยชน์มาก Alan Storm น่าจะมีเนื้อหาเกี่ยวกับการเรียนรู้ Magento มากที่สุด และฉันคิดว่าคุณควรตรวจสอบบล็อกของ Alan Kent ด้วยเช่นกัน

วิดเจ็ต: ส่วนสำคัญของภาพรวม

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

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

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

อย่างไรก็ตาม นั่นอยู่นอกเหนือขอบเขตของบทความนี้ ความตั้งใจของฉันคือการให้ภาพรวมทางเทคนิคโดยย่อ บทช่วยสอนวิดเจ็ต Magento 2 ที่ง่ายต่อการปฏิบัติตาม ไม่ใช่เพื่อหารือเกี่ยวกับ ROI และการตลาด