Meny
Representativ köpuppgift

Prova en produkt. Se varje ärligt svar.

Kontrollera butiker nära dig för den här produkten. Jämför sedan de åtta widgetarna och prova verktyget.

Var du kan köpa

Purus Corner Linear Drain nära Stockholm

Byggt widgetpaket

Laddar den publicerade inbäddningen från cdn.test.stockisto.com…

Det här exemplet visar närliggande butiker för exempelprodukten.

Din egen ingång

Låt det sista klicket landa hos dig

En kund som letar efter din produkt ska landa på en yta du kontrollerar. Det är din egen webbplats: sidan för var man köper eller produktsidorna du redan driver. Stockisto visas där under ditt varumärke.

yourbrand.example/where-to-buy
Bakom varje inbäddning

Ett paket, en renderare, ett kontrakt.

Alla kort ovan bygger på samma skript som läser olika attribut. Återförsäljarens egna data avgör vad en rad visar. Taggen avgör hur inbäddningen ser ut och fungerar.

Återförsäljarstegen

Fem steg, från offentlig listning till reservation och hämtning.

En rad visar bara det som återförsäljarens data ger stöd för. Varje steg ger kunden en tydligare väg vidare och motiverar återförsäljaren att hålla sina uppgifter aktuella.

  1. 01ListadNamn, adress och publicerade öppettider från offentliga uppgifter. En obekräftad lageruppgift märks som rapporterad och får den neutrala listningsfärgen, aldrig den gröna färgen för bekräftad lagerstatus.Offentliga uppgifter
  2. 02Kan nåsEn länk till webbplatsen när butiken har publicerat en sådan, en ringknapp när telefonnumret går att använda och vägbeskrivning när listningen har riktiga koordinater. Varje knapp visas bara när motsvarande uppgift finns.Telefon eller webbplats
  3. 03Bekräftat lagerEn butik som skickar sitt eget lagerflöde får markeringen för bekräftad lagerstatus och en rad med datum för den senaste rapporten. De raderna rankas före obekräftade uppgifter.Ett lagerflöde
  4. 04PrisPå återförsäljarens egna produktsidor kan raden visa butikens pris. Servern skickar bara ut priset när butiken har publicerat det och uppgiften är yngre än en månad.Ett publicerat pris
  5. 05ReserveraLäget för reservation och hämtning låter kunden slutföra en reservation från en rad med bekräftad lagerstatus utan att lämna sidan. Raden visar ”Reserverad” först när begäran faktiskt har lyckats.Reservationer aktiverade

Bekräftad lagerstatus och avstånd avgör ordningen. Placering säljs aldrig. Varje tryck på Webbplats, Ring eller Vägbeskrivning registreras som ett utklick, men bara när ditt samtyckesverktyg har aktiverat statistik. Innan dess skickar inbäddningen inga händelser.

Teman

Ett tema är attribut, inte en egen kodgren

De fem namngivna förvalen och värdena nedan läses från skripttaggen. Alla utseenden på sidan använder samma paket och renderare, så du behöver varken en separat version eller ett separat bygge för temat.

  • heritageStandardvalet. Varm pappersfärg, skogsgrön accent och mjuk skugga. Det används av alla inbäddningar på den här sidan.
  • lightNeutralt grått och vitt för värdsidor där den varma pappersfärgen skär sig.
  • darkVarma, mörka ytor för mörka värdsidor, utan sken och med en plan kant.
  • minimalVitt utan extra ramdelar: små hörnradier, tunna kantlinjer och ingen skugga. Textfärgen ärvs från din sida.
  • denseHeritage-färger med kompakt text och mindre luft, för sidofält och sidfötter.
Värden som taggen läser
data-theme-preset="dark"
En av de fem ovan. Allt annat faller tillbaka till Heritage.
data-theme="#C06B4A"
Din accent, som en 3- eller 6-siffrig hex.
data-radius-scale="sm"
Hörnradie: sm, md eller lg.
data-density="compact"
Radavstånd: cozy eller compact.
data-shadow="flat"
Skugga: soft, flat eller none.
data-font="serif"
Typsnitt: grotesk, sans, serif, mono eller system. Bara namn anges, inga filer laddas upp, så inbäddningen använder en typsnittsstack som redan finns på sidan.
Vem redigerar denDen som ansvarar för taggen. Byggverktyget i din kontrollpanel förhandsvisar värdena och skriver dem i kodsnutten. Därefter styr taggens attribut temat, så du ändrar en placering utan att driftsätta inbäddningen på nytt.
Kontrasten kontrolleras vid renderingenEn accentfärg som inte når kontrasten 4,5:1 mot sin bakgrund avvisas, och widgeten använder sin egen accent i stället. Kontrollen görs vid varje sidvisning. Färger för lagerstatus och uppgifternas ålder påverkas inte av temat, så inget förval kan färga om ett lagerpåstående.
Varje inbäddning har sin egenInbäddningen på en varumärkessida och den på en butiks egen webbplats har separata taggar och attribut men använder samma data. Därför kan butikssidan behålla sitt eget uttryck.
Tre lager av konfiguration

Skrivs en gång i taggen. Läses vid varje rendering.

  1. 01Din instrumentpanel skriver taggenWidgetbyggaren förhandsvisar inställningarna, skapar skripttaggen och sparar de varianter du vill återanvända. Vid rendering hämtas inga inställningar från ditt konto. Inbäddningen följer det som står i taggen, så den fortsätter fungera även på en sida som inte har ändrats på länge.
  2. 02Taggen konfigurerar placeringendata-widget-type väljer widget, data-view väljer vy för Var man kan köpa och data-map-height anger höjden på en inramad butikssök. Temaattributen styr resten. Attribut som parsern inte känner igen ignoreras i stället för att tolkas genom gissning.
  3. 03Raden tjänar restenÅterförsäljarens egna data, inte taggen, avgör vad en enskild rad visar. Stegen ovan är hela modellen. Du kan inte aktivera ett pris för en butik som inte publicerar något, och inbäddningen hittar inte på ett.
Förberedd för implementering

Vad dina utvecklare går med på

Allt ovan renderas från skripttaggen överst på sidan. Beteendena bakom den kontrolleras antingen av ett byggsteg eller av ett test i kodbasen.

En tagg
Ett enda asynkront skript per placering och inget byggsteg. Widgeten renderas i en egen shadow root när webbläsaren stöder det, så värdsidans CSS och inbäddningens stilar hålls isär. Hörnknappen och bekräftelsen för reservation monteras på body-nivå.
Vikten styrs av en spärr, inte ett löfte
Det publicerade paketet mäts vid varje bygge, och bygget misslyckas om paketet överskrider sitt registrerade tak. Gränsen finns i widgetens egen budgetfil, inte i den här texten, så sidan kan inte ange ett inaktuellt värde.
Inget laddas tidigt
Taggen är asynkron och dataanropet väntar tills inbäddningen närmar sig den synliga delen av sidan. Kartan och installatörsvyerna ligger i iframes, så deras kartplattor belastar den inramade sidan och inte din produktsida.
Standardinställningar för sekretess
Inga cookies. Statistik är avstängd tills data-analytics-consent är true. Fram till dess skickar inbäddningen inga händelser. Den skriver bara en sessionStorage-nyckel som hindrar bakåtnavigering från att räkna samma resultat två gånger.
Tangentbord och kontrast
Rader, reglage och expanderare är riktiga knappar, så Enter, mellanslag och fokusring fungerar via plattformen. Dialoger tar fokus, håller kvar Tab-fokus, stängs med Escape och lämnar tillbaka fokus. Textparen i varje förval testas mot WCAG AA. Förvalet som ärver sidans textfärg redovisar det i stället för att ange en kontrast som inte går att känna till.
När saker misslyckas
Ett blockerat eller fallerande skript renderar ingenting och påverkar inte sidan. Ett långsamt API visar en skelettvy. Ett API som inte svarar visar ett laddningsfel med möjlighet att försöka igen, aldrig ett felaktigt tomt resultat. En felkonfigurerad tagg loggar det saknade attributet och sätter en markör för övervakning utan att visa något trasigt för kunden.
Testmiljö

Anpassa den och kopiera sedan taggen

Välj läge, temaförval, accentfärg och layoutvärden. Förhandsvisningen renderas om och kodsnutten skapas på nytt medan du ändrar. Varje attribut som visas tolkas av den publicerade inbäddningen.

widgetens standard (#1E5E45)

Värden utanför listan avvisas säkert i widgeten. Ett okänt förval eller en färg som inte är hexadecimal faller tillbaka på Heritage. Ett skrivfel kan inte slå sönder produktsidan.

Laddar den publicerade inbäddningen från cdn.test.stockisto.com…

<script
  src="https://cdn.test.stockisto.com/widget.js"
  data-stockisto-widget="true"
  data-stockisto-slug="demo-purus"
  data-api-base="https://api.test.stockisto.com"
  data-widget-type="where-to-buy"
  data-lat="59.3293"
  data-lng="18.0686"
  data-radius="50"
  data-supplier-name="Purus"
  data-jsonld="off"
  data-analytics-consent="false"
  async
></script>

data-analytics-consent är "false" i alla genererade kodsnuttar. Sätt det till "true" först när samtyckesverktyget (CMP) har registrerat kundens samtycke.

Besvärliga värdsidor

Byggd för sidor som gör motstånd

Verkliga värdsidor kan ha aggressiv CSS, strikta säkerhetspolicyer och trasiga miljöer. Tre av dessa förhållanden kan köras här. Resten körs som automatiska tester mot syntetiska besvärliga värdsidor i CI och mot den driftsatta miljön. Inget i det här avsnittet är ett påstående utan ett test som stöd.

Fientlig :tom CSS

Behållarens stilmall anger div:empty { display:none !important }, en regel som kan dölja enkla inbäddningar innan de laddas. Widgetens monteringsyta innehåller en dold markör, så den matchar aldrig :empty och renderas ändå.

Laddar den publicerade inbäddningen från cdn.test.stockisto.com…

Felkonfigurerad med avsikt

Den här inbäddningen saknar datakälla: ingen varumärkesslugg, inget leverantörs-id och ingen återförsäljare. Se vad widgeten gör och vad den vägrar göra.

Laddar den publicerade inbäddningen från cdn.test.stockisto.com…

Öppna webbläsarkonsolen. Widgeten loggade exakt vilket attribut som saknas. Konsolfelet är avsiktligt och den enda korrekta bieffekten av en felkonfigurerad inbäddning.

320px kolumn

Samma publicerade inbäddning begränsas till en 320 px bred kolumn, den smalaste vanliga ytan i ett sidofält eller på mobil. Ingen horisontell överrullning och inga beskurna åtgärder.

Laddar den publicerade inbäddningen från cdn.test.stockisto.com…

Matris över testade förhållanden

Varje rad motsvarar automatiska tester som finns i kodbasen i dag: enhetsskydd vid varje push och webbläsartester mot syntetiska besvärliga värdsidor. Tabellen redovisar den täckningen och drar inga slutsatser utöver den.

FörhållandeVad inbäddningen garanterarBelägg
Värdsida med strikt CSP: default-src 'none'; endast CDN-skriptet och API-anslutningen tillåtsStartar och renderar utan beroende av inline-skript eller eval, och utan sidfel.Driftsatt e2e (widget-hostile-host-matrix) + matris i riktig webbläsare (tests/e2e/widget-host)
Sida med vanlig HTTP (osäker kontext, ingen crypto.randomUUID)Startar utan sidfel. Widget-id:n faller tillbaka på en skyddad UUID-sökväg.Driftsatt e2e (widget-hostile-host-matrix) + startskydd i enhetstesterna (packages/widget)
Värdsida utan krypto: window.crypto saknas eller randomUUID har tagits bortStartar med ett v4-widget-id som följer specifikationen. Inget kastat TypeError stoppar inbäddningen.Enhetstestet för besvärliga värdar (packages/widget hostile-host-boot) vid varje push + driftsatt e2e
Besvärlig CSS på värdsidan: div:empty { display:none } på hela sidanMonteringsytan behåller sin layoutyta med en dold markör och är aldrig :empty. Lazy loading utlöses fortfarande och widgeten renderas.Driftsatt e2e (widget-host-css-deadlock, widget-hostile-host-matrix) + livedemon ovan
Långsamt eller fallerande API: 503, avvisad nätverksanslutning, 8 sekunders fördröjning eller helt blockerad domänEtt tydligt och korrekt läge för ”kunde inte läsa in, försök igen” med manuell omstart. Aldrig ett felaktigt ”inga återförsäljare” eller en tom ruta utan förklaring.Enhetstäckning för renderingsfel (packages/widget render-failure) vid varje push
Värdsida hos tredje part: inbäddningen körs på en domän som inte tillhör StockistoAlla dataanrop är anonyma API-anrop med öppet CORS-stöd, utan cookies eller antaganden om samma ursprung.Alla specifikationer för driftsatta widgetar körs på syntetiska tredjepartsdomäner (*.stockisto-e2e.example)
Datakälla saknas: ingen varumärkesslugg, inget leverantörs-id eller ingen uppsättning återförsäljareVägrar starta. Ett konsolfel anger attributet och markören data-stockisto-error sätts för övervakning. Inget trasigt renderas för besökarna.Enhetstestet för saknad datakälla (packages/widget missing-data-source-boot) vid varje push + livedemon ovan
Publicering

Ingen utvecklarsprint krävs.

01

Klistra in en tagg

En enda skripttagg per sida. Inget byggsteg, inget paket att installera och ingen iframe vars storlek behöver ställas in för hand.

02

Den passar sidan den ligger på

Bredd, radhöjd och presentation styrs med attribut. Inline- och flikvyer ligger kvar på sidan, så att sökmotorer kan läsa dem.

03

Den säger bara det den kan belägga

Lagerstatus som vi inte kan verifiera märks ut och lyfts aldrig fram. När det inte finns något att visa säger inbäddningen det och visar ingen nolla.

04

Återförsäljare klättrar uppåt

Lagerflöde, priser, köplänk, överlämning till varukorg, reservation. Varje steg som en återförsäljare uppnår ger en starkare rad framför kunderna, så det lönar sig att hålla datan korrekt.

Se den med din egen katalog.

Importera ditt återförsäljarnätverk, klistra in en tagg och se vilka butiker kunderna väljer.

cebf50c · 2026-10-05 22:57