5

In Magento 2 , when we create configurable product its child product also created, we can provide different description for child products too.

> 1. How to access description of each child product on product page?
> 2. can we make it throw on change of fields , like if we changes color on product 
     page, so it will show description of that color child product?

Any help will thank full.

0

I got the answer : im using magento 2.0.4

i used '\app\design\frontend\Venustheme\fasony\Magento_ConfigurableProduct\templates\product\view\type\options\configurable.phtml' file to get work done.

some small code you will need to get job work done

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');
$description=[];
$_children = $product->getTypeInstance()->getUsedProducts($product);
        foreach ($_children as $child){
            if($child->getDescription())
            {
             // $description array hold each child id and description
             $description[$child->getID()]=$child->getDescription();
            }
        }

//In case if you did't added child product description for some product so they will display main product description
      $description["product"]=$product->getDescription();

//code for product option change: what was this code

 $get=json_decode($block->getJsonConfig($option_txt),true);

$checkOption=[];
 foreach ($get['attributes'] as $key => $value) {
     if($value['code']=='color')
     {
        foreach ($value['options'] as $k => $v) {
$checkOption[$v['id']]=$v['products'][0];

        }
     }
 }

//code for product option change end :

//some script to use with select option
<script type="text/javascript">

    require(['jquery'],function($){
    var checkOption=<?php echo json_encode($checkOption);?>;
    var description=<?php echo json_encode($description);?>;
    jQuery(document).ready(function() {
        $("#attribute90").on('change',function(){
           var id= $(this).val();
           if(description[checkOption[id]])
           {
            //get child product description
           $('div[id="product.info.description"]').html(description[checkOption[id]]);
           }
           else{
            //if child product dont have description show , main product description
           $('div[id="product.info.description"]').html(description["product"]);

           }
        });

   });
});
</script>

full source code of my configurable.phtml file

<?php

  $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
  $product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');

  $description=[];

  //get all childrens
  $_children = $product->getTypeInstance()->getUsedProducts($product);

  foreach ($_children as $child){
            if($child->getDescription())
            {
            $description[$child->getID()]=$child->getDescription();
            }
        }
        $description["product"]=$product->getDescription();

?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <?php foreach ($_attributes as $_attribute):?>
        <div class="field configurable required">
            <label class="label" for="attribute<?php /* @escapeNotVerified */ echo $_attribute->getAttributeId() ?>">
                <span><?php $label=$block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel());
                echo $label; 
                ?></span>
            </label>
            <div class="control">
                <select name="super_attribute[<?php /* @escapeNotVerified */ echo $_attribute->getAttributeId() ?>]"
                        data-validate="{required:true}"
                        id="attribute<?php /* @escapeNotVerified */ echo $_attribute->getAttributeId() ?>"
                        class="super-attribute-select" data-placholder="<?php /* @escapeNotVerified */ 
                        echo "$label:";
                    ?>">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>
    <?php endforeach; 


//code for product option change
 $get=json_decode($block->getJsonConfig($option_txt),true);

$checkOption=[];
 foreach ($get['attributes'] as $key => $value) {
     if($value['code']=='color')
     {
        foreach ($value['options'] as $k => $v) {
$checkOption[$v['id']]=$v['products'][0];

        }
     }
 }
//code for product option change end:


    ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?php echo json_encode($block->getJsonConfig($option_txt)); ?>
                }
            }
        }
    </script>
<?php endif;?>


<script type="text/javascript">

    require(['jquery'],function($){
    var checkOption=<?php echo json_encode($checkOption);?>;
    var description=<?php echo json_encode($description);?>;
    jQuery(document).ready(function() {
        $("#attribute90").on('change',function(){
           var id= $(this).val();
           if(description[checkOption[id]])
           {
            //get child product description
           $('div[id="product.info.description"]').html(description[checkOption[id]]);
           }
           else{
            //if child product dont have description show , main product description
           $('div[id="product.info.description"]').html(description["product"]);

           }
        });

   });
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.