高度な製品オプションでオプション値のカスタム フィールドを追加する方法

前回の記事で、Magento カスタム オプション フィールドの作成方法を学習しました。 また、製品ページのフロントエンドと管理パネルの注文ページの両方にフィー​​ルド データを表示する方法もわかりました。

今は何ですか？

オプション値に同じカスタムGTINフィールドを追加して、製品ページのフロントエンドに表示する方法を学びましょう。

ステップ1。 新しいモジュールの作成

新しいモジュールの作成から始めましょう。このプロセスは、この Mageworx ブログ投稿で詳しく説明されています。

したがって、これ以上苦労することなく、必要なコードは次のとおりです。

1.composer.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フィールドを作成し、データベース内の対応するテーブルに追加します。

オプション値のフィールドを追加するため、`catalog_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>

ここ：

Magento 2 の Advanced Product Options 拡張機能の一般プールに修飾子を追加します—

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

`VendorName\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 モジュール: VendorName_OptionValueGtin を有効にします
• php bin/magento セットアップ:アップグレード
• php bin/magento キャッシュ:フラッシュ

ご覧のとおり、新しく追加されたフィールドが表示されます。

ステップ＃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>

簡単にするために：

Advanced Product Options 拡張機能の構成に、新しい [ Option Value 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/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>

JavaScript mixinsメカニズムを使用して、 GTINフィールドの値を表示しました。

次は何ですか？

別のアプローチを取り、製品ページに新しいデータを表示するために使用される js ウィジェットを作成してみましょう。

新しい js を定義します。

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

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

いよいよウィジェット自体を作成します。 フロントエンドの新しい属性を使用して、作業のすべてのロジックが含まれます。

サンプル ファイルでは、選択オプション、およびラジオとチェック ボックス オプションのGTINの表示ロジックを個別に実装してみましょう。

このようなオプションの作業とマークアップのロジックが互いに異なるため、これらは 2 つの異なるロジックになります。

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

ほぼ完成です。

最終チェックを実行する前に、キャッシュをクリアして静的コンテンツを再度デプロイすることを忘れないでください。

• php bin/magento キャッシュ:フラッシュ
• php bin/magento static-content:deploy

そして最後に：

管理パネルにログインします。

Magento 製品でカスタム オプションを使用して製品を作成します。

この例では、ドロップダウン、スウォッチ、ラジオ、チェック ボックスを追加しました。

対応するオプション値の新しいGTINフィールドに入力することを忘れないでください。

製品を保存します。

フロントエンドですべてがどのように見えるかを見てみましょう。

結果についてどう思いますか？

以下のコメント欄で、記事に関するご意見をお聞かせください。 Magento でフィールドをカスタム オプションに追加するのは簡単でしたか?