Cum se elimină + semnă din titlurile opțiunilor personalizabile din Magento 2 în mod programatic?

Personalizarea opțiunilor de produs este vitală pentru a satisface nevoile afacerii.

În acest articol, ne vom concentra asupra modului de modificare a titlurilor opțiunilor selectate și vom lua în considerare două exemple.

În primul exemplu,

Ne vom concentra asupra modului de schimbare a titlurilor valorilor opțiunilor selectate de tip „selectabil” cu ajutorul extensiei Mageworx Advanced Product Options și „js”.

În al doilea exemplu,

Ne vom concentra asupra modului de schimbare a titlurilor opțiunilor „neselectabile” cu ajutorul „php”.

Crearea unui nou modul

Crearea de noi module a fost descrisă în detaliu în această postare de blog.

Astfel, să nu ne concentrăm astăzi și să trecem direct la cod. Iată codul de care vom avea nevoie:

1.compozitor.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. înregistrare.php

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

Exemplul #1. Modificarea titlurilor altor tipuri de opțiuni

Aici, vom acoperi astfel de tipuri de introducere, cum ar fi meniul drop-down, butonul radio, caseta de selectare și selecția multiplă .

Să ștergem semnul + din titlurile valorilor opțiunilor selectate. Vom realiza acest lucru cu ajutorul extensiei noastre Advanced Product Options.

Din cutie, Opțiuni avansate de produs are funcționalitatea de a gestiona titlurile valorilor opțiunilor selectate pe front-end-ul paginilor de produse. Se realizează cu ajutorul lui „js” în

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

Înainte de a începe, creați un produs de testare care are toate tipurile de opțiuni selectabile. Se face pentru a vedea cum arată aceste valori ale opțiunii pe front-end în mod implicit.

Ce zici de schimbarea acestor titluri?

Pentru a face asta, va trebui să rescriem câteva funcții din app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js .

Să folosim cunoscutul mecanism JavaScript mixins pentru a realiza asta.

Creați următorul fișier și definiți mix-ul nostru acolo:

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

Acum, creați următorul fișier cu funcțiile redefinite de care avem nevoie:

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

Iată rezultatul:

Exemplul #2. Modificarea titlurilor valorilor opțiunilor selectate

Aici, vom acoperi tipuri de intrare precum câmp, zonă, fișier, dată, oră și data și ora .

Să ștergem semnul + din titlurile valorilor opțiunilor selectate. Vom realiza acest lucru cu ajutorul PHP, rescriem clasele care implementează această metodă de tipul de opțiune necesar.

Înainte de a începe, creați un produs de testare care are toate tipurile de opțiuni selectabile. Se face pentru a vedea cum arată aceste valori ale opțiunii pe front-end în mod implicit.

Acum, creați următorul fișier:

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

Este timpul să ne creăm clasele și să rescriem metoda:

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

Iată rezultatul:

Care este linia de jos?

Acest articol oferă toate informațiile necesare pentru a modifica complet titlurile opțiunilor de produs și valorile opțiunilor.

Dacă aveți întrebări sau dificultăți, nu ezitați să lăsați un comentariu mai jos. Vom fi bucuroși să vă ajutăm!