Bloky s vlastním kódem

Bloky s vlastním kódem (Custom Code Blocks) jsou builder bloky z čistého HTML, CSS a JavaScriptu — definované kompletně v administraci, bez nasazování. Ideální pro sekce šité na míru jednomu webu, embedy třetích stran nebo experimenty, kvůli kterým se nevyplatí psát PHP třídu bloku.

Custom Code Block vs. PHP blok#

PHP variantu popisuje článek Vlastní bloky.

Vytvoření#

1. V menu administrace otevřete Custom Code Blocks (skupina Obsah).
2. Klikněte na tlačítko pro vytvoření a vyplňte:
   • Název — zobrazí se na dlaždici bloku v builderu.
   • Ikona — Font Awesome ikona dlaždice.
   • Záložka HTML — markup bloku.
   • Záložka CSS — styly bloku.
   • Záložka JavaScript — chování.
3. Uložte.

Blok se okamžitě objeví ve vizuálním builderu v kategorii Vlastní bloky — jen pro tento web.

Jak se jednotlivé části doručují#

Když redaktor blok přetáhne na stránku, HTML se vloží obalené kontejnerem lx-custom-block. CSS a JS cestují s ním jako data atributy a aktivují se na veřejné stránce:

• CSS se injektuje do hlavičky dokumentu,
• JavaScript běží s this navázaným na kořenový element bloku — takže this.querySelector('.button') míří jen do vašeho bloku.

Protože injektované CSS je globální, prefixujte selektory třídou specifickou pro blok, ať nestylujete zbytek stránky:

.promo-banner { background: #111; color: #fff; }
.promo-banner .cta { color: #ff0465; }

<div class="promo-banner">
  <h2>Letní výprodej</h2>
  <a class="cta" href="/vyprodej">Nakupovat</a>
</div>

Úprava existujícího bloku#

Změna Custom Code Blocku v administraci mění předlohu — stránky, kam byl blok už vložen, si nechávají kopii, se kterou vznikly. Na stránkách, které mají dostat novou verzi, blok vložte znovu (a starou instanci odstraňte).

Limity, o kterých je dobré vědět#

• Bloky jsou per web — na dalších webech je případně vytvořte znovu.
• Žádné serverové vykreslování: žádné Blade, žádné PHP, žádný přístup k datům obsahu.
• Skripty běží na veřejné stránce každému návštěvníkovi; pište je malé a defenzivní.

Související články#

• Vlastní bloky
• Přehled bloků — klientský přehled