So fügen Sie ein benutzerdefiniertes Feld für Optionswerte in den erweiterten Produktoptionen hinzu

Aus dem vorherigen Artikel haben Sie gelernt, wie Sie benutzerdefinierte Magento-Optionsfelder erstellen. Wir haben auch herausgefunden, wie die Felddaten sowohl im Produktseiten-Frontend als auch auf der Bestellseite im Admin-Panel angezeigt werden.

Was nun?

Lassen Sie uns lernen, wie Sie dasselbe benutzerdefinierte GTIN -Feld für die Optionswerte hinzufügen und es auf dem Front-End der Produktseite anzeigen.

Schritt 1. Erstellung eines neuen Moduls

Beginnen wir mit der Erstellung neuer Module, deren Prozess ausführlich in diesem Mageworx-Blogbeitrag behandelt wurde.

Also, ohne weiteres Umschweife, hier ist der Code, den wir brauchen werden:

1. komponist.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. Registrierung.php

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

Schritt 2. Neues Feld zur Datenbank hinzufügen

Es ist an der Zeit, das GTIN -Feld zu erstellen und es der entsprechenden Tabelle in der Datenbank hinzuzufügen.

Da wir ein Feld für Optionswerte hinzufügen, wird die Tabelle „catalog_product_option_type_value“ benötigt.

Lassen Sie uns die folgende Datei erstellen:

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

Schritt 3. Hinzufügen von Logik zur Arbeit mit dem Backend

Verwenden Sie den Pool-Modifier- Mechanismus, um Magento ein Feld zur benutzerdefinierten Option hinzuzufügen.

Lassen Sie uns die folgende Datei erstellen:

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

Hier:

Wir fügen unseren Modifikator dem allgemeinen Pool der Advanced Product Options-Erweiterung für Magento 2 hinzu―

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

„VendorName\OptionValueGtin\Ui\DataProvider\Product\Form\Modifier\OptionValueGtin“ ist die Modifikatorklasse.

Unter:

Sehen Sie sich den Code an, der es ermöglicht, unser Feld zum Formular "app/code/VendorName/OptionValueGtin/Ui/DataProvider/Product/Form/Modifier/OptionValueGtin.php" hinzuzufügen:

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

Installieren Sie nun die Erweiterung und überprüfen Sie, ob alles richtig gemacht wurde, dh

• php bin/magento module:enable VendorName_OptionValueGtin
• php bin/magento setup:upgrade
• php bin/magento cache:flush

Wie Sie sehen können, wird das neu hinzugefügte Feld jetzt angezeigt:

Schritt 4. Hinzufügen einer Einstellung zum Deaktivieren der GTIN-Feldanzeige für die Konfiguration der erweiterten Produktoptionen

Wie wäre es, wenn wir unseren Artikel ein wenig aufmischen?

Ich biete an, einige neue Funktionen hinzuzufügen – die Möglichkeit, die GTIN -Feldanzeige für Optionswerte im Frontend der Produktseite zu aktivieren/deaktivieren.

Sie müssen die Datei erstellen:

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

Der Einfachheit halber:

Wir werden die neue Registerkarte „Optionswert-GTIN“ zur Konfiguration unserer Erweiterung „Erweiterte Produktoptionen“ hinzufügen. Sie sollten auch in Ihrem Modul eine Registerkarte erstellen können.

Die neue Hilfsklasse sollte erstellt werden. Dort erhalten wir Daten über die Einstellung.

Lassen Sie uns also die folgende Klasse erstellen und ausfüllen:

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

Vergessen Sie nicht, die Änderungen zu speichern und den Cache zu löschen.

Die Einstellung sollte im Admin-Panel angezeigt werden.

Schritt #5. Anzeige des neuen Felds im Front-End der Produktseite

Erinnern Sie sich, worüber wir im vorherigen Artikel gesprochen haben?

Wir haben erwähnt, dass unser MageWorx_OptionBase-Modul bereits über die Methode „getExtendedOptionsConfig()“ verfügt, die alle unsere benutzerdefinierten Attribute am Frontend über Blöcke sammelt und anzeigt.

Um zu sehen, wie es implementiert wird, öffnen Sie die folgende Klasse:

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

Jetzt:

Erstellen Sie ein Modell mit unserem Attribut:

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

Fügen Sie das Attribut über die Abhängigkeitsinjektion dem allgemeinen Attributblock der Erweiterung „Erweiterte Produktoptionen“ hinzu und erstellen Sie die folgende Datei:

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

Jetzt:

Erstellen Sie unseren neuen Block und eine Vorlage dafür:

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

Hier haben wir Daten über die Einstellung von der Helper-Klasse erhalten.

Nächste:

Lassen Sie uns mit der Methode "getJsonData()" Daten für das Frontend rendern, indem wir die Vorlage verwenden, die wir gerade erstellen:

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

Wir haben den JavaScript-Mixins -Mechanismus verwendet, um die Werte für das GTIN -Feld anzuzeigen.

Was kommt als nächstes?

Lassen Sie uns einen anderen Ansatz wählen und ein js-Widget erstellen, das verwendet wird, um die neuen Daten auf der Produktseite anzuzeigen.

Definieren Sie das neue js:

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

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

Es ist höchste Zeit, das Widget selbst zu erstellen. Es enthält die gesamte Logik in der Arbeit mit dem neuen Attribut am Front-End.

Lassen Sie uns in der Beispieldatei die Anzeigelogik von GTIN für die Auswahloptionen und für die Radio- und Kontrollkästchenoptionen separat implementieren.

Dies werden zwei verschiedene Logiken sein, da sich die Logik in der Arbeit und dem Markup solcher Optionen voneinander unterscheidet:

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

Wie wäre es, wenn Sie einige Stile hinzufügen?

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

Es bleibt nur noch, unseren Block und die Stile zu verbinden.

Erstellen Sie dazu die folgende Datei:

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

Wir sind fast fertig.

Bevor wir die letzte Prüfung durchführen, vergessen Sie nicht, den Cache zu löschen und den statischen Inhalt erneut bereitzustellen:

• php bin/magento cache:flush
• php bin/magento static-content:bereitstellen

Und schlussendlich:

Melden Sie sich im Admin-Panel an.

Erstellen Sie ein Produkt mit benutzerdefinierten Optionen im Magento-Produkt.

In unserem Beispiel habe ich Dropdown, Farbfeld, Radio und Kontrollkästchen hinzugefügt.

Vergessen Sie nicht, unsere neuen GTIN- Felder für die entsprechenden Optionswerte auszufüllen.

Speichern Sie das Produkt.

Zeit zu sehen, wie das alles im Frontend aussieht:

Was denken Sie über das Ergebnis?

Bitte teilen Sie Ihr Feedback zum Artikel im Kommentarfeld unten mit. Wie einfach war es, Magento Felder zu benutzerdefinierten Optionen hinzuzufügen?