كيفية إضافة حقل مخصص إلى الخيارات في ملحق خيارات المنتج المتقدمة

من هذه المقالة ، ستتعلم كيفية إنشاء حقل "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. التسجيل. php

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

الخطوة 2. أضف حقلنا الجديد إلى قاعدة البيانات

بعد أن قمنا ببناء وحدة فارغة ، حان الوقت لإنشاء حقل "GTIN" الجديد وإضافته إلى قاعدة البيانات داخل الجدول المقابل. عندما نضيف حقلاً لقيم الخيار ، سنحتاج إلى جدول "index_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>

هنا ، دعنا نضيف المُعدِّل الخاص بنا إلى المجموعة المشتركة لملحق Advanced Product Options "MageWorx \ OptionBase \ Ui \ DataProvider \ Product \ Form \ Modifier \ Pool". "اسم البائع \ 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 module: قم بتمكين VendorName_OptionGtin
• php bin / magento setup: ترقية
• php bin / magento cache: flush

تم إضافة مجالنا الجديد بنجاح:

الخطوة رقم 4. اعرض حقلنا على الواجهة الأمامية لصفحة المنتج

يحتوي ملحق Mageworx Advanced Product Options بالفعل على كل شيء لعرضه والعمل مع السمات التي تضيفها الوحدة الخاصة بنا. كل ما نحتاج إليه هو إضافة السمة الجديدة إلى مجموعة البيانات المشتركة.

تستخدم وحدة 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: محتوى ثابت: نشر (فقط لوضع الإنتاج)

ونرى ما لدينا. لكن أولاً ، أضف بعض الأنماط إلى السمة الجديدة واجعلها تبدو جميلة في الواجهة الأمامية.

قم بإنشاء تخطيط وحدد ملف الأنماط الجديد الخاص بنا هناك: 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" الخاص بنا. لذلك ، نحتاج إلى إعادة كتابة كتلة "اسم_العمود" ، أو بالأحرى قالبها. قم بإنشاء تخطيط ونموذج:

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; ?>

إذا تم تنفيذ كل شيء بشكل صحيح ومسح وتجميع ، فسترى النتيجة التالية:

نأمل أن تجد هذه المقالة مفيدة. إذا واجهت أي صعوبات أو مشاكل ، فلا تتردد في إخبارنا في حقل التعليقات أدناه.