Подключение js плагинов увеличения фото

Решения для карточки товара Webasyst Shop-Script. Тут приведены два примера для jquery плагина лайтбокс poptrox.js и зум elevateZoom.js 

poptrox.js

Подключаем jquery плагин на странице товара. И добавляем код в product.js

// product images
    var $ = jQuery,
        $coreWrapper = $("#product-core-image"),
        $coreImages = $coreWrapper.find("a");
    if ($coreImages.length) {
        
        if ($("#product-gallery a").length > 1) {
            nav = true
        } else {
            nav = false
        }
            
        $coreWrapper.poptrox({
            // здесь различные настройки плагина
            usePopupNav: nav
        });
        
        $coreImages.on("click", function(e) {
            e.preventDefault();

            var gallery = [];
            if ($("#product-gallery a").length) {            
                var k = $("#product-gallery div.selected").prevAll('.image').length;          
                $('#product-gallery div.image').not('.selected').each(function () {
                    gallery.push({href: $(this).find('a').attr('href')});
                });
                if (k) {
                    gallery = gallery.slice(k).concat(gallery.slice(0, k));
                }
            } else {
                gallery.push({href: $(this).attr('href')});
            }

            var links = gallery.map(function(href) {
                return $("<a>", { href: href['href'] });
            });
            
            if ($("#product-gallery a").length > 1) {
                $("#link_box").remove();
                $coreImages.after('<div id="link_box" style="display: none;"></div>');
                $("#link_box").append(links);
            }
        });
    }

elevateZoom.js

Читайте документацию к плагину. Требуются небольшие правки в разметке страницы в зависимости от темы дизайна. Приведенный ниже код необходимо добавить в product.js

// product images
    var $ = jQuery,
        $coreWrapper = $("#product-core-image"),
        $coreImages = $coreWrapper.find("a");
    if ($coreImages.length) {

        var zoom = $('#product-image').parent().parent().attr('data-zoom-image');
        $('#product-image').attr('data-zoom-image', zoom).elevateZoom({ 
            gallery:'product-gallery', 
            galleryActiveClass: 'active', 
            zoomType : "lens", 
            lensShape : "round", 
            lensSize : 380
        });
    }