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

من المقالة السابقة ، تعلمت كيفية إنشاء حقول خيارات Magento المخصصة. لقد اكتشفنا أيضًا كيفية عرض بيانات الحقل على كل من الواجهة الأمامية لصفحة المنتج وصفحة الطلب في لوحة الإدارة.

ماذا الآن؟

دعنا نتعلم كيفية إضافة نفس حقل GTIN المخصص لقيم الخيار وعرضه على الواجهة الأمامية لصفحة المنتج.

الخطوة 1. إنشاء وحدة جديدة

لنبدأ بإنشاء وحدة جديدة ، وهي العملية التي تمت تغطيتها بالتفصيل في منشور مدونة Mageworx هذا.

وبالتالي ، دون مزيد من اللغط ، إليك الكود الذي سنحتاجه:

1. الملحن json

 { "name": "mageworx/module-optionvaluegtin", "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\\OptionValueGtin\\": "" } } }

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_OptionValueGtin" 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_OptionValueGtin', __DIR__ );

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

حان الوقت لإنشاء حقل GTIN وإضافته إلى الجدول المقابل في قاعدة البيانات.

نظرًا لأننا نضيف حقلاً لقيم الخيار ، فسيكون جدول "index_product_option_type_value" مطلوبًا.

لنقم بإنشاء الملف التالي:

"app / code / VendorName / OptionValueGtin / Setup / InstallSchema.php`

 <?php namespace VendorName\OptionValueGtin\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_type_value'), 'gtin', [ 'type' => Table::TYPE_TEXT, 'nullable' => true, 'default' => null, 'comment' => 'Gtin (added by MageWorx Option Value Gtin)', ] ); $setup->endSetup(); } }

الخطوه 3. إضافة منطق للعمل مع الخلفية

استخدم آلية معدل التجمع لـ Magento إضافة حقل إلى الخيار المخصص.

لنقم بإنشاء الملف التالي:

`app / code / VendorName / OptionValueGtin / 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-value-gtin" xsi:type="array"> <item name="class" xsi:type="string">MageWorx\OptionValueGtin\Ui\DataProvider\Product\Form\Modifier\OptionValueGtin</item> <item name="sortOrder" xsi:type="number">72</item> </item> </argument> </arguments> </virtualType> </config>

هنا:

نضيف المُعدِّل الخاص بنا إلى المجموعة العامة لملحق Advanced Product Options لـ Magento 2―

"MageWorx \ OptionBase \ Ui \ DataProvider \ Product \ Form \ Modifier \ Pool".

`اسم المورد \ OptionValueGtin \ Ui \ DataProvider \ Product \ Form \ Modifier \ OptionValueGtin` هو فئة المُعدِّل.

أقل:

راجع الكود الذي يسمح بإضافة حقلنا إلى نموذج `app / code / VendorName / OptionValueGtin / Ui / DataProvider / Product / Form / Modifier / OptionValueGtin.php`:

 <?php namespace VendorName\OptionValueGtin\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 OptionValueGtin 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; // Add fields to the values $valueFeaturesFields = $this->getValueFieldsConfig(); $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children']['values']['children']['record']['children'] = array_replace_recursive( $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children']['values']['children']['record']['children'], $valueFeaturesFields ); } /** * The custom option fields config * * @return array */ protected function getValueFieldsConfig() { $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' => 92 ], ], ], ]; } /** * 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_OptionValueGtin
• php bin / magento setup: ترقية
• php bin / magento cache: flush

كما ترى ، يتم عرض الحقل المضاف حديثًا الآن:

الخطوة رقم 4. إضافة الإعداد لتعطيل عرض حقل GTIN لتهيئة خيارات المنتج المتقدمة

ماذا عن خلط مقالتنا قليلاً؟

أعرض إضافة بعض الوظائف الجديدة - القدرة على تمكين / تعطيل عرض حقل GTIN لقيم الخيار في الواجهة الأمامية لصفحة المنتج.

سوف تحتاج إلى إنشاء الملف:

`app / code / VendorName / OptionValueGtin / etc / adminhtml / system.xml`

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <tab sortOrder="2001"> <label>MageWorx</label> </tab> <section translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label><![CDATA[Advanced Product Options]]></label> <tab>mageworx</tab> <resource>VendorName_OptionValueGtin::config_optionvaluegtin</resource> <group translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1"> <label><![CDATA[Option Value GTIN]]></label> <field translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1"> <label><![CDATA[Enable Option's Value 'GTIN']]></label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> </group> </section> </system> </config>

للبساطة:

سنضيف علامة التبويب GTIN الجديدة لقيمة الخيار إلى تهيئة ملحق خيارات المنتج المتقدمة. يجب أن تكون قادرًا على إنشاء علامة تبويب في وحدتك أيضًا.

يجب إنشاء فئة المساعد الجديدة. هناك ، سوف نحصل على بيانات حول الإعداد.

لذلك ، دعونا ننشئ ونملأ الفصل التالي:

`app / code / VendorName / OptionValueGtin / Helper / Data.php`

 <?php namespace VendorName\OptionValueGtin\Helper; use Magento\Framework\App\Helper\AbstractHelper; use Magento\Store\Model\ScopeInterface; use Magento\Framework\App\Helper\Context; class Data extends AbstractHelper { const XML_PATH_DEFAULT_OPTION_VALUE_GTIN = 'mageworx_apo/optionvaluegtin/use_optionvaluegtin'; /** * Additional product attributes for product_attributes table * * @var array */ protected $additionalProductAttributes; /** * @param Context $context */ public function __construct( Context $context ) { parent::__construct($context); } /** * Check if option value GTIN enabled * * @param int|null $storeId * @return string */ public function isOptionValueGtinEnabled($storeId = null) { return $this->scopeConfig->getValue( self::XML_PATH_DEFAULT_OPTION_VALUE_GTIN, ScopeInterface::SCOPE_STORE, $storeId ); } }

لا تنس حفظ التغييرات ومسح ذاكرة التخزين المؤقت.

يجب أن يتم عرض الإعداد في لوحة الإدارة.

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

تذكر ما تحدثنا عنه في المقال السابق؟

ذكرنا أن وحدة MageWorx_OptionBase الخاصة بنا لديها بالفعل طريقة `` getExtendedOptionsConfig () `التي تجمع وتعرض جميع سماتنا المخصصة على الواجهة الأمامية عبر الكتل.

لمعرفة كيفية تنفيذه ، افتح الفصل الدراسي التالي:

`app / code / MageWorx / OptionBase / Block / Product / View / Options.php`

حاليا:

قم بإنشاء نموذج بالسمة الخاصة بنا:

`app / code / VendorName / OptionValueGtin / Model / Attribute / OptionValue / Gtin.php`

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

من خلال إدخال التبعية ، أضف السمة إلى مجموعة السمات العامة لملحق Advanced Product Options وأنشئ الملف التالي:

`app / code / VendorName / OptionValueGtin / 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\Value\Attributes"> <arguments> <argument name="data" xsi:type="array"> <item name="gtin" xsi:type="object">VendorName\OptionValueGtin\Model\Attribute\OptionValue\Gtin</item> </argument> </arguments> </type> </config>

حاليا:

قم بإنشاء الكتلة الجديدة الخاصة بنا ونموذج لها:

`app / code / VendorName / OptionValueGtin / Block / ValueGtin.php`

 <?php namespace MageWorx\OptionValueGtin\Block; use Magento\Framework\Json\EncoderInterface; use Magento\Framework\View\Element\Template; use Magento\Framework\View\Element\Template\Context; use MageWorx\OptionValueGtin\Helper\Data as Helper; class ValueGtin extends Template { /** * @var EncoderInterface */ protected $jsonEncoder; /** * @var Helper */ protected $helper; /** * @param Context $context * @param EncoderInterface $jsonEncoder * @param Helper $helper * @param array $data */ public function __construct( Context $context, EncoderInterface $jsonEncoder, Helper $helper, array $data = [] ) { parent::__construct( $context, $data ); $this->jsonEncoder = $jsonEncoder; $this->helper = $helper; } /** * @return string */ public function getJsonData() { $data = [ 'isOptionValueGtinEnabled' => $this->helper->isOptionValueGtinEnabled($this->_storeManager->getStore()) ]; return $this->jsonEncoder->encode($data); } }

هنا ، حصلنا على بيانات حول الإعداد من فئة المساعد.

التالي:

باستخدام طريقة `` getJsonData () `، دعنا نعرض البيانات إلى الواجهة الأمامية باستخدام القالب الذي نحن على وشك إنشائه:

`app / code / VendorName / OptionValueGtin / view / frontend / قوالب / config.phtml`

 <?php /** @var \VendorName\OptionValueGtin\Block\ValueGtin $block */ ?> <script> require([ 'jquery', 'optionValueGtin', 'uiRegistry' ], function ($, optionValueGtin, registry) { var optionBase = registry.get('mageworxOptionBase'); if (optionBase) { optionBase.addUpdater(7, optionValueGtin(<?= /* @noEscape */ $block->getJsonData() ?>)); } else { var updaters = registry.get('mageworxOptionUpdaters'); if (!updaters) { updaters = {}; } updaters[7] = optionValueGtin(<?= /* @noEscape */ $block->getJsonData() ?>); registry.set('mageworxOptionUpdaters', updaters); } }); </script>

استخدمنا آلية خلط جافا سكريبت لعرض قيم حقل GTIN .

ماذا بعد؟

لنأخذ نهجًا مختلفًا وننشئ عنصر واجهة مستخدم js ، والذي سيتم استخدامه لعرض البيانات الجديدة على صفحة المنتج.

حدد js الجديد:

`app / code / VendorName / OptionValueGtin / view / frontend / needjs-config.js`

 var config = { map: { '*': { optionValueGtin: 'VendorName_OptionValueGtin/js/option-value-gtin' } } };

حان الوقت لإنشاء الأداة نفسها. سيحتوي على كل المنطق في العمل مع السمة الجديدة في الواجهة الأمامية.

في ملف المثال ، دعنا ننفذ منطق عرض GTIN لخيارات التحديد ولخيارات الراديو وخيارات مربع الاختيار بشكل منفصل.

سيكون هذان منطقان مختلفان حيث يختلف المنطق في العمل وترميز هذه الخيارات عن بعضها البعض:

`app / code / VendorName / OptionValueGtin / view / frontend / web / js / option-value-gtin.js`

 define([ 'jquery', 'Magento_Catalog/js/price-utils', 'underscore', 'jquery/ui' ], function ($, utils, _) { 'use strict'; $.widget('mageworx.optionValueGtin', { options: { optionConfig: {} }, /** * * @param optionConfig * @param productConfig * @param base * @param self */ firstRun: function firstRun(optionConfig, productConfig, base, self) { if (parseFloat(this.options.isOptionValueGtinEnabled)) { var extendedOptionsConfig = typeof base.options.extendedOptionsConfig != 'undefined' ? base.options.extendedOptionsConfig : {}; for (var option_id in optionConfig) { if (!optionConfig.hasOwnProperty(option_id)) { continue; } var $option = base.getOptionHtmlById(option_id); this._addValueGtin($option, optionConfig, extendedOptionsConfig); } } }, /** * Add description to the values * @param $option * @param optionConfig * @param extendedOptionsConfig * @private */ _addValueGtin: function _addValueGtin($option, optionConfig, extendedOptionsConfig) { var self = this, $options = $option.find('.product-custom-option'); //selectable options $options.filter('select').each(function (index, element) { var $element = $(element), optionId = utils.findOptionId($element), value = extendedOptionsConfig[optionId]['values']; if ($element.attr('multiple') && !$element.hasClass('mageworx-swatch')) { return; } if (typeof value == 'undefined' || _.isEmpty(value)) { return; } var gtinTitle = 'GTIN: '; var $gtin = $('<div class="option-value-gtin"></div>', { style: 'display: none' }); var $label = $option.find('.control'); $element.parent().prepend($gtin); $element.on('change', function (e) { var valueId = $element.val(); if (!_.isUndefined(value[valueId]) && !_.isEmpty(value[valueId]['gtin']) ) { if ($label.length > 0) { $label .first() .after($gtin.text(gtinTitle + value[valueId]['gtin'])); } $gtin.show(); } else { $gtin.hide(); } }); if ($element.val()) { $element.trigger('change'); } }); $options.filter('input[type="radio"], input[type="checkbox"]').each(function (index, element) { var $element = $(element), optionId = utils.findOptionId($element), value = extendedOptionsConfig[optionId]['values']; if ($element.attr('multiple') && !$element.hasClass('mageworx-swatch')) { return; } if (typeof value == 'undefined' || _.isEmpty(value)) { return; } var gtinTitle = 'GTIN: '; var $gtin = $('<div class="option-value-gtin-redio-check"></div>'); var $label = $option.find('.control'); $element.parent().append($gtin); var valueId = $element.val(); if (!_.isUndefined(value[valueId]) && !_.isEmpty(value[valueId]['gtin'])) { $gtin.text(gtinTitle + value[valueId]['gtin']); } if ($element.val()) { $element.trigger('change'); } }); }, }); return $.mageworx.optionValueGtin; });

ماذا عن إضافة بعض الأنماط؟

`app / code / VendorName / OptionValueGtin / view / frontend / web / css / valueGtin.css`

 .option-value-gtin, .option-value-gtin-redio-check { color: #1da0e0; font-weight: 700; margin-top: 5px; } .option-value-gtin-redio-check { display: contents; }

يبقى فقط ربط الكتلة والأنماط.

لذلك ، قم بإنشاء الملف التالي:

"app / code / VendorName / OptionValueGtin / view / frontend / layout /atalog_product_view.xml`

 <?xml version="1.0"?> <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="VendorName_OptionValueGtin::css/valueGtin.css"/> </head> <body> <referenceBlock name="product.info.options.wrapper"> <container name="vendorname.option.value.gtin.container" after="product.info.options"> <block class="VendorName\OptionValueGtin\Block\ValueGtin" name="vendorname.option.value.gtin" template="VendorName_OptionValueGtin::config.phtml"/> </container> </referenceBlock> </body> </page>

نحن على وشك الانتهاء.

قبل إجراء الفحص النهائي ، لا تنس مسح ذاكرة التخزين المؤقت ونشر المحتوى الثابت مرة أخرى:

• php bin / magento cache: flush
• php bin / magento - محتوى ثابت: نشر

وأخيرًا:

قم بتسجيل الدخول إلى لوحة الإدارة.

قم بإنشاء منتج بخيارات مخصصة في منتج Magento.

في مثالنا ، أضفت قائمة منسدلة وحامل وراديو ومربع اختيار.

لا تنسَ ملء حقول GTIN الجديدة لقيم الخيار المقابلة.

احفظ المنتج.

حان الوقت لنرى كيف يبدو كل شيء في الواجهة الأمامية:

ما رأيك في النتيجة؟

يرجى مشاركة ملاحظاتك حول المقالة في حقل التعليقات أدناه. ما مدى سهولة إضافة Magento حقل إلى الخيارات المخصصة؟