Mallreferens

Hur du öppnar kodredigeraren: se Egen kod på en komponent.

Var: designern, Customize with code › Code på en komponent, med Advanced på. Sektionen Custom component följer samma regler.

#Roten är butikens

Varje 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 inget eget <header> i mallen. Börja med det som ska stå inuti.
• Din CSS avgränsas till roten. Din JS får roten som root.
• En Custom component-sektion har roten [data-bs-block="<sektions-id>"].

Alla rötter finns i Krokar och CSS-referens.

#Mallsyntax

Mallen är HTML med variabler i dubbla klammerparenteser. Det här är hela syntaxen.

• Tom text, 0, tom lista och false räknas som falskt.
• Det finns inget sätt att skriva ut oescapad HTML.
• Det finns inga hjälpfunktioner och inga inkluderade mallar.

#Gränser

• BunStack klipper det som är längre och visar en varning med platsen, till exempel css cut at 200 000 characters.
• En rendering avbryts efter 50 000 steg. En loop i en loop kan inte hänga butiken.
• En mall på 33 333 tecken eller mer renderas en gång utan data i designern. Når den en gräns i den renderingen visas varningen under May cut with some data på fliken Code.
• Butiken listar bara det som dess egen rendering klipper.

#Fel och varningar

En mall som inte går att läsa ritar ingenting. Det gäller till exempel en {{#each}} som aldrig stängs, eller ett block som stängs med fel tagg. Butiken visar då standardutseendet, och designern visar felet vid koden.

En varning kan gälla en CSS-regel som inte gick att avgränsa, eller ett alternativ som avvisades.

#Variabler

#Header, Menu panel och Footer

De tre komponenterna har samma variabler. Sektionen Custom component får samma uppsättning.

#Product card

En mall per kort. Den ritas för varje produkt i ett rutnät.

#Product page

Galleriet och köppanelen, ritade för den variant som visas. Väljer kunden en annan variant med select-variant ritas mallen om. Priset, artikelnumret, lagerraden, product.variantId och varje selected följer med. Resten av sidan är standardsidans: detaljer, recensioner och relaterade produkter. Under mallen ritar butiken produktens frågor, raden om tillägg i varukorgen och rutan Tillval. add-to-cart i mallen lägger med de tillval kunden kryssat i och stannar på en obligatorisk fråga som är tom, som standardknappen.

#Gallery

Produktbilderna på produktsidan. Har produktsidan egen HTML ritar produktsidans mall galleriet själv, och galleriets design ritas inte alls. Kodredigeraren, butikens rapport och arbetsytan visar det, till exempel Your product page is your own HTML and draws the gallery itself, so this gallery design is not rendered.

#Category

Samlingssidan med produkterna den listar: en kategori, All products eller sökresultat. Mallen får sidans filter som data i filters[]: varje grupp med sina värden, antal, kryss och en länk som kryssar i eller ur värdet. Butiken lägger inga filter i mallens egen markup. En mall listar produkterna efter filtren och sorteringen i adressen (?sort=…&f.…&category=…). Mallen ersätter Collection-sidans sektioner, produktrutnätet inräknat. Sidans egen CSS (fliken Code på Collection-sidan) gäller fortfarande.

#Banner

Sektionens egna inställningar.

Skriv rubriken som <h1> när bannern är sidans titelblock. Då är den sidans titel. Saknar mallen <h1> lägger butiken en dold sidtitel efter bannern när bannern är sidans titelblock. Bannern är titelblock när den är den första bannern eller heron på sidan och ingen rubriksektion på nivå 1 tar titeln.

#Actions

Din markup kan inte ha egna händelsehanterare. Sätt data-bs-action på ett element. Butiken sköter klicket med samma lyssnare som för standardmarkupen. Attributet får sitta på vilket element som helst, även på en <svg>.

• Saknas ett attribut som krävs händer inget vid klicket.
• data-bs-quantity ska vara ett positivt heltal. Annat läses som 1.
• En action som inte finns, eller som saknar ett attribut som krävs, ger en varning när mallen kompileras. Varningen står vid koden och som <!-- bs-component-warning: … --> i butikens HTML.
• subscribe-newsletter kräver ett formulär med data-bs-newsletter och ett fält name="email". Den körs när formuläret skickas, så Enter i fältet fungerar. Adressen får samma kontroll och samma svar som i standardsidfoten.

Utan data-bs-variant-id, till exempel på ett kort, gör add-to-cart så här:

#Krokar

Krokarna är attributen i butikens HTML som din CSS och JS riktar in sig på: komponentens rot, inre element och tillstånd på roten. Krokar och CSS-referens listar alla krokar per komponent, krokarna på sidan och reglerna i tokens-CSS:en.

#Sanering

Den ritade mallen saneras innan den når sidan, på samma sätt på servern och i webbläsaren.

Attribut som behålls:

• på alla element: class, id, title, role, tabindex, lang, dir, hidden, style, translate, alla aria-*, alla data-bs-* och data-footer-*
• på länkar: href, target, rel
• på bilder: src, srcset, sizes, alt, width, height, loading
• på knappar och fält: type, name, value, placeholder, disabled
• på form: action när det är en sökväg i butiken, till exempel /search, och method när det är get eller post
• på SVG: viewBox, fill, stroke, stroke-width, d, points och de andra ritattributen

Det som tas bort:

• script, style, iframe, object, embed, noscript, template, textarea, select, video, audio, canvas, dialog, math och title, med allt innehåll
• alla on*-attribut och alla kommentarer
• andra data-* än data-bs-* och data-footer-*
• adresser som inte är relativa, https:, http:, mailto: eller tel:, utom data:-bilder på img
• ett action som pekar utanför butiken

Ett element som inte står i listan tas bort, men innehållet behålls. style="…" saneras som annan CSS. På länkar behålls target="_blank", som får rel="noopener", och target="_self". Andra target tas bort. Öppna element stängs i slutet, så resultatet är alltid balanserad HTML.

#Klasser och storlekar

Standardmarkupen har några Tailwind-klasser, till exempel flex, items-center och gap-4. Designern kompilerar inga nya klasser ur din mall. En klass som inte redan finns i butiken gör inget. Sätt storlek och avstånd i fliken Design, i Code › CSS på krokarna eller som style på elementet.

#CSS

CSS:en på fliken Code gäller bara komponenten. Krokar och CSS-referens visar hur selektorerna avgränsas till roten, vad saneringen tar bort och hur du laddar egna typsnitt.

Om px och rem: se Egen CSS och kod i head.

#JS

• JS:en körs en gång per sidladdning, när sidan har laddats, på varje sida där komponenten finns.
• Den får komponentens rotelement som root. Finns komponenten inte på sidan körs den inte.
• Menypanelens rot finns bara medan panelen är öppen. Dess JS körs varje gång panelen öppnas, mot den nya roten. Bind lyssnare på root, inte på document.
• Ett fel, även ett syntaxfel, loggas i webbläsarens konsol med stilens namn. Det stoppar varken sidan eller andra komponenters JS.
• Koden körs även på arbetsytan. Reglaget Run JS in the builder pausar den där under sessionen. Butiken och Preview (⌘P) kör den som vanligt.

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

Ett produktkort finns många gånger på en sida. root är då det första kortet. Använd document.querySelectorAll('[data-bs-card]') för alla.

Sidans JS på fliken Code körs på samma sätt, utan root. Det du skriver på sidan Collection gäller alla kategorisidor.

#Exempel: navbar på en Classic-butik

Målet är ett sidhuvud i full bredd. Det är genomskinligt över hero-bilden med vit logotyp och vita ikoner, och vitt när sidan scrollat 24 px. Till höger finns fyra ikoner på 30 px: sök, önskelista, varukorg och meny. Det mesta görs med inställningar i panelen. Resten är sex rader CSS.

Inställningarna i komponentpanelen för Header:

1. Byt startsidans texthero mot en Image banner med Width full och ett mörkt foto.
2. Välj Look: Icons + panel.
3. Sätt Options: Sticky på, Transparent over hero på, Menu label av, Search på, Cart på, Announcement bar av.
4. Välj den svarta logotypen som Logo under Content, med höjd 40. Välj den vita som Light logo.
5. Kontrollera att Theme › Colours › Header text over hero är vit.

Slå på Advanced, tryck Customize with code och skriv under 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 stilen till "Min navbar". Stilen ligger nu under Your header styles i alla butiker i workspacet. Logotyperna hör till temat. Du ställer in dem under Content i varje butik.

#Samma navbar som egen HTML

Öppna Code › HTML och tryck Start from the standard markup. Fältet fylls med standardutseendets markup. Mallen nedan är samma navbar skriven för hand. Den använder samma inre krokar, så CSS:en ovan gäller oförändrad. Menyknappen öppnar butikens standardpanel, som har en egen Close-knapp och stängs med Escape.

<div data-bs-header-inner>
  <a href="/" aria-label="{{storefront.name}}">
    <img src="{{brand.logoUrl}}" alt="{{storefront.name}}" height="{{brand.logoHeight}}" class="logo-dark">
    <img src="{{brand.footerLogoUrl}}" alt="" height="{{brand.logoHeight}}" class="logo-light">
  </a>
  <div data-bs-header-icons>
    <button type="button" data-bs-action="open-search" aria-label="{{i18n.search}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    </button>
    <a href="/wishlist" data-bs-wishlist-icon aria-label="{{i18n.wishlist}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z"/></svg>
    </a>
    <button type="button" data-bs-action="open-cart" data-bs-cart-icon aria-label="{{i18n.cart}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1"/><circle cx="18" cy="20" r="1"/><path d="M6 6 5 3H2"/></svg>
      <span data-bs-cart-count>{{cart.count}}</span>
    </button>
    <button type="button" data-bs-action="open-menu" data-bs-menu-button aria-label="{{i18n.menu}}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
    </button>
  </div>
</div>

I standardmarkupen byter butiken logotyp själv. I en egen mall ligger båda bilderna i markupen, och CSS:en väljer med tillståndet på roten:

[data-bs-header-inner] { display: flex; align-items: center; justify-content: space-between; }
[data-bs-header-icons] { display: flex; align-items: center; }
.logo-light { display: none; }
[data-bs-transparent]:not([data-bs-scrolled]) .logo-dark { display: none; }
[data-bs-transparent]:not([data-bs-scrolled]) .logo-light { display: inline; }

#Menypanelen som egen HTML

Butiken ritar panelens rot [data-bs-menu] och öppnar den med open-menu. Mallen loopar menyns länkar från Menu panel › Links, de stora med underkategorier och sedan de små:

<nav aria-label="{{i18n.menu}}">
  <ul>
    {{#each menu.links}}
    <li>
      <a href="{{this.href}}">{{this.label}}</a>
      {{#if this.children}}
      <ul>{{#each this.children}}<li><a href="{{this.href}}">{{this.label}}</a></li>{{/each}}</ul>
      {{/if}}
    </li>
    {{/each}}
    {{#each menu.secondary}}<li><a href="{{this.href}}">{{this.label}}</a></li>{{/each}}
  </ul>
  {{#if contact.email}}<p data-bs-menu-contact><a href="mailto:{{contact.email}}">{{contact.email}}</a></p>{{/if}}
  <button type="button" data-bs-action="close-menu">{{i18n.close}}</button>
</nav>

open-search öppnar butikens sökruta som ett lager ovanpå sidhuvudet och panelen. Har din markup ett element med [data-bs-search-slot] ritas sökrutan där i stället. Ett eget sökformulär fungerar också:

<form action="/search" method="get" role="search">
  <input type="search" name="q" placeholder="{{i18n.searchPlaceholder}}" aria-label="{{i18n.search}}">
  <button type="submit">{{i18n.search}}</button>
</form>

#Ett produktkort som egen HTML

Butiken ritar kortets rot [data-bs-card]. Mallen är insidan. Knappen får sin produkt genom attributen.

<a href="{{product.href}}">
  <div data-bs-card-media>
    {{#if product.image}}<img src="{{product.image}}" alt="{{product.imageAlt}}" loading="lazy">{{/if}}
    {{#if product.badge}}<span class="badge">{{product.badge}}</span>{{/if}}
  </div>
  <div data-bs-card-body>
    <h3 data-bs-card-title>{{product.title}}</h3>
    <p data-bs-card-price>{{#if product.compareAtPrice}}<s>{{product.compareAtPrice}}</s> {{/if}}{{product.price}}</p>
  </div>
</a>
<button type="button" data-bs-action="add-to-cart" data-bs-product-id="{{product.id}}">Add to cart</button>