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.
CSS:
.c-product-interconnection-custom-category-image {
position: relative;
overflow: hidden;
height: inherit;
}
.c-product-interconnection-custom-category-image__scroll {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 20px; /* Space for shadow effect */
}
.c-product-interconnection-custom-category-image__item {
flex: 0 0 auto; /* Prevent items from shrinking or growing */
box-sizing: border-box;
margin-right: 10px; /* Spacing between items */
min-width: 80px;
width: 80px;
height: 80px;
border: 1px solid var(--master-grey-border);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.c-product-interconnection-custom-category-image__item img {
width: 70px!important;
height: 70px!important;
object-fit: cover;
cursor: pointer;
border-radius: 3px;
}
.c-product-interconnection-custom-category-image__scroll::-webkit-scrollbar {
display: none; /* Hide scrollbar for webkit browsers */
}
.c-product-interconnection-custom-category-image::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px; /* Width of the gradient */
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
pointer-events: none; /* Allow clicks to pass through */
}
JS
// INICIALIZACE
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 => {
let productId = product.querySelector(".p").getAttribute("data-micro-identifier");
if (productId) {
productIds.push(productId);
//product.classList.add("wt-load"); - pridat po spuštění
}
});
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];
// Push each call to WtShowProductInterconnectionsAddonCisBox into promises array
promises.push(new Promise((resolve) => {
WtShowProductInterconnectionsAddonCisBox(product_config_data, product_id);
resolve(); // Resolve each promise after function call
}));
});
}
});
// Wait for all WtShowProductInterconnectionsAddonCisBox calls to complete
return Promise.all(promises);
})
.then(() => {
$('.c-product-interconnection-custom-category-image__scroll').each(function () {
let isDragging = false;
let startX;
let scrollStart;
let isClickAllowed = true; // Základní nastavení pro klik
const scrollContainer = $(this);
scrollContainer.on('mousedown', function (e) {
isDragging = true;
startX = e.pageX; // Uloží startovní pozici myši
scrollStart = scrollContainer.scrollLeft(); // Uloží startovní pozici scrollování
isClickAllowed = true; // Povolit klik na začátku
scrollContainer.addClass('active');
e.preventDefault(); // Zabrání výběru textu
});
$(document).on('mouseup', function () {
isDragging = false;
scrollContainer.removeClass('active');
});
$(document).on('mousemove', function (e) {
if (!isDragging) return; // Zkontroluje, zda je kliknuté tlačítko
e.preventDefault();
// Vypočítá přesný posun na základě rozdílu mezi aktuální a startovní pozicí myši
const deltaX = e.pageX - startX;
scrollContainer.scrollLeft(scrollStart - deltaX); // Aktualizuje scrollLeft
// Pokud deltaX překročí určitou hodnotu, deaktivuje kliknutí
if (Math.abs(deltaX) > 5) { // 5px je prahová hodnota
isClickAllowed = false;
}
});
// Zabraň aktivaci odkazu, pokud byl posun větší než 5px
scrollContainer.find('a').on('click', function (e) {
if (!isClickAllowed) {
e.preventDefault();
}
});
});
})
.catch((error) => {
console.log(error);
});
}
// VYKRESLENI
function WtShowProductInterconnectionsAddonCisBox(product_config_data, product_id) {
var productData = product_config_data;
if (productData.hasOwnDesign === true && productData.type === "list") {
let container = document.querySelector(`.product .p[data-micro-identifier="${product_id}"] a.image`);
if (container) {
// Vytvoření kontejneru pro všechny položky
var wrapperContainer = document.createElement('div');
wrapperContainer.setAttribute('class', 'c-product-interconnection-custom-category-image');
var itemsContainer = document.createElement('div');
itemsContainer.setAttribute('class', 'c-product-interconnection-custom-category-image__scroll');
// Iterace přes productsSetting a vytvoření položek
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.metas[key].image;
var name = productData.metas[key].name;
var link = productData.productsSetting[key].link;
item.innerHTML = `<a href="${link}">
<img src="${image}" alt="${name}">
</a>`;
itemsContainer.appendChild(item);
}
wrapperContainer.appendChild(itemsContainer);
if (container) {
container.parentNode.insertBefore(wrapperContainer, container.nextSibling);
}
}
}
}