Jak dodać pole niestandardowe dla wartości opcji w zaawansowanych opcjach produktu

Z poprzedniego artykułu dowiedziałeś się, jak tworzyć niestandardowe pola opcji Magento. Dowiedzieliśmy się również, jak wyświetlać dane pola zarówno w interfejsie strony produktu, jak i stronie zamówienia w panelu administracyjnym.

Co teraz?

Dowiedzmy się, jak dodać to samo niestandardowe pole GTIN do wartości opcji i wyświetlić je w interfejsie strony produktu.

Krok 1. Tworzenie nowego modułu

Zacznijmy od tworzenia nowego modułu, którego proces został szczegółowo omówiony w tym wpisie na blogu Mageworx.

Tak więc, bez zbędnych ceregieli, oto kod, którego będziemy potrzebować:

1. kompozytor.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. rejestracja.php

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

Krok 2. Dodawanie nowego pola do bazy danych

Czas stworzyć pole GTIN i dodać je do odpowiedniej tabeli w bazie danych.

Ponieważ dodajemy pole na wartości opcji, wymagana będzie tabela `catalog_product_option_type_value`.

Stwórzmy następujący plik:

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

Krok 3. Dodawanie logiki do pracy z backendem

Użyj mechanizmu modyfikatora puli , aby Magento dodać pole do opcji niestandardowej.

Stwórzmy następujący plik:

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

Tutaj:

Dodajemy nasz modyfikator do ogólnej puli rozszerzenia Zaawansowane opcje produktu dla Magento 2―

`MageWorx\OptionBase\Ui\DataProvider\Produkt\Formularz\Modyfikator\Pula`.

`NazwaDostawcy\OptionValueGtin\Ui\DataProvider\Product\Form\Modifier\OptionValueGtin` to klasa modyfikatora.

Poniżej:

Zobacz kod, który umożliwia dodanie naszego pola do formularza `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; } }

Teraz zainstaluj rozszerzenie i sprawdź, czy wszystko jest zrobione poprawnie, tj.

• php bin/magento module:enable VendorName_OptionValueGtin
• Konfiguracja bin/magento php: aktualizacja
• php bin/magento cache: opróżnianie

Jak widać, nowo dodane pole zostanie teraz wyświetlone:

Krok 4. Dodawanie ustawienia wyłączającego wyświetlanie pola GTIN dla konfiguracji zaawansowanych opcji produktu

Co powiesz na trochę pomieszanie naszego artykułu?

Proponuję dodać nową funkcjonalność – możliwość włączenia/wyłączenia wyświetlania pola GTIN dla wartości opcji w interfejsie strony produktu.

Będziesz musiał utworzyć plik:

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

Dla prostoty:

Dodamy nową kartę GTIN wartości opcji do konfiguracji naszego rozszerzenia Zaawansowane opcje produktu. Powinieneś również być w stanie utworzyć zakładkę w swoim module.

Powinna zostać utworzona nowa klasa pomocnicza . Tam uzyskamy dane o ustawieniu.

Stwórzmy więc i wypełnijmy następującą klasę:

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

Nie zapomnij zapisać zmian i wyczyścić pamięć podręczną.

Ustawienie powinno zostać wyświetlone w panelu administracyjnym.

Krok #5. Wyświetlanie nowego pola na interfejsie strony produktu

Pamiętasz, o czym rozmawialiśmy w poprzednim artykule?

Wspomnieliśmy, że nasz moduł MageWorx_OptionBase ma już metodę `getExtendedOptionsConfig()`, która zbiera i wyświetla wszystkie nasze niestandardowe atrybuty na interfejsie użytkownika za pomocą bloków.

Aby zobaczyć, jak zostanie zaimplementowany, otwórz następującą klasę:

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

Ale już:

Stwórz model z naszym atrybutem:

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

Poprzez wstrzykiwanie zależności dodaj atrybut do bloku atrybutów ogólnych rozszerzenia Zaawansowane opcje produktu i utwórz następujący plik:

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

Ale już:

Utwórz nasz nowy blok i szablon dla niego:

`app/kod/NazwaDostawcy/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); } }

Tutaj uzyskaliśmy dane o ustawieniu z klasy Helper.

Następny:

Korzystając z metody `getJsonData()`, wyrenderujmy dane do front-endu przy użyciu szablonu, który zamierzamy utworzyć:

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

Wykorzystaliśmy mechanizm mixinów JavaScript , aby wyświetlić wartości dla pola GTIN .

Co dalej?

Przyjmijmy inne podejście i stwórzmy widget js, który posłuży do wyświetlania nowych danych na stronie produktu.

Zdefiniuj nowy js:

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

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

Najwyższy czas stworzyć sam widżet. Będzie zawierać całą logikę pracy z nowym atrybutem na interfejsie.

W przykładowym pliku zaimplementujmy logikę wyświetlania numeru GTIN dla opcji wyboru oraz osobno dla opcji radia i pola wyboru.

Będą to dwie różne logiki, ponieważ logika działania i znaczniki takich opcji różnią się od siebie:

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

Co powiesz na dodanie kilku stylów?

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

Pozostaje tylko połączyć nasz blok ze stylami.

W tym celu utwórz następujący plik:

`app/kod/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>

Już prawie skończyliśmy.

Zanim przeprowadzimy ostateczną kontrolę, nie zapomnij wyczyścić pamięci podręcznej i ponownie wdrożyć zawartość statyczną:

• php bin/magento cache: opróżnianie
• php bin/magento static-content:deploy

I w końcu:

Zaloguj się do panelu administracyjnego.

Stwórz produkt z niestandardowymi opcjami w produkcie Magento.

W naszym przykładzie dodałem listę rozwijaną, próbkę, radio i pole wyboru.

Nie zapomnij wypełnić naszych nowych pól GTIN dla odpowiednich wartości opcji.

Zapisz produkt.

Czas zobaczyć, jak to wszystko wygląda na froncie:

Co myślisz o wyniku?

Podziel się swoją opinią na temat artykułu w polu komentarzy poniżej. Jak łatwo było Magento dodać pole do niestandardowych opcji?