Saltar al contenido

Magento 2 – Cómo cambiar el nombre del producto dinámicamente en la página de vista del producto configurable

Ya no tienes que indagar más en otras páginas porque has llegado al sitio exacto, poseemos la respuesta que necesitas sin liarte.

Solución:

Puede probar el módulo personalizado a continuación y modificarlo de acuerdo con sus requisitos.

aplicación / código / Anshu / SCdata / registration.php

aplicación / código / Anshu / SCdata / etc / module.xml

    
    
        
            
                
            
        
    

aplicación / código / Anshu / SCdata / etc / frontend / di.xml


    
        
            
        
    

aplicación / código / Anshu / SCdata / Block / ConfigurableProduct / Product / View / Type / Configurable.php

jsonDecoder = $jsonDecoder;
        $this->jsonEncoder = $jsonEncoder;
        $this->_productRepository = $productRepository;
    

    public function getProductById($id)
    
        return $this->_productRepository->getById($id);
    

    public function aroundGetJsonConfig(
        MagentoConfigurableProductBlockProductViewTypeConfigurable $subject,
        Closure $proceed
    )
    
        $sname = [];
        $sdescription = [];

        $config = $proceed();
        $config = $this->jsonDecoder->decode($config);

        foreach ($subject->getAllowProducts() as $prod) 
            $id = $prod->getId();
            $product = $this->getProductById($id);
            $sname[$id] = $product->getName();
            $sdescription[$id] = $product->getDescription();
        
        $config['sname'] = $sname;
        $config['sdescription'] = $sdescription;

        return $this->jsonEncoder->encode($config);
    

aplicación / código / Anshu / SCdata / view / frontend / requirejs-config.js

var config = 
    map: 
        '*': 
            'Magento_Swatches/js/swatch-renderer' : 'Anshu_SCdata/js/swatch-renderer',
            'magento-swatch.renderer' : 'Magento_Swatches/js/swatch-renderer',
        
    
;

aplicación / código / Anshu / SCdata / view / frontend / web / js / swatch-renderer.js

define([
  'jquery',
  'jquery/ui',
  'magento-swatch.renderer'
], function($)

  $.widget('anshu.SwatchRenderer', $.mage.SwatchRenderer,  

        /**
         * Event for swatch options
         *
         * @param Object $this
         * @param Object $widget
         * @private
         */
        _OnClick: function ($this, $widget) 
            var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
                $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
                attributeId = $parent.attr('attribute-id'),
                $input = $parent.find('.' + $widget.options.classes.attributeInput);

            if ($widget.inProductList) 
                $input = $widget.productForm.find(
                    '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
                );
            

            if ($this.hasClass('disabled')) 
                return;
            

            if ($this.hasClass('selected')) 
                $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
                $input.val('');
                $label.text('');
                $this.attr('aria-checked', false);
             else 
                $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
                $label.text($this.attr('option-label'));
                $input.val($this.attr('option-id'));
                $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
                $this.addClass('selected');
                $widget._toggleCheckedAttributes($this, $wrapper);
            

            $widget._Rebuild();

            // Custom Code starts
            var iname = $widget.options.jsonConfig.sname[this.getProduct()];
            var idescription = $widget.options.jsonConfig.sdescription[this.getProduct()];

            if(idescription != '')
                $('[data-role="content"]').find('.description .value').html(idescription);
            
            if(iname != '')
                $('[data-ui-id="page-title-wrapper"]').html(iname);
            
            // Custom code ends

            if ($widget.element.parents($widget.options.selectorProduct)
                    .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
            ) 
                $widget._UpdatePrice();
            

            $widget._loadMedia();
            $input.trigger('change');
        

    );

  return $.anshu.SwatchRenderer;
);

Prueba el siguiente módulo:

  1. aplicación / código /[VendorName]/[ModuleName]/registration.php
  2. aplicación / código /[VendorName]/[ModuleName]/etc/module.xml


    
        
            
        
    

  1. aplicación / código /[VendorName]/[ModuleName]/etc/di.xml


    
        
    
    
        
    

  1. aplicación / código /[VendorName]/[ModuleName]/Plugin/Product/Type/ConfigurablePlugin.php
addAttributeToSelect('description');
        return $result;
    

  1. aplicación / código /[VendorName]/[ModuleName]/Plugin/Product/View/Type/ConfigurablePlugin.php
jsonEncoder = $jsonEncoder;
        $this->jsonDecoder = $jsonDecoder;
    

    public function afterGetJsonConfig(MagentoConfigurableProductBlockProductViewTypeConfigurable $subject, $result)
    
        $result = $this->jsonDecoder->decode($result);
        $currentProduct = $subject->getProduct();
        if ($currentProduct->getDescription()) 
            $result['productDescription'] = $currentProduct->getDescription();
        

        foreach ($subject->getAllowProducts() as $product) 
            $result['descriptions'][$product->getId()][] =
                [
                    'description' => $product->getData('description'),
                ];
        

        return $this->jsonEncoder->encode($result);
    

  1. aplicación / código /[VendorName]/[ModuleName]/view/frontend/requirejs-config.js
var config = 
    map: 
        '*': 
            'Magento_Swatches/js/swatch-renderer':'[VendorName]_[ModuleName]/js/swatch-renderer'
        
    
;
  1. aplicación / código /[VendorName]/[ModuleName]/view/frontend/web/js/swatch-renderer.js
_OnClick: function ($this, $widget, eventName) 
    var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
        $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
        $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
        attributeId = $parent.attr('attribute-id'),
        $input = $parent.find('.' + $widget.options.classes.attributeInput);

    if ($widget.inProductList) 
        $input = $widget.productForm.find(
            '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
        );
    

    if ($this.hasClass('disabled')) 
        return;
    

    if ($this.hasClass('selected')) 
        $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
        $input.val('');
        $label.text('');
        $this.attr('aria-checked', false);
     else 
        $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
        $label.text($this.attr('option-label'));
        $input.val($this.attr('option-id'));
        $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
        $this.addClass('selected');
        $widget._toggleCheckedAttributes($this, $wrapper);

        /* CUSTOM CODE START */
        if (jQuery('.description > div.value').length && this.options.jsonConfig.descriptions) 
          if (this.getProduct()) 
            var description = this.options.jsonConfig.descriptions[this.getProduct()][0].description
            if(description) 
              jQuery('.description > div.value').html(description);
            
           else 
            var productDescription = this.options.jsonConfig.productDescription
            if(productDescription) 
              jQuery('.description > div.value').html(productDescription);
            
          
        
        /* CUSTOM CODE END */
    

    $widget._Rebuild();

    if ($widget.element.parents($widget.options.selectorProduct)
            .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
    ) 
        $widget._UpdatePrice();
    

    $widget._loadMedia(eventName);
    $input.trigger('change');
,

Nota: Copie el archivo JS original (vendor / magento / module-swatches / view / frontend / web / js / swatch-renderer.js) y péguelo en la ruta anterior y actualice la función anterior (_OnClick) O puede personalizar el código JS según sus requisitos . Aquí, también puede usar minix para anular la función JS.

Recuerda mostrar este artículo si te valió la pena.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *