Interaktiva bilder interactive-images

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Du kan enkelt skapa statiska bilder med engagerande upplevelser för kunderna genom att dra och släppa"köpbara" hotspot-områden på en bild. De köpbara hotspotten kombinerar ytterligare information om en produkt eller tjänst med en direktförsäljningsfunktion,"Lägg i kundvagnen" eller"Köp". Kunderna kan trycka på dessa hotspot-områden och länkas direkt till produkten eller tjänsten, lägga till den i en kundvagn eller länkas till en webbsida. Direktupplevelser som dessa ökar kundernas engagemang och konverteringsgrad på er webbplats.

Här följer en köpbar banderoll med popup-fönstret QuickView. En användare aktiverar snabbvyn genom att trycka på cirkeln eller aktiveringspunkten på modellen.

chlimage_1-368

Se hur interaktiva bilder fungerar på webbsidan ovan genom att gå till följande:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=sv-SE?lang=sv-SE

Se hur interaktiva bildbanderoller skapas watch-how-interactive-image-banners-are-created

Se en genomgång på 10 minuter och 33 sekunder hur interaktiva bildbanderoller skapas. Du får också lära dig att förhandsgranska, redigera och leverera interaktiva bildbanderoller.

Snabbstart: Interaktiva bilder quick-start-interactive-images

Följande steg-för-steg-beskrivning av arbetsflödet hjälper dig att komma igång snabbt med interaktiva bilder i AEM Assets.

Leta efter Exempel i vissa snabbstartsåtgärder. Den innehåller en kort självstudiekurs som baseras på följande exempel på webbsidor som ännu inte har Interactive Images tillagd:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=sv-SE?lang=sv-SE

Självstudiekursen visar hur du integrerar interaktiva bilder på din egen webbplats.

Arbetsflöde för interaktiva bilder:

  1. (Valfritt) Identifiera hotspot-variabler - Om du använder fristående AEM Assets och Dynamic Media kan du börja med att identifiera dynamiska variabler som används i din befintliga QuickView-implementering så att du kan ange hotspot-data när du skapar den interaktiva bilden. Se (Valfritt) Identifiera hotspot-variabler.

    Men om du använder AEM Sites, eller AEM e-handel, eller båda, är det här steget inte nödvändigt.

    Se e-handelskoncept i AEM Assets.

  2. (Valfritt) Skapa en förinställning för Interactive Image Viewer - Anpassa den grafiska bild som används för att representera aktiveringspunkter. Du behöver inte skapa en egen förinställning för Interactive Image Viewer om du tänker använda den färdiga Interactive Image Viewer-förinställningen med namnet Shoppable_Banner i stället.

    Se (Valfritt) Skapa en förinställning för Interactive Image Viewer.

  3. Överföra en bildbanderoll - Överför bildbanderoller som du vill göra interaktiva.

    Se Överföra en bildbanderoll.

  4. Lägga till aktiveringspunkter i en bildbanderoll - Lägg till en eller flera hotspot-områden i en bildbanderoll och associera dem med en åtgärd som en hyperlänk, en snabbvy eller ett Experience Fragment. När du har lagt till aktiveringspunkter avslutar du den här uppgiften genom att publicera den interaktiva bilden.

  5. Lägga till en interaktiv bild till din webbplats eller till din webbplats i AEM

(Valfritt) Identifiera hotspot-variabler optional-identifying-hotspot-variables

NOTE
Den här aktiviteten krävs bara om följande är sant:
  • Du vill lägga till interaktivitet i bilden genom att aktivera snabbvyer.
  • Din implementering av AEM gör det not använda ett ramverk för e-handelsintegrering för att hämta in produktdata i AEM från alla e-handelslösningar som IBM Websphere Commerce, Elastic Path, hybris eller Intershop. Se e-handelskoncept i AEM Assets.
Om din implementering av AEM använder e-handel kan du hoppa över den här uppgiften och fortsätta med nästa uppgift.

Börja med att identifiera dynamiska variabler som används i den befintliga QuickView-implementeringen så att du kan ange hotspot-data för att skapa den interaktiva bilden.

När du lägger till aktiveringspunkter i en banderollbild i AEM Assets måste du tilldela en SKU (Stock Keeping Unit) en unik identifierare för varje enskild produkt eller tjänst som du erbjuder) och valfria ytterligare variabler för varje hotspot. Sådana hotspot-variabler används senare för att matcha hotspot-områden med Quickview-innehåll.

Det är viktigt att kunna identifiera antalet och typen av variabler som ska kopplas till hotspot-data. Varje hotspot som läggs till i en banderollbild måste innehålla tillräckligt med information för att entydigt identifiera produkten i det befintliga backend-systemet.

Det finns olika sätt att identifiera en uppsättning variabler som ska användas för hotspot-data.

Ibland kan det räcka att rådfråga IT-specialister som är ansvariga för den befintliga QuickView-implementeringen, eftersom de troligen vet vilken minimiuppsättning data som behövs för att identifiera Quickview i systemet. I de flesta fall går det dock även att bara analysera den befintliga beteendet för koden.

De flesta QuickView-implementeringar använder följande paradigm:

  • Användaren aktiverar ett element i användargränssnittet på webbplatsen. Klicka till exempel på en Quickview -knappen.
  • Webbplatsen skickar en Ajax-begäran till serverdelen för att läsa in QuickView-data eller -innehåll vid behov.
  • Quickview-data översätts till innehållet som förberedelse för återgivning på webbsidan.
  • Slutligen återges sådant innehåll på skärmen visuellt i koden.

Sedan besöker man olika delar av den befintliga webbplatsen där QuickView-funktionen används, startar QuickView och hämtar den Ajax-URL som skickats från webbsidan för att läsa in QuickView-data eller -innehåll.

Normalt behöver du inte använda några specialverktyg för felsökning. Moderna webbläsare har webbinspektörer som klarar ett bra jobb. Nedan följer några exempel på webbläsare som innehåller webbinspektörer:

  • Om du vill visa alla utgående HTTP-begäranden i Google Chrome trycker du på F12 för att öppna dialogrutan Developer Tools och klickar sedan på Network -fliken.

    På en Mac: tryck Command+Option+I för att öppna Developer Tools och klicka sedan på fliken Nätverk.

  • I Firefox kan du antingen aktivera plugin-programmet för Firebug genom att trycka på F12 och använda fliken Net, eller så kan du använda det inbyggda Inspector och Network -fliken.

    På en Mac: tryck Command+Option+I för att öppna Developer Tools och klickar sedan på Inspector -fliken.

När nätverksövervakning är aktiverat i webbläsaren utlöser du snabbvyn på sidan.

Nu kan du hitta Quickview Ajax-URL:en i nätverksloggen och kopiera den inspelade URL:en för framtida analys. I de flesta fall när du utlöser snabbvyn skickas flera begäranden till servern. Vanligtvis är Quickview Ajax-URL en en av de första i listan. Den har antingen en komplex frågesträngsdel eller sökväg och dess MIME-svarstyp är antingen text/html, text/xml, eller text/javascript.

Under den här processen är det viktigt att du besöker olika delar av webbplatsen, med olika produktkategorier och typer. Anledningen är att URL:er för snabbvyn kan ha delar som är gemensamma för en viss webbplatskategori, men bara ändras om du besöker ett annat område på webbplatsen.

I det enklaste fallet är den enda variabeldelen i snabbvyns URL produktens SKU. I det här fallet är SKU-värdet den enda datadel som du behöver för att lägga till aktiveringspunkter i banderollbilden.

I komplexa fall har emellertid QuickView-webbadressen olika element utöver SKU:n, till exempel kategori-ID, färgkod, storlekskod osv. I sådana fall är varje element en separat variabel i hotspot-datadefinitionen i den interaktiva bildfunktionen som kan köpas i AEM Assets.

Titta på följande exempel på QuickView-URL:er och deras resulterande hotspot-variabler:

En SKU, hittades i frågesträngen.

De inspelade URL:erna för snabbvyn är bland annat följande:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

Den enda variabeldelen i URL:en är värdet på strängparametern productId= och det är tydligt ett SKU-värde. Därför behöver våra aktiveringspunkter bara SKU-fält med värden som 866558, 1196184, 1081492, 1898294.

En SKU, finns i URL-sökvägen.

De inspelade URL:erna för snabbvyn är bland annat följande:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

Variabeldelen finns i den sista delen av banan och blir SKU-värdet för aktiveringspunkterna: 6422350843, 1607745002, 0086724882.

SKU och kategori-ID i frågesträngen.

De inspelade URL:erna för snabbvyn är bland annat följande:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

I det här fallet finns det två olika delar i URL:en. SKU:n lagras i prodId parameter och kategori-ID

categoryId

  • 305466``categoryId``1100004

  • 310181``categoryId``1100004

  • 308706``categoryId``1740148

Exempel

Du kan använda samma metod som i de tre exemplen ovan på demowebbsidan:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=sv-SE?lang=sv-SE

Demonstrationswebbsidan innehåller flera produktminiatyrbilder med en QuickView-knapp See More. Med webbläsarens felsökningsverktyg fortfarande aktiverat klickar du på varje knapp och noterar de inspelade URL:erna för snabbvyn. När du har aktiverat alla fyra snabbvyerna för produkten som finns på sidan, finns följande lista över snabbvybegäranden som gjorts i bakgrunden:

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

Om du tittar på de här serversamtalen ser du att produktspecifik information bara finns i sökvägen för begäran. Du observerar också att frågesträngen inte används alls och att det finns två olika typer av datadelar:

  • Den första typen är Män eller Kvinnor. Du kan kalla den här"produktkategorin".
  • Den andra typen är produktnamn, till exempel CamoPullover. Du kan anta att det här är SKU:n för produkten.

Med hjälp av den här informationen har hela snabbvyns URL följande mönster:

/datafeed/$categoryId$-$SKU$.json

Baserat på en sådan analys skulle du använda categoryId och SKU för aktiveringspunkter.

Du är nu redo att ladda upp en bildbanderoll och lägga till hotspot-områden i den med funktionen för interaktiv bild i AEM Assets.

(Valfritt) Skapa en förinställning för Interactive Image Viewer optional-creating-an-interactive-image-viewer-preset

Du kan välja att använda den förinställda interaktiva bildvisningsprogramvaran som är färdig att användas och som kallas Shoppable_Banner som kommer med AEM Assets. Du kan också skapa en egen förinställning för visningsprogrammet som kan användas med interaktiva bilder.

När du skapar en anpassad förinställning för Interactive Image Viewer kan du bestämma utseendet på aktiveringspunkter i bildbanderollen. När du skapar visningsförinställningen kan du välja att använda en aktiveringspunktsbild från ett galleri med fördefinierade bilder.

När du har sparat visningsförinställningen aktiveras den automatiskt (aktiveras) på Viewer Preset listsida i AEM Assets. Den här funktionen innebär att den är synlig i komponenten Interactive Media och när du visar en resurs. Men leverera en interaktiv banderoll med denna visningsförinställning måste du publicera visningsförinställningen också (detta gäller anpassade visningsprogramförinställningar eller förinställda visningsinställningar som inte är installerade).

Skapa en förinställning för Interactive Image Viewer:

  1. Tryck på vänster spår Tools > Assets > Viewer Presets.

  2. I sidans övre högra hörn trycker du Create.

  3. I New Viewer Preset anger du ett namn som beskriver den interaktiva förinställningen för visningsprogrammet för banderollen.

    Det här är titeln som visas i Viewer Preset listsida när du har sparat.

  4. I Rich Media Type nedrullningsbar meny, välj Interactive Image.

  5. Tryck Skapa.

  6. Edit Viewer Preset tryck på Appearance -fliken.

  7. Gör något av följande:

    • Om du vill överföra en egen hotspot-bild som du vill använda på bilder trycker du på Asset Picker ikon. I Select Content navigera till den hotspot-bild som du vill använda, markera den och tryck sedan på Check Mark i det övre högra hörnet.
    • Om du vill välja en fördefinierad hotspot-bild trycker du på Hotspot Gallery ikon. Tryck på den hotspot-bild som du vill använda på paletten för klickbara områden.
  8. I sidans övre högra hörn trycker du Save.

    Var noga med att publicera den nya visningsförinställningen.

    Se Publicera förinställningar för visningsprogram som du har lagt till.

    Du kan nu ladda upp en bildbanderoll.

Överföra en bildbanderoll uploading-an-image-banner

Om du redan har överfört de bilder du vill använda går du vidare till nästa steg, Lägga till aktiveringspunkter i en bildbanderoll.

Så här överför du en bildbanderoll:

  1. Ladda upp bildbanners som du vill göra interaktiva.

    Se Överför resurser.

    Nu kan du lägga till hotspot-områden i bildbanderollen; se nästa uppgift nedan.

Lägga till aktiveringspunkter i en bildbanderoll adding-hotspots-to-an-image-banner

Du kan lägga till aktiveringspunkter i en bildbanderoll med redigeraren på panelen Hotspot Management sida.

När du lägger till aktiveringspunkter kan du definiera dem som en snabbvypopup-visning, som en hyperlänk eller som en upplevelsefragment.

Se Upplevelsefragment.

NOTE
Tänk på att verktygen för delning av sociala medier i interaktiv bild inte stöds när du bäddar in visningsprogrammet i ett Experience Fragment. Du kan undvika detta genom att använda eller skapa visningsförinställningar som inte har verktyg för delning av sociala medier. Med sådana visningsförinställningar kan du bädda in dem i Experience Fragments.

Undo och Redo alternativen, som finns uppe till höger på sidan, stöds under den aktuella skaps-/redigeringssessionen.

När du är klar med den interaktiva bilden kan du använda Preview för att se hur den interaktiva bilden kommer att se ut för kunderna.

Se (Valfritt) Förhandsgranska interaktiva bilder.

NOTE
När du lägger till aktiveringspunkter i en bild i en interaktiv bild eller en Carousel-banderoll lagras hotspot-informationen på samma metadataplats - i förhållande till bildens plats - oavsett om det är en interaktiv bild eller en Carousel-banderoll. Den här funktionen innebär att du enkelt kan återanvända samma bild - tillsammans med dess definierade hotspot-data - i båda visningsprogrammen.
Observera dock att Carousel Banners stöder bildscheman på bilder som även kan innehålla hotspot-områden. en interaktiv bild gör det inte. Tänk på detta om du tänker skapa en interaktiv bild eller en Carousel-banderoll som använder samma bild. Du kanske vill skapa interaktiva bilder och Carousel Banners med separata kopior av samma bild istället.
Se även Carousel Banners.
NOTE
Om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas dina aktiveringspunkter bort.

Lägga till aktiveringspunkter i en bildbanderoll:

  1. I resursvyn navigerar du till den bildbanderoll som du vill göra interaktiv.

  2. Gör något av följande:

    • Hovra över bilden och tryck sedan Select (bockmarkeringsikon). Tryck på i verktygsfältet Edit.
    • Hovra över bilden och tryck sedan More actions (ikon med tre punkter) > Edit.
    • Tryck på bilden för att öppna den i Detail View sida. Tryck på i verktygsfältet Edit.
  3. Knacka i det övre vänstra hörnet av sidan Add Hotspot (pekare) för att öppna Hotspot Management sida.

  4. Knacka i det övre vänstra hörnet av sidan Hotspot.

  5. a. Nära det övre vänstra hörnet av Hantering av hotspot sida, tryck Hotspot.
    b. Tryck på den plats i bilden där du vill att hotspot-området ska visas. Dra hotspot-området om det behövs för att justera dess placering.
    c. Lägg till ytterligare hotspot-områden efter behov genom att upprepa steg a och b. d. (Valfritt) Om du vill ta bort en aktiveringspunkt markerar du den i bilden och trycker sedan på Delete (soptunnesikonen) under Hotspots rubrik.

  6. I Name skriver du namnet på aktiveringspunkten. Det här namnet visas även i Selected Hotspot nedrullningsbar lista.

  7. Gör något av följande:

    • Tryck på Quickview.

      • Om du är AEM Sites- eller e-handelskund trycker du på Product Picker ikon (förstoringsglas) för att öppna Select Product sida. Tryck på den produkt du vill använda och tryck sedan på Select i det övre högra hörnet av sidan för att gå tillbaka till Hotspot Management sida.

      • Om du not en AEM Sites- eller e-handelskund

        • Se Identifiera hotspot-variabler; måste du definiera dessa variabler.
        • Ange sedan SKU-värdet manuellt. I SKU Value ska du skriva produktens SKU (Stock Keeping Unit), som är en unik identifierare för varje separat produkt eller tjänst som du erbjuder. Det angivna SKU-värdet fyller automatiskt i variabeldelen av QuickView-mallen så att systemet vet att den aktiveringspunkt som användaren går till associeras med en viss SKU:s snabbvy.
        • (Valfritt) Om det finns andra variabler i snabbvyn som du behöver använda för att identifiera en produkt ytterligare trycker du på Add Generic Variable. Ange ytterligare en variabel i textfältet. Till exempel: category=Mens är en tillagd variabel.
    • Tryck Hyperlänk.

      • Om du är AEM Sites-kund trycker du på Site Selector -ikon (mapp) för att navigera till en URL. Observera att den URL-baserade länkningsmetoden inte är möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till AEM Sites-sidor.
      • Om du är en fristående kund kan du HREF anger du den fullständiga URL-sökvägen till en länkad webbsida.

      Var noga med att ange om länken ska öppnas på en ny webbläsarflik (rekommenderat standardvärde) eller på samma flik.

      Se Arbeta med väljare för mer information.

    • Tryck Experience Fragment.

      • Om du är AEM Sites-kund trycker du på Search ikon (förstoringsglas) för att öppna Experience Fragment sida. Tryck på det Experience Fragment du vill använda och tryck sedan på Select i det övre högra hörnet av sidan för att gå tillbaka till sidan för hantering av hotspot.

        Se Upplevelsefragment.

        note note
        NOTE
        Tänk på att verktygen för delning av sociala medier i interaktiv bild inte stöds när du bäddar in visningsprogrammet i ett Experience Fragment. Du kan undvika detta genom att använda eller skapa visningsförinställningar som inte har verktyg för delning av sociala medier. Med sådana visningsförinställningar kan du bädda in dem i Experience Fragments.
      • Ange bredd och höjd för Experience Fragment så som det kommer att visas på banderollen.

  8. Tryck Save för att spara ditt arbete och gå tillbaka till Browse sida.

  9. Publicera den interaktiva bilden. Med publicering kan banderollen levereras via molnet och även generera inbäddningskod om du behöver integrera med en tredjepartswebbplats.

    Se Publicera resurser.

    När du har lagt till aktiveringspunkter och publicerat den interaktiva bilden kan du nu lägga till den på din befintliga webbplats.

    Se Integrera en interaktiv bild med webbplatsen.

    note note
    NOTE
    Om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas dina aktiveringspunkter bort.

(Valfritt) Förhandsgranska interaktiva bilder optional-previewing-interactive-images

Du kan använda Förhandsgranska för att se hur den interaktiva bilden kommer att se ut för kunderna och för att testa hur hotspot-områden i bilden beter sig som förväntat.

När du är nöjd med den interaktiva bilden kan du publicera den.
Se Bädda in video- eller bildvisningsprogrammet på en webbsida.
Se Länka URL:er till webbprogrammet. Observera att den URL-baserade länkningsmetoden inte är möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till AEM Sites-sidor.
Se Lägga till Dynamic Media-resurser på sidor.

Förhandsgranska interaktiva bilder:

  1. Navigera till en befintlig interaktiv bild som du har skapat i resursvyn och öppna den i förhandsvisningen genom att trycka.
  2. Nära det övre vänstra hörnet på förhandsgranskningssidan, i Content nedrullningsbar lista, knacka Viewers.
  3. I Viewers lista, knacka Shoppable_Banner eller namnet på den interaktiva bildvisningsförinställning som du har skapat.
  4. Tryck på hotspot-områden på bilden för att testa deras associerade åtgärder.

Publicera interaktiva bildresurser publishing-interactive-image-assets

Se Publicera resurser om du vill ha information om hur du publicerar interaktiva bildresurser.

Integrera en interaktiv bild med webbplatsen integrating-an-interactive-image-with-your-website

När du har överfört en banderollbild, lagt till aktiveringspunkter i bilden och publicerat den interaktiva bilden kan du nu lägga till den på din webbsida.

Om du är kund hos AEM Sites kan du lägga till den interaktiva bilden genom att dra Interactive Media-komponenten till din sida. Se Lägga till Dynamic Media-resurser på sidor.

Om du är en fristående AEM Assets-kund kan du lägga till den interaktiva bilden manuellt på din webbplats enligt beskrivningen i det här avsnittet.

  1. Kopiera den publicerade interaktiva bildens inbäddningskod.

    Se Bädda in video- eller bildvisningsprogrammet på en webbsida.

  2. Lägg till den kopierade inbäddningskoden på önskad plats på webbsidan.

    Den kopierade inbäddningskoden ställs in för en responsiv miljö så att den automatiskt passar det tilldelade området.

Exempel

Använda demowebbplatsen som exempel:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=sv-SE?lang=sv-SE

Observera att bilden på de tre männen är statisk IMG tagg:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

Integreringen är enkel som att ta bort IMG tagga och ersätta den med den kopierade inbäddningskoden från AEM Assets. Du kan se resultatet i följande URL som visar den interaktiva bilden som kan köpas på sidan med tre cirkelaktiveringspunkter:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=sv-SE?lang=sv-SE

NOTE
Så här långt är de hotspots som finns på den interaktiva bilden av demowebbplatsen endast avsedda för webben. de är ännu inte integrerade med de befintliga snabbvyerna.

Om du vill tillämpa en beskärning på en interaktiv bild för en responsiv miljö kan du inkludera attributet Interactive Image configuration ZoomView.iscommand till banan - där ZoomView är komponenten som ska anropas och iscommand är det kommando för att visa beskärningsbilden som du använder.

Se ZoomView.iscommand konfigurationsattribut.

Se beskära kommando för att visa bilder.

Nu kan du integrera den interaktiva bilden med en befintlig Quickview på webbplatsen.

Integrera en interaktiv bild med en befintlig snabbvy integrating-an-interactive-image-with-an-existing-quickview

NOTE
Detta gäller endast om du är en fristående AEM Assets-kund.

Det sista steget i den här processen är att integrera den interaktiva bilden med en befintlig Quickview-implementering på din webbplats. Det finns ingen lösning på integreringen som fungerar i alla fall. Alla QuickView-implementeringar är unika och det behövs ett specifikt tillvägagångssätt som troligen inbegriper hjälp av en IT-handläggare på frontend.

Den befintliga Quickview-implementeringen representerar normalt en kedja av interrelaterade åtgärder som inträffar på webbsidan i följande ordning:

  1. En användare utlöser ett element i användargränssnittet för webbplatsen.
  2. FrontEnd-koden hämtar en QuickView-URL som baseras på användargränssnittselementet som utlöstes i steg 1.
  3. Front-end-koden skickar en Ajax-begäran med den URL som fås i steg 2.
  4. Bakåtlogiken returnerar motsvarande QuickView-data eller -innehåll tillbaka till slutkoden.
  5. Slutkoden läser in QuickView-data eller -innehåll.
  6. Om du vill kan du konvertera den inlästa QuickView-informationen till en HTML-representation med hjälp av koden.
  7. I slutkoden visas en modal dialogruta eller panel och HTML-innehållet på skärmen återges för slutanvändaren.

Dessa anrop kanske inte representerar oberoende offentliga API-anrop som kan anropas av webbsidans logik från ett godtyckligt steg. I stället är det ett kedjat anrop där varje steg döljs i den sista fasen (återanrop) av föregående steg.

Samtidigt som den interaktiva bilden som kan köpas ersätter steg 1, och delvis steg 2, när en användare klickar på en hotspot i bilden som kan köpas, hanteras den här användarinteraktionen av användaren. Visningsprogrammet returnerar en händelse till webbsidan som innehåller alla hotspot-data som tidigare lagts till i AEM Assets.

I en sådan händelsehanterare gör koden längst fram följande:

  • Lyssnar på en händelse som skickas av den interaktiva bilden som kan köpas.
  • Skapar en URL för snabbvyn baserat på hotspot-data.
  • Startar processen att läsa in snabbvyn från serverdelen och återge den på skärmen för visning.

Den inbäddningskod som returneras av AEM Assets har redan en färdig händelsehanterare på plats som kommenteras ut, vilket visas i följande markerade kodfragment:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

Därför är det bara nödvändigt att avkommentera koden och ersätta dummy-hanterarens brödtext med koden som är specifik för den aktuella webbsidan.

Processen med att konstruera en Quickview-URL är i stort sett annorlunda än den process som användes för att identifiera hotspot-variabler som beskrivs tidigare.

Se Identifiera hotspot-variabler.

Med hjälp av våra tidigare exempel på QuickView-webbadresser kan du i följande exempel se hur snabbvyns webbadress är uppbyggd i varje fall:

En SKU, som finns i frågesträngen
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
En SKU, finns i URL-sökvägen
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU och kategori-ID i frågesträngen
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

Det sista steget för att utlösa snabbgransknings-URL:en och aktivera snabbvypanelen kräver troligen hjälp av en IT-handläggare på IT-avdelningen. De har kunskap om hur de bäst kan utlösa QuickView-implementeringen från rätt steg med en färdig QuickView-URL.

Du kan se hur dessa steg tillämpas på demowebbplatsen för att helt integrera en interaktiv bild som kan köpas med QuickView-koden. Tidigare identifierades strukturen för snabbvyns URL som följande:

/datafeed/$categoryId$-$SKU$.json

För att rekonstruera denna URL i quickViewActivate -hanterare kan du använda categoryId och SKU fält som är tillgängliga i inData objekt som skickas till hanteraren av användarens kod:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Demonstrationswebbplatsen utlöser dialogrutan Snabb visning med en enkel loadQuickView() funktionsanrop. Den här funktionen har bara ett argument, vilket är snabbvydata-URL:en. Det sista steget som krävs för att integrera den interaktiva bilden för en köpare är att lägga till följande kodrad i quickViewActivate hanterare:

loadQuickView(quickViewUrl);

Här följer den fullständiga källkoden:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

Den färdiga demowebbplatsen med den helt integrerade interaktiva bilden ser ut så här:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=sv-SE?lang=sv-SE

Använda snabbvyer för att skapa anpassade popup-fönster using-quickviews-to-create-custom-pop-ups

Se Skapa anpassade popup-fönster med snabbvyer.

recommendation-more-help
4452738f-2bdf-4cd4-9b45-905a69d607ad