cancel
Showing results for 
Search instead for 
Did you mean: 

How to change all attributes of child product regarding the configurable product without Extension?

Highlighted

How to change all attributes of child product regarding the configurable product without Extension?

Hi.everyone!

I think that this kind of issue had been already opened but I can't find the exact answer.

I've made a configurable product and several simple products combined with that configurable product. In magento, regarding the configurable product, when I change the size and color or etc in product detail page, I can see the changes of only product name and price. It's magento's default function, I think.

But I'd like to change every attribute including SKU, product detail tab, more information tab even the page url(Now there is only 1 url about several products). According to the selection of child products, I should change these all attributes and url, because they are completely different product for me, although I made it with configurable product.

So far, I've searched and searched every place and I found only the method to change the SKU and I've implemented it.

I followed this one (https://magecomp.com/blog/switch-product-sku-according-selection-child-products-magento-2/) and succeed. In order to implement the rest of them which I mentioned above, what should I do? Many developers recommended to use Magento Extension for it.

Is there any methods to do it without using the Extension? 

I am looking forward to your reply.

 

Regards.

2 REPLIES 2
Highlighted

Re: How to change all attributes of child product regarding the configurable product without Extensi

Hi, have you found a solution? I have the same problem,

Thanks,

Chris.

Highlighted

Re: How to change all attributes of child product regarding the configurable product without Extensi

Hi, Chris. Yes. I have solved it by creating one module and customizing Magento_Swatches.
Just create a simple module having only this block.

<?php
namespace Magetique\ProductDesc\Block\ConfigurableProduct\Product\View\Type;

use Magento\Framework\Json\EncoderInterface;
use Magento\Framework\Json\DecoderInterface;
use Magento\CatalogInventory\Api\StockRegistryInterface;



class Configurable
{

    protected $jsonEncoder;
    protected $jsonDecoder;
    protected $stockRegistry;
    protected $productloader;
    protected $_reviewCollection;
    protected $appEmulation;
    protected $imageHelperFactory;
    protected $productRepositoryFactory;
    public function __construct(
        EncoderInterface $jsonEncoder,
        DecoderInterface $jsonDecoder,
        \Magento\Catalog\Model\ProductFactory $_productloader,
        StockRegistryInterface $stockRegistry,
        \Magento\Review\Model\ResourceModel\Review\CollectionFactory $reviewCollection,
        \Magento\Store\Model\App\Emulation $appEmulation,
        \Magento\Catalog\Api\ProductRepositoryInterfaceFactory $productRepositoryFactory,
        \Magento\Catalog\Helper\Image $imageHelperFactory


    ) {

        $this->jsonDecoder = $jsonDecoder;
        $this->jsonEncoder = $jsonEncoder;
        $this->stockRegistry = $stockRegistry;
        $this->productloader = $_productloader;
        $this->_reviewCollection = $reviewCollection;
        $this->appEmulation = $appEmulation;
        $this->productRepositoryFactory = $productRepositoryFactory;
        $this->imageHelperFactory = $imageHelperFactory;

    }

    // Adding Quantitites (product=>qty)
    public function aroundGetJsonConfig(
        \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
        \Closure $proceed
    )
    {
        $descriptions = [];
        $shortdescriptions = [];
        $barcodes = [];
        $designers = [];
        $p_colors = [];
        $materials = [];
        $washing_instructions = [];
        $washing_tips = [];
        $p_reviews = [];
        $product_storys = [];
        $environment_licences = [];
        $config = $proceed();
        $config = $this->jsonDecoder->decode($config);

        foreach ($subject->getAllowProducts() as $product) {
            $stockitem = $this->stockRegistry->getStockItem(
                $product->getId(),
                $product->getStore()->getWebsiteId()
            );
            
            $products = $this->productloader->create()->load($product->getId());
            $collection = $this->_reviewCollection->create()
                ->addStatusFilter(
                    \Magento\Review\Model\Review::STATUS_APPROVED
                )->addEntityFilter(
                    'product',
                    $product->getId()
                )->setDateOrder();

            $barcodes[$product->getId()] = $products->getBarcode();
            $designers[$product->getId()] = $products->getAttributeText('designer');
            $materials[$product->getId()] = $products->getAttributeText('material');
            $p_colors[$product->getId()] = $products->getAttributeText('color_ek');
            $washing_instructions[$product->getId()] = $products->getWashing_instruction_ek();
            $washing_tips[$product->getId()] = $products->getWashing_tip_ek();
            $environment_licences[$product->getId()] = $products->getEnvironmental_licenced();
            $productImageAttr = null;
            $productImage = null;

            if($products->hasData('product_story_ek'))
            {
                $productImageAttr = $products->getCustomAttribute( 'product_story_ek' );
                $productImage = $this->imageHelperFactory->init($products, 'product_story_ek')
                    ->setImageFile($productImageAttr->getValue());
                $product_storys[$product->getId()] = $productImage->getUrl();
            }else {
                $product_storys[$product->getId()] = null;
            }
            $shortdescriptions[$product->getId()] = $products->getShortDescription();
            $descriptions[$product->getId()] = $products->getDescription();
        }

        $config['barcodes'] = $barcodes;
        $config['designers'] = $designers;
        $config['materials'] = $materials;
        $config['p_colors'] = $p_colors;
        $config['washing_instructions'] = $washing_instructions;
        $config['washing_tips'] = $washing_tips;
        $config['product_storys'] = $product_storys;
        $config['shortdescriptions'] = $shortdescriptions;
        $config['descriptions'] = $descriptions;
        $config['environment_licences'] = $environment_licences;
        return $this->jsonEncoder->encode($config);
    }
}

?>

You can see various Product attributes there.
And create this file here by Just copying/pasting the core swatch-renderer.js file in theme level.

\app\design\frontend\vendor\customTheme\Magento_Swatches\web\js\swatch-renderer.js

And please add some some extra codes like the below. In my case, its around line 768.

You can see console.log($widget.options.jsonConfig); in the below code.  From that line, you can see extra codes.

 

   // Foreach every attribute and check. If only one undefined (not selected) - nothing won't work
            $('.swatch-attribute').each(function () {
                var $element = $(this),
                    attrId = $element.attr('attribute-id'),
                    optionSelected = $element.attr('option-selected');

                if(typeof optionSelected == "undefined"){
                    errorFlag = true;
                    return false;
                } else {
                    selectedSwatch[attrId] = optionSelected;
                    errorFlag = false;
                }
            });

            // Show descrption notification to user
            if(errorFlag == false){
                var allTheProducts = $widget.options.jsonConfig.index;
                $.each(allTheProducts, function(index, value) {
                    if(isEquivalent(selectedSwatch, value)){
                        // Quantity of selected simple product by ID
                        //console.log($widget.options.jsonConfig);
                        
                        var shortdescriptions = $widget.options.jsonConfig.shortdescriptions[index];
                        var descriptions = $widget.options.jsonConfig.descriptions[index];
                        var barcodes = $widget.options.jsonConfig.barcodes[index];
                        var designers = $widget.options.jsonConfig.designers[index];
                        var materials = $widget.options.jsonConfig.materials[index];
                        var p_colors = $widget.options.jsonConfig.p_colors[index];
                        var product_story_url = $widget.options.jsonConfig.product_storys[index];
                        var washing_instructions = $widget.options.jsonConfig.washing_instructions[index];
                        var washing_tips = $widget.options.jsonConfig.washing_tips[index];
                        var environment_licences = $widget.options.jsonConfig.environment_licences[index];
                        console.log('Simple product ID: '+index+', descriptions: '+shortdescriptions);
                        console.log('Simple product ID: '+index+', descriptions: '+descriptions);
                        console.log('Simple product ID: '+index+', barcodes: '+barcodes);
                        console.log('Simple product ID: '+index+', designers: '+designers);
                        console.log('Simple product ID: '+index+', materials: '+materials);
                        console.log('Simple product ID: '+index+', p_colors: '+p_colors);
                        console.log('Simple product ID: '+index+', product_story: '+product_story_url);
                        console.log('Simple product ID: '+index+', washing_instructions: '+washing_instructions);
                        console.log('Simple product ID: '+index+', washing_tips: '+washing_tips);
                        console.log('Simple product ID: '+index+', environment_licences: '+environment_licences);
                        $('#product-attribute-specs-table').empty();
                        $('#washing-tab').empty();
                        $('#product-gallery').empty();
                        $('#product-attribute-specs-table').first().prepend("<caption class='table-caption'>More Information</caption>");
                        $('#product-attribute-specs-table').append("<tr><th class='col label' scope='row'>Barcode</th>" +
                            "<td class='col data' data-th='Barcode'>" + barcodes + "</td></tr>" +
                            "<tr><th class='col label' scope='row'>Material</th>" +
                            "<td class='col data' data-th='Material'>" + materials + "</td></tr>" +
                            "<tr><th class='col label' scope='row'>Designer</th>" +
                            "<td class='col data' data-th='Designer'>" + designers + "</td></tr>" +
                            "<tr><th class='col label' scope='row'>Color</th>" +
                            "<td class='col data' data-th='Color'>" + p_colors + "</td></tr>");
                        $('#washing-tab').append($('<p>').text(washing_instructions));
                        $('#washing-tab').append($('<p>').text(washing_tips));

                        $('#product-gallery').append("<div class='loader'><img id='tab_product_story_img' src=" + product_story_url+ " /></div>");
                        if(environment_licences == 1){
                            $('.gots-brand-container').css("visibility","visible")
                        }else $('.gots-brand-container').css("visibility","hidden");

                        $('#product_description').html(shortdescriptions);
                        $('#description').html(descriptions);
                    }
                });
            } else {
                $('#product-attribute-specs-table').html("");
                $('#product_description').html("");
                $('#description').html("");
            }
            $widget._Rebuild();

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

After that, please remove cache and deploy static files again.

If you solve your problem, please click Kudos.

 

All the best.

John.