Mageworx 高級產品選項定制

已發表: 2020-06-09

無論解決方案多麼強大,都可能需要進行定制才能實現特定於業務的目標或偏好。

根據我們的支持團隊收到的關於能夠從 Magento 2 高級產品選項擴展中的模態窗口中獲取權重類型字段的請求,我們很高興分享有關輕鬆實現該目標的方法的快速操作指南。 請繼續閱讀以獲取易於遵循的指南。

目錄

  • 高級產品選項定制分步指南
    • 步驟1。 新模塊創建
    • 第2步。 類複製
    • 步驟#3。 類修改
    • 第4步。 覆蓋類
    • 步驟#5。 新模塊安裝
  • 底線

高級產品選項定制分步指南

這是開箱即用的高級產品選項擴展中的重量重量類型字段的外觀:

MageWorx 高級產品選項定制 | MageWorx 博客

要在模式窗口之外顯示這些字段,您需要執行以下五個簡單步驟:

步驟1。 新模塊創建

從創建一個新模塊開始: VendorName_OptionCustomFieldWeight

為了那個原因,

  1. 創建app/code/VendorName/OptionCustomFieldWeight目錄,
  2. 生成並填寫三個通常用於註冊模塊的標准文件,即composer.jsonetc/module.xmlregistration.php

1) composer.json

 "name": "vendorname/module-optioncustomfieldweight", "description": "N/A", "require": { "magento/framework" : ">=101.0.0 <103", "mageworx/module-optionfeatures" : ">=2.16.1" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "VendorName\\OptionCustomFieldWeight\\": "" } } }

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_OptionCustomFieldWeight" setup_version="2.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="MageWorx_OptionBase"/> <module name="MageWorx_OptionFeatures"/> </sequence> </module> </config>

3) registration.php

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

第2步。 類複製

接下來,您需要找到並複制以下類: /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php  /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php

步驟#3。 類修改

現在,讓我們修改複製的類。 為此,您需要:

a) 將我們類的namespace更改為VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;

並添加我們稍後需要的類。 這些類是

use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;

use Magento\Ui\Component\Form\Element\Input;

如果一切都正確完成,這應該如下所示:

 …. namespace VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier; use MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\ModifierInterface; use MageWorx\OptionFeatures\Helper\Data as Helper; use Magento\Ui\Component\Form\Element\Hidden; use Magento\Ui\Component\Modal; use Magento\Framework\UrlInterface; use Magento\Framework\App\Request\Http; use MageWorx\OptionFeatures\Model\Config\Source\ShareableLinkMode as SourceConfig; use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight; use Magento\Ui\Component\Form\Element\Input; class Features extends AbstractModifier implements ModifierInterface { ….

b) 將MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight類對象添加到我們的構造函數中:

 …. /** * @var ProductOptionsWeight */ protected $productOptionsWeight; /** * @param ArrayManager $arrayManager * @param StoreManagerInterface $storeManager * @param LocatorInterface $locator * @param Helper $helper * @param Http $request * @param UrlInterface $urlBuilder * @param SourceConfig $sourceConfig * @param ProductOptionsWeight $productOptionsWeight */ public function __construct( ArrayManager $arrayManager, StoreManagerInterface $storeManager, LocatorInterface $locator, Helper $helper, Http $request, SourceConfig $sourceConfig, UrlInterface $urlBuilder, ProductOptionsWeight $productOptionsWeight ) { $this->arrayManager = $arrayManager; $this->storeManager = $storeManager; $this->locator = $locator; $this->helper = $helper; $this->request = $request; $this->sourceConfig = $sourceConfig; $this->urlBuilder = $urlBuilder; $this->productOptionsWeight = $productOptionsWeight; } …..

c) 找到getValueFeaturesFieldsConfig()方法:

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); return $fields; }

並將getWeightConfig()getWeightTypeConfig()方法添加到具有自定義選項值的自定義字段的數組中。 這些方法將實現相應的配置。 現在, getValueFeaturesFieldsConfig()方法必須如下所示:

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); if ($this->helper->isWeightEnabled()) { $fields[Helper::KEY_WEIGHT] = $this->getWeightConfig(34); $fields[Helper::KEY_WEIGHT_TYPE] = $this->getWeightTypeConfig(35); } return $fields; }

d) 在getValueFeaturesFieldsConfig()方法之後,讓我們實現getWeightConfig() 字段配置的getWeightTypeConfig()方法:

 /** * Get weight unit name * * @return mixed */ protected function getWeightUnit() { try { $unit = $this->locator->getStore()->getConfig('general/locale/weight_unit'); } catch (\Exception $e) { $unit = $this->storeManager->getStore()->getConfig('general/locale/weight_unit'); } return $unit; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight'), 'componentType' => Field::NAME, 'component' => 'Magento_Catalog/js/components/custom-options-component', 'template' => 'Magento_Catalog/form/field', 'formElement' => Input::NAME, 'dataScope' => Helper::KEY_WEIGHT, 'dataType' => Number::NAME, 'validation' => [ 'validate-number' => true, 'validate-zero-or-greater' => true, ], 'sortOrder' => $sortOrder, 'additionalClasses' => 'admin__field-small', 'addbefore' => $this->getWeightUnit(), 'addbeforePool' => $this->productOptionsWeight ->prefixesToOptionArray($this->getWeightUnit()), 'imports' => [ 'disabled' => '!${$.provider}:' . self::DATA_SCOPE_PRODUCT . '.product_has_weight:value', ], ], ], ], ]; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightTypeConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight Type'), 'component' => 'MageWorx_OptionFeatures/js/component/custom-options-weight-type', 'componentType' => Field::NAME, 'formElement' => Select::NAME, 'dataScope' => Helper::KEY_WEIGHT_TYPE, 'dataType' => Text::NAME, 'sortOrder' => $sortOrder, 'options' => $this->productOptionsWeight->toOptionArray(), 'imports' => [ 'weightIndex' => Helper::KEY_WEIGHT, ], ], ], ], ]; }

第4步。 覆蓋類

現在是我們的/app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php修改類開始工作的時候了,而不是原來的/app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php 。 為此,我們需要在依賴項配置文件中覆蓋它。 為此,讓我們創建/app/code/VendorName/OptionCustomFieldWeight/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"> <preference for="MageWorx\OptionFeatures\Ui\DataProvider\Product\Form\Modifier\Features" type="VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier\Features"/> </config>

步驟#5。 新模塊安裝

我們就快到了! 剩下的就是安裝我們的新模塊。

首先,運行以下命令:

php bin/magento module:status

您將看到啟用和禁用模塊的列表。 我們的新VendorName_OptionCustomFieldWight模塊應該位於禁用的模塊中。

讓我們啟用它:

php bin/magento module:enable VendorName_OptionCustomFieldWeight

更新數據庫後,

php bin/magento setup:upgrade

您將看到以下結果:

MageWorx 高級產品選項定制 | MageWorx 博客

恭喜! 您已成功從模式窗口中刪除了重量重量類型字段。

底線

我們希望這個分步指南可以幫助您輕鬆自定義高級產品選項擴展,從而實現您的偏好。 如果您有任何問題或困難,請隨時在下面的評論框中發表評論。 否則,我們的支持團隊很樂意在[email protected]提供幫助! =)

使用 Mageworx 預訂現場演示