Jak zobrazit energetické štítky EPREL na frontendu Shoptetu

Tento návod popisuje jednoduchý a funkční způsob, jak na Shoptetu zobrazit energetické štítky (EPREL) na frontendu e-shopu pomocí příznaků produktů a CSS – bez databází, bez API, bez zásahů do backendu.

Vytvoření příznaků v administraci Shoptetu

Nejprve je potřeba vytvořit příznaky, podle kterých se bude na frontendu poznávat, jaký energetický štítek má produkt.

Postup

1. V administraci Shoptetu jděte na:
   Nastavení → Produkty → Parametry a příznaky → Příznaky
2. Vytvořte nové příznaky s názvy například:
   • EPREL-A
   • EPREL-B
   • EPREL-C
   • EPREL-D
   • EPREL-E
   • EPREL-F
   • EPREL-G

Tyto příznaky se následně projeví na frontendu jako HTML třídy ve tvaru:

<span class="flag flag-eprel-a">EPREL-A</span>

Nezapomeňte si u produktů konkrétní štítky přiřadit.

Poznámka ke starším škálám

Pokud potřebujete zobrazovat i starší energetické škály (např. A+, A++, A+++), je nutné:

• vytvořit další příznaky (např. EPREL-APP)
• a počítat s tím, že budou mít vlastní SVG/PNG grafiku

Nahrání obrázků štítků do Správce souborů

U toho návodu je potřeba mít energetické štítky uložené přímo v e-shopu.

Postup

1. V administraci otevřete Správce souborů
2. Nahrajte jednotlivé obrázky štítků (A–G)

Doporučený formát:

• SVG – ideální volba
  • ostré zobrazení na všech zařízeních
  • malá velikost
  • snadné škálování pomocí CSS

(Alternativně lze použít PNG, ale SVG je z technického hlediska lepší.)

Po nahrání si u každého souboru zkopírujte veřejnou URL adresu, např.:

https://example.myshoptet.com/user/documents/upload/labels/A-Left-DarkGreen-WithAGScale.svg

Stažení obrázků

Doporučujeme stáhnout obrázky z oficiálního EPREL zdroje:

https://ec.europa.eu/assets/move-ener/eprel/EPREL%20Public/Nested-labels%20thumbnails/Energy_arrows.zip

Na adrese najdete ZIP se všemi existujícími štítky včetně těch s naznačením škály nebo bez škál.

Mapování příznaků na SVG pomocí CSS

Zobrazení štítků na frontendu je řešeno čistě přes CSS, které:

• skryje text příznaku (EPREL-A)
• a místo něj zobrazí odpovídající SVG obrázek

Příklad CSS kódu:

/* Základ – cílí pouze na EPREL příznaky */
.flags .flag[class*="flag-eprel-"] {
  position: relative;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Pseudo-element pro SVG štítek */
.flags .flag[class*="flag-eprel-"]::before {
  content: "";
  display: inline-block;
  width: 54px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Jednotlivé energetické třídy */
.flag-eprel-a::before {
  background-image: url("URL_NA_SVG_PRO_A");
}

.flag-eprel-b::before {
  background-image: url("URL_NA_SVG_PRO_B");
}

.flag-eprel-c::before {
  background-image: url("URL_NA_SVG_PRO_C");
}

/* … pokračuje až do G */

➡️ Do jednotlivých background-image vložte URL adresy SVG, které jste si zkopírovali ze Správce souborů.

Vložení CSS do Shoptetu

Hotový CSS kód vložte do:

Vzhled a obsah → Editor → HTML kód → Záhlaví

Po uložení se energetické štítky automaticky zobrazí:

• v kategoriích
• na detailu produktu
• všude tam, kde Shoptet vykreslí příznaky produktu

Výsledek

• Produkt má přiřazen příznak EPREL-A až EPREL-G
• Text příznaku se na frontendu nahradí SVG štítkem
• Řešení nezasahuje do jiných příznaků ani do šablony
• Vše je snadno rozšiřitelné o další škály nebo typy štítků

Oficiální data k energetickým štítkům (EPREL)

Pro správné zobrazení energetických štítků je vždy nutné vycházet z oficiálních dat, která jsou evidována v databázi EPREL.

👉 Veřejná databáze EPREL:
https://eprel.ec.europa.eu

V EPREL jsou pro každý výrobek dostupné:

• energetická třída a typ škály
• energetický štítek (grafická podoba)
• informační list produktu (PDF)

V praxi platí, že:

většinu těchto dat by měl e-shop získat už od dodavatele nebo výrobce produktu,
protože právě výrobce je odpovědný za registraci výrobku v EPREL.

EPREL pak slouží hlavně:

• k ověření správnosti údajů
• jako oficiální zdroj pro stažení štítků a informačních listů

Přidání informačních listů a velkých štítků k produktům

Kromě malých energetických štítků (A–G) zobrazených na frontendu je povinné k produktům přidat i kompletní podklady:

• informační list produktu (PDF)
• velký energetický štítek

Jak je na Shoptetu zobrazit:

• Velké energetické štítky lze přidat jako obrázky produktu
  (platí pouze pro plnou grafickou verzi štítku, ne pro malé ikonky).
• Informační listy a velké energetické štítky lze připojit jako související soubory pomocí doplňku:
  👉 https://doplnky.shoptet.cz/souvisejici-soubory

Tento postup umožňuje:

• splnit informační povinnosti
• zpřístupnit dokumenty ke stažení
• a zároveň zachovat přehledný vzhled detailu produktu

EPREL API

Dle našich zkušeností je EPREL API pro třetí strany využitelné jen velmi omezeně a jeho plně automatizovaná implementace by byla technicky i provozně velmi složitá.

Pro smysluplné dotazování je nutné mít u každého produktu:

• správně určenou produktovou skupinu (EPREL category),
• a znát buď:
  • EPREL ID produktu (nejspolehlivější varianta),
  • nebo modelový identifikátor výrobce (méně spolehlivé, náchylné na nekonzistence v zápisech).

EAN kód je v praxi téměř nepoužitelný, protože:

• EPREL jej nemá povinný u všech kategorií výrobků,
• často je v databázi veden pouze jako GTIN,
• a i tam, kde existuje, nemusí být jednoznačně spárovatelný s konkrétním modelem.

Z těchto důvodů není EPREL API vhodné jako přímý zdroj dat pro automatické zobrazování energetických štítků na e-shopu. V praxi se jako výrazně stabilnější řešení ukazuje práce s daty dodanými výrobcem či distributorem a využití EPREL primárně jako referenčního a validačního zdroje, nikoliv jako runtime API.