วิธีลบ + ลงชื่อออกจากชื่อตัวเลือกที่ปรับแต่งได้ใน 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. register.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 การเปลี่ยนชื่อของค่าตัวเลือกที่เลือก
ที่นี่ เราจะครอบคลุมประเภทการป้อนข้อมูลเช่น field, area, file, date, time, and date & time
มาลบเครื่องหมาย + ออกจากชื่อของค่าตัวเลือกที่เลือก เราจะบรรลุสิ่งนี้ด้วยความช่วยเหลือของ 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; } }นี่คือผลลัพธ์:
บรรทัดล่างคืออะไร?
บทความนี้ให้ข้อมูลทั้งหมดที่จำเป็นในการเปลี่ยนชื่อของตัวเลือกผลิตภัณฑ์และค่าตัวเลือกทั้งหมด
หากคุณมีคำถามหรือปัญหาใด ๆ โปรดแสดงความคิดเห็นด้านล่าง เรายินดีที่จะช่วยเหลือ!
