Skabelonreference

Hvordan du åbner kodeeditoren, står på Egen kode på en komponent.

Hvor: designeren, Customize with code › Code på en komponent, i tilstanden Advanced. Sektionen Custom component følger de samme regler.

#Roden er butikkens

Hver 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 et eget <header> i skabelonen. Begynd med det, der skal stå indeni.
• Din CSS afgrænses til roden. Din JS får roden som root.
• En Custom component-sektion har roden [data-bs-block="<sektions-id>"].

Alle rødder står under Kroge og CSS-reference.

#Skabelonsyntaks

Skabelonen er HTML med variabler i dobbelte krøllede parenteser. Dette er hele syntaksen.

• Tom tekst, 0, tom liste og false regnes som falsk.
• Der er ingen måde at skrive HTML ud uden escaping.
• Der er ingen hjælpefunktioner og ingen inkluderede skabeloner.

#Grænser

• Det, der er længere, klippes med en advarsel, der viser hvor, for eksempel css cut at 200 000 characters.
• En tegning afbrydes efter 50 000 trin. En løkke i en løkke kan ikke få butikken til at hænge.
• En skabelon på 33 333 tegn eller mere tegnes én gang uden data i designeren. Rammer den så en grænse, står det under May cut with some data på fanen Code.
• Butikken viser kun det, dens egen tegning klipper.

#Fejl og advarsler

En skabelon, der ikke kan læses, tegner intet. Det gælder for eksempel en {{#each}}, der aldrig lukkes, eller en blok, der lukkes med det forkerte tag. Butikken viser så standardudseendet, og designeren viser fejlen ved koden.

En advarsel kan gælde en CSS-regel, der ikke kunne afgrænses, eller et valg, der blev afvist.

#Variabler

#Header, Menu panel og Footer

De tre deler ét sæt variabler. Sektionen Custom component får det samme sæt.

#Product card

Én skabelon pr. kort. Den tegnes for hvert produkt i et gitter.

#Product page

Galleriet og købspanelet, tegnet for den variant, der vises. Vælger kunden en anden variant med select-variant, tegnes skabelonen igen. Prisen, varenummeret, lagerlinjen, product.variantId og hver selected følger med. Resten af siden er standardsidens: detaljer, anmeldelser og relaterede produkter. Under skabelonen tegner butikken produktets spørgsmål, linjen om tillæg i kurven og boksen Optional add-ons. add-to-cart i skabelonen tilføjer de tilvalg, kunden har sat flueben ved, og stopper ved et obligatorisk spørgsmål, der er tomt, som standardknappen.

#Gallery

Produktbillederne på produktsiden. Er produktsiden egen HTML, tegner dens skabelon selv galleriet, og galleriets design tegnes slet ikke. Kodeeditoren, butikkens rapport og arbejdsfladen viser det.

#Category

Samlingssiden med de produkter, den viser: en kategori, All products eller søgeresultater. Skabelonen får sidens filtre som data i filters[]: hver gruppe med værdierne, antallene, fluebenene og et link, der sætter eller fjerner fluebenet. Butikken lægger ingen filtre i skabelonens egen markup. En skabelon viser det, adressen angiver (?sort=…&f.…&category=…). Skabelonen erstatter Collection-sidens sektioner, produktgitteret medregnet. Sidens egen CSS (fanen Code på Collection-siden) gælder stadig.

#Banner

Sektionens egne indstillinger.

Skriv overskriften som <h1>, når banneret er sidens titelblok. Så er den sidens titel. Mangler skabelonen <h1>, lægger butikken en skjult sidetitel efter banneret, når banneret er sidens titelblok. Banneret er titelblok, når det er det første banner eller hero på siden, og ingen overskriftssektion på niveau 1 tager titlen.

#Actions

Din markup har ingen egne hændelseshåndterere. Sæt data-bs-action på et element, så gør butikken resten ved klik. Butikken bruger de samme lyttere som til standardmarkuppen. Attributten kan sidde på et hvilket som helst element, også på en <svg>.

• Mangler en påkrævet attribut, sker der intet ved klikket.
• data-bs-quantity skal være et positivt heltal. Andet læses som 1.
• En action, der ikke findes, eller som mangler en påkrævet attribut, giver en advarsel, når skabelonen kompileres. Advarslen står ved koden og som <!-- bs-component-warning: … --> i butikkens HTML.
• subscribe-newsletter kræver en formular med data-bs-newsletter og et felt name="email". Den kører, når formularen sendes, så Enter i feltet virker. Adressen får samme kontrol og samme svar som i standardsidefoden.

add-to-cart uden data-bs-variant-id, for eksempel på et kort, spørger butikken om produktet:

#Kroge

Krogene er de attributter i butikkens HTML, som din CSS og JS rammer: komponentens rod, indre elementer og tilstande på roden. Alle kroge pr. komponent, krogene på siden og reglerne i tokens-CSS'en står under Kroge og CSS-reference.

#Rensning

Den tegnede skabelon renses, før den når siden, på samme måde på serveren og i browseren.

Attributter, der beholdes:

• på alle elementer: class, id, title, role, tabindex, lang, dir, hidden, style, translate, alle aria-*, alle data-bs-* og data-footer-*
• på links: href, target, rel
• på billeder: src, srcset, sizes, alt, width, height, loading
• på knapper og felter: type, name, value, placeholder, disabled
• på form: action, når det er en sti i butikken, for eksempel /search, og method, når det er get eller post
• på SVG: viewBox, fill, stroke, stroke-width, d, points og de andre tegneattributter

Det, der fjernes:

• script, style, iframe, object, embed, noscript, template, textarea, select, video, audio, canvas, dialog, math og title, med alt indhold
• alle on*-attributter og alle kommentarer
• andre data-* end data-bs-* og data-footer-*
• adresser, der ikke er relative, https:, http:, mailto: eller tel:, undtagen data:-billeder på img
• en action, der peger uden for butikken

Et element, der ikke står på listen, fjernes, men indholdet beholdes. style="…" renses som anden CSS. På links beholdes target="_blank", som får rel="noopener", og target="_self". Andre target fjernes. Åbne elementer lukkes til sidst, så resultatet altid er balanceret HTML.

#Klasser og størrelser

Standardmarkuppen har nogle Tailwind-klasser, for eksempel flex, items-center og gap-4. Designeren kompilerer ingen nye klasser fra din skabelon. En klasse, der ikke allerede findes i butikken, gør intet. Sæt størrelse og afstand på fanen Design, i Code › CSS på krogene eller som style på elementet.

#CSS

CSS'en på fanen Code gælder kun komponenten. Hvordan selektorerne afgrænses til roden, hvad rensningen fjerner, og hvordan du indlæser egne skrifttyper, står under Kroge og CSS-reference.

Om px og rem: se Egen CSS og kode i head.

#JS

• JS'en kører én gang pr. sideindlæsning, når siden er indlæst, på hver side, hvor komponenten findes.
• Den får komponentens rodelement som root. Findes komponenten ikke på siden, kører den ikke.
• Menupanelets rod findes kun, mens panelet er åbent. Dens JS kører, hver gang panelet åbnes, mod den nye rod. Bind lyttere på root, ikke på document.
• En fejl, også en syntaksfejl, logges i browserens konsol med stilens navn. Den stopper hverken siden eller andre komponenters JS.
• Koden kører også på arbejdsfladen. Kontakten Run JS in the builder sætter den på pause der i sessionen. Butikken og Preview (⌘P) kører den som normalt.

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

Et produktkort findes mange gange på en side. root er så det første kort. Brug document.querySelectorAll('[data-bs-card]') for alle.

Sidens JS på fanen Code kører på samme måde, uden root. Det, du skriver på siden Collection, gælder alle kategorisider.

#Eksempel: navbar på en Classic-butik

Målet er et sidehoved i fuld bredde. Det er gennemsigtigt over hero-billedet med hvidt logo og hvide ikoner, og hvidt, når siden har scrollet 24 px. Til højre står fire ikoner på 30 px: søg, ønskeliste, kurv og menu. Det meste er kontroller. Resten er seks linjer CSS.

Kontrollerne på komponentpanelet for Header:

1. Skift forsidens teksthero ud med et Image banner med Width fuld og et mørkt foto.
2. Vælg Look: Icons + panel.
3. Sæt Options: Sticky til, Transparent over hero til, Menu label fra, Search til, Cart til, Announcement bar fra.
4. Vælg det sorte logo som Logo under Content, med højde 40. Vælg det hvide som Light logo.
5. Kontrollér, at Theme › Colours › Header text over hero er hvid.

Slå Advanced til, tryk Customize with code og 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; }

Tryk Save as new style og kald stilen "Min navbar". Stilen ligger nu under Your header styles i alle butikker i workspacet. Logoerne hører til temaet og indstilles under Content i hver butik.

#Samme navbar som egen HTML

Åbn Code › HTML og tryk Start from the standard markup. Feltet udfyldes med standardudseendets markup. Skabelonen nedenfor er samme navbar skrevet fra bunden. Den bruger de samme indre kroge, så CSS'en ovenfor gælder uændret. Burgeren åbner butikkens standardpanel, som har sin egen Close-knap og lukkes 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 standardmarkuppen skifter butikken selv logo. I en egen skabelon ligger begge billeder i markuppen, og CSS'en vælger med tilstanden på roden:

[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; }

#Menupanelet som egen HTML

Butikken tegner panelets rod [data-bs-menu] og åbner det med open-menu. Skabelonen gennemløber menuens links fra Menu panel › Links, de store med underkategorier og derefter 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 åbner butikkens søgefelt som et lag over sidehovedet og panelet. Har din markup et element med [data-bs-search-slot], tegnes søgefeltet der i stedet. En egen søgeformular virker også:

<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>

#Et produktkort som egen HTML

Butikken tegner kortets rod [data-bs-card]. Skabelonen er indersiden. Knappen får sit produkt gennem attributterne.

<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>