5

I have created Custom Slick slider to display product images on Product detail page. enter image description here

But I want to change images as per change on color Swatches.

enter image description here

Note : I'm using getGalleryImagesJson() to retrieve image data.

So I want to change images as per swatches which works on fotorama (default slider).

Any suggestions would be appreciated.

1

For reloading Gallery images information you need to generate backend code - new images and frontend code - javascript code. For generating images you can create plugin like this:

 <type name="Magento\Swatches\Block\Product\Renderer\Configurable">
        <plugin name="Amasty_Conf::configurable" type="Amasty\Conf\Plugin\Product\Renderer\Configurable"/>
 </type>

where in function

 public function afterGetJsonConfig(
    TypeConfigurable $subject,
    $result
) {
    if ($result &&
        $subject->getNameInLayout() == 'product.info.options.swatches'
    ) {
        $config = $this->jsonDecoder->decode($result);
        $block = $this->blockFactory->createBlock('Magento\Catalog\Block\Product\View\Gallery', 'product.view.gallery');
        $block->setProduct($subject->getProduct());
        $config['gallery_images'] = $block->getGalleryImagesJson();

        $result = $this->jsonEncoder->encode($config);
    }

    return $result;
}

Will add information what you need.

After we need to create Javascript file. For example, you can override Magento js file:

var config = {
map: {
    '*': {
        'Magento_Swatches/js/swatch-renderer' : 'Amasty_Conf/js/swatch-renderer',

And finally add your custom code to change images:

  _EventListener: function () {           
        var $widget = this;

        $widget.element.on('click', '.' + this.options.classes.optionClass, function () {
            return $widget._AmOnClick($(this), $widget);
        });

Where in _AmOnClick you need to reload your custom gallery and run Slick initialize code.

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.