Webotvůrci

Menu

Zobrazení Propojení produktů v kategorii

Upraveno: 22. 7. 2025
Jste zde:
Délka čtení: 4 min

Při použití CSS nebo JS je možné propojení, které je aplikováno u produktů možné zobrazit u produktů již v kategorii.


Video


Ukázka

https://www.webotvurci.com/obleceni/

Návod je určený pro pokročilé uživatele!

Jak vložit CSS kód do platformy Shoptet. – návod


Níže najdete ukázku obecných CSS nebo JS. Toto slouží k vytvoření defaultního vzhledu a je možné z tohoto vyjít. Případně si kód můžete upravit na míru podle Vašich potřeb s Vašim kodérem. V případě, že s nikým takovým nespolupracujete, budeme rádi, když napíšete přímo nám.

Pro zobrazení v kategorii je potřeba mít:

  • Typ propojení musí být nastaven jako Obrázky nebo Barvy.
  • U typu Obrázky je možné vložit libovolnou cestu k obrázku – doplněk si jej přizpůsobí automaticky. Pro nejlepší výsledky doporučujeme čtvercové obrázky.
  • U typu Barvy je nutné vyplnit barvu pozadí (např. #FF0000 pro červenou).
  • Ke každému propojení se automaticky přidává také title atribut, takže při najetí kurzorem na variantu se zobrazí její název jako tooltip.

💡 Poznámka k šablonám:
Zobrazení propojení v kategoriích je podporováno u následujících oficiálních šablon:
Samba, Disco, Step, Classic, Waltz, Tango, Techno, Pop.

U šablon Echo, Soul a Rock není zobrazení propojení v kategoriích podporováno, protože tyto šablony postrádají plnohodnotný detail produktu a jejich struktura obecné zobrazení neumožňuje. Na vyžádání lze tuto funkcionalitu doprogramovat na míru, standardně ji ale ve výchozím nastavení nenabízíme.

⚠️ Pozor na individuální úpravy šablon:
Pokud má e-shop vlastní zásahy do šablony, nemusí se propojení v kategoriích zobrazovat správně. V takovém případě je potřeba úpravu řešit individuálně, protože nelze garantovat univerzální funkčnost na upravených šablonách.



CSS:

.c-product-interconnection-custom-category-image {
    flex-shrink: 0;

    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    overflow-y: hidden;
}

.c-product-interconnection-custom-category-image.template-samba {
    order: 1;
}

.c-product-interconnection-custom-category-image__scroll {
    display: flex;
    justify-content: flex-start;
    gap: 5px;

    position: relative;
    overflow-x: auto;

    scroll-behavior: smooth;
    scrollbar-width: none;
}

.c-product-interconnection-custom-category-image__item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;

    width: calc(20% - 4px);
    height: auto;

    border: 1px solid #dedede;
    border-radius: 5px;
    box-sizing: border-box;
}

.c-product-interconnection-custom-category-image__item img {
    aspect-ratio: 1/1;
    object-fit: cover;

    cursor: pointer;
    border-radius: 3px;
}

.c-product-interconnection-custom-category-image__item.is-color a > span {
    display: block;

    width: 100%;
    aspect-ratio: 1/1;

    border-radius: 5px;
}

.c-product-interconnection-custom-category-image__item.is-color a {
    width: 100%;
    padding: 5px;

}

#products > div .c-product-interconnection-custom-category-image__scroll::-webkit-scrollbar {
    display: none;
}

/*TANGO FIX*/

.highlight-product .c-product-interconnection-custom-category-image.template-tango {
    display: none;
}

.products-block .product:not(.highlight-product):has(.c-product-interconnection-custom-category-image):hover .tools-wrap {
    display: none;
}

/*ŠIPKY*/

.slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 40px;
    z-index: 2;
    opacity: 1;

    background: #f2f2f2;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, background-color ease 300ms;
    font-size: 16px;
    pointer-events: auto;
    border-radius: 2px;
}

.slider-arrow:hover {
    background-color: #f9f9f9;
}

.slider-arrow.left {
    left: 0px;
}

.slider-arrow.right {
    right: 0px;
}

.slider-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}


/*RESPO*/

@media (max-width: 1600px) and (min-width: 1440px) {

}

@media (max-width: 1600px) and (min-width: 992px) {

}

@media (max-width: 1600px) {

}

@media (max-width: 1439px) and (min-width: 1200px) {

}

@media (max-width: 1439px) {

}

@media (max-width: 1199px) and (min-width: 992px) {

}

@media (max-width: 1199px) {

}

@media (max-width: 991px) {

}

@media (max-width: 767px) {

}

@media (max-width: 499px) {
    .columns-mobile-2 .c-product-interconnection-custom-category-image__item {
        width: calc(33.333% - 3px);
    }

    .columns-mobile-2 .c-product-interconnection-custom-category-image__item img {
        margin-bottom: 0 !important;
    }
}


JS

// INICIALIZACE
if (getShoptetDataLayer("pageType") == "category") {
    const eshop_id = dataLayer[0]["shoptet"]["projectId"];
    var productElements;
    if ($("#products").length) {
        productElements = document.querySelectorAll("#products .product:not(.wt-load)");
    } else {
        productElements = document.querySelectorAll("#category-products-wrapper .product:not(.wt-load)");
    }
    let productIds = [];
    productElements.forEach(product => {
        var productId;
        if ($(product).find(".p").length) {
            productId = product.querySelector(".p").getAttribute("data-micro-identifier");
        } else {
            productId = product.getAttribute("data-micro-identifier");
        }
        if (productId) {
            productIds.push(productId);
            product.classList.add("wt-load");
        }
    });
    fetch("https://shoptet.webotvurci.cz/eshop-endpoints/" + eshop_id + "/product-variants/setting-hash")
        .then((response) => response.json())
        .then((response) => {
            var product_connections_setting = "https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-variants/" + eshop_id + "/eshopSetting.json?" + response;
            return fetch(product_connections_setting).then((response) => response.json());
        })
        .then((json) => {
            // Array to hold all promises
            let promises = [];

            productIds.forEach((product_id) => {
                let products = json.products[product_id];
                if (products !== undefined) {
                    products.forEach((element) => {
                        let product_config_id = element;
                        let product_config_data = json.configs[product_config_id];
                        console.log(product_config_data);


                        if (product_config_data.type == "photos" || product_config_data.type == "colors") {
                            promises.push(new Promise((resolve) => {
                                WtShowProductInterconnectionsCategory(product_config_data, product_id);
                                resolve(); // Resolve each promise after function call
                            }));
                        }

                    });
                }
            });


            return Promise.all(promises);
        })
        .then(() => {
            $('.c-product-interconnection-custom-category-image').each(function () {
                const container = $(this);

                // Přidej šipky
                const leftArrow = $('<span class="slider-arrow left" aria-label="Předchozí"><</span>');
                const rightArrow = $('<span class="slider-arrow right" aria-label="Další">></span>');
                container.append(leftArrow, rightArrow);

                const scrollWrapper = container.find('.c-product-interconnection-custom-category-image__scroll');

                let isDragging = false;
                let startX;
                let scrollStart;
                let isClickAllowed = true;

                // === DRAG SCROLL ===
                scrollWrapper.on('mousedown', function (e) {
                    isDragging = true;
                    startX = e.pageX;
                    scrollStart = scrollWrapper.scrollLeft();
                    isClickAllowed = true;
                    scrollWrapper.addClass('active');
                    e.preventDefault();
                });

                $(document).on('mouseup', function () {
                    isDragging = false;
                    scrollWrapper.removeClass('active');
                });

                $(document).on('mousemove', function (e) {
                    if (!isDragging) return;
                    e.preventDefault();

                    const deltaX = e.pageX - startX;
                    scrollWrapper.scrollLeft(scrollStart - deltaX);

                    if (Math.abs(deltaX) > 5) {
                        isClickAllowed = false;
                    }
                });

                scrollWrapper.find('a').on('click', function (e) {
                    if (!isClickAllowed) {
                        e.preventDefault();
                    }
                });

                // === ARROWS SCROLL ===
                const updateArrows = () => {
                    const scrollLeft = scrollWrapper.scrollLeft();
                    const maxScroll = scrollWrapper[0].scrollWidth - scrollWrapper.outerWidth();

                    leftArrow.toggleClass('hidden', scrollLeft <= 0);
                    rightArrow.toggleClass('hidden', scrollLeft >= maxScroll - 1);
                };

                const scrollByOne = (direction) => {
                    const item = scrollWrapper.find('.c-product-interconnection-custom-category-image__item').first();
                    const scrollAmount = item.outerWidth(true); // item width incl. margin

                    scrollWrapper[0].scrollTo({
                        left: scrollWrapper.scrollLeft() + direction * scrollAmount,
                        behavior: 'smooth'
                    });

// Doplníme kontrolu po mírném zpoždění
                    setTimeout(updateArrows, 350);

                };

                leftArrow.on('click', () => scrollByOne(-1));
                rightArrow.on('click', () => scrollByOne(1));
                scrollWrapper.on('scroll', updateArrows);

                updateArrows(); // Initial call
            });


        })
        .catch((error) => {
            console.log(error);
        });
}


// VYKRESLENI
function WtShowProductInterconnectionsCategory(product_config_data, product_id) {
    var productData = product_config_data;


    let container = document.querySelector(`.product .p[data-micro-identifier="${product_id}"] a.image`);
    // Vytvoření kontejneru pro všechny položky
    var wrapperContainer = document.createElement('div');
    switch (shoptet.design.template.name) {
        case "Step":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-step');
            break;

        case "Classic":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-classic');
            break;

        case "Waltz":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-waltz');
            container = document.querySelector(`.product .p[data-micro-identifier="${product_id}"] a.p-image`);
            console.log("aaa");
            break;

        case "Samba":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-samba');
            break;

        case "Disco":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-disco');
            break;

        case "Tango":
            container = document.querySelector(`.product[data-micro-identifier="${product_id}"] .img`);
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-tango');
            break;
        case "Techno":
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-techno');
            break;
        case "Pop":
            container = document.querySelector(`.product[data-micro-identifier="${product_id}"] .p-image`);
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image template-pop');
            break;
        default:
            wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-imag template-default');
            break;
    }
    if (container) {


        var itemsContainer = document.createElement('div');
        itemsContainer.setAttribute('class', 'c-product-interconnection-custom-category-image__scroll');


        if (productData.type == "photos") {
            for (var key in productData.productsSetting) {
                var item = document.createElement('div');
                item.setAttribute('class', 'c-product-interconnection-custom-category-image__item');

                // Vytvoření obsahu položky
                var image = productData.productsSetting[key].imageLink;
                var name = productData.productsSetting[key].label;
                var link = productData.productsSetting[key].link;


                item.innerHTML = `<a href="${link}" title="${name}">
                       <img src="${image}" alt="${name}">
                   </a>`;
                itemsContainer.appendChild(item);
            }
        }

        if (productData.type == "colors") {
            for (var key in productData.productsSetting) {
                var item = document.createElement('div');
                item.setAttribute('class', 'c-product-interconnection-custom-category-image__item is-color');

                // Vytvoření obsahu položky
                var color = productData.productsSetting[key].backgroundColor;
                var name = productData.productsSetting[key].label;
                var link = productData.productsSetting[key].link;


                item.innerHTML = `<a href="${link}" title="${name}">
                       <span style="background: ${color}">
                   </a>`;
                itemsContainer.appendChild(item);
            }
        }
        // Iterace přes productsSetting a vytvoření položek


        wrapperContainer.appendChild(itemsContainer);
        if (container) {
            container.parentNode.insertBefore(wrapperContainer, container.nextSibling);
        }
    }
}

document.addEventListener('ShoptetDOMContentLoaded', function () {

    if (getShoptetDataLayer("pageType") == "category") {
        const eshop_id = dataLayer[0]["shoptet"]["projectId"];
        let productElements = document.querySelectorAll("#products .product:not(.wt-load)");
        let productIds = [];


        productElements.forEach(product => {
            var productId;
            if ($(this).find(".p").length) {
                productId = product.querySelector(".p").getAttribute("data-micro-identifier");
            } else {
                productId = product.getAttribute("data-micro-identifier");
            }
            if (productId) {
                productIds.push(productId);
                product.classList.add("wt-load");
            }
        });
        fetch("https://shoptet.webotvurci.cz/eshop-endpoints/" + eshop_id + "/product-variants/setting-hash")
            .then((response) => response.json())
            .then((response) => {
                var product_connections_setting = "https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/product-variants/" + eshop_id + "/eshopSetting.json?" + response;
                return fetch(product_connections_setting).then((response) => response.json());
            })
            .then((json) => {
                // Array to hold all promises
                let promises = [];


                productIds.forEach((product_id) => {
                    let products = json.products[product_id];
                    if (products !== undefined) {
                        products.forEach((element) => {
                            let product_config_id = element;
                            let product_config_data = json.configs[product_config_id];
                            console.log(product_config_data);


                            if (product_config_data.type == "photos" || product_config_data.type == "colors") {
                                promises.push(new Promise((resolve) => {
                                    WtShowProductInterconnectionsCategory(product_config_data, product_id);
                                    resolve(); // Resolve each promise after function call
                                }));
                            }

                        });
                    }
                });


                return Promise.all(promises);
            })
            .then(() => {
                $('.c-product-interconnection-custom-category-image').each(function () {
                    const container = $(this);

                    // Přidej šipky
                    const leftArrow = $('<span class="slider-arrow left" aria-label="Předchozí"><</span>');
                    const rightArrow = $('<span class="slider-arrow right" aria-label="Další">></span>');
                    container.append(leftArrow, rightArrow);

                    const scrollWrapper = container.find('.c-product-interconnection-custom-category-image__scroll');

                    let isDragging = false;
                    let startX;
                    let scrollStart;
                    let isClickAllowed = true;

                    // === DRAG SCROLL ===
                    scrollWrapper.on('mousedown', function (e) {
                        isDragging = true;
                        startX = e.pageX;
                        scrollStart = scrollWrapper.scrollLeft();
                        isClickAllowed = true;
                        scrollWrapper.addClass('active');
                        e.preventDefault();
                    });

                    $(document).on('mouseup', function () {
                        isDragging = false;
                        scrollWrapper.removeClass('active');
                    });

                    $(document).on('mousemove', function (e) {
                        if (!isDragging) return;
                        e.preventDefault();

                        const deltaX = e.pageX - startX;
                        scrollWrapper.scrollLeft(scrollStart - deltaX);

                        if (Math.abs(deltaX) > 5) {
                            isClickAllowed = false;
                        }
                    });

                    scrollWrapper.find('a').on('click', function (e) {
                        if (!isClickAllowed) {
                            e.preventDefault();
                        }
                    });

                    // === ARROWS SCROLL ===
                    const updateArrows = () => {
                        const scrollLeft = scrollWrapper.scrollLeft();
                        const maxScroll = scrollWrapper[0].scrollWidth - scrollWrapper.outerWidth();

                        leftArrow.toggleClass('hidden', scrollLeft <= 0);
                        rightArrow.toggleClass('hidden', scrollLeft >= maxScroll - 1);
                    };

                    const scrollByOne = (direction) => {
                        const item = scrollWrapper.find('.c-product-interconnection-custom-category-image__item').first();
                        const scrollAmount = item.outerWidth(true); // item width incl. margin

                        scrollWrapper[0].scrollTo({
                            left: scrollWrapper.scrollLeft() + direction * scrollAmount,
                            behavior: 'smooth'
                        });

// Doplníme kontrolu po mírném zpoždění
                        setTimeout(updateArrows, 350);

                    };

                    leftArrow.on('click', () => scrollByOne(-1));
                    rightArrow.on('click', () => scrollByOne(1));
                    scrollWrapper.on('scroll', updateArrows);

                    updateArrows(); // Initial call
                });


            })
            .catch((error) => {
                console.log(error);
            });
    }
});
Pomohl Vám tento článek?
Dislike 0 0 z 0 shledali tento návod přínosný.