Создать акаунт
Всё для вебмастера » Вопросы и ответы » CMS » WordPress » Как сделать дополнительную карусель WooCommerce?

Как сделать дополнительную карусель WooCommerce?

28 авг 2022, 18:44
WordPress
175
0
В карточке товара нужно организовать дополнительную карусель изображений. С помощью плагина PODS получилось вывести изображения в карточке, но не знаю какие классы прописать, как правильно составить структуру html и как правильно сделать вызов скрипта. Я так понимаю плагин FlexSlider уже есть в CMS и мне нужно только проделать какие то манипуляции чтоб всё заработало.

UPD:
Нашел способ вывести и расположить элементы как мне нужно. Подцепил встроенный плагин для открытия картинок PhotoSwipe. Изображения открываются как надо, но при закрытии изображения меня скролирует к верхней части страницы, перерыл все связанные файлы но не как не найду этот код со скролом. Может подскажите в какую сторону копать и как отследить откуда ноги растут?)))

Код вывода:
//Реализованные объектыadd_action( 'woocommerce_product_after_tabs', 'realize_object' );function realize_object(){$pod = pods('product');$pod->fetch(get_the_ID());$realize_objects = $pod->field('realize_object');if ($realize_objects > 0){echo '<h2>Реализованные объекты</h2>';echo '<div class="realize_objects">';echo '<div class="realize_objects_container products content-wrap product-archive grid-cols grid-ss-col-2 grid-sm-col-3 grid-lg-col-4 woo-archive-action-on-hover woo-archive-btn-text  woo-archive-image-hover-zoom">';foreach ($realize_objects as $realize_object) {$realize_object_id = $realize_object['ID'];$realize_object_title = $realize_object['post_title'];$large_image_url = wp_get_attachment_image_src($realize_object_id, array(1200,0));$medium_image_url = wp_get_attachment_image_src($realize_object_id, array(300,300));   echo '<figure class="entry content-bg loop-entry product type-product status-publish first instock product_cat-utensils has-post-thumbnail shipping-taxable purchasable product-type-simple"><a href="https://qna.habr.com'. $large_image_url[0] .'" data-size="'. $large_image_url[1] .'x'. $large_image_url[2] .'"><img title="' . the_title_attribute('echo=0') . '"  src="https://qna.habr.com'. $large_image_url[0] .'" class="realize_object_img attachment-woocommerce_thumbnail size-woocommerce_thumbnail" src="https://qna.habr.com'. $medium_image_url[0] .'"></a>   <figcaption itemprop="caption description">'. $realize_object_title .'</figcaption></figure>   ';}  echo '</div>';echo '</div>';}}


Скрипт Photoswipe
add_action( 'wp_footer', 'photoswipe_in_footer' );function photoswipe_in_footer() {    ?>        <script type="text/jаvascript">var initPhotoSwipeFromDOM = function(gallerySelector) {    // parse slide data (url, title, size ...) from DOM elements    // (children of gallerySelector)    var parseThumbnailElements = function(el) {        var thumbElements = el.childNodes,            numNodes = thumbElements.length,            items = [],            figureEl,            linkEl,            size,            item;        for(var i = 0; i < numNodes; i++) {            figureEl = thumbElements[i]; // <figure> element            // include only element nodes            if(figureEl.nodeType !== 1) {                continue;            }            linkEl = figureEl.children[0]; // <a> element            size = linkEl.getAttribute('data-size').split('x');            // create slide object            item = {                src: linkEl.getAttribute('href'),                w: parseInt(size[0], 10),                h: parseInt(size[1], 10)            };            if(figureEl.children.length > 1) {                // <figcaption> content                item.title = figureEl.children[1].innerHTML;            }            if(linkEl.children.length > 0) {                // <img> thumbnail element, retrieving thumbnail url                item.msrc = linkEl.children[0].getAttribute('src');            }            item.el = figureEl; // save link to element for getThumbBoundsFn            items.push(item);        }        return items;    };    // find nearest parent element    var closest = function closest(el, fn) {        return el && ( fn(el) ? el : closest(el.parentNode, fn) );    };    // triggers when user clicks on thumbnail    var onThumbnailsClick = function(e) {        e = e || window.event;        e.preventDefault ? e.preventDefault() : e.returnValue = false;        var eTarget = e.target || e.srcElement;        // find root element of slide        var clickedListItem = closest(eTarget, function(el) {            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');        });        if(!clickedListItem) {            return;        }        // find index of clicked item by looping through all child nodes        // alternatively, you may define index via data- attribute        var clickedGallery = clickedListItem.parentNode,            childNodes = clickedListItem.parentNode.childNodes,            numChildNodes = childNodes.length,            nodeIndex = 0,            index;        for (var i = 0; i < numChildNodes; i++) {            if(childNodes[i].nodeType !== 1) {                continue;            }            if(childNodes[i] === clickedListItem) {                index = nodeIndex;                break;            }            nodeIndex++;        }        if(index >= 0) {            // open PhotoSwipe if valid index found            openPhotoSwipe( index, clickedGallery );        }        return false;    };    // parse picture index and gallery index from URL (#&pid=1&gid=2)    var photoswipeParseHash = function() {        var hash = window.location.hash.substring(1),        params = {};        if(hash.length < 5) {            return params;        }        var vars = hash.split('&');        for (var i = 0; i < vars.length; i++) {            if(!vars[i]) {                continue;            }            var pair = vars[i].split('=');            if(pair.length < 2) {                continue;            }            params[pair[0]] = pair[1];        }        if(params.gid) {            params.gid = parseInt(params.gid, 10);        }        return params;    };    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {        var pswpElement = document.querySelectorAll('.pswp')[0],            gallery,            options,            items;        items = parseThumbnailElements(galleryElement);        // define options (if needed)        options = {            // define gallery index (for URL)            galleryUID: galleryElement.getAttribute('data-pswp-uid'),            getThumbBoundsFn: function(index) {                // See Options -> getThumbBoundsFn section of documentation for more info               var thumbnail = items[index].el.getElementsByTagName('img')[0],  // find thumbnail                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,                    rect = thumbnail.getBoundingClientRect();                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};            }        };        // PhotoSwipe opened from URL        if(fromURL) {            if(options.galleryPIDs) {                // parse real index when custom PIDs are used                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url                for(var j = 0; j < items.length; j++) {                    if(items[j].pid == index) {                        options.index = j;                        break;                    }                }            } else {                // in URL indexes start from 1                options.index = parseInt(index, 10) - 1;            }        } else {            options.index = parseInt(index, 10);        }        // exit if index not found        if( isNaN(options.index) ) {            return;        }        if(disableAnimation) {            options.showAnimationDuration = 1;        }        // Pass data to PhotoSwipe and initialize it        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);        gallery.init();    };    // loop through all gallery elements and bind events    var galleryElements = document.querySelectorAll( gallerySelector );    for(var i = 0, l = galleryElements.length; i < l; i++) {        galleryElements[i].setAttribute('data-pswp-uid', i+1);        galleryElements[i].onclick = onThumbnailsClick;    }    // Parse URL and open gallery if it contains #&pid=3&gid=1    var hashData = photoswipeParseHash();    if(hashData.pid && hashData.gid) {        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );    }};// execute above functioninitPhotoSwipeFromDOM('.realize_objects_container');</script>    <?php}

Внимание! Как сделать дополнительную карусель WooCommerce? предоставлен пользователями сайта исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Смотрите также:

Комментарии к Как сделать дополнительную карусель WooCommerce?
Добавить Комментарий
В комментариях запрещаются спам, а также реклама любых товаров и услуг, иных ресурсов.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.