Webotvůrci

Menu

Výběr variant – select box s obrázky a dostupností

Upraveno: 21. 8. 2024
Jste zde:
Délka čtení: 3 min
V tomto článku:

Videoukázka

Ukázka

Nastavení – doplňku

Klíčové je použít nastavení pro Typ propojení: Seznam a Vlastní design ANO. Na základě toho máte volnou ruku jak naimplementovat zobrazení dat doplňku.

CSS

Zde najdete ukázku obecných CSS, která slouží k vytvoření select boxu. Je možné z nich vyjít a upravit si je na míru Vašim potřebám.

.c-product-interconnection-custom--image-select-list {
    display: flex;
    width: 100%;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    min-height: 45px;
    cursor: pointer;

}

.c-product-interconnection-custom--image-select-list__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px;
    width: 100%;
}

.c-product-interconnection-custom--image-select-list__inner img {
    width: 45px;
    object-fit: cover;
    height: 45px;
}

.c-product-interconnection-custom--image-select-list__inner h3 {
    font-size: 1rem;
    white-space: pre;
    width: 100%;
    margin: 0;
    padding: 0 2rem 0 5px;
}

.c-product-interconnection-custom--image-select-list__inner .select-all-items-info {
    width: 100%;
    text-align: right;
    font-size: .75rem;
    white-space: pre;
}

.c-product-interconnection-custom--image-select-list__inner .select-all-items-info .price {
    color: #398000;
    display: block;
}



.c-product-interconnection-detail-params--custom {
    display: flex;
    flex-direction: column;
    max-width: 420px;
}

.c-product-interconnection-custom--image-select-list__inner .select-chevron {
    margin-left: 10px;
}

.c-product-interconnection-custom--image-select-list-dropdown__item {
    display: flex;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #efefef;
    min-height: 45px;
    cursor: pointer;
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
}

.c-product-interconnection-custom--image-select-list-dropdown__item .dropdown-item__inner {
    display: flex;
    align-items: center;
    flex-direction: row;
    align-items: center;
    padding: 7px;
    width: 100%;
}

.c-product-interconnection-custom--image-select-list-dropdown__item .dropdown-item__inner img {
    width: 45px;
    object-fit: cover;
    height: 45px;
}

.dropdown-item__inner h3 {
    font-size: .9rem;
    white-space: pre;
    width: 100%;
    margin: 0;
    padding: 0 2rem 0 5px;
}

.c-product-interconnection-custom--image-select-list__inner h3 {
    font-weight: 500;
}

.c-product-interconnection-custom--image-select-list-dropdown__item .price {
    color: #f00000;
    text-align: right;
    white-space: pre;
    font-weight: bold;
}

.c-product-interconnection-custom--image-select-list-dropdown__item span.availability.is--Skladem,
.c-product-interconnection-custom--image-select-list-dropdown__item span.availability.is--skladem {
    color: #3d8208;
}

.c-product-interconnection-custom--image-select-list-dropdown__item .availability {
    text-align: right;
    display: block;
    font-size: .8rem;
}

.c-product-interconnection-custom--image-select-list-dropdown {
    position: absolute;
    top: 100%;
    background: #fff;
    z-index: 2;
    width: 100%;
    box-shadow: 0 4px 9px -1px #d5d5d5;
}

.c-product-interconnection-detail-params--custom {
    position: relative;
}

.c-product-interconnection-custom--image-select-list-dropdown__item:hover {
    background: #f5f5f5;
    transition: all .35s ease;
}

.c-product-interconnection-custom--image-select-list-dropdown__item span.availability.is--null {
    display:none;
}

.c-product-interconnection-custom--image-select-list-dropdown__item .price-availability {
    text-align: right;
}

@media (max-width:575px) {
    .c-product-interconnection-custom--image-select-list__inner .select-all-items-info {
        font-size: 1rem;
    }

    .c-product-interconnection-custom--image-select-list__inner h3,
    .dropdown-item__inner h3 {
        font-size: 1.125rem;
    }
}

JS

Zde najdete ukázku toho jak napojit JS na vlastní design propojení produktů

if (dataLayer[0]["shoptet"]["pageType"] == "productDetail") {
    let product_id = dataLayer[0]["shoptet"]["product"]["guid"];
    const eshop_id = dataLayer[0]["shoptet"]["projectId"];

    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;
            fetch(product_connections_setting)
                .then((response) => response.json())
                .then((json) => {
                    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];
                            WtShowProductInterconnectionsAddonCisBox(product_config_data);
                        });
                    }

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


function WtShowProductInterconnectionsAddonCisBox(product_config_data){
    var productData = product_config_data;
 
    if (dataLayer[0]["shoptet"]["pageType"] == "productDetail" && typeof productData !== 'undefined') {
 
        var container;

        // Přiřazení containeru dle hodnoty v shoptet design template name
        switch (shoptet.design.template.name) {
            case "Step":
                container = document.querySelector(".p-detail-inner .p-basic-info-block");
                if (document.querySelector("#product-detail-form .variant-list") !== null || document.querySelector('#product-detail-form .surcharge-list') !== null) {
                    container = document.querySelector(".p-detail-inner .p-basic-info-block");
                }
                break;

            case "Classic":

                if (document.querySelector("#product-detail-form .detail-parameters th") !== null || document.querySelector("#product-detail-form .detail-parameters tbody") !== null) {
                    container = document.querySelector(".p-detail-inner .detail-parameters");
                } else if (document.querySelector("#product-detail-form #choose-variant") !== null) {
                    container = document.querySelector("#product-detail-form .p-short-description");
                }
                break;

            case "Waltz":

                if (document.querySelector("#product-detail-form .variant-list") !== null) {
                    container = document.querySelector(".p-detail-inner .variant-list");
                } else if (document.querySelector('#product-detail-form .surcharge-list') !== null) {
                    container = document.querySelector(".p-detail-inner .surcharge-list");
                }
                break;

            case "Samba":

                if (document.querySelector("#product-detail-form .p-variants-block") !== null) {
                    container = document.querySelector(".p-detail-inner .p-variants-block");
                }
                break;

            case "Disco":

                if (document.querySelector("#product-detail-form .p-variants-block") !== null) {
                    container = document.querySelector(".p-detail-inner .p-variants-block");
                }
                break;

            case "Tango":
                container = document.querySelector(".p-detail-inner .price-final");

                if (document.querySelector("#product-detail-form .detail-parameters") !== null) {
                    container = document.querySelector(".p-detail-inner .detail-parameters");

                }
                break;
            case "Techno":
                container = document.querySelector(".p-detail-inner .price-final");

                if (document.querySelector("#product-detail-form .detail-parameters") !== null) {
                    container = document.querySelector(".p-detail-inner .detail-parameters");

                }
                break;

            case "Soul":
                if (document.querySelector("#product-detail-form .product-detail-variant-wrap") !== null) {
                    container = document.querySelector(".p-detail-inner .product-detail-variant-wrap");

                }
                break;
            case "Pop":
            case "Rock":
                container = document.querySelector("#t-product-detail #product-detail");

                if (document.querySelector("#product-detail-form .product-detail-variant-wrap") !== null) {
                    container = document.querySelector(".p-detail-inner .product-detail-variant-wrap");

                }
                break;
            case "Echo":
                container = document.querySelector(".pr-list-horizontal-price");

                if (document.querySelector("form .pr-listing-variant-wrap") !== null) {
                    container = document.querySelector("form .pr-listing-variant-wrap");

                } else if (document.querySelector('form .pr-listing-surcharge-wrap') !== null) {
                    container = document.querySelector("form .pr-listing-surcharge-wrap");
                }
                break;
            default:
                if (document.querySelector("#product-detail-form .variant-list") !== null) {
                    container = document.querySelector(".p-detail-inner .p-variants-block");
                }
                break;
        }

        // Kontrola parametrů hasOwnDesign a type
        if (productData.hasOwnDesign === true && productData.type === "list") {
            // Vytvoření custom select boxu
            var customSelectBox = document.createElement('div');
            customSelectBox.setAttribute('class', `c-product-interconnection-detail-params--custom is-template--${shoptet.design.template.name}`);

            // Načtení aktuálního product_id
            let product_id = dataLayer[0]["shoptet"]["product"]["guid"];

            // Vytvoření aktuální položky
            var currentItem = document.createElement('div');
            currentItem.setAttribute('class', `c-product-interconnection-custom--image-select-list is-current`);

            var currentProductData = productData.productsSetting[product_id];
            var currentMeta = productData.metas[product_id];

            // Výpočet počtu položek a cenového rozpětí
            var itemCount = Object.keys(productData.productsSetting).length;
            var prices = Object.values(productData.metas).map(meta => meta.price);
            var minPrice = Math.min(...prices);
            var maxPrice = Math.max(...prices);

            if (currentProductData && currentMeta) {
                currentItem.innerHTML = `
                    <div class="c-product-interconnection-custom--image-select-list__inner">
                        <img src="${currentMeta.image}" alt="${currentMeta.name}">
                        <h3>${currentMeta.name}</h3>
                         <div class='select-all-items-info'>Na výběr až z ${itemCount} variant <span class='price'>${minPrice},- až ${maxPrice},-</span></div>
                         <span class='select-chevron'> ▼</span>
                    </div>`;
            }
            customSelectBox.appendChild(currentItem);

            // Vytvoření kontejneru pro všechny položky
            var itemsContainer = document.createElement('div');
            itemsContainer.setAttribute('class', 'c-product-interconnection-custom--image-select-list-dropdown');
            itemsContainer.style.display = 'none'; // Skrytí položek na začátku
            customSelectBox.appendChild(itemsContainer);

            // Iterace přes productsSetting a vytvoření položek
            for (var key in productData.productsSetting) {
                if (key !== product_id) { // Přeskočení aktuální položky
                    var item = document.createElement('div');
                    item.setAttribute('class', 'c-product-interconnection-custom--image-select-list-dropdown__item');
                    item.dataset.link = productData.productsSetting[key].link;

                    // Vytvoření obsahu položky
                    var image = productData.metas[key].image;
                    var name = productData.metas[key].name;
                    var price = productData.metas[key].price;
                    var availability = productData.metas[key].availability;
                    item.innerHTML = `<div class='dropdown-item__inner'>
                        <img src="${image}" alt="${name}">
                        <h3>${name}</h3>
                        <div class='price-availability'> 
                            <span class='price'>${price} Kč</span>
                            <span class='availability is--${availability}'>${availability}</span>
                        </div>
                    </div>`;

                    // Přidání události pro přesměrování na kliknutí
                    item.addEventListener('click', function () {
                        window.location.href = this.dataset.link;
                    });

                    itemsContainer.appendChild(item);
                }
            }

            // Přidání události pro zobrazení/skrytí položek na kliknutí na aktuální položku
            currentItem.addEventListener('click', function () {
                if (itemsContainer.style.display === 'none') {
                    itemsContainer.style.display = 'block';
                } else {
                    itemsContainer.style.display = 'none';
                }
            });

            // Přidání custom select boxu do zvoleného kontejneru
            if (container) {
                container.parentNode.insertBefore(customSelectBox, container);
            }
        }
    }
}

Pomohl Vám tento článek?
Dislike 0 1 z 1 shledali tento návod přínosný.