Egen kode på en komponent

Med Advanced slået til kan du skrive egen HTML, CSS og JS til en komponent.

Hvor: Customize with code nederst på komponentpanelet, og New component i fanen Components. Begge kræver Advanced.

Skabelonsyntaksen, variablerne og actions står under Skabelonreference. Krogene og hvordan CSS'en afgrænses, står under Kroge og CSS-reference.

#Tre måder at gøre en komponent til din egen

Med Own HTML på Off ændrer du ikke markuppen. Din CSS og JS lægges oven på platformens HTML. Komponentens valg, farver og indhold gælder som før. Med Own HTML på On er markuppen din, og du vedligeholder den. Start from the standard markup fylder feltet med standardudseendets markup og slår kontakten til.

En stilart gemmes i temakladden og en ny komponent på siden. Begge går live, når du publicerer. Butikken og arbejdsfladen tegner fra samme kode.

#Ny komponent

New component står nederst i fanen Components. Med Advanced slået fra står der en tekst om, at knappen kræver Advanced.

1. Slå Advanced til.
2. Markér den sektion, den nye skal havne efter. Uden markering havner den sidst.
3. Tryk New component.
4. Udfyld Name.
5. Skriv koden i fanerne HTML, CSS og JS, og felterne i Fields.

BunStack lægger sektionen Custom component på siden, markerer den og åbner inspektøren. Samme sektion findes i sektionsbiblioteket. Den flyttes, dubleres og skjules som andre sektioner, se Sektioner og sider.

Det, skabelonen eller CSS'en ikke slipper igennem, står med rødt under koden, mens du skriver. Med Advanced slået fra viser inspektøren navnet, felterne, Width, Show on, Background og teksten Edit in Advanced mode. Sektionen tegnes i butikken som normalt.

#Felter

Med felter kan alle ændre en komponents tekster, farver og produkter uden kode. Du skriver felterne som JSON i fanen Fields. Værdierne ændres i inspektøren under WORDS & PICTURES, også med Advanced slået fra.

[
  { "key": "heading", "type": "text", "label": "Heading" },
  { "key": "items", "type": "list", "label": "Items", "fields": [
    { "key": "name", "type": "text", "label": "Name" },
    { "key": "text", "type": "richtext", "label": "Text" },
    { "key": "colour", "type": "colour", "label": "Colour" },
    { "key": "product", "type": "product", "label": "Product" }
  ] }
]

key er navnet, skabelonen læser: bogstaver, cifre og _, et bogstav først. label er navnet i inspektøren.

<h2>{{fields.heading}}</h2>
{{#each fields.items}}
<article style="border-top: 3px solid {{colour}}">
  <h3>{{name}}</h3>
  <div data-bs-field-html="items.{{@index}}.text"></div>
  {{#if product}}<a href="{{product.url}}">{{product.title}}</a>{{/if}}
</article>
{{/each}}

• Højst 20 felter, 12 i en liste og 24 poster i en liste.
• Det, der er forkert i JSON'en, står med rødt under feltet.
• Save to Your components gemmer felterne med deres værdier. En kopi, der lægges på en side, får værdierne.
• Sektionens Width, Show on og Background findes i inspektøren som på alle sektioner, under LAYOUT og LOOK. Se Bredde og Baggrund.

#Dine komponenter

Save to Your components nederst i inspektøren gemmer sektionen i workspacets bibliotek: navn, HTML, CSS, JS og felterne. Meddelelsen viser for eksempel Saved "Hero video" to Your components. Sektionen knyttes til rækken i biblioteket, og knapperne skifter:

• Update "Hero video" overskriver rækken med sektionens indhold. Kopier, der lægges ind bagefter, får det nye. Kopier, der allerede findes på sider, ændres ikke.
• Save as new gemmer en ny række. Sektionen knyttes til den nye række.
• Remove from Your components fjerner rækken fra biblioteket.

Fjern en gemt komponent:

1. Tryk Remove from Your components.
2. Læs Remove "Hero video" from Your components? Copies already on pages stay. Tryk Continue, eller Keep for at afbryde.
3. Skriv navnet i feltet under Type Hero video to confirm. Store eller små bogstaver er ligegyldige.
4. Tryk Remove "Hero video".

Rækken forsvinder fra biblioteket i alle butikker i workspacet. Det kan ikke fortrydes. Kopien på siden bliver. Har en anden allerede fjernet rækken, når du trykker Update, står det i inspektøren, og forbindelsen fjernes. Gem den så som ny.

En gemt komponent vises i alle butikker i workspacet:

• i sektionsbiblioteket som rækken Your components, under kategorien ALL
• i fanen Library som en egen gruppe
• i ⌘K som Add "Hero video"

Søgningen finder den på navnet. Ordene your og components viser alle. Et klik lægger en kopi på siden. Kopien lægges ind også med Advanced slået fra, men koden kan kun ændres med Advanced slået til.

#Roden er butikkens

En komponent har en rod, som butikken tegner. Din skabelon er indholdet i roden. Sidehovedets rod er [data-bs-header]. Butikken sætter tilstandene [data-bs-transparent], [data-bs-scrolled] og [data-bs-sticky] på roden, også når sidehovedet er din egen HTML.

Skriv ikke en egen <header> i skabelonen. Begynd med det, der skal stå indeni. Din CSS afgrænses til roden, og din JS får roden som root. Alle rødder står under Kroge og CSS-reference.

#JS

• JS'en køres én gang pr. sideindlæsning, når siden er indlæst.
• Den køres på hver side, hvor komponenten findes, med komponentens rod som root.
• Menupanelets rod findes kun, mens panelet er åbent. Dets JS køres, hver gang panelet åbnes. Bind lyttere på root, ikke på document.
• Et produktkort findes flere gange på en side. root er det første. Brug document.querySelectorAll('[data-bs-card]') til alle.
• En fejl logges i browserens konsol med stilartens navn. Fejlen stopper hverken siden eller andre komponenters JS.
• Slå Run JS in the builder over JS-feltet fra for at sætte din JS på pause på arbejdsfladen i sessionen. Butikken og Preview (⌘P) kører den alligevel.

root.querySelectorAll('[data-bs-header-icons] a').forEach((a) => {
  a.addEventListener('mouseenter', () => a.classList.add('is-hot'));
});

Sidens JS i panelet Code køres på samme måde, uden root. JS på siden Collection gælder alle kategorisider.

#Grænser

Længere kode skæres af med en advarsel, der viser hvor. Fejl og advarsler beskrives under Skabelonreference.

#Eksempel: gennemsigtigt sidehoved med ikoner

Målet er et sidehoved i fuld bredde. Det er gennemsigtigt over hero-billedet med hvidt logo og hvide ikoner. Efter 24 px scroll bliver det solidt. Til højre står 4 ikoner på 30 px: søg, ønskeliste, kurv og menu.

Gør sådan på komponentpanelet for Header:

1. Læg et Image banner med Width Full og et mørkt foto først på forsiden.
2. Look: vælg Icons + panel.
3. Options: slå Sticky og Transparent over hero til. Slå Menu label og Announcement bar fra.
4. Content: vælg det mørke logo under Logo, højde 40. Vælg det hvide under Light logo.
5. Kontrollér, at Theme › Colours › Header text over hero er hvid.
6. Vælg skrifttyper og basisstørrelse under Theme › Typography.

Advanced til, Customize with code, Code › CSS:

[data-bs-header] { padding: 16px; }
@media (min-width: 768px) { [data-bs-header] { padding: 32px; } }
[data-bs-header-inner] { max-width: none; }
[data-bs-header-icons] { gap: 16px; }
[data-bs-header-icons] a, [data-bs-header-icons] button { opacity: 1; }
[data-bs-header-icons] svg { width: 30px; height: 30px; stroke-width: 1.6; }

Tryk Save as new style, og kald den "Min navbar". Den ligger nu under Your header styles i alle butikker i workspacet. Stilarten har udseendet, valgene, fanen Design og CSS'en. Logoerne hører til temaet og indstilles under Content i hver butik.

Samme sidehoved skrevet som egen HTML står under Skabelonreference.