Wie entferne ich + Sign von anpassbaren Optionstiteln in Magento 2 programmgesteuert?

Die Anpassung der Produktoptionen ist für die Erfüllung der Geschäftsanforderungen von entscheidender Bedeutung.

In diesem Artikel konzentrieren wir uns darauf, wie Sie die Titel der ausgewählten Optionen ändern, und betrachten zwei Beispiele.

Im ersten Beispiel

Wir werden uns darauf konzentrieren, wie man die Titel der ausgewählten Optionswerte des Typs „auswählbar“ mit Hilfe der Mageworx Advanced Product Options-Erweiterung und „js“ ändert.

Im zweiten Beispiel

Wir werden uns darauf konzentrieren, wie man Titel von „nicht wählbaren“ Optionen mit Hilfe von „php“ ändert.

Erstellung eines neuen Moduls

Die Erstellung neuer Module wurde in diesem Blogbeitrag ausführlich beschrieben.

Konzentrieren wir uns also heute nicht darauf und gehen direkt zum Code über. Hier ist der Code, den wir brauchen:

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

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

Beispiel 1. Titel anderer Optionstypen ändern

Hier behandeln wir solche Eingabetypen wie Dropdown, Optionsfeld, Kontrollkästchen und Mehrfachauswahl .

Lassen Sie uns das + -Zeichen aus den Titeln ausgewählter Optionswerte löschen. Wir werden dies mit Hilfe unserer Erweiterung „Erweiterte Produktoptionen“ erreichen.

Erweiterte Produktoptionen verfügen standardmäßig über die Funktionalität, Titel der ausgewählten Optionswerte auf dem Front-End von Produktseiten zu verarbeiten. Dies wird mit Hilfe von „js“ in erreicht

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

Bevor wir beginnen, erstellen Sie ein Testprodukt, das alle Arten von auswählbaren Optionen enthält. Es wird getan, um zu sehen, wie diese Optionswerte standardmäßig auf dem Frontend aussehen.

Wie wäre es, wenn Sie diese Titel ändern?

Dazu müssen wir einige Funktionen aus app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js .

Verwenden wir dazu den bekannten JavaScript-Mixins -Mechanismus.

Erstellen Sie die folgende Datei und definieren Sie dort unser 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 } } } };

Erstellen Sie nun die folgende Datei mit den neu definierten Funktionen, die wir benötigen:

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

Hier ist das Ergebnis:

Beispiel #2. Titel ausgewählter Optionswerte ändern

Hier behandeln wir solche Eingabetypen wie Feld, Bereich, Datei, Datum, Uhrzeit und Datum & Uhrzeit .

Lassen Sie uns das + -Zeichen aus den Titeln ausgewählter Optionswerte löschen. Wir werden dies mit Hilfe von PHP erreichen und die Klassen umschreiben, die diese Methode des erforderlichen Optionstyps implementieren.

Bevor wir beginnen, erstellen Sie ein Testprodukt, das alle Arten von auswählbaren Optionen enthält. Es wird getan, um zu sehen, wie diese Optionswerte standardmäßig auf dem Frontend aussehen.

Erstellen Sie nun die folgende Datei:

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

Es ist Zeit, unsere Klassen zu erstellen und die Methode neu zu schreiben:

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

Hier ist das Ergebnis:

Was ist das Endergebnis?

Dieser Artikel enthält alle erforderlichen Informationen, um die Titel von Produktoptionen und Optionswerten vollständig zu ändern.

Sollten Sie Fragen oder Schwierigkeiten haben, können Sie unten einen Kommentar hinterlassen. Wir helfen Ihnen gerne weiter!