Luo tili
Valikko
Edustava ostotehtävä

Kokeile yhtä tuotetta. Näe jokainen rehellinen vastaus.

Tarkista tämän tuotteen lähimyymälät. Vertaa sitten kahdeksaa widgetiä ja kokeile työkalua.

Mistä ostaa

Purus Corner Linear Drain Tukholman lähellä

Rakennettu widget-paketti

Ladataan käytössä olevaa upotusta osoitteesta cdn.test.stockisto.com…

Tämä esimerkki näyttää esimerkkituotteen lähimyymälät.

Oma sisäänkäyntisi

Anna viimeisen klikkauksen päätyä sinulle

Tuotettasi etsivän asiakkaan pitäisi päätyä paikkaan, jota hallitset. Se tarkoittaa omalla sivustollasi olevaa mistä ostaa -sivua tai tuotesivuja, joita jo ylläpidät. Stockisto näkyy siellä brändisi mukaisena.

yourbrand.example/where-to-buy
Upotukset

8 upotusta, kullekin yksi script-tagi

Jokaisessa kortissa on liitettävä tagi. Kun widget voi toimia tällä sivulla, sen kortti ajaa julkaistua pakettia mallimerkillä demo-purus. Mistä ostaa näyttää kaikki viisi näkymäänsä.

Tuotesivut

Mistä ostaa

data-widget-type="where-to-buy"

Ostajaa lähellä olevat valtuutetut jälleenmyyjät siten, että vahvistettu varastotieto sijoittuu ensin. Jokainen rivi näyttää myymälän oman varastotiedon, tiedon iän ja yhteydenottotavan.

Näin brändisi hyötyy

Tuotteitasi myyvän sivun tulee päättyä hyllyyn. Rivi väittää vain sen jälleenmyyjän ilmoittaman varastotilan, ja raportin ikä on rivillä eikä alaviitteessä.

Mihin se laitetaan

Tuotesivut ja erillinen sivu, joka kertoo mistä ostaa. Sama widget sopii molempiin: data-view valitsee, kuinka paljon sivusta se vie.

Koko myymäläluettelo sivulle, joka kertoo mistä ostaa.

Demotiedot · demo-purus on mallimerkki

Ladataan käytössä olevaa upotusta osoitteesta 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-view="full"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-sku="line-700"
Laajuus yhteen tuotekoodiin. Jätä se pois ja luettelo on koko tuotemerkin kattava.
data-filter="confirmed|showroom"
Näytä vain myymälät, joiden varasto on vahvistettu, tai vain myymälät, joissa on näyttely. Oletuksena näytetään jokainen haun löytämä myymälä.
data-rank="distance|price"
Järjestä etäisyyden tai hinnan mukaan. Oletuksena vahvistettu varasto on ensin, eikä sijoitusta myydä koskaan.
data-prices="online|off"
Näytä vain verkkohinnat tai ei hintoja. Oletuksena jokainen rivi näyttää jälleenmyyjän julkaiseman hinnan, eikä mitään, jos hintaa ei ole julkaistu.
data-audience="trade"
Luettelo ammattiasiakkaille: vain valtuuttamasi jälleenmyyjät ja tukkukaupat.
data-reserve="true"
Anna asiakkaiden varata myymälästä. Vaatii tuotekoodin data-sku-määritteeseen.
data-per-view="5"
Kuinka monta myymälää kukin näkymä näyttää, vähintään 1 ja enintään 12. Oletus on 3.
data-theme="dark"
Valitse nimetty esiasetus (heritage, light, dark, minimal tai dense) tai anna kolmen tai kuuden heksadesimaalinumeron korostusväri. Virheellinen arvo käyttää Stockiston oletusta eikä riko sivua.
data-lang="sv-SE"
Valitse käyttöliittymäksi ruotsi (sv), norjan bokmål (nb), tanska (da) tai suomi (fi), aluekoodilla tai ilman. Jätä arvo pois, jos haluat seurata sivun lang-attribuuttia. Tuntemattomat arvot näyttävät englannin.
Brändisivut

Myymälähaku ja jälleenmyyjähakemisto

data-widget-type="store-locator"

Koko jälleenmyyjäverkosto karttana tai palvelimen tuottamana varastohakemistona. Vierailijat vaihtavat kahden upotuksen välillä.

Näin brändisi hyötyy

Korvaa Etsi kauppa -sivun ja käsin ylläpidetyn jälleenmyyjäluettelon. Verkkoon lisätty jälleenmyyjä saa PIN-koodin ja hakemistorivin samana päivänä.

Mihin se laitetaan

Myymälähaku- ja jälleenmyyjäsivut. data-view valitsee ensin ladattavan näkymän.

Demotiedot · demo-purus on mallimerkki

Ladataan käytössä olevaa upotusta osoitteesta 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="store-locator"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-view="list"
Avaa jälleenmyyjähakemistosta kartan sijaan. Widgetin sisäinen vaihtokytkin näyttää molemmat puolet.
data-map-height="720"
Asettaa kehyksen korkeuden välille 320 ja 800px. Kartan oletus on 480px ja luettelon 560px.
Brändisivut

Asentajan etsintä

data-widget-type="installer-finder"

Hyväksytyt asentajasi julkaistuineen peittoalueineen, palvelusuodattimineen ja takaisinsoittopyyntöineen yhdessä kehyksessä.

Näin brändisi hyötyy

Asennus on viimeinen este, kun tuote vaatii asentamista. Näytä asiakkaalle hyväksytty asentaja ja oikeat yhteystiedot. Näin este poistuu ja projekti pysyy tuotteesi yhteydessä.

Mihin se laitetaan

Asentajahakusivut brändeille, joilla on hyväksytty verkosto.

Demotiedot · demo-purus on mallimerkki

Ladataan käytössä olevaa upotusta osoitteesta 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="installer-finder"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-map-height="720"
Asettaa kehyksen korkeuden pikseleinä välille 320 ja 800. Oletuskorkeus 640 pitää kehyksen sisäisen takaisinsoittolomakkeen käytettävänä.
Tuotesivut

Ohjattu kanavanvaihto

data-widget-type="guided-handoff"

Vaiheittainen kulku ohjaa ostajan jälleenmyyjälle, joka voi hinnoitella työn. Lähetykseen liitetään tuote ja ostajan oma suostumus.

Näin brändisi hyötyy

Asennettavat tuotteet päätyvät harvoin suoraan ostoskoriin. Näkymä ohjaa ostajan työn hinnoittelevalle taholle sen sijaan, että tuotesivu jäisi viimeiseksi vaiheeksi.

Mihin se laitetaan

Tuotesivut kaikkeen, joka vaatii ammattimaista asennusta.

Demotiedot · demo-purus on mallimerkki

Ladataan käytössä olevaa upotusta osoitteesta 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="guided-handoff"
  data-lat="59.3293"
  data-lng="18.0686"
  data-radius="50"
  data-supplier-name="Purus"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-sku="line-700"
Kiinnittää tuotteen pyyntöön.
Tuotesivut

Ilmoitus tuotteen paluusta varastoon

data-widget-type="stock-alert"

Pieni suostumukseen perustuva lomake: yksi sähköpostiosoite, yksi tuote, yksi myymälä ja yksi viesti. Tilaus käyttää kaksinkertaista vahvistusta, joten ketään ei lisätä tilaajaksi ennen vahvistusta.

Näin brändisi hyötyy

Muuttaa tuloksettoman haun liidiksi, jonka perusteella voit toimia, ja näyttää sinulle, missä kysyntä on jäämässä tyydyttämättä, lisäämättä ketään luetteloon, jota he eivät koskaan vahvistaneet.

Mihin se laitetaan

Tuotteen viereen myymäläkohtaisella sivulla, jossa ostaja tietää jo, mistä kaupasta haluaa sen.

Ei live-demoa tässä: widget tarvitsee tunnisteen, joka on vain tililläsi. Koodinpätkässä on sille paikkamerkki, ja sellaisenaan liitettynä widget ei näytä mitään.

<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="stock-alert"
  data-store-id="YOUR-STORE-LOCATION-ID"
  data-sku="YOUR-SKU-CODE"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-store-id="YOUR-STORE-LOCATION-ID"
Jälleenmyyjän LOCATION-tunnus (GUID), josta hälytys koskee. Ei-GUID piilottaa lomakkeen sen sijaan, että arvaisi kauppaa.
data-sku="YOUR-SKU-CODE"
Tuotekoodi, jota ostaja odottaa. Ilman sitä ei ole mitään hälyttävää, ja lomake piilottaa itsensä.
data-lang="sv-SE"
Tuetut käyttöliittymän kielialueet ovat sv, nb, da ja fi.
Jälleenmyyjät ja myymälät

Varasto, hinta ja varaus

data-widget-type="store-availability"

Omat toimipisteesi ostajan lähellä. Jokaisella rivillä on sivun tuotteen varastosignaali ja julkaisemasi hinta.

Näin myymäläsi hyötyy

Omat hyllysi ja hintasi omilla tuotesivuillasi. Ostajat saavat toimipistekohtaisen vastauksen koko sivuston yhden varastolipun sijaan.

Mihin se laitetaan

Jälleenmyyjän omat tuotesivut.

Ei live-demoa tässä: widget tarvitsee tunnisteen, joka on vain tililläsi. Koodinpätkässä on sille paikkamerkki, ja sellaisenaan liitettynä widget ei näytä mitään.

<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="store-availability"
  data-retailer="YOUR-RETAILER-SLUG"
  data-sku="YOUR-SKU-CODE"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-retailer="YOUR-RETAILER-SLUG"
Jälleenmyyjäsi URL-tunniste. Rivit suodatetaan omiin toimipisteisiisi, ja tunniste, jolla ei ole osumia, tuottaa tyhjän luettelon.
data-sku="YOUR-SKU-CODE"
Tuotekoodi, josta sivu kertoo. Ilman sitä luettelo ei vastaa tuotekohtaiseen kysymykseen.
data-lang="sv-SE"
Tuetut käyttöliittymän kielialueet ovat sv, nb, da ja fi.
Jälleenmyyjät ja myymälät

Myymäläkortti

data-widget-type="store-card"

Yksi myymälöistäsi omalla sivustollasi: osoite ja aukioloajat, myymälän tuotemerkit ja asiakasarvio, yhdessä kortissa.

Näin myymäläsi hyötyy

Vanhentuneet aukioloajat vähentävät myymäläkäyntejä, ja useimpien myymälöiden sivustoilla on ainakin yksi vanhentunut tieto. Korjaa listaus kerran, niin tämä kortti, kaikki brändien myymälähaut joissa näyt sekä hakemistosivusi päivittyvät samalla kertaa.

Mihin se laitetaan

Ota yhteyttä ja vieraile meissä, sivuston alatunnisteet ja linkki Google-yritysprofiilissasi.

Ei live-demoa tässä: widget tarvitsee tunnisteen, joka on vain tililläsi. Koodinpätkässä on sille paikkamerkki, ja sellaisenaan liitettynä widget ei näytä mitään.

<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="store-card"
  data-store-id="YOUR-STORE-LOCATION-ID"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-store-id="YOUR-STORE-LOCATION-ID"
Mitä myymälää kortti kuvaa: sijainnin tunniste (GUID) Stockisto-listauksestasi. Muu kuin GUID piilottaa kortin sen sijaan, että myymälää arvattaisiin.
data-show-visit="false"
Piilota osoite, aukioloajat ja puhelinnumero.
data-show-brands="false"
Piilota myymälän tuotemerkit.
data-show-rating="false"
Piilota asiakasarvio. Kaikki kolme osaa ovat oletuksena käytössä.
Asentajat ja ammattiliikkeet

Asentajakortti

data-widget-type="installer-card"

Asentajarekisterimerkintäsi ja julkaisemasi palvelualue omalla sivustollasi, ja rehellinen vastaus siihen, kuuluuko kävijän postinumero alueeseen.

Näin yrityksesi hyötyy

Kuka tahansa voi kirjoittaa verkkosivustolle "hyväksytty asentaja". Merkki, joka nimeää rekisterin ja päivämäärän, jolloin se tarkistettiin, on tarkistettavissa; sellainen, joka nimesi brändin, ei olisi.

Mihin se laitetaan

Asentajan oma sivusto palvelu- tai yhteyssivulla.

Ei live-demoa tässä: widget tarvitsee tunnisteen, joka on vain tililläsi. Koodinpätkässä on sille paikkamerkki, ja sellaisenaan liitettynä widget ei näytä mitään.

<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="installer-card"
  data-installer="YOUR-INSTALLER-ID"
  data-analytics-consent="false"
  async
></script>
Asetukset kehittäjällesi
data-installer="YOUR-INSTALLER-ID"
Kenen kortti on: asentajan tunniste (GUID). Muu kuin GUID piilottaa kortin sen sijaan, että arvattaisiin.
data-show-credential="false"
Piilota rekisterimerkintä.
data-show-coverage="false"
Piilota palvelualueen tarkistus. Molemmat osat ovat oletuksena käytössä.
Jokaisen upotuksen taustalla

Yksi paketti, yksi renderöintimoottori, yksi sopimus.

Jokainen yllä oleva kortti on sama komentosarja, joka lukee eri määritteitä. Jälleenmyyjän oma data ratkaisee, mitä rivi näyttää. Tunniste ratkaisee, miltä upotus näyttää ja miten se toimii.

Jälleenmyyjän portaat

Viisi porrasta julkisesta listauksesta varaukseen ja noutoon.

Rivi näyttää vain sen, mitä sen jälleenmyyjä on ansainnut. Jokainen askelma lisää vahvemman toiminnan, ja vahvemman toiminnan haluaminen pitää jälleenmyyjän tiedot ajan tasalla.

  1. 01ListattuNimi, osoite ja julkaistut aukioloajat ovat peräisin julkisista tiedoista. Varastoraportti, jota kukaan ei ole vahvistanut, merkitään raportiksi ja näytetään neutraalilla listausvärillä, ei koskaan varmana vihreänä.Julkiset tiedot
  2. 02TavoitettavissaSivustolinkki näytetään, kun myymälä on julkaissut verkkosivuston, puhelulinkki, kun numeroon voi soittaa, ja reittiohje, kun listauksessa on todelliset koordinaatit. Kukin toiminto näkyy vain, kun sen oma tieto on saatavilla.Puhelin tai nettisivu
  3. 03Vahvistettu varastotilaOman varastotilansa toimittava myymälä saa vahvistetun merkinnän ja viimeisimmän raportin ajankohtaan perustuvan tuoreustiedon. Nämä rivit sijoitetaan vahvistamattomien edelle.Varastosyöttö
  4. 04HintaJälleenmyyjän omilla tuotesivuilla rivi voi näyttää myymälän hinnan. Palvelin lähettää sen vain, kun myymälä julkaisee alle kuukauden vanhan hinnan, joten rivillä ei näytetä vanhentunutta hintaa.Julkaistu hinta
  5. 05VarausVaraa ja nouda -näkymä muuttaa vahvistetun rivin varaukseksi, jonka ostaja tekee poistumatta sivulta. Rivi näyttää ”Varattu” vasta, kun varauspyyntö on todella onnistunut.Varaukset käytössä

Jälleenmyyjän vahvistama varastotila ja etäisyys ratkaisevat järjestyksen. Sijoitusta ei myydä. Jokainen sivusto-, puhelu- ja reittiohjepainallus tallennetaan yhdeksi siirtymäksi vasta, kun suostumustyökalusi on ottanut analytiikan käyttöön. Sitä ennen upotus ei lähetä mitään.

Teemat

Teema koostuu määritteistä, ei omasta haarasta

Viisi nimettyä esiasetusta ja alla olevat määritteet luetaan kaikki script-tagista. Kaikkien tämän sivun ulkoasujen taustalla on yksi paketti ja yksi renderöintimoottori, joten teema ei vaadi erillistä koontia tai ylläpidettävää versiota.

  • heritageOletus. Lämmin paperisävy, metsänvihreä korostus ja pehmeä varjo. Kaikki tämän sivun upotukset käyttävät tätä teemaa.
  • lightNeutraali harmaa ja valkoinen isäntäsivuille, joille lämmin paperisävy ei sovi.
  • darkLämpimät tummat pinnat tummille isäntäsivuille, ilman hehkua ja tasaisella reunalla.
  • minimalValkoinen ilman kehystä: pienet kulmat, hiuksenhienot reunat eikä varjoa. Tekstiväri periytyy sivultasi, ainoa asia, jonka tämä esiasetus jättää isäntäsivun vastuulle.
  • denseHeritage-värit, tiivis kirjasinkoko ja välitys sivupalkki- ja alatunnistesijoitteluihin.
Tokenit, joita se lukee
data-theme-preset="dark"
Yksi viidestä yllä olevasta. Muut arvot palautuvat Heritage-oletukseen.
data-theme="#C06B4A"
Korostusvärisi 3- tai 6-numeroisena heksadesimaalikoodina.
data-radius-scale="sm"
Kulma-asteikko: sm, md tai lg.
data-density="compact"
Riviväli: väljä tai tiivis.
data-shadow="flat"
Varjo: pehmeä, tasainen tai ei mitään.
data-font="serif"
Kirjasin: grotesk, sans, serif, mono tai system. Se nimetään mutta sitä ei ladata, joten upotus käyttää sivulla jo olevaa kirjasinpinoa.
Kuka muokkaaTagin omistaja. Hallintapaneelin rakennustyökalu esikatselee määritteet ja kirjoittaa ne liitettävään koodinpätkään. Sen jälkeen teema on tagissa: muuta sijoittelua muokkaamalla määritteitä, älä ottamalla upotusta uudelleen käyttöön.
Kontrasti tarkistetaan renderöinnin yhteydessäKorostusväri hylätään, jos sen kontrastisuhde taustaan ei saavuta arvoa 4,5:1, ja widget käyttää omaa korostusväriään. Tarkistus tehdään jokaisella sivun katselulla, ei vain tallennettaessa, joten brändiväri ei voi tehdä rivistä huomaamatta lukukelvotonta. Varastotilan ja tuoreuden värejä ei voi teemoittaa: korostusväri tai esiasetus ei voi vaihtaa varastoväitteen väriä.
Jokaisella upotuksella on oma teemansaBrändisivun upotus ja kaupan upotus omalla sivustollaan ovat erillisiä tunnisteita, joissa on erilliset attribuutit samoilla tiedoilla, joten kauppasivusto pysyy kauppasivustona.
Kolme konfigurointikerrosta

Kirjoitetaan kerran tagiin. Luetaan jokaisella renderöinnillä.

  1. 01Hallintapaneelisi kirjoittaa taginWidgetin rakennustyökalu esikatselee määrityksen, tuottaa script-tagin ja tallentaa määritykset, joihin haluat palata. Tililtäsi ei noudeta määrityksiä renderöinnin aikana: upotus tekee sen, mitä tagi määrittää. Siksi tagi toimii myös sivulla, jota kukaan ei ole koskenut vuoteen.
  2. 02Tagi määrittää sijoittelundata-widget-type valitsee widgetin, data-view Mistä ostaa -näkymän, data-map-height kehystetyn myymälähaun korkeuden ja teemamääritteet loput. Jäsentäjän tuntemattomat määritteet ohitetaan sen sijaan, että niiden merkitystä arvailtaisiin.
  3. 03Rivi ansaitsee loputJälleenmyyjän omat tiedot, ei tagi, ratkaisevat, mitä yksittäinen rivi näyttää. Yllä olevat portaat ovat koko malli. Et voi ottaa hintaa käyttöön myymälälle, joka ei julkaise hintaa, eikä upotus keksi sellaista.
Valmisteltu toteutukseen

Mihin kehittäjäsi sitoutuvat

Kaikki yllä oleva renderöityy sivun yläreunan yhdestä script-tagista. Nämä ovat sen toimintaperiaatteet. Jokainen niistä joko varmistetaan koontiportissa tai katetaan tämän ohjelmistovaraston testillä.

Yksi tagi
Yksi asynkroninen script-tagi sijoittelua kohden, eikä koontivaihetta. Widget renderöityy omaan shadow root -juureensa, kun selain tukee sitä, joten isäntäsivun CSS ja upotus eivät vaikuta toisiinsa. Kulmapainike ja varausilmoitus liitetään body-tasolle.
Paino on portti, ei lupaus
Julkaistu paketti mitataan jokaisessa koonnissa, ja koonti epäonnistuu, jos koko ylittää tallennetun ylärajan. Luku on widgetin omassa budjettitiedostossa eikä tässä tekstissä, joten sivu ei voi ajautua eri lukemaan.
Mikään ei lataudu aikaisin
Tagi on asynkroninen, ja tietopyyntö odottaa, kunnes upotus lähestyy näkymää. Kehystetyt kartta- ja asentajaosat ovat iframe-kehyksiä, joten karttalaatat kuormittavat kehystettyä sivua eivätkä tuotesivuasi.
Yksityisyyden oletusasetukset
Ei evästeitä. Analytiikka pysyy poissa käytöstä, kunnes data-analytics-consent on true. Sitä ennen upotus ei lähetä yhtään tapahtumaa. Se kirjoittaa vain yhden sessionStorage-avaimen, joka estää paluunavigointia laskemasta samaa tulosta kahdesti.
Näppäimistö ja kontrasti
Rivit, vaihtimet ja laajentimet ovat oikeita painikkeita, joten alusta hoitaa Enterin, välilyönnin ja kohdistusrenkaan. Valintaikkunat ottavat kohdistuksen, pitävät sarkainkohdistuksen sisällään, sulkeutuvat Escapella ja palauttavat kohdistuksen. Jokaisen esiasetuksen tekstiparit testataan WCAG AA:ta vasten widgetin testipaketissa. Sivun tekstivärin perivä esiasetus kirjaa tämän eikä väitä kontrastisuhdetta, jota se ei voi tietää.
Kun asiat epäonnistuvat
Estetty tai epäonnistunut komentosarja ei renderöi mitään ja jättää sivusi ennalleen. Hidas API näyttää latausrungon. Tavoittamaton API kertoo latauksen epäonnistuneen ja tarjoaa uutta yritystä, ei koskaan virheellistä tyhjää tilaa. Väärin määritetty tagi kirjaa puuttuvan määritteen ja lisää valvonnan löytämän merkin, mutta ei silti näytä ostajille mitään rikkoutunutta.
Kokeilualue

Tee siitä omasi ja kopioi sitten tagi

Valitse tila, teeman esiasetus, korostusväri ja asettelun määritteet. Käytössä oleva esikatselu hahmonnetaan ja koodinpätkä luodaan uudelleen muutosten mukana. Julkaistu upotus lukee oikeasti jokaisen näkyvän määritteen.

widgetin oletusarvo (#1E5E45)

Widget hylkää luettelon ulkopuoliset arvot turvallisesti. Tuntematon esiasetus tai virheellinen heksadesimaaliväri palautuu Heritage-oletukseen, joten kirjoitusvirhe ei voi rikkoa tuotesivua.

Ladataan käytössä olevaa upotusta osoitteesta 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 pysyy arvossa "false" jokaisessa luodussa koodinpätkässä. Aseta arvoksi "true" vasta, kun suostumustyökalu (CMP) on tallentanut ostajan suostumuksen.

Hankalat isäntäsivut

Rakennettu vastaan hangoitteleville sivuille

Todellisilla isäntäsivuilla on aggressiivista CSS:ää, tiukkoja tietoturvakäytäntöjä ja rikkoutuneita ympäristöjä. Kolme näistä olosuhteista voidaan suorittaa tässä. Loput suoritetaan automaattisina testeinä synteettisiä hankalia isäntäsivuja vasten CI:ssä ja käyttöönotetussa ympäristössä. Jokaisella tämän osion väitteellä on sitä tukeva testi.

Vihamielinen: tyhjä CSS

Säilön tyylitiedosto määrittää div:empty { display:none !important }, säännön, joka pysäyttää yksinkertaiset upotukset huomaamatta ennen latausta. Widgetin liitoskohdassa on piilotettu merkkisolmu, joten se ei koskaan vastaa :empty-valitsinta ja renderöityy silti.

Ladataan käytössä olevaa upotusta osoitteesta cdn.test.stockisto.com…

Väärin määritetty tarkoituksella

Upotuksessa EI ole datalähdettä: ei bränditunnusta, toimittajatunnusta tai jälleenmyyjää. Katso, miten widget toimii ja mitä se kieltäytyy tekemästä.

Ladataan käytössä olevaa upotusta osoitteesta cdn.test.stockisto.com…

Avaa selainkonsoli: widget kirjasi täsmälleen puuttuvan määritteen. Konsolivirhe on widgetin tarkoituksellinen toiminto. Se on väärin määritetyn upotuksen ainoa rehellinen sivuvaikutus.

320px sarake

Sama käytössä oleva upotus on rajattu 320px:n sarakkeeseen, joka on tavallisen sivupalkki- tai mobiilipaikan kapein koko. Ei vaakasuuntaista ylivuotoa tai leikkautuneita toimintoja.

Ladataan käytössä olevaa upotusta osoitteesta cdn.test.stockisto.com…

Testattujen olosuhteiden matriisi

Jokainen rivi vastaa ohjelmistovarastossamme nyt olevaa automaattista testausta: yksikkösuojia jokaisella lähetyksellä ja selaintestejä synteettisiä hankalia isäntäsivuja vasten. Taulukko kertoo tämän testikattavuuden eikä tee sitä laajempia päätelmiä.

OlosuhdeMitä upotus takaaNäyttö
Tiukan CSP:n isäntä: default-src 'none'; vain CDN-komentosarja ja API-yhteys sallitaanKäynnistyy ja piirtyy ilman sisäistä komentosarjaa tai eval-riippuvuutta. Sivulla ei ole virheitä.Käyttöönotettu e2e (widget-hostile-host-matrix) + oikeiden selainten matriisi (tests/e2e/widget-host)
Tavallinen HTTP-sivu (suojaamaton konteksti, ei crypto.randomUUID:ta)Käynnistyy ilman sivuvirheitä. Pienoisohjelman tunnukset käyttävät suojattua UUID-varapolkua.Käyttöönotettu e2e (widget-hostile-host-matrix) + yksikkötason käynnistyssuoja jokaisella lähetyksellä (packages/widget)
Salausominaisuudeton isäntä: window.crypto puuttuu tai randomUUID on poistettuKäynnistyy määrityksen mukaisella v4-widgettunnuksella. Heitetty TypeError ei pysäytä upotusta.Yksikkötason käynnistyssuoja jokaisella lähetyksellä (packages/widget hostile-host-boot) + käyttöönotettu e2e
Aggressiivinen isäntäsivun CSS: div:empty { display:none } koko sivullaLiitoskohta säilyttää asettelulaatikon (piilotettu merkki, ei koskaan :empty), viivästetty lataus käynnistyy yhä ja widget piirtyy.Käyttöönotettu e2e (widget-host-css-deadlock, widget-hostile-host-matrix) + yllä oleva suora esittely
Hidas tai epäonnistuva API: 503, verkkovirhe, 8 sekunnin pysähdys tai koko alkuperän estoErillinen ja rehellinen ”lataus epäonnistui, yritä uudelleen” -tila sekä manuaalinen uudelleenyritys. Ei virheellistä ”ei jälleenmyyjiä” -tilaa eikä hiljaista tyhjää laatikkoa.Yksikkötestaus jokaisella lähetyksellä (packages/widget render-failure)
Kolmannen osapuolen alkuperä: upotus toimii Stockiston ulkopuolisessa verkkotunnuksessaKaikki datapyynnöt ovat nimettömiä API-pyyntöjä, joille CORS on avoin. Ei evästeitä eikä oletuksia samasta alkuperästä.Kaikki käyttöönotetut widget-määritykset toimivat synteettisissä kolmannen osapuolen alkuperissä (*.stockisto-e2e.example)
Puuttuva datalähde: ei bränditunnusta, toimittajatunnusta tai jälleenmyyjäjoukkoaKieltäytyy käynnistymästä: konsolivirhe nimeää määritteen ja data-stockisto-error-leima mahdollistaa valvonnan. Ostajille ei piirretä mitään rikkoutunutta.Yksikkötason käynnistystesti jokaisella lähetyksellä (packages/widget missing-data-source-boot) + yllä oleva suora esittely
Julkaisu

Erillistä kehityssprinttiä ei tarvita.

01

Liitä yksi tagi

Yksi script-tagi sivua kohden. Ei kokoamisvaihetta, asennettavaa pakettia eikä käsin mitoitettavaa iframe-kehystä.

02

Se sopii ympäröivälle sivulle

Leveys, rivikorkeus ja esitystapa ovat määritteitä. Sisäiset ja välilehtinäkymät pysyvät sivulla, joten hakukoneet voivat lukea ne.

03

Se sanoo vain sen, minkä voi todistaa

Varastotila, jota emme voi vahvistaa, merkitään eikä sitä nosteta esiin. Kun näytettävää ei ole, upotus kertoo sen eikä näytä nollaa.

04

Jälleenmyyjät nousevat portaikossa

Varastosyöte, hinnat, ostolinkki, siirto ostoskoriin, varaus. Jokainen jälleenmyyjän ansaitsema porras tuo ostajille kattavamman rivin, joten datan pitäminen rehellisenä kannattaa.

Näe se omassa luettelossasi.

Tuo jälleenmyyjäverkostosi, liitä yksi tagi ja katso, mitkä myymälät ostajasi valitsevat.

Luo tiliSelaa kaikkia 8 upotusta

cebf50c · 2026-10-05 22:57