Egen kode på en komponent

Med Advanced på kan du skrive egen HTML, CSS og JS for en komponent.

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

Malsyntaksen, variablene og actions står under Malreferanse. Krokene og hvordan CSS-en avgrenses, står under Kroker og CSS-referanse.

#Tre måter å gjøre en komponent til din egen

Med Own HTML på Off endrer du ikke markupen. CSS-en og JS-en din legges oppå plattformens HTML. Komponentens valg, farger og innhold gjelder som før. Med Own HTML på On er markupen din, og du vedlikeholder den. Start from the standard markup fyller feltet med standardutseendets markup og slår på bryteren.

En stil lagres i temautkastet og en ny komponent på siden. Begge går live når du publiserer. Butikken og arbeidsflaten tegner fra samme kode.

#Ny komponent

New component står nederst i fanen Components. Med Advanced av står det en tekst der om at knappen krever Advanced.

1. Slå på Advanced.
2. Marker seksjonen som den nye skal havne etter. Uten markering havner den sist.
3. Trykk New component.
4. Fyll inn Name.
5. Skriv koden i fanene HTML, CSS og JS, og feltene i Fields.

BunStack legger seksjonen Custom component på siden, markerer den og åpner inspektøren. Samme seksjon finnes i seksjonsbiblioteket. Den flyttes, dupliseres og skjules som andre seksjoner, se Seksjoner og sider.

Det malen eller CSS-en ikke slipper gjennom, står i rødt under koden mens du skriver. Med Advanced av viser inspektøren navnet, feltene, Width, Show on, Background og teksten Edit in Advanced mode. Seksjonen tegnes i butikken som vanlig.

#Felt

Med felt kan hvem som helst endre en komponents tekster, farger og produkter uten kode. Du skriver feltene som JSON i fanen Fields. Verdiene endres i inspektøren under WORDS & PICTURES, også med Advanced av.

[
  { "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 malen leser: bokstaver, sifre og _, en bokstav 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}}

• Maks 20 felt, 12 i en liste og 24 poster i en liste.
• Det som er feil i JSON-en, står i rødt under feltet.
• Save to Your components lagrer feltene med verdiene. En kopi som legges på en side, får verdiene.
• Seksjonens Width, Show on og Background finnes i inspektøren som på hver seksjon, under LAYOUT og LOOK. Se Bredde og Bakgrunn.

#Dine komponenter

Save to Your components nederst i inspektøren lagrer seksjonen i workspacets bibliotek: navn, HTML, CSS, JS og feltene. Varselet viser for eksempel Saved "Hero video" to Your components. Seksjonen kobles til raden i biblioteket, og knappene byttes:

• Update "Hero video" overskriver raden med seksjonens innhold. Kopier som legges inn etterpå, får det nye. Kopier som allerede finnes på sider, endres ikke.
• Save as new lagrer en ny rad. Seksjonen kobles til den nye raden.
• Remove from Your components fjerner raden fra biblioteket.

Fjern en lagret komponent:

1. Trykk Remove from Your components.
2. Les Remove "Hero video" from Your components? Copies already on pages stay. Trykk Continue, eller Keep for å avbryte.
3. Skriv navnet i feltet under Type Hero video to confirm. Store eller små bokstaver spiller ingen rolle.
4. Trykk Remove "Hero video".

Raden forsvinner fra biblioteket i alle butikker i workspacet. Det kan ikke angres. Kopien på siden blir værende. Har noen andre allerede fjernet raden når du trykker Update, står det i inspektøren, og koblingen fjernes. Lagre den da som ny.

En lagret komponent vises i alle butikker i workspacet:

• i seksjonsbiblioteket som raden Your components, under kategorien ALL
• i fanen Library som en egen gruppe
• i ⌘K som Add "Hero video"

Søket finner den på navnet. Ordene your og components viser alle. Et klikk legger en kopi på siden. Kopien legges inn også med Advanced av, men koden kan bare endres med Advanced på.

#Roten er butikkens

En komponent har en rot som butikken tegner. Malen din er innholdet i roten. Topptekstens rot er [data-bs-header]. Butikken setter tilstandene [data-bs-transparent], [data-bs-scrolled] og [data-bs-sticky] på roten, også når toppteksten er din egen HTML.

Ikke skriv en egen <header> i malen. Begynn med det som skal stå inni. CSS-en din avgrenses til roten, og JS-en din får roten som root. Alle røtter står under Kroker og CSS-referanse.

#JS

• JS-en kjøres én gang per sideinnlasting, når siden er lastet.
• Den kjøres på hver side der komponenten finnes, med komponentens rot som root.
• Menypanelets rot finnes bare mens panelet er åpent. JS-en kjøres hver gang panelet åpnes. Bind lyttere på root, ikke på document.
• Et produktkort finnes flere ganger på en side. root er det første. Bruk document.querySelectorAll('[data-bs-card]') for alle.
• En feil logges i nettleserens konsoll med stilens navn. Feilen stopper verken siden eller andre komponenters JS.
• Slå av Run JS in the builder over JS-feltet for å sette JS-en din på pause på arbeidsflaten i økten. Butikken og Preview (⌘P) kjører den likevel.

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

Sidens JS i panelet Code kjøres på samme måte, uten root. JS på siden Collection gjelder alle kategorisider.

#Grenser

Lengre kode kuttes med en advarsel som viser hvor. Feil og advarsler beskrives under Malreferanse.

#Eksempel: gjennomsiktig topptekst med ikoner

Målet er en topptekst i full bredde. Den er gjennomsiktig over hero-bildet med hvit logo og hvite ikoner. Etter 24 px scroll blir den solid. Til høyre står 4 ikoner på 30 px: søk, ønskeliste, handlekurv og meny.

Gjør slik på komponentpanelet for Header:

1. Legg et Image banner med Width Full og et mørkt foto først på forsiden.
2. Look: velg Icons + panel.
3. Options: slå på Sticky og Transparent over hero. Slå av Menu label og Announcement bar.
4. Content: velg den mørke logoen under Logo, høyde 40. Velg den hvite under Light logo.
5. Kontroller at Theme › Colours › Header text over hero er hvit.
6. Velg skrifttyper og basisstørrelse under Theme › Typography.

Advanced på, 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; }

Trykk Save as new style og kall den "Min navbar". Den ligger nå under Your header styles i alle butikker i workspacet. Stilen har utseendet, valgene, fanen Design og CSS-en. Logoene hører til temaet og stilles inn under Content i hver butikk.

Samme topptekst skrevet som egen HTML står under Malreferanse.