프로그래밍 방식으로 Magento 2의 사용자 정의 가능한 옵션 제목에서 + 서명을 제거하는 방법은 무엇입니까?
게시 됨: 2020-10-22제품 옵션 사용자 지정은 비즈니스 요구 사항을 충족하는 데 매우 중요합니다.
이 기사에서는 선택한 옵션의 제목을 변경하는 방법에 초점을 맞추고 두 가지 예를 고려합니다.
첫 번째 예에서,
Mageworx 고급 제품 옵션 확장 및 "js"를 사용하여 "선택 가능한" 유형의 선택된 옵션 값의 제목을 변경하는 방법에 중점을 둘 것입니다.
두 번째 예에서,
"php"를 사용하여 "선택할 수 없는" 옵션의 제목을 변경하는 방법에 중점을 둘 것입니다.
새 모듈 생성
새 모듈 생성은 이 블로그 게시물에 자세히 설명되어 있습니다.
따라서 오늘은 집중하지 않고 바로 코드로 넘어가겠습니다. 필요한 코드는 다음과 같습니다.
1.작곡가.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 .
시작하기 전에 모든 유형의 선택 가능한 옵션이 있는 테스트 제품을 만듭니다. 이러한 옵션 값이 기본적으로 프런트 엔드에서 어떻게 보이는지 확인하기 위해 수행됩니다.
이 제목을 변경하는 것은 어떻습니까?
그렇게 하려면 app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js 에서 몇 가지 함수를 다시 작성해야 합니다.
이를 달성하기 위해 알려진 JavaScript 믹스 인 메커니즘을 사용합시다.
다음 파일을 만들고 거기에 우리의 믹스인을 정의하십시오:
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; } }결과는 다음과 같습니다.
결론은 무엇입니까?
이 문서는 제품 옵션 및 옵션 값의 제목을 완전히 변경하는 데 필요한 모든 정보를 제공합니다.
질문이나 어려움이 있으면 아래에 의견을 남겨주세요. 기꺼이 도와드리겠습니다!
