1

I need change custom images (not product image) change on change of configurable product option change.

For that, I will create new product image attribute and assign those images to this newly created attribute. On product detail, I can load that image from that newly created attribute code.

Now when configurable product option changes, I want to change those images also. By default only product image changes in the gallery section.

If anyone knows how to do this then please let me know.


Detail explanation:

I have a custom requirement as follow.

On the configurable product detail page, I need child product image slider other than which comes in Magento default product slider. This is because website selling sunglass, specs, and frames.

Now on main product slider (default Magento), we are displaying e.g. sunglass. When you change color from the drop-down (configurable product) sunglass image automatically change as per default Magento functionality.

But in the new slider (child product image slider) which I will add, in that slider model image comes with wearing that sunglass. So when the color change from drop-down e.g select Blue color so 2 images will be changed.

  1. sun glass image. The blue sunglass display in product image slider (default Magento functionality)

  2. New slider image. now model image display with wearing blue sunglass.

For the new slider, I will upload the appropriate image in child product with custom attribute (Media type attribute) so I can display in the new slider.

But I do not know how to change that image when change option. I hope now you understand what I am trying to say and why I need. Still, you have any question then please let me know.

************************** Display extra image code *******************

<?php
$_product = $block->getProduct();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$_children = $_product->getTypeInstance()->getUsedProducts($_product);

foreach ($_children as $child)
{

    $_product12 = $objectManager->create('Magento\Catalog\Model\Product')->load($child->getID());  
    $attrImage = $_product12->getData('test');   // "test" is my custom attribute
    if(isset($attrImage) && $attrImage != '' )
    {
        $productImageAttr = $_product12->getCustomAttribute( 'test' );
        $productImage = $this->helper('Magento\Catalog\Helper\Image')
        ->init($_product12, 'test')
        ->setImageFile($productImageAttr->getValue());?>
        <img src="<?php echo $productImage->getUrl() ?>" alt="<?php echo $block->escapeHtml($_product12->getTitle()) ?>" />
<?php 

    }
}
?>
  • Asking for a walkthrough to a complete module is a bit too much for the Q&A format of this site. Besides that, with this vague information it's not even possible to give a good answer. We simply don't know your requirements. I'd suggest you to try starting and if you hit a wall, ask for help here and explain exactly what you try to do, why you are doing it and what does not work / where you need help. – Siarhey Uchukhlebau Jun 20 '17 at 7:02
  • @SiarheyUchukhlebau Added detail explanation in question section. – user55548 Jun 22 '17 at 5:42
  • Please, add corresponding code which displays a child-products images. I'll try to help you. And thank you for your detailed explanation :) – Siarhey Uchukhlebau Jun 22 '17 at 15:37
  • @SiarheyUchukhlebau I have add code in question section. – user55548 Jun 23 '17 at 5:51
  • @SiarheyUchukhlebau Thanks for taking interest to give answer of my question. I have found solution and post into answer section. – user55548 Jun 26 '17 at 4:34
1

As you can see in app/design/frontend/Magento/luma/etc/view.xml.

<vars module="Magento_ConfigurableProduct">
    <var name="change_only_base_image">false</var>
</vars>
<vars module="Magento_Swatches">
    <var name="change_only_base_image">false</var>
</vars>

Change these to false and image gallery will change arcoding to configurable options.

I'm not sure this can satify your question but you can try.

  • Thanks for answer. But this is not work for me. – user55548 Jun 23 '17 at 8:23
0

After R&D of M2 core file, i got solution. Here is that I have add extra images in my gallery section. So add code for extra images in to gallery.phtml file. Here i am giving path of core file. But put it into your theme.

/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

<?php
$_product = $block->getProduct();
if( $_product->getTypeId() == 'configurable')
{    
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')
                    ->getStore()
                    ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    $_children = $_product->getTypeInstance()->getUsedProducts($_product);
    //echo "<pre>";
    //print_r($_children);
    $tempAray = array();
    $cId = '';
    foreach ($_children as $child)
    {
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();


        $_product12 = $objectManager->create('Magento\Catalog\Model\Product')->load($child->getID());  
        $attrImage = $_product12->getData('test');   
        //echo "<pre>";
        //echo $attrImage;
        if(isset($attrImage) && $attrImage != '' && $attrImage != 'no_selection' )
        {
             $cId .= $child->getID().",";
            $productImageAttr = $_product12->getCustomAttribute( 'test' );
            $productImage = $this->helper('Magento\Catalog\Helper\Image')
            ->init($_product12, 'test')
            ->setImageFile($productImageAttr->getValue());  ?>

            <img style="display: none;" id="model_id_<?php echo $child->getID() ?>" src="<?php echo $productImage->getUrl() ?>" width="150" title="<?php echo $child->getName() ?>" alt="<?php echo $block->escapeHtml($child->getName()) ?>" />
            <img style="display: none;" id="model_id_default" src="<?php echo $mediaUrl ?>coming_Soon.png" width="150" title="<?php echo $child->getName() ?>" alt="<?php echo $block->escapeHtml($child->getName()) ?>" />
    <?php 

        }
    }
     $modelId = rtrim($cId,",");

    ?>
            <img style="display: block;" id="model_id_default_placehoder" src="<?php echo $mediaUrl ?>coming_Soon.png" width="150" title=" " alt="<?php echo $block->escapeHtml($_product12->getTitle()) ?>" />
            <input type="hidden" id="model_photo_id" name="model_photo_id" value="<?php echo $modelId ?>" >
<?php } ?>

Now for change effect put code in js file. /vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

find function _changeProductImage: function () {

In that function find images = this.options.spConfig.images[this.simpleProduct]; After that add following code

/********** Start For extra image *******************************/

        var modelIds = document.getElementById('model_photo_id').value;
        document.getElementById('model_id_default').style.display = 'none';
        document.getElementById('model_id_default_placehoder').style.display = 'none';

        var modelIdArray = modelIds.split(",");
        for(var cnt = 0; cnt<(modelIdArray.length); cnt++)
        {
            if(document.getElementById('model_id_' + modelIdArray[cnt]))
                document.getElementById('model_id_' + modelIdArray[cnt]).style.display = 'none';

        }
        if(document.getElementById('model_id_' + this.simpleProduct))
            document.getElementById('model_id_' + this.simpleProduct).style.display = 'block';
        else
            document.getElementById('model_id_default').style.display = 'block';

        /*************** End For extra image    *********************/

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.