วิธีเพิ่มฟิลด์ที่กำหนดเองให้กับตัวเลือกในส่วนขยายตัวเลือกผลิตภัณฑ์ขั้นสูง

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

เพื่อไม่ให้เป็นการเสียเวลา เรามาดำเนินการตามหลักเกณฑ์ทีละขั้นตอนกัน

ขั้นตอนที่ 1. สร้างโมดูลใหม่

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

1.composer.json

 { "name": "mageworx/module-optiongtin", "description": "N/A", "require": { "magento/framework" : ">=100.1.0 <101", "magento/module-catalog": ">=101.0.0 <104" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "VendorName\\OptionGtin\\": "" } } }

2.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="VendorName_OptionGtin" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="MageWorx_OptionBase"/> </sequence> </module> </config>

3.registration.php

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

ขั้นตอนที่ 2. เพิ่มฟิลด์ใหม่ของเราไปยังฐานข้อมูล

หลังจากที่เราสร้างโมดูลเปล่าแล้ว ก็ถึงเวลาสร้างช่อง "GTIN" ใหม่และเพิ่มลงในฐานข้อมูลภายในตารางที่เกี่ยวข้อง ขณะที่เราเพิ่มฟิลด์สำหรับค่าตัวเลือก เราจะต้องมีตาราง “catalog_product_option”

มาสร้างไฟล์ต่อไปนี้กัน:

app/code/VendorName/OptionGtin/Setup/InstallSchema.php

 <?php namespace VendorName\OptionGtin\Setup; use Magento\Framework\Setup\InstallSchemaInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\SchemaSetupInterface; use Magento\Framework\DB\Ddl\Table; class InstallSchema implements InstallSchemaInterface { public function install(SchemaSetupInterface $setup, ModuleContextInterface $context) { $setup->startSetup(); $setup->getConnection()->addColumn( $setup->getTable('catalog_product_option'), 'gtin', [ 'type' => Table::TYPE_TEXT, 'nullable' => true, 'default' => null, 'comment' => 'Gtin (added by VendorName Option Gtin)', ] ); $setup->endSetup(); } }

ขั้นตอนที่ #3 เพิ่มตรรกะในการทำงานกับแบ็กเอนด์

เราจะใช้กลไกการปรับพูลเพื่อเพิ่มฟิลด์ใหม่ของเรา

ตอนนี้เพิ่มไฟล์ต่อไปนี้:

app/code/VendorName/OptionGtin/etc/adminhtml/di.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="mageworx-option-gtin" xsi:type="array"> <item name="class" xsi:type="string">VendorName\OptionGtin\Ui\DataProvider\Product\Form\Modifier\OptionGtin</item> <item name="sortOrder" xsi:type="number">72</item> </item> </argument> </arguments> </virtualType> </config>

ที่นี่ มาเพิ่มตัวแก้ไขของเราในกลุ่มที่ใช้ร่วมกันของส่วนขยายตัวเลือกผลิตภัณฑ์ขั้นสูง ―”MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\Pool” “VendorName\OptionGtin\Ui\DataProvider\Product\Form\Modifier\OptionGtin” เป็นตัวดัดแปลงคลาสของเรา

รหัสที่อนุญาตให้เพิ่มฟิลด์ของเราลงใน app/code/VendorName/OptionGtin/Ui/DataProvider/Product/Form/Modifier/OptionGtin.php มีให้ด้านล่าง:

 <?php namespace VendorName\OptionGtin\Ui\DataProvider\Product\Form\Modifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions; use Magento\Ui\Component\Form\Element\Input; use Magento\Ui\Component\Form\Element\DataType\Number; use Magento\Ui\Component\Form\Field; use MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\ModifierInterface; class OptionGtin extends AbstractModifier implements ModifierInterface { /** * @var array */ protected $meta = []; /** * {@inheritdoc} */ public function modifyData(array $data) { return $data; } /** * {@inheritdoc} */ public function modifyMeta(array $meta) { $this->meta = $meta; $this->addFields(); return $this->meta; } /** * Adds fields to the meta-data */ protected function addFields() { $groupCustomOptionsName = CustomOptions::GROUP_CUSTOM_OPTIONS_NAME; $optionContainerName = CustomOptions::CONTAINER_OPTION; $commonOptionContainerName = CustomOptions::CONTAINER_COMMON_NAME; // Add fields to the option $optionFeaturesFields = $this->getOptionGtinFieldsConfig(); $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children'][$commonOptionContainerName]['children'] = array_replace_recursive( $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children'][$commonOptionContainerName]['children'], $optionFeaturesFields ); } /** * The custom option fields config * * @return array */ protected function getOptionGtinFieldsConfig() { $fields['gtin'] = $this->getGtinFieldConfig(); return $fields; } /** * Get gtin field config * * @return array */ protected function getGtinFieldConfig() { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('GTIN'), 'componentType' => Field::NAME, 'formElement' => Input::NAME, 'dataType' => Number::NAME, 'dataScope' => 'gtin', 'sortOrder' => 65 ], ], ], ]; } /** * Check is current modifier for the product only * * @return bool */ public function isProductScopeOnly() { return false; } /** * Get sort order of modifier to load modifiers in the right order * * @return int */ public function getSortOrder() { return 32; } }

ตอนนี้ ให้ลองติดตั้งส่วนขยายและตรวจสอบว่าทุกอย่างปรากฏขึ้น:

• โมดูล php bin/magento: เปิดใช้งาน VendorName_OptionGtin
• php bin/การติดตั้งวีโอไอพี:อัพเกรด
• php bin/magento cache:flush

เพิ่มฟิลด์ใหม่ของเราเรียบร้อยแล้ว:

ขั้นตอนที่ #4 แสดงฟิลด์ของเราในหน้าผลิตภัณฑ์ Front-End

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

โมดูล MageWorx_OptionBase ของเราใช้วิธี getExtendedOptionsConfig() แล้ว มันรวบรวมและแสดงแอตทริบิวต์ที่กำหนดเองทั้งหมดในบล็อกที่ส่วนหน้า เปิด app/code/MageWorx/OptionBase/Block/Product/View/Options.php เพื่อดูว่ามีการใช้งานอย่างไร

มาเริ่มกันด้วยการสร้างแบบจำลองที่มีแอตทริบิวต์ของเรา:

app/code/VendorName/OptionGtin/Model/Attriburte/Option/Gtin.php

 <?php namespace VendorName\OptionGtin\Model\Attribute\Option; use MageWorx\OptionBase\Model\Product\Option\AbstractAttribute; class Gtin extends AbstractAttribute { /** * @return string */ public function getName() { return 'gtin'; } }

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

app/code/VendorName/OptionGtin/etc/di.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- Data --> <type name="MageWorx\OptionBase\Model\Product\Option\Attributes"> <arguments> <argument name="data" xsi:type="array"> <item name="gtin" xsi:type="object">VendorName\OptionGtin\Model\Attribute\Option\Gtin</item> </argument> </arguments> </type> </config>

กล่าวอีกนัยหนึ่ง โดยการเปิด MageWorx\OptionBase\Model\Product\Option\Attributes คุณจะเห็นว่ามันรวบรวมวัตถุแอตทริบิวต์ทั้งหมดไปยังชุดข้อมูลที่ใช้ร่วมกัน

ในการแสดงข้อมูลของแอตทริบิวต์ "GTIN" ใหม่ เราได้ตัดสินใจใช้ firstrun() จาก app/code/MageWorx/OptionFeatures/view/base/web/js/catalog/product/features.js มีการใช้งานที่จำเป็นทั้งหมดซึ่งเหมาะกับตัวอย่างของเราที่สุดแล้ว เพื่อหลีกเลี่ยงการเขียนทับทั้งไฟล์ เราจะใช้กลไก “JavaScript mixins” ซึ่งจะช่วยให้เราเปลี่ยนฟังก์ชันที่จำเป็นเท่านั้น

สร้างไฟล์ต่อไปนี้และกำหนดมิกซ์อินของเราที่นั่น: app/code/VendorName/OptionGtin/view/frontend/requirejs-config.js

 var config = { config: { mixins: { 'MageWorx_OptionFeatures/js/catalog/product/features': { 'VendorName_OptionGtin/js/catalog/product/features-gtin-mixin' : true } } } };

ที่นี่ MageWorx_OptionFeatures/js/catalog/product/features เป็นรูทของไฟล์ของเรา ซึ่งวิธีที่เราต้องเขียนใหม่ VendorName_OptionGtin/js/catalog/product/features-gtin-mixin เป็นไฟล์ที่เราจะเขียนวิธีการใหม่

มาสร้างกันเถอะ: app/code/VendorName/OptionGtin/view/frontend/web/js/catalog/product/features-gtin-mixin.js

 define([ 'jquery', 'jquery/ui', 'mage/utils/wrapper' ], function ($, wrapper) { 'use strict'; return function (widget) { $.widget('mageworx.optionFeatures', widget, { /** * Triggers one time at first run (from base.js) * @param optionConfig * @param productConfig * @param base * @param self */ firstRun: function firstRun(optionConfig, productConfig, base, self) { //shareable link $('#mageworx_shareable_hint_icon').qtip({ content: { text: this.options.shareable_link_hint_text }, style: { classes: 'qtip-light' }, position: { target: false } }); $('#mageworx_shareable_link').on('click', function () { try { self.copyTextToClipboard(self.getShareableLink(base)); $('.mageworx-shareable-link-container').hide(); $('.mageworx-shareable-link-success-container').show(); setTimeout(function () { $('.mageworx-shareable-link-container').show(); $('.mageworx-shareable-link-success-container').hide(); }, 2000); } catch (error) { console.log('Something goes wrong. Unable to copy'); } }); setTimeout(function () { // Qty input $('.mageworx-option-qty').each(function () { $(this).on('change', function () { var optionInput = $("[data-selector='" + $(this).attr('data-parent-selector') + "']"); optionInput.trigger('change'); }); }); }, 500); // Option\Value Description & tooltip var extendedOptionsConfig = typeof base.options.extendedOptionsConfig != 'undefined' ? base.options.extendedOptionsConfig : {}; for (var option_id in optionConfig) { if (!optionConfig.hasOwnProperty(option_id)) { continue; } var description = extendedOptionsConfig[option_id]['description'], gtin = extendedOptionsConfig[option_id]['gtin'], gtinTitle = "Global Trade Item Number: ", $option = base.getOptionHtmlById(option_id); if (1 > $option.length) { console.log('Empty option container for option with id: ' + option_id); continue; } var $label = $option.find('label'); if(gtin != null && gtin.length > 0) { if ($label.length > 0) { $label .first() .after($('<p class="option-gtin-text"><span>' + gtinTitle + '</span>' + gtin + '</p>')); } else { $label = $option.find('span'); $label .first() .parent() .after($('<p class="option-gtin-text"><span>' + gtinTitle + '</span>' + gtin + '</p>')); } } if (this.options.option_description_enabled && !_.isEmpty(extendedOptionsConfig[option_id]['description'])) { if (this.options.option_description_mode == this.options.option_description_modes.tooltip) { var $element = $option.find('label span') .first(); if ($element.length == 0) { $element = $option.find('fieldset legend span') .first(); } $element.css('border-bottom', '1px dotted black'); $element.qtip({ content: { text: description }, style: { classes: 'qtip-light' }, position: { target: false } }); } else if (this.options.option_description_mode == this.options.option_description_modes.text) { if ($label.length > 0) { $label .first() .after($('<p class="option-description-text">' + description + '</p>')); } else { $label = $option.find('span'); $label .first() .parent() .after($('<p class="option-description-text">' + description + '</p>')); } } else { console.log('Unknown option mode'); } } if (this.options.value_description_enabled) { this._addValueDescription($option, optionConfig, extendedOptionsConfig); } } } }); return $.mageworx.optionFeatures; }; });

โดยทั่วไป เราสามารถเรียกใช้คำสั่งต่อไปนี้ได้ในขณะนี้:

• php bin/magento cache:flush
• php bin/magento setup:static-content:deploy (สำหรับโหมดการผลิตเท่านั้น)

และดูว่าเรามีอะไรบ้าง แต่ก่อนอื่น ให้เพิ่มสไตล์บางอย่างให้กับแอตทริบิวต์ใหม่ของเราและทำให้มันดูดีที่ส่วนหน้า

สร้างเลย์เอาต์และกำหนดไฟล์สไตล์ใหม่ของเราที่นั่น: app/code/VendorName/OptionGtin/view/frontend/layout/catalog_product_view.xml

 <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="VendorName_OptionGtin::css/gtin.css"/> </head> </page>

ได้เวลาสร้างไฟล์สไตล์: app/code/VendorName/OptionGtin/view/frontend/web/css/gtin.css

 .option-gtin-text span { color: #6cc308; font-weight: 700; }

ตอนนี้ ให้เรียกใช้คำสั่งที่อธิบายไว้ก่อนหน้านี้และตรวจสอบผลลัพธ์:

ขั้นตอนที่ #5 เพิ่มข้อมูลแอตทริบิวต์ของเราเพื่อรายละเอียดการสั่งซื้อในฐานข้อมูล

เมื่อลูกค้าทำการซื้อ ใบสั่งจะถูกสร้างขึ้น รายละเอียดเกี่ยวกับรายการที่เพิ่มจะรวมอยู่ในตาราง sales_order_item ตารางนี้มีฟิลด์ product_options ที่มีข้อมูลเกี่ยวกับพารามิเตอร์ที่เลือกของรายการที่เพิ่ม นั่นคือสิ่งที่เราควรเพิ่มข้อมูลแอตทริบิวต์ใหม่ของเรา

เมื่อสร้างคำสั่งซื้อ เหตุการณ์ sales_quote_address_collect_totals_before จะถูกทริกเกอร์ เราจะใช้มันเพื่อเพิ่มข้อมูลของเราในตัวเลือกผลิตภัณฑ์

มากำหนดเหตุการณ์ด้วยการสร้าง: app/code/VendorName/OptionGtin/etc/events.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="sales_quote_address_collect_totals_before"> <observer name="mageworx_optiongtin_add_gtin_to_order" instance="VendorName\OptionGtin\Observer\AddGtinToOrder" /> </event> </config>

จากนั้นสร้างผู้สังเกตการณ์ของเรา: app/code/VendorName/OptionGtin/Observer/AddGtinToOrder.php

 <?php namespace VendorName\OptionGtin\Observer; use Magento\Framework\Event\Observer; use Magento\Framework\Event\ObserverInterface; use Magento\Catalog\Model\ProductRepository as ProductRepository; use MageWorx\OptionBase\Helper\Data as BaseHelper; class AddGtinToOrder implements ObserverInterface { /** * @var BaseHelper */ protected $baseHelper; protected $productRepository; /** * AddGtinToOrder constructor. * @param BaseHelper $baseHelper * @param ProductRepository $productRepository */ public function __construct( BaseHelper $baseHelper, ProductRepository $productRepository ) { $this->baseHelper = $baseHelper; $this->productRepository = $productRepository; } /** * Add product to quote action * Processing: gtin * * @param Observer $observer * @return $this */ public function execute(Observer $observer) { $quoteItems = $observer->getQuote()->getAllItems(); /** @var \Magento\Quote\Model\Quote\Item $quoteItem */ foreach ($quoteItems as $quoteItem) { $buyRequest = $quoteItem->getBuyRequest(); $optionIds = array_keys($buyRequest->getOptions()); $productOptions = $this->productRepository->getById($buyRequest->getProduct())->getOptions(); $quoteItemOptionGtins = []; $optionGtins = []; foreach ($productOptions as $option) { if ($option->getGtin()) { $quoteItemOptionGtins[$option->getOptionId()] = $option->getGtin(); } } foreach ($optionIds as $optionId) { $optionGtins[$optionId] = $optionId; } $optionGtins = array_intersect_key($quoteItemOptionGtins, $optionGtins); $infoBuyRequest = $quoteItem->getOptionByCode('info_buyRequest'); $buyRequest->setData('gtin', $optionGtins); $infoBuyRequest->setValue($this->baseHelper->encodeBuyRequestValue($buyRequest->getData())); $quoteItem->addOption($infoBuyRequest); } } }

ด้วยความช่วยเหลือของผู้สังเกตการณ์ เราได้รับรายการของรายการทั้งหมดตามลำดับและเพิ่มข้อมูลของแอตทริบิวต์ “GTIN” ของเราไปยังสิ่งที่เรียกว่า $infoBuyRequest

หากต้องการตรวจสอบว่าได้ดำเนินการทุกอย่างอย่างถูกต้องแล้ว ให้สร้างคำสั่งซื้อด้วยผลิตภัณฑ์ ซึ่งตัวเลือกมีข้อมูล "GTIN" คุณสามารถตรวจสอบว่ามีการเพิ่มข้อมูลใน sales_order_item table -> ฟิลด์ product_options :

ขั้นตอนที่ #6 แสดงข้อมูลบนหน้าคำสั่งซื้อในแผงการดูแลระบบ

มีหลายวิธีในการแสดงข้อมูลที่จำเป็นในเทมเพลตที่พร้อมใช้งาน เช่น การใช้ “js” เราทำงานกับ "js" ในบทความนี้ มาทำงานกับเทมเพลตเพื่อการเปลี่ยนแปลงและลองเขียนใหม่!

เปลี่ยน app/code/VendorName/OptionGtin/etc/adminhtml/di.xml ที่สร้างไว้ก่อนหน้านี้โดยเพิ่มปลั๊กอินที่นั่น:

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="mageworx-option-gtin" xsi:type="array"> <item name="class" xsi:type="string">VendorName\OptionGtin\Ui\DataProvider\Product\Form\Modifier\OptionGtin</item> <item name="sortOrder" xsi:type="number">72</item> </item> </argument> </arguments> </virtualType> <!-- Plugins--> <type name="Magento\Sales\Block\Adminhtml\Items\Column\DefaultColumn"> <plugin name="mageworx-optiongtin-add-default-column" type="VendorName\OptionGtin\Plugin\AddDefaultColumn" sortOrder="5" disabled="false" /> </type> </config>

สร้างปลั๊กอินเอง:

app/code/VendorName/OptionGtin/Plugin/AddDefaultColumn.php

 <?php namespace VendorName\OptionGtin\Plugin; class AddDefaultColumn { /** * @param \Magento\Sales\Block\Adminhtml\Items\Column\DefaultColumn $subject * @param $result * @return array */ public function afterGetOrderOptions(\Magento\Sales\Block\Adminhtml\Items\Column\DefaultColumn $subject, $result) { if ($options = $subject->getItem()->getProductOptions()) { if (isset($result)) { foreach ($result as &$option) { if (array_key_exists($option['option_id'], $options['info_buyRequest']['gtin'])) { $option['gtin'] = $options['info_buyRequest']['gtin'][$option['option_id']]; } } } } return $result; } }

ปลั๊กอินนี้เพิ่มข้อมูลเกี่ยวกับแอตทริบิวต์ใหม่ของเราสำหรับตัวเลือกคำสั่งซื้อซึ่งมีข้อมูลเหล่านี้อยู่

vendor/magento/module-sales/view/adminhtml/templates/items/column/name.phtml มีหน้าที่แสดงข้อมูลเกี่ยวกับตัวเลือกผลิตภัณฑ์ในหน้าคำสั่งซื้อในแผงการดูแลระบบ

มาเขียนใหม่เพื่อแสดง “GTIN” ของเรา เพื่อที่ เราจำเป็นต้องเขียนบล็อก "column_name" ใหม่ หรือสร้างเทมเพลตใหม่ สร้างเค้าโครงและเทมเพลต:

app/code/VendorName/OptionGtin/view/adminhtml/layout/sales_order_view.xml

 <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="column_name"> <action method="setTemplate"> <argument name="template" xsi:type="string">VendorName_OptionGtin::items/column/name.phtml</argument> </action> </referenceBlock> </body> </page>

app/code/VendorName/OptionGtin/view/adminhtml/templates/items/column/name.phtml

 <?php /* @var $block \Magento\Sales\Block\Adminhtml\Items\Column\Name */ ?> <?php if ($_item = $block->getItem()) : ?> <div class="product-title"> <?= $block->escapeHtml($_item->getName()) ?> </div> <div class="product-sku-block"> <span><?= $block->escapeHtml(__('SKU'))?>:</span> <?= /* @noEscape */ implode('<br />', $this->helper(\Magento\Catalog\Helper\Data::class)->splitSku($block->escapeHtml($block->getSku()))) ?> </div> <?php if ($block->getOrderOptions()) : ?> <dl class="item-options"> <?php foreach ($block->getOrderOptions() as $_option) : ?> <dt><?= $block->escapeHtml($_option['label']) ?>:</dt> <dd> <?php if (isset($_option['custom_view']) && $_option['custom_view']) : ?> <?= /* @noEscape */ $block->getCustomizedOptionValue($_option) ?> <?php else : ?> <?php $optionValue = $block->getFormattedOption($_option['value']); ?> <?php $dots = 'dots' . uniqid(); ?> <?php $ . uniqid(); ?> <?= $block->escapeHtml($optionValue['value'], ['a', 'br']) ?><?php if (isset($optionValue['remainder']) && $optionValue['remainder']) : ?> <span> ...</span> <span><?= $block->escapeHtml($optionValue['remainder'], ['a']) ?></span> <script> require(['prototype'], function() { $('<?= /* @noEscape */ $id; ?>').hide(); $('<?= /* @noEscape */ $id; ?>').up().observe('mouseover', function(){$('<?= /* @noEscape */ $id; ?>').show();}); $('<?= /* @noEscape */ $id; ?>').up().observe('mouseover', function(){$('<?= /* @noEscape */ $dots; ?>').hide();}); $('<?= /* @noEscape */ $id; ?>').up().observe('mouseout', function(){$('<?= /* @noEscape */ $id; ?>').hide();}); $('<?= /* @noEscape */ $id; ?>').up().observe('mouseout', function(){$('<?= /* @noEscape */ $dots; ?>').show();}); }); </script> <?php endif; ?> <?php endif; ?> </dd> <dt> <?php if (isset($_option['gtin']) && $_option['gtin']) : ?> <span>GTIN:</span> <?php endif; ?> </dt> <dd> <?php if (isset($_option['gtin']) && $_option['gtin']) : ?> <span> <?= $block->escapeHtml($_option['gtin']) ?></span> <?php endif; ?> </dd> <?php endforeach; ?> </dl> <?php endif; ?> <?= $block->escapeHtml($_item->getDescription()) ?> <?php endif; ?>

หากทุกอย่างดำเนินการอย่างถูกต้อง เคลียร์ และคอมไพล์แล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้:

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