Change images as per Swatches using Custom Slider on Product Detail page

Question

I have created Custom Slick slider to display product images on Product detail page.

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

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.

Answer 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.