كيفية إزالة + تسجيل من عناوين الخيارات القابلة للتخصيص في Magento 2 برمجيًا؟

نشرت: 2020-10-22

يعد تخصيص خيارات المنتج أمرًا حيويًا لتلبية احتياجات العمل.

في هذه المقالة ، سنركز على كيفية تغيير عناوين الخيارات المحددة والنظر في مثالين.

في المثال الأول ،

سنركز على كيفية تغيير عناوين قيم الخيار المحدد من النوع "القابل للتحديد" بمساعدة ملحق Mageworx Advanced Product Options و "js".

في المثال الثاني ،

سنركز على كيفية تغيير عناوين الخيارات "غير القابلة للتحديد" بمساعدة "php".

إنشاء وحدة جديدة

تم وصف إنشاء وحدة جديدة بالتفصيل في منشور المدونة هذا.

وبالتالي ، دعونا لا نركز عليها اليوم وننتقل مباشرة إلى الكود. هذا هو الكود الذي سنحتاجه:

1.composer.json

 { "name": "mageworx/module-optionremoveplus", "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\\OptionRemovePlus\\": "" } } }

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_OptionRemovePlus" 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_OptionRemovePlus', __DIR__ );

مثال 1. تغيير عناوين أنواع الخيارات الأخرى

هنا ، سنغطي أنواع الإدخال مثل القائمة المنسدلة وزر الاختيار ومربع الاختيار والتحديد المتعدد .

دعنا نحذف علامة + من عناوين قيم الخيار المحدد. سنحقق ذلك بمساعدة ملحق خيارات المنتج المتقدمة.

من خارج الصندوق ، تحتوي "خيارات المنتج المتقدمة" على وظيفة للتعامل مع عناوين قيم الخيار المحدد في الواجهة الأمامية لصفحات المنتج. يتم تحقيقه بمساعدة "js" في

app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js

قبل أن نبدأ ، قم بإنشاء منتج اختبار يحتوي على جميع أنواع الخيارات القابلة للتحديد. يتم ذلك لمعرفة كيف تبدو قيم الخيارات هذه في الواجهة الأمامية افتراضيًا.

تخصيص خيارات المنتج في Magento 2 | مدونة Mageworx Magento

ماذا عن تغيير هذه العناوين؟

للقيام بذلك ، سنحتاج إلى إعادة كتابة وظيفتين من app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js

دعنا نستخدم آلية خلط جافا سكريبت المعروفة لتحقيق ذلك.

قم بإنشاء الملف التالي وحدد mixin الخاص بنا هناك:

app/code/VendorName/OptionRemovePlus/view/base/requirejs-config.js

 var config = { config: { mixins: { 'MageWorx_OptionBase/js/catalog/product/base': { 'VendorName_OptionRemovePlus/js/catalog/product/base-mixin' : true } } } };

الآن ، قم بإنشاء الملف التالي بالوظائف المعاد تعريفها التي نحتاجها:

app/code/VendorName/OptionRemovePlus/view/base/web/js/catalog/product/base-mixin.js

 define([ 'jquery', 'Magento_Catalog/js/price-utils', 'uiRegistry', 'underscore', 'mage/template', 'jquery/ui' ], function ($, utils, registry, _, mageTemplate) { 'use strict'; return function (widget) { $.widget('mageworx.optionBase', widget, { /** * Make changes to select options * @param options * @param opConfig */ _updateSelectOptions: function(options, opConfig) { var self = this; options.each(function (index, element) { var $element = $(element); if ($element.hasClass('datetime-picker') || $element.hasClass('text-input') || $element.hasClass('input-text') || $element.attr('type') == 'file' ) { return true; } var optionId = utils.findOptionId($element), optionConfig = opConfig[optionId]; $element.find('option').each(function (idx, option) { var $option = $(option), optionValue = $option.val(); if (!optionValue && optionValue !== 0) { return; } var title = optionConfig[optionValue] && optionConfig[optionValue].name, valuePrice = utils.formatPrice(optionConfig[optionValue].prices.finalPrice.amount), stockMessage = '', specialPriceDisplayNode = ''; if (optionConfig[optionValue]) { if (!_.isEmpty(optionConfig[optionValue].special_price_display_node)) { specialPriceDisplayNode = optionConfig[optionValue].special_price_display_node; } if (!_.isEmpty(optionConfig[optionValue].stockMessage)) { stockMessage = optionConfig[optionValue].stockMessage; } if (!_.isEmpty(optionConfig[optionValue].title)) { title = optionConfig[optionValue].title; } if (!_.isEmpty(optionConfig[optionValue].valuePrice)) { valuePrice = optionConfig[optionValue].valuePrice; } } if (specialPriceDisplayNode) { $option.text(title + ' ' + specialPriceDisplayNode + ' ' + stockMessage); } else if (stockMessage) { if (parseFloat(optionConfig[optionValue].prices.finalPrice.amount) > 0) { $option.text(title + ' +' + valuePrice + ' ' + stockMessage); } else { $option.text(title + stockMessage); } } $option.text(title + ' ' + valuePrice + ' ' + stockMessage); }); }); }, /** * Make changes to select options * @param options * @param opConfig */ _updateInputOptions: function(options, opConfig) { var self = this; options.each(function (index, element) { var $element = $(element); if ($element.hasClass('datetime-picker') || $element.hasClass('text-input') || $element.hasClass('input-text') || $element.attr('type') == 'file' ) { return true; } var optionId = utils.findOptionId($element), optionValue = $element.val(); if (!optionValue && optionValue !== 0) { return; } var optionConfig = opConfig[optionId], title = optionConfig[optionValue] && optionConfig[optionValue].name, valuePrice = utils.formatPrice(optionConfig[optionValue].prices.finalPrice.amount), stockMessage = '', specialPriceDisplayNode = ''; if (optionConfig[optionValue]) { if (!_.isEmpty(optionConfig[optionValue].special_price_display_node)) { specialPriceDisplayNode = optionConfig[optionValue].special_price_display_node; } if (!_.isEmpty(optionConfig[optionValue].stockMessage)) { stockMessage = optionConfig[optionValue].stockMessage; } if (!_.isEmpty(optionConfig[optionValue].title)) { title = optionConfig[optionValue].title; } if (!_.isEmpty(optionConfig[optionValue].valuePrice)) { valuePrice = optionConfig[optionValue].valuePrice; } } if (specialPriceDisplayNode) { $element.next('label').text(title + ' ' + specialPriceDisplayNode + ' ' + stockMessage); } else if (stockMessage) { if (parseFloat(optionConfig[optionValue].prices.finalPrice.amount) > 0) { $element.next('label').text(title + ' +' + valuePrice + ' ' + stockMessage); } else { $element.next('label').text(title + stockMessage); } } $element.next('label').text(title + ' ' + valuePrice + ' ' + stockMessage); }); }, }); return $.mageworx.optionBase; }; });

ها هي النتيجة:

المثال رقم 2. تغيير عناوين قيم الخيارات المحددة

هنا ، سنغطي أنواع الإدخال مثل الحقل والمنطقة والملف والتاريخ والوقت والتاريخ والوقت .

دعنا نحذف علامة + من عناوين قيم الخيار المحدد. سنحقق ذلك بمساعدة PHP ، نعيد كتابة الفئات التي تنفذ هذه الطريقة من نوع الخيار المطلوب.

الآن ، قم بإنشاء الملف التالي:

 <?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="Magento\Catalog\Block\Product\View\Options\Type\Text" type="VendorName\OptionRemovePlus\Block\Product\View\Options\Type\Text" /> <preference for="Magento\Catalog\Block\Product\View\Options\Type\Date" type="VendorName\OptionRemovePlus\Block\Product\View\Options\Type\Date" /> <preference for="Magento\Catalog\Block\Product\View\Options\Type\File" type="VendorName\OptionRemovePlus\Block\Product\View\Options\Type\File" /> </config>

حان الوقت لإنشاء فصولنا الدراسية وإعادة كتابة الطريقة:

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/Date.php

 <?php namespace VendorName\OptionRemovePlus\Block\Product\View\Options\Type; use Magento\Catalog\Pricing\Price\CustomOptionPriceInterface; /** * Product options text type block * * @api * @since 100.0.2 */ class Date extends \Magento\Catalog\Block\Product\View\Options\Type\Date { /** * Return formatted price * * @param array $value * @param bool $flag * @return string */ protected function _formatPrice($value, $flag = true) { if ($value['pricing_value'] == 0) { return ''; } $sign = ' '; if ($value['pricing_value'] < 0) { $sign = '-'; $value['pricing_value'] = 0 - $value['pricing_value']; } $priceStr = $sign; $customOptionPrice = $this->getProduct()->getPriceInfo()->getPrice('custom_option_price'); $context = [CustomOptionPriceInterface::CONFIGURATION_OPTION_FLAG => true]; $optionAmount = $customOptionPrice->getCustomAmount($value['pricing_value'], null, $context); $priceStr .= $this->getLayout()->getBlock('product.price.render.default')->renderAmount( $optionAmount, $customOptionPrice, $this->getProduct() ); if ($flag) { $priceStr = '<span class="price-notice">' . $priceStr . '</span>'; } return $priceStr; } }

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/File.php

 <?php namespace VendorName\OptionRemovePlus\Block\Product\View\Options\Type; use Magento\Catalog\Pricing\Price\CustomOptionPriceInterface; /** * Product options text type block * * @api * @since 100.0.2 */ class File extends \Magento\Catalog\Block\Product\View\Options\Type\File { /** * Return formatted price * * @param array $value * @param bool $flag * @return string */ protected function _formatPrice($value, $flag = true) { if ($value['pricing_value'] == 0) { return ''; } $sign = ' '; if ($value['pricing_value'] < 0) { $sign = '-'; $value['pricing_value'] = 0 - $value['pricing_value']; } $priceStr = $sign; $customOptionPrice = $this->getProduct()->getPriceInfo()->getPrice('custom_option_price'); $context = [CustomOptionPriceInterface::CONFIGURATION_OPTION_FLAG => true]; $optionAmount = $customOptionPrice->getCustomAmount($value['pricing_value'], null, $context); $priceStr .= $this->getLayout()->getBlock('product.price.render.default')->renderAmount( $optionAmount, $customOptionPrice, $this->getProduct() ); if ($flag) { $priceStr = '<span class="price-notice">' . $priceStr . '</span>'; } return $priceStr; } }

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/Text.php

 <?php namespace VendorName\OptionRemovePlus\Block\Product\View\Options\Type; use Magento\Catalog\Pricing\Price\CustomOptionPriceInterface; /** * Product options text type block * * @api * @since 100.0.2 */ class Text extends \Magento\Catalog\Block\Product\View\Options\AbstractOptions { /** * Return formatted price * * @param array $value * @param bool $flag * @return string */ protected function _formatPrice($value, $flag = true) { if ($value['pricing_value'] == 0) { return ''; } $sign = ' '; if ($value['pricing_value'] < 0) { $sign = '-'; $value['pricing_value'] = 0 - $value['pricing_value']; } $priceStr = $sign; $customOptionPrice = $this->getProduct()->getPriceInfo()->getPrice('custom_option_price'); $context = [CustomOptionPriceInterface::CONFIGURATION_OPTION_FLAG => true]; $optionAmount = $customOptionPrice->getCustomAmount($value['pricing_value'], null, $context); $priceStr .= $this->getLayout()->getBlock('product.price.render.default')->renderAmount( $optionAmount, $customOptionPrice, $this->getProduct() ); if ($flag) { $priceStr = '<span class="price-notice">' . $priceStr . '</span>'; } return $priceStr; } }

ها هي النتيجة:

ما هو بيت القصيد؟

توفر هذه المقالة جميع المعلومات المطلوبة لتغيير عناوين خيارات المنتج وقيم الخيار تمامًا.

إذا كان لديك أي أسئلة أو صعوبات ، فلا تتردد في ترك تعليق أدناه. سنكون مسرورين بمساعدتك!

احجز عرضًا توضيحيًا مباشرًا مع Mageworx