Główne bloki strony i sposoby zmiany projektu

Główne bloki strony

/*CONTENT GRID*/

#hotengine-content-container { display: grid;
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns:0% 1fr 0%;
  margin:0 auto; width:100%;
}

#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns: auto 1fr auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-left container-center";
  grid-template-columns: auto 1fr;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto;
}

.hotengine-wrap-container-side-center { grid-area: container-center; vertical-align:top; margin:0 auto; width:100%;}
.hotengine-wrap-container-side-left   { grid-area: container-left; vertical-align:top; margin:0 auto; width:auto; max-width:270px;  }
.hotengine-wrap-container-side-right  { grid-area: container-right; vertical-align:top; margin:0 auto; width:auto; max-width:270px; }

.menu_position_top { display:block;    width:100%;  }
.menu_position_buttom { display:block; width:100%; }

@media (max-width:767px){
#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-center container-left container-right";
  grid-template-columns: 1fr auto auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-center container-left";
  grid-template-columns: 1fr auto ;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto ;
}
}
/*CONTENT GRID*/

• Strony - #hotengine-content-page
• Katalog artykułów - #hotengine-content-blog
• Katalog produktów - #hotengine-content-shop
• Katalog produktów (producenci) - #hotengine-content-shop
• Katalog produktów (kolekcje) - #hotengine-content-shop

• Katalog produktów - .hotengine-content-shop-category
• Katalog produktów (kolekcje) - .hotengine-content-shop-collection
• Katalog produktów (producenci) - .hotengine-content-shop-producer
• Katalog artykułów - .hotengine-content-blog-category

Jak zmieniać projekt strony

Jak utworzyć własny projekt nagłówka strony?

• Przycisk «Dodaj do koszyka»
• Koszyk
• Ikona «Dodaj do ulubionych»
• Ikona «Dodaj do porównania»
• Wszystkie podstawowe elementy karty produktu: cena, dostępność, cechy, blok z opisem, zakładki w karcie produktu
• Nagłówki stron
• Widżety z produktami
• Menu mobilne
• Nagłówki odmian produktu
• Każda strona ma unikalną klasę lub ID, a element nadrzędny id="hotengine-wrapper" zawiera identyfikator aktualnie otwartej strony.

• Ikona koszyka z jego zawartością
• Ikona «Dodaj do koszyka»
• Ikona «Dodaj do ulubionych»
• Ikona «Porównanie produktów» z jego zawartością
• Widżety

• Pisz style CSS w edytorze projektu platformy.
• Plik jest automatycznie minifikowany (kompresowany), co przyspiesza działanie strony i poprawia SEO.
• Można tworzyć indywidualne style dla dowolnych elementów, w tym wbudowanych ID i klas, a także dla własnych bloków, aby w pełni kontrolować wygląd strony.

Jak zresetować projekt?

Style CSS

• CSS tłumaczeń wartości tekstowych [RU]
• CSS tłumaczeń wartości tekstowych [EN]
• CSS tłumaczeń wartości tekstowych [UA]
• CSS tłumaczeń wartości tekstowych [DE]
• CSS tłumaczeń wartości tekstowych [ES]
• CSS tłumaczeń wartości tekstowych [FR]
• CSS tłumaczeń wartości tekstowych [KK]
• CSS tłumaczeń wartości tekstowych [BE]
• CSS tłumaczeń wartości tekstowych [RO]
• CSS tłumaczeń wartości tekstowych [TR]
• CSS tłumaczeń wartości tekstowych [IT]
• CSS tłumaczeń wartości tekstowych [SK]
• CSS tłumaczeń wartości tekstowych [DA]
• CSS tłumaczeń wartości tekstowych [PL]
• CSS tłumaczeń wartości tekstowych [ZH]
• CSS tłumaczeń wartości tekstowych [HI]
• CSS tłumaczeń wartości tekstowych [AR]
• CSS tłumaczeń wartości tekstowych [PT]
• CSS tłumaczeń wartości tekstowych [BN]

Szablonizacja

<script>
document.addEventListener("DOMContentLoaded", () => {
    const el = document.querySelector(`.hotengine-shop-product-desc-block .hotengine-shop-product-producer`);
    const newproducer = el ? el.innerHTML : null;

    if (newproducer && newproducer !== "" && newproducer !== "undefined") {
        el.style.display = "none";
        const skuBox = document.querySelector(`.hotengine-shop-product-sku-box`);
        if (skuBox) {
            skuBox.insertAdjacentHTML("afterend", `${newproducer}`);
        }
    }
});
</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(`.element`).forEach(el => {
        const wrapper = document.createElement("div");
        wrapper.className = "new";
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
    });
});
</script>

Szablony

Edytor

Formatowanie tekstu na BooStore.pro za pomocą AI