Egen kod på en komponent

Med Advanced på kan du skriva egen HTML, CSS och JS för en komponent.

Var: Customize with code längst ner på komponentpanelen, och New component i fliken Components. Båda kräver Advanced.

Mallsyntaxen, variablerna och actions finns i Mallreferens. Krokarna och hur CSS:en avgränsas finns i Krokar och CSS-referens.

#Tre sätt att göra en komponent egen

Med Own HTML på Off ändrar du inte markupen. Din CSS och JS läggs ovanpå plattformens HTML. Komponentens alternativ, färger och innehåll gäller som förut. Med Own HTML på On är markupen din och du underhåller den. Start from the standard markup fyller fältet med standardutseendets markup och slår på reglaget.

En stil sparas i temautkastet, en ny komponent sparas på sidan. Båda går live när du publicerar. Butiken och arbetsytan ritar från samma kod.

#Ny komponent

New component står längst ner i fliken Components. Med Advanced av står där i stället Build a completely new component (your own HTML, CSS and JS): turn on Advanced at the top.

1. Slå på Advanced.
2. Markera sektionen som den nya ska hamna efter. Utan markering hamnar den sist.
3. Tryck New component.
4. Fyll i Name.
5. Skriv koden i flikarna HTML, CSS och JS, och fälten i Fields.

BunStack lägger sektionen Custom component på sidan, markerar den och öppnar inspektorn. Samma sektion finns i sektionsbiblioteket. Du flyttar, dubblerar och döljer den som andra sektioner, se Sektioner och sidor.

Det som saneringen tar bort ur mallen eller CSS:en står i rött under koden medan du skriver. Med Advanced av visar inspektorn namnet, fälten, Width, Show on, Background och texten Edit in Advanced mode. Butiken visar sektionen som vanligt.

#Fält

Med fält kan vem som helst ändra en komponents texter, färger och produkter utan kod. Du skriver fälten som JSON i fliken Fields. Värdena ändras i inspektorn under WORDS & PICTURES, även 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 är namnet som mallen läser: bokstäver, siffror och _, en bokstav först. label är namnet i inspektorn.

<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ögst 20 fält, 12 i en lista och 24 poster i en lista.
• Det som är fel i JSON:en står i rött under fältet.
• Save to Your components sparar fälten med sina värden. En kopia som läggs på en sida får värdena.
• Sektionens Width, Show on och Background finns i inspektorn som på varje sektion, under LAYOUT och LOOK. Se Bredd och Bakgrund.

#Dina komponenter

Save to Your components längst ner i inspektorn sparar sektionen i workspacets bibliotek: namn, HTML, CSS, JS och fälten. Notisen visar till exempel Saved "Hero video" to Your components. Sektionen kopplas till raden i biblioteket, och knapparna byts:

• Update "Hero video" skriver över raden med sektionens innehåll. Kopior du lägger in efteråt får det nya innehållet. Kopior som redan finns på sidor ändras inte.
• Save as new sparar en ny rad. Sektionen kopplas till den nya raden.
• Remove from Your components tar bort raden från biblioteket.

Ta bort en sparad komponent:

1. Tryck Remove from Your components.
2. Läs Remove "Hero video" from Your components? Copies already on pages stay. Tryck Continue, eller Keep för att avbryta.
3. Skriv namnet i fältet under Type Hero video to confirm. Stora eller små bokstäver spelar ingen roll.
4. Tryck Remove "Hero video".

Raden försvinner ur biblioteket i alla butiker i workspacet. Det går inte att ångra. Kopian på sidan finns kvar. Har någon annan redan tagit bort raden när du trycker Update, visar inspektorn That component is no longer in Your components. Save it as new. Kopplingen till raden tas bort. Spara då med Save as new.

En sparad komponent listas i alla butiker i workspacet:

• i sektionsbiblioteket som raden Your components, under kategorin ALL
• i fliken Library som en egen grupp
• i ⌘K som Add "Hero video"

Sökningen hittar den på namnet. Söker du på your eller components listas alla. Ett klick lägger en kopia på sidan. Kopian läggs in även med Advanced av, men koden går bara att ändra med Advanced på.

#Roten är butikens

En komponent har en rot som butiken ritar. Din mall är innehållet i roten. Sidhuvudets rot är [data-bs-header]. Butiken sätter tillstånden [data-bs-transparent], [data-bs-scrolled] och [data-bs-sticky] på roten, även när sidhuvudet är din egen HTML.

Skriv inte ett eget <header> i mallen. Börja med det som ska stå inuti. Din CSS avgränsas till roten och din JS får roten som root. Alla rötter finns i Krokar och CSS-referens.

#JS

• JS:en körs en gång per sidladdning, när sidan har laddats.
• Den körs på varje sida där komponenten finns, med komponentens rot som root.
• Menypanelens rot finns bara medan panelen är öppen. Dess JS körs varje gång panelen öppnas. Bind lyssnare på root, inte på document.
• Ett produktkort finns flera gånger på en sida. root är det första. Använd document.querySelectorAll('[data-bs-card]') för alla.
• Ett fel loggas i webbläsarens konsol med stilens namn. Felet stoppar inte sidan eller andra komponenters JS.
• Slå av Run JS in the builder ovanför JS-fältet för att pausa din JS på arbetsytan under sessionen. Butiken och Preview i designern (⌘P) kör den ändå.

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

Sidans JS i panelen Code körs på samma sätt, utan root. JS på sidan Collection gäller alla kategorisidor.

#Gränser

BunStack klipper längre kod och visar en varning med platsen. Fel och varningar beskrivs under Mallreferens.

#Exempel: genomskinligt sidhuvud med ikoner

Målet är ett sidhuvud i full bredd. Det är genomskinligt över hero-bilden med vit logotyp och vita ikoner. Efter 24 px scroll blir det ogenomskinligt. Till höger står 4 ikoner på 30 px: sök, önskelista, varukorg och meny.

Gör så här i komponentpanelen för Header:

1. Lägg en Image banner med Width Full och ett mörkt foto först på startsidan.
2. Look: välj Icons + panel.
3. Options: slå på Sticky och Transparent over hero. Slå av Menu label och Announcement bar.
4. Content: välj den mörka logotypen under Logo, höjd 40. Välj den vita under Light logo.
5. Kontrollera att Theme › Colours › Header text over hero är vit.
6. Välj typsnitt och basstorlek 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; }

Tryck Save as new style och döp den till "Min navbar". Den ligger nu under Your header styles i alla butiker i workspacet. Stilen har utseendet, alternativen, fliken Design och CSS:en. Logotyperna hör till temat. Du ställer in dem under Content i varje butik.

Samma sidhuvud skrivet som egen HTML finns i Mallreferens.