Gelişmiş Ürün Seçeneklerinde Seçenek Değerleri için Özel Alan Nasıl Eklenir

Önceki makaleden Magento özel seçenek alanlarının nasıl oluşturulacağını öğrendiniz. Ayrıca hem ürün sayfası ön yüzünde hem de yönetici panelindeki sipariş sayfasında saha verilerinin nasıl görüntüleneceğini öğrendik.

Şimdi ne var?

Seçenek değerleri için aynı özel GTIN alanını nasıl ekleyeceğinizi ve ürün sayfasının ön ucunda nasıl görüntüleyeceğinizi öğrenelim.

Aşama 1. Yeni Modül Oluşturma

Bu Mageworx blog gönderisinde ayrıntılı olarak ele alınan yeni modül oluşturma ile başlayalım.

Neyse lafı fazla uzatmadan ihtiyacımız olan kod şu:

1. besteci.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. kayıt.php

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

Adım 2. Veritabanına Yeni Alan Ekleme

GTIN alanını oluşturmanın ve veritabanındaki ilgili tabloya eklemenin zamanı geldi.

Seçenek değerleri için bir alan eklerken, `catalog_product_option_type_value` tablosu gerekli olacaktır.

Aşağıdaki dosyayı oluşturalım:

`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(); } }

Aşama 3. Arka Uçla Çalışmak için Mantık Ekleme

Magento'yu özel seçeneğe alan eklemek için havuz değiştirici mekanizmasını kullanın.

Aşağıdaki dosyayı oluşturalım:

`app/code/SatıcıAdı/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>

Burada:

Değiştiricimizi Magento 2 için Gelişmiş Ürün Seçenekleri uzantısının genel havuzuna ekliyoruz―

`MageWorx\OptionBase\Ui\DataProvider\Ürün\Form\Değiştirici\Havuz`.

`VendorName\OptionValueGtin\Ui\DataProvider\Product\Form\Modifier\OptionValueGtin` değiştirici sınıftır.

Aşağıda:

Alanımızı "app/code/VendorName/OptionValueGtin/Ui/DataProvider/Product/Form/Modifier/OptionValueGtin.php" formuna eklemeye izin veren koda bakın:

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

Şimdi uzantıyı kurun ve her şeyin doğru yapıldığını kontrol edin, yani

• php bin/magento modülü:SatıcıAdı_SeçenekValueGtin'i etkinleştir
• php bin/magento kurulumu:yükseltme
• php bin/magento önbelleği:flush

Gördüğünüz gibi, yeni eklenen alan şimdi görüntüleniyor:

4. Adım. Gelişmiş Ürün Seçenekleri Yapılandırması için GTIN Alan Ekranını Devre Dışı Bırakmak İçin Ayar Ekleme

Yazımızı biraz karıştırmaya ne dersiniz?

Ürün sayfasının ön ucundaki seçenek değerleri için GTIN alanı gösterimini etkinleştirme/devre dışı bırakma yeteneği olan bazı yeni işlevler eklemeyi teklif ediyorum.

Dosyayı oluşturmanız gerekecek:

`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>

Basitlik için:

Gelişmiş Ürün Seçenekleri uzantımızın yapılandırmasına yeni Seçenek Değeri GTIN sekmesini ekleyeceğiz. Modülünüzde de bir sekme oluşturabilmelisiniz.

Yeni Helper Class oluşturulmalıdır. Orada, ayar hakkında veri alacağız.

Öyleyse, aşağıdaki sınıfı oluşturalım ve dolduralım:

`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 ); } }

Değişiklikleri kaydetmeyi ve önbelleği temizlemeyi unutmayın.

Ayar, yönetici panelinde görüntülenmelidir.

Adım 5. Ürün Sayfası Ön Uçta Yeni Alanı Görüntüleme

Bir önceki makalede ne hakkında konuştuğumuzu hatırlıyor musunuz?

MageWorx_OptionBase modülümüzün, tüm özel özniteliklerimizi bloklar aracılığıyla ön uçta toplayan ve görüntüleyen `getExtendedOptionsConfig()` yöntemine zaten sahip olduğundan bahsetmiştik.

Nasıl uygulandığını görmek için aşağıdaki sınıfı açın:

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

Şimdi:

Özelliğimizle bir model oluşturun:

'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'; } }

Bağımlılık enjeksiyonu aracılığıyla, özelliği Gelişmiş Ürün Seçenekleri uzantısının genel nitelikler bloğuna ekleyin ve aşağıdaki dosyayı oluşturun:

`app/code/SatıcıAdı/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>

Şimdi:

Yeni bloğumuzu ve bunun için bir şablon oluşturun:

`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); } }

Burada, Helper Class'tan ayar hakkında veri elde ettik.

Sonraki:

`getJsonData()` yöntemini kullanarak, oluşturmak üzere olduğumuz şablonu kullanarak verileri ön uca aktaralım:

`app/code/VendorName/OptionValueGtin/view/frontend/templates/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 alanının değerlerini görüntülemek için JavaScript mixins mekanizmasını kullandık.

Sıradaki ne?

Farklı bir yaklaşım benimseyelim ve yeni verileri ürün sayfasında görüntülemek için kullanılacak bir js widget'ı oluşturalım.

Yeni js'yi tanımlayın:

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

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

Widget'ın kendisini oluşturmanın tam zamanı. Ön uçtaki yeni öznitelik ile çalışmadaki tüm mantığı içerecektir.

Örnek dosyada, seçim seçenekleri ve radyo ve onay kutusu seçenekleri için ayrı ayrı GTIN görüntüleme mantığını uygulayalım.

Çalışmadaki mantık ve bu tür seçeneklerin işaretlemesi birbirinden farklı olduğu için bunlar iki farklı mantık olacaktır:

"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; });

Biraz stil eklemeye ne dersiniz?

`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; }

Sadece bloğumuzu ve stilleri bağlamak için kalır.

Bunun için aşağıdaki dosyayı oluşturun:

`app/code/VendorName/OptionValueGtin/view/frontend/layout/catalog_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>

Neredeyse bitirdik.

Son denetimi çalıştırmadan önce önbelleği temizlemeyi ve statik içeriği yeniden dağıtmayı unutmayın:

• php bin/magento önbelleği:flush
• php bin/magento statik içerik: dağıtma

Ve sonunda:

Yönetici paneline giriş yapın.

Magento ürününde özel seçeneklere sahip bir ürün oluşturun.

Örneğimizde, açılır menü, renk örneği, radyo ve onay kutusu ekledim.

İlgili seçenek değerleri için yeni GTIN alanlarımızı doldurmayı unutmayın.

Ürünü kaydedin.

Her şeyin ön uçta nasıl göründüğünü görme zamanı:

Sonuç hakkında ne düşünüyorsun?

Lütfen makale hakkındaki görüşlerinizi aşağıdaki yorum alanında paylaşın. Magento'nun özel seçeneklere alan eklemesi ne kadar kolaydı?