Bagaimana Cara Menghapus + Masuk dari Judul Opsi yang Dapat Disesuaikan di Magento 2 Secara Terprogram?

Kustomisasi opsi produk sangat penting untuk memenuhi kebutuhan bisnis.

Pada artikel ini, kami akan fokus pada cara mengubah judul opsi yang dipilih dan mempertimbangkan dua contoh.

Pada contoh pertama,

Kami akan fokus pada cara mengubah judul dari nilai opsi yang dipilih dari jenis "dapat dipilih" dengan bantuan ekstensi Opsi Produk Lanjutan Mageworx dan "js".

Pada contoh kedua,

Kami akan fokus pada cara mengubah judul opsi "tidak dapat dipilih" dengan bantuan "php".

Pembuatan Modul Baru

Pembuatan modul baru dijelaskan secara rinci dalam posting blog ini.

Jadi, jangan fokus pada itu hari ini dan langsung beralih ke kode. Berikut kode yang kita perlukan:

1.komposer.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. registrasi.php

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

Contoh 1. Mengubah Judul Jenis Opsi Lainnya

Di sini, kita akan membahas jenis input seperti drop-down, radio button, checkbox, dan multiple select .

Mari kita hapus tanda + dari judul nilai opsi yang dipilih. Kami akan mencapai ini dengan bantuan ekstensi Opsi Produk Lanjutan kami.

Di luar kotak, Opsi Produk Lanjutan memiliki fungsionalitas untuk menangani judul dari nilai opsi yang dipilih di bagian depan halaman produk. Itu dicapai dengan bantuan "js" di

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

Sebelum kita mulai, buat produk uji yang memiliki semua jenis opsi yang dapat dipilih. Hal ini dilakukan untuk melihat bagaimana nilai opsi ini terlihat di front-end secara default.

Bagaimana kalau mengubah judul-judul ini?

Untuk melakukan itu, kita perlu menulis ulang beberapa fungsi dari app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js .

Mari gunakan mekanisme mixin JavaScript yang dikenal untuk mencapainya.

Buat file berikut dan tentukan mixin kami di sana:

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

Sekarang, buat file berikut dengan fungsi yang didefinisikan ulang yang kita butuhkan:

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

Berikut hasilnya:

Contoh #2. Mengubah Judul Nilai Opsi yang Dipilih

Di sini, kita akan membahas jenis input seperti field, area, file, date, time, dan date & time .

Mari kita hapus tanda + dari judul nilai opsi yang dipilih. Kami akan mencapai ini dengan bantuan PHP, menulis ulang kelas yang menerapkan metode ini dari jenis opsi yang diperlukan.

Sebelum kita mulai, buat produk uji yang memiliki semua jenis opsi yang dapat dipilih. Hal ini dilakukan untuk melihat bagaimana nilai opsi ini terlihat di front-end secara default.

Sekarang, buat file berikut:

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

Saatnya membuat kelas dan menulis ulang metode:

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

Berikut hasilnya:

Apa intinya?

Artikel ini menyediakan semua informasi yang diperlukan untuk mengubah judul opsi produk dan nilai opsi sepenuhnya.

Jika Anda memiliki pertanyaan atau kesulitan, jangan ragu untuk meninggalkan komentar di bawah. Kami akan dengan senang hati membantu!