+420 728 089 029jsme@webotvurci.cz
Vydejme se na cestu
+420 728 089 029

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

⏱ 3 min čtení

A-Left-DarkGreen-WithAGScale

Délka čtení: 3 min

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

Nejdříve vytvořte příznaky produktů, které identifikují energetické štítky na frontendu.

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:
    • EPREL-A
    • EPREL-B
    • EPREL-C
    • EPREL-D
    • EPREL-E
    • EPREL-F
    • EPREL-G

Tyto příznaky se na frontendu projeví jako HTML třídy: <span class="flag flag-eprel-a">EPREL-A</span>

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

Pro starší energetické třídy (např. A+, A++, A+++) vytvořte další příznaky s vlastní SVG/PNG grafikou.

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

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í, malá velikost, snadné škálování)
  • Alternativně PNG

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

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

Stažení obrázků

Stáhněte obrázky z oficiálního EPREL zdroje:

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

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

Zobrazení štítků se řeší čistě přes CSS, které skryje text příznaku a 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

Vložte hotový CSS kód do: Vzhled a obsah → Návrhář šablon → HTML editor → Záhlaví

Po uložení se energetické štítky automaticky zobrazí v kategoriích, na detailu produktu a 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í je nutné vycházet z oficiálních dat 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ětšinu těchto dat by měl e-shop získat od dodavatele nebo výrobce produktu, protože právě výrobce je odpovědný za registraci výrobku v EPREL.

EPREL slouží jako:

  • ověření správnosti údajů
  • 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ů musí být k produktům přidány i kompletní podklady.

Jak je na Shoptetu zobrazit

Tento postup umožňuje splnit informační povinnosti a zpřístupnit dokumenty ke stažení.

EPREL API

Podle zkušeností je EPREL API pro třetí strany využitelné jen velmi omezeně. Pro smysluplné dotazování je nutné mít u každého produktu:

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

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

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

Z těchto důvodů se jako stabilnější řešení ukazuje práce s daty dodanými výrobcem a využití EPREL primárně jako referenčního a validačního zdroje, nikoliv jako runtime API.