Interactieve afbeeldingen

U kunt statische afbeeldingen eenvoudig verrijken en aantrekkelijke ervaringen voor klanten creëren door 'onoverzichtelijke' hotspots naar een afbeelding te slepen. Slepbare hotspots combineren aanvullende informatie over een product of service met een directe, verkooppuntfunctie 'Toevoegen aan winkelwagentje' of 'Kopen'. Klanten kunnen op deze hotspots tikken en rechtstreeks aan het product of de service worden gekoppeld, deze aan een winkelwagentje toevoegen of aan een webpagina worden gekoppeld. Directe ervaringen zoals deze vergroten het contact en de conversie van klanten op uw website.

Hieronder ziet u een blaasbare banner met een pop-upvenster van QuickView. Een gebruiker activeert de Snelle weergave door op de cirkel of de hotspot op het model te tikken.

Bekijk de volgende interactieve afbeeldingen in actie op de bovenstaande webpagina:

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

Controleren hoe interactieve afbeeldingsbanners worden gemaakt

Bekijk een 10 minuten en 33 seconden analyse op hoe de interactieve beeldbanners worden gecreeerd. U leert ook hoe u interactieve afbeeldingsbanners kunt voorvertonen, bewerken en leveren.

Snel starten: Interactieve afbeeldingen

De volgende stapsgewijze beschrijving van de workflow is ontworpen om u te helpen snel aan de slag te gaan met interactieve afbeeldingen in AEM Assets.

Zoek naar Voorbeeld rubriek binnen enkele taken van het Snelle Begin. Het bevat een korte zelfstudie die is gebaseerd op het volgende webpaginavoorbeeld waaraan nog geen interactieve afbeeldingen zijn toegevoegd:

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

De zelfstudie helpt u de stappen te illustreren voor het integreren van interactieve afbeeldingen op uw eigen website.

Workflow voor interactieve afbeeldingen:

1. (Optioneel) Hotspot-variabelen identificeren - Als u AEM Assets en Dynamic Media op zichzelf staand gebruikt, begint u met het identificeren van dynamische variabelen die worden gebruikt in uw bestaande Quickview-implementatie, zodat u hotspot-gegevens kunt invoeren wanneer u de interactieve afbeelding maakt. Zie (Optioneel) Hotspot-variabelen identificeren.

   Nochtans, als u AEM Sites, of AEM eCommerce, of allebei gebruikt, dan is deze stap niet noodzakelijk.

   Zie eCommerce-concepten in AEM Assets.

2. (Optioneel) Een voorinstelling voor een interactieve afbeeldingsviewer maken - Pas de afbeelding aan die wordt gebruikt om hotspots te vertegenwoordigen. Het is niet nodig een eigen voorinstelling voor de interactieve afbeeldingsviewer te maken als u de voorinstelling Shoppable_Banner in plaats daarvan wilt gebruiken die buiten de box is ingesteld met de naam Interactive Image Viewer.

   Zie (Optioneel) Een voorinstelling voor een interactieve afbeeldingsviewer maken.

3. Uploading an image banner - Upload afbeeldingsbanners die u interactief wilt maken.

   Zie Een afbeeldingsbanner uploaden.

4. Hotspots toevoegen aan een afbeeldingsbanner - Voeg een of meer hotspots toe aan een afbeeldingsbanner en koppel deze aan een handeling zoals een hyperlink, een Snelle weergave of een ervaringsfragment. Nadat u hotspots hebt toegevoegd, kunt u deze taak voltooien door de interactieve afbeelding te publiceren.

   • Zie Hotspots toevoegen aan een afbeeldingsbanner.
   • Zie Interactieve afbeeldingen voorvertonen - Optioneel. U kunt desgewenst een representatie van de verscherpte banner bekijken en de interactiviteit ervan testen.
   • Zie Elementen publiceren voor meer informatie over het publiceren van interactieve afbeeldingselementen.

5. Een interactieve afbeelding aan uw website of website toevoegen in AEM

   • Als u AEM Sites of AEM eCommerce of beide gebruikt, kunt u de interactieve afbeelding rechtstreeks aan een webpagina in AEM toevoegen door de component Interactieve media naar de pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.
   • Als u AEM Assets en Dynamic Media zelfstandig gebruikt, moet u de insluitcode naar uw website kopiëren en deze vervolgens integreren met uw bestaande Snelle weergave. Zie Een interactieve afbeelding integreren met uw website.
   • Als u WCM (Web Content Manager) van derden gebruikt, moet u de nieuwe interactieve video integreren met de bestaande implementatie van de Snelle weergave die op uw website wordt gebruikt. Zie Een interactieve afbeelding integreren met een bestaande QuickView.

(Optioneel) Hotspotvariabelen identificeren

Begin door dynamische variabelen te identificeren die door uw bestaande implementatie van QuickView worden gebruikt zodat u hotspot gegevens kunt ingaan om het interactieve beeld tot stand te brengen.

Wanneer u hotspots toevoegt aan een bannerafbeelding in AEM Assets, moet u een SKU (Stock Keeping Unit) toewijzen; een unieke id voor elk afzonderlijk product of elke service die u aanbiedt) en optionele aanvullende variabelen voor elke hotspot. Dergelijke hotspotvariabelen worden later gebruikt om hotspots aan te passen aan Quickview-inhoud.

Het is belangrijk om het aantal en het type variabelen correct te identificeren om met hotspot gegevens te associëren. Elke hotspot die aan een bannerafbeelding wordt toegevoegd, moet voldoende informatie bevatten om het product ondubbelzinnig te identificeren in het bestaande back-endsysteem.

Er zijn verschillende manieren om een set variabelen te identificeren die voor hotspot-gegevens moet worden gebruikt.

Soms is het voldoende om IT-specialisten te raadplegen die verantwoordelijk zijn voor de bestaande QuickView-implementatie, omdat ze waarschijnlijk zullen weten wat de minimale gegevensset is die nodig is om QuickView in het systeem te identificeren. In de meeste gevallen is het echter ook mogelijk om eenvoudig het bestaande gedrag van de front-end code te analyseren.

De meeste implementaties van de Snelle mening gebruiken het volgende paradigma:

• De gebruiker activeert een gebruikersinterface-element op de website. Als u bijvoorbeeld op een knop Quickview klikt.
• De website verzendt een Ajax-aanvraag naar de achterkant om de Quickview-gegevens of -inhoud te laden, indien nodig.
• De Quickview-gegevens worden omgezet in de inhoud ter voorbereiding op de weergave op de webpagina.
• Tot slot geeft de front-end code dergelijke inhoud visueel op het scherm terug.

Vervolgens kunt u verschillende delen van de bestaande website bezoeken waar de functie QuickView is geïmplementeerd, de QuickView activeren en de Ajax-URL vastleggen die via een webpagina is verzonden om de gegevens of inhoud van de QuickView-weergave te laden.

Normaal is er geen behoefte aan u om het even welke gespecialiseerde het zuiveren hulpmiddelen te gebruiken. Moderne webbrowsers beschikken over webinspecteurs die hun werk naar behoren doen. Hieronder volgen enkele voorbeelden van webbrowsers met webcontroles:

• Als u alle uitgaande HTTP-aanvragen in Google Chrome wilt bekijken, drukt u op F12 om het deelvenster Developer Tools te openen en klikt u vervolgens op het tabblad Network.

  Druk op Command+Option+I op een Mac om het deelvenster Developer Tools te openen en klik vervolgens op het tabblad Netwerk.

• In Firefox kunt u de Firebug-plug-in activeren door op F12 te drukken en het tabblad Net te gebruiken. U kunt ook het ingebouwde gereedschap Inspector en het bijbehorende tabblad Network gebruiken.

  Druk op Command+Option+I op een Mac om het deelvenster Developer Tools te openen en klik vervolgens op het tabblad Inspector.

Wanneer netwerkcontrole in browser wordt aangezet, teweeg de Snelle mening op de pagina.

Zoek nu de URL van Quickview Ajax in het netwerklogboek en kopieer de geregistreerde URL voor toekomstige analyse. In de meeste gevallen wanneer u de Quickview teweegbrengt zijn er talrijke verzoeken die naar de server worden verzonden. De URL van Quickview Ajax is doorgaans een van de eerste in de lijst. Het heeft of een complex gedeelte van het vraagkoord of weg, en zijn reactieMIME type of text/html, text/xml, of text/javascript is.

Tijdens dit proces is het belangrijk om verschillende delen van uw website te bezoeken, met verschillende productcategorieën en typen. De reden hiervoor is dat URL's in de Snelle weergave onderdelen kunnen bevatten die algemeen gelden voor een bepaalde categorie websites, maar deze alleen wijzigen als u een ander gedeelte van de website bezoekt.

In het eenvoudigste geval, is het enige veranderlijke deel in Quickview URL productSKU. In dit geval is de SKU-waarde het enige gegevensstuk dat u nodig hebt om hotspots toe te voegen aan de bannerafbeelding.

In complexe gevallen heeft de URL van de Snelle weergave echter naast de SKU ook verschillende elementen, zoals categorie-id, kleurcode, code voor grootte enzovoort. In dergelijke gevallen is elk element een afzonderlijke variabele in de definitie van hotspot-gegevens in de functie voor onoverzichtelijke interactieve afbeeldingen in AEM Assets.

Bekijk de volgende voorbeelden van URL's van QuickView en de resulterende hotspot-variabelen:

Voorbeeld

U kunt dezelfde aanpak toepassen als in de drie bovenstaande voorbeelden op de demo-webpagina:

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

De demo-webpagina heeft verschillende productminiaturen, elk met een Quickview-knop met het label See More. Terwijl het foutopsporingsprogramma van uw webbrowser nog is geactiveerd, klikt u op elke knop en noteert u de opgenomen URL's van de Snelle weergave. Nadat u alle vier de productenQuickviews beschikbaar op de pagina activeert, hebt u de volgende lijst verzoeken van de Snelle mening die aan het achterste eind worden gemaakt:

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

Wanneer u deze serveraanroepen bekijkt, ziet u dat productspecifieke informatie alleen aanwezig is in het aanvraagpad. U merkt ook op dat het vraagkoord helemaal niet wordt gebruikt en er zijn twee verschillende types van betrokken gegevensstukken:

• Het eerste type is Men of Vrouwen. Je kunt deze 'productcategorie' noemen.
• Het tweede type is productnaam, zoals CamoPullover. U kunt veronderstellen dit het product SKU is.

Op basis van deze informatie heeft de volledige URL van de Snelle weergave het volgende patroon:

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

Op basis van een dergelijke analyse gebruikt u categoryId en SKU voor hotspots.

U kunt nu een afbeeldingsbanner uploaden en er hotspots aan toevoegen met de functie voor onoverzichtelijke interactieve afbeeldingen in AEM Assets.

(Optioneel) Een voorinstelling voor een interactieve afbeeldingsviewer maken

U kunt ervoor kiezen om de standaardvoorinstelling Shoppable_Banner voor de Interactieve afbeeldingsviewer buiten de box te gebruiken die bij AEM Assets wordt geleverd. U kunt ook uw eigen aangepaste viewer-voorinstelling maken voor gebruik met interactieve afbeeldingen.

Wanneer u een aangepaste voorinstelling voor een interactieve afbeeldingsviewer maakt, kunt u de weergave van hotspots in de afbeeldingsbanner bepalen. Als onderdeel van het maken van de viewervoorinstelling kunt u een hotspot-afbeelding uit een galerie met vooraf gedefinieerde afbeeldingen gebruiken.

Nadat u de viewervoorinstelling hebt opgeslagen, wordt deze automatisch geactiveerd (ingeschakeld) op de Viewer Preset-lijstpagina in AEM Assets. Deze functionaliteit houdt in dat het zichtbaar is in de Interactieve component van Media en wanneer u activa bekijkt. Als u echter een interactieve banner met deze viewervoorinstelling wilt leveren, moet u ook de viewervoorinstelling publiceren (dit geldt voor aangepaste of buitenste viewervoorinstellingen).

Een voorinstelling voor een interactieve afbeeldingsviewer maken:

1. Tik Tools > Assets > Viewer Presets in de linkerrail.

2. Tik in de rechterbovenhoek van de pagina op Create.

3. Typ in het dialoogvenster New Viewer Preset een naam om de voorinstelling voor de interactieve bannerviewer te beschrijven.

   Dit is de titel die op de Viewer Preset lijstpagina na u sparen zal verschijnen.

4. Selecteer Interactive Image in het keuzemenu Rich Media Type.

5. Tik Maken.

6. Tik op de Edit Viewer Preset-pagina op het tabblad Appearance.

7. Voer een van de volgende handelingen uit:

   • Tik op het pictogram Asset Picker om uw eigen hotspot-afbeelding te uploaden die u in afbeeldingen wilt gebruiken. Navigeer op de pagina Select Content naar de gewenste hotspot-afbeelding, selecteer deze en tik op het pictogram Check Mark in de rechterbovenhoek.
   • Tik op het pictogram Hotspot Gallery om een vooraf gedefinieerde hotspot-afbeelding te selecteren. Tik op het palet van de hotspot op de hotspot die u wilt gebruiken.

8. Tik in de rechterbovenhoek van de pagina op Save.

   Zorg ervoor dat u de nieuwe viewervoorinstelling publiceert.

   Zie Voorinstellingen voor viewers publiceren die u hebt toegevoegd.

   U kunt nu een afbeeldingsbanner uploaden.

Een afbeeldingsbanner uploaden

Als u de afbeeldingen die u wilt gebruiken al hebt geüpload, gaat u naar de volgende stap Hotspots toevoegen aan een afbeeldingsbanner.

Een afbeeldingsbanner uploaden:

1. Upload afbeeldingsbanners die u interactief wilt maken.

   Zie Elementen uploaden.

   U kunt nu hotspots toevoegen aan de afbeeldingsbanner. zie de volgende taak hieronder.

Hotspots toevoegen aan een afbeeldingsbanner

U kunt hotspots toevoegen aan een afbeeldingsbanner met de editor op de pagina Hotspot Management.

Wanneer u hotspots toevoegt, kunt u deze definiëren als een pop-upweergave in QuickView, als een hyperlink of als een Experience-fragment.

Zie Fragmenten ervaren.

Undo en Redo opties worden in de rechterbovenhoek van de pagina ondersteund tijdens de huidige sessie voor maken en bewerken.

Wanneer u klaar bent met het maken van uw interactieve afbeelding, kunt u Preview gebruiken om een voorstelling te zien van hoe uw interactieve afbeelding eruit zal zien voor klanten.

Zie (Optioneel) Interactieve afbeeldingen voorvertonen.

Hotspots toevoegen aan een afbeeldingsbanner:

1. Navigeer in de weergave Elementen naar de afbeeldingsbanner die u interactief wilt maken.

2. Voer een van de volgende handelingen uit:

   • Tik op Select (vinkpictogram) op de afbeelding. Tik op Edit op de werkbalk.
   • Tik op More actions (drie punten) > Edit.
   • Tik op de afbeelding om deze op de pagina Detail View te openen. Tik op Edit op de werkbalk.

3. Tik in de linkerbovenhoek van de pagina op Add Hotspot (vingertikpictogram) om de pagina Hotspot Management te openen.

4. Tik in de linkerbovenhoek van de pagina op Hotspot.

5. a. Tik in de linkerbovenhoek van de pagina Hotspot Management op Hotspot.
   b. Tik in de afbeelding op een locatie waar u de hotspot wilt weergeven. Sleep indien nodig de hotspot om de locatie ervan aan te passen.
   c. Voeg desgewenst extra hotspots toe door de stappen a en b te herhalen.
   d. (Optioneel) Als u een hotspot wilt verwijderen, selecteert u deze in de afbeelding en tikt u op Delete (vuilnisbakpictogram) onder de kop Hotspots.

6. Typ in het tekstveld Name de naam van de hotspot. Deze naam wordt ook weergegeven in de vervolgkeuzelijst Selected Hotspot.

7. Voer een van de volgende handelingen uit:

   • Tik op Quickview.

     • Als u een AEM Sites- of eCommerce-klant bent, tikt u op het Product Picker-pictogram (vergrootglas) om de pagina Select Product te openen. Tik op het product dat u wilt gebruiken en tik vervolgens op Select in de rechterbovenhoek van de pagina om terug te keren naar de pagina Hotspot Management.

     • Als u geen een klant van AEM Sites of eCommerce bent

       • Zie Hotspot-variabelen identificeren; U moet deze variabelen definiëren.
       • Voer vervolgens handmatig de SKU-waarde in. Typ in het tekstveld SKU Value de SKU (Stock Keeping Unit) van het product. Dit is een unieke id voor elk afzonderlijk product of elke service die u aanbiedt. De ingegaan waarde van SKU bevolkt automatisch het veranderlijke gedeelte van het malplaatje van de Snelle mening zodat het systeem weet om geëtteerde hotspot met een bepaalde Snelle mening van SKU te associëren.
       • (Optioneel) Tik op Add Generic Variable als er andere variabelen in de Snelle weergave zijn die u nodig hebt om een product nader te identificeren. Geef in het tekstveld een extra variabele op. category=Mens is bijvoorbeeld een toegevoegde variabele.

   • Tik Hyperlink.

     • Als u een AEM Sites-klant bent, tikt u op het pictogram Site Selector (map) om naar een URL te navigeren. De op URL gebaseerde methode van koppelen is niet mogelijk als uw interactieve inhoud koppelingen naar relatieve URL's bevat, met name koppelingen naar AEM Sites-pagina's.
     • Als u een zelfstandige klant bent, geeft u in het tekstveld HREF het volledige URL-pad naar een gekoppelde webpagina op.

     Zorg ervoor dat u opgeeft of u de koppeling wilt openen in een nieuw browsertabblad (aanbevolen standaard) of op hetzelfde tabblad.

     Zie Werken met kiezers voor meer informatie.

   • Tik Ervaar fragment.

     • Als u een AEM Sites-klant bent, tikt u op het Search-pictogram (vergrootglas) om de pagina Experience Fragment te openen. Tik op het ervaringsfragment dat u wilt gebruiken en tik vervolgens op Select in de rechterbovenhoek van de pagina om terug te keren naar de pagina Hotspot-beheer.

       Zie Fragmenten ervaren.

       OPMERKING

       Houd er rekening mee dat de gereedschappen voor het delen van sociale media in interactieve afbeeldingen niet worden ondersteund wanneer u de viewer insluit in een Experience-fragment. U kunt dit omzeilen door voorinstellingen voor viewers te gebruiken of te maken die geen gereedschappen voor het delen van sociale media hebben. Met dergelijke voorinstellingen voor viewers kunt u de voorinstelling met succes insluiten in Experience Fragments.

     • Geef de breedte en hoogte van het ervaringsfragment op zoals dit wordt weergegeven op de banner.

8. Tik Save om uw werk op te slaan en terug te keren naar de pagina Browse.

9. Publiceer de interactieve afbeelding. Met publicatie kan de banner via de cloud worden geleverd en wordt ook insluitcode gegenereerd als u wilt integreren met een website van derden.

   Zie Elementen publiceren.

   Nadat u hotspots hebt toegevoegd en de interactieve afbeelding hebt gepubliceerd, kunt u deze nu toevoegen aan uw bestaande website.

   Zie Een interactieve afbeelding integreren met uw website.

   OPMERKING

   Als u interactieve afbeeldingen met hotspots bewerkt en de afbeelding bijsnijdt, worden de hotspots verwijderd.

(Optioneel) Interactieve afbeeldingen voorvertonen

U kunt Voorvertoning gebruiken om een voorstelling te zien van hoe uw interactieve afbeelding eruit zal zien voor klanten en om de hotspots van de afbeelding te testen om te controleren of deze zich gedragen zoals u had verwacht.

Als u tevreden bent met de interactieve afbeelding, kunt u deze publiceren.
Zie Video- of afbeeldingsviewer insluiten op een webpagina.
Zie URL's koppelen aan uw webtoepassing. De op URL gebaseerde methode van koppelen is niet mogelijk als uw interactieve inhoud koppelingen naar relatieve URL's bevat, met name koppelingen naar AEM Sites-pagina's.
Zie Dynamic Media-elementen toevoegen aan pagina's.

Een voorvertoning weergeven van interactieve afbeeldingen:

1. Navigeer in de weergave Middelen naar een bestaande, door u gemaakte interactieve afbeelding en tik erop om deze te openen in Voorvertoning.
2. Tik in de linkerbovenhoek van de voorvertoningspagina in de vervolgkeuzelijst Content op Viewers.
3. Tik in de lijst Viewers op Shoppable_Banner of de naam van de door u gemaakte voorinstelling voor de interactieve afbeeldingsviewer.
4. Tik op hotspots in de afbeelding om de bijbehorende acties te testen.

Interactieve afbeeldingselementen publiceren

Zie Elementen publiceren voor meer informatie over het publiceren van interactieve afbeeldingselementen.

Een interactieve afbeelding met uw website integreren

Nadat u een bannerafbeelding hebt geüpload, hotspots hebt toegevoegd aan de afbeelding en de interactieve afbeelding hebt gepubliceerd, kunt u deze nu toevoegen aan uw websitepagina.

Als u een AEM Sites-klant bent, kunt u de interactieve afbeelding toevoegen door de component Interactieve media naar de pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.

Als u een zelfstandige AEM Assets-klant bent, kunt u de interactieve afbeelding handmatig aan uw website toevoegen, zoals in deze sectie wordt beschreven.

1. Kopieer de insluitcode van de gepubliceerde interactieve afbeelding.

   Zie Video- of afbeeldingsviewer insluiten op een webpagina.

2. Voeg de gekopieerde insluitcode toe op de gewenste locatie op de webpagina.

   De gekopieerde insluitcode wordt ingesteld voor een responsieve omgeving, zodat deze automatisch in het toegewezen gebied past.

Voorbeeld

De demo-website als voorbeeld gebruiken:

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

Het beeld van de drie mannen is een statische IMG-tag:

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

Integratie is zo eenvoudig als het verwijderen van de tag IMG en het vervangen door de gekopieerde insluitcode uit AEM Assets. Het resultaat wordt weergegeven in de volgende URL, die de mogelijk onjuiste interactieve afbeelding op de pagina met drie hotspots per cirkel weergeeft:

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

Als u een uitsnijding voor een responsieve omgeving wilt toepassen op een verwisselbare interactieve afbeelding, kunt u het configuratiekenmerk Interactive Image ZoomView.iscommand op het pad opnemen, waarbij ZoomView de component is die moet worden aangeroepen en iscommand de uitsnijdopdracht is die u toepast.

Zie ZoomView.iscommand configuratiekenmerk.

Zie opdracht Uitsnijden afbeelding weergeven.

U bent nu klaar om de interactieve afbeelding te integreren met een bestaande QuickView op uw website.

Een interactieve afbeelding integreren met een bestaande QuickView

De laatste stap in dit proces is het integreren van de interactieve afbeelding met een bestaande Quickview-implementatie op uw website. Er is geen oplossing voor de integratie die in alle gevallen werkt. Elke implementatie van Quickview is uniek en een specifieke benadering is nodig die de hulp van een front-end IT persoon het meest waarschijnlijk impliceert.

De bestaande implementatie van QuickView vertegenwoordigt normaal gesproken een reeks onderling samenhangende acties die op de webpagina in de volgende volgorde plaatsvinden:

1. Een gebruiker activeert een element in de gebruikersinterface van uw website.
2. De front-end code verkrijgt een Quickview URL die op het gebruikersinterface element wordt gebaseerd dat in stap 1 werd teweeggebracht.
3. De front-end code verzendt een Ajax- verzoek gebruikend URL die in stap 2 wordt verkregen.
4. De achterste logica keert de overeenkomstige gegevens of inhoud van de Snelle mening terug naar de front-end code.
5. De front-end code laadt de gegevens of de inhoud van de Snelle mening.
6. Naar keuze, zet de front-end code de geladen gegevens van de Snelle mening in een vertegenwoordiging van HTML om.
7. De front-end code geeft een modaal dialoogvenster of deelvenster weer en geeft de HTML-inhoud op het scherm weer voor de eindgebruiker.

Deze vraag kan onafhankelijke openbare API vraag niet vertegenwoordigen die door de Webpaginalogica van een willekeurige stap kan worden geroepen. In plaats daarvan, is het een geketende vraag waar elke volgende stap in de laatste fase (callback) van de vorige stap verborgen is.

Wanneer een gebruiker op een hotspot in de aanpasbare afbeelding klikt, wordt deze gebruikersinteractie door de viewer afgehandeld, terwijl de aanpasbare interactieve afbeelding stap 1 en gedeeltelijk stap 2 vervangt. De viewer retourneert een gebeurtenis naar de webpagina die alle hotspotgegevens bevat die eerder aan AEM Assets zijn toegevoegd.

In een dergelijke gebeurtenishandler doet de front-end code het volgende:

• Luistert naar een gebeurtenis die wordt uitgegeven door de mogelijk onjuiste interactieve afbeelding.
• Hiermee maakt u een Quickview-URL op basis van de hotspot-gegevens.
• Triggert het proces om de Snelle mening van het achtereind te laden en het terug te geven op het scherm voor vertoning.

De insluitcode die door AEM Assets wordt geretourneerd, bevat al een gebruiksklare gebeurtenishandler die als commentaar wordt gemarkeerd, zoals in het volgende gemarkeerde codefragment wordt getoond:

        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();

Het is dus alleen nodig de commentaarmarkering van de code ongedaan te maken en de dummy-handlertekst te vervangen door de code die specifiek is voor de specifieke webpagina.

Het proces voor het samenstellen van de URL van de Snelle weergave is in feite tegengesteld aan het proces voor het identificeren van hotspot-variabelen die eerder zijn behandeld.

Zie Hotspot-variabelen identificeren.

Aan de hand van onze vorige URL-voorbeelden van Quickview kunt u in de volgende voorbeelden zien hoe de URL van de QuickView in elk geval wordt samengesteld:

De laatste stap om de Quickview URL teweeg te brengen en het paneel van de Snelle mening te activeren vereist hoogstwaarschijnlijk de hulp van een front-end persoon van IT van uw afdeling van IT. Zij hebben de kennis om het best te weten hoe te om de implementatie van de Snelle mening van de juiste stap nauwkeurig teweeg te brengen, die een klaar-aan-gebruiksKickview URL hebben.

U kunt zien hoe deze stappen worden toegepast op de demo-website om een onoverzichtelijke interactieve afbeelding volledig te integreren met de Quickview-code. Eerder werd de structuur van de URL van de Snelle weergave als volgt geïdentificeerd:

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

Als u deze URL wilt reconstrueren binnen de handler quickViewActivate, kunt u de velden categoryId en SKU gebruiken die beschikbaar zijn in het object inData dat door de code van de viewer aan de handler wordt doorgegeven:

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

De demowebsite activeert het dialoogvenster Snelle weergave met een eenvoudige functieaanroep loadQuickView(). Deze functie heeft slechts één argument, namelijk de gegevens-URL van de Snelle weergave. Als dusdanig, moet de laatste stap nodig om het shoppable interactieve beeld te integreren de volgende lijn van code aan de quickViewActivate manager toevoegen:

loadQuickView(quickViewUrl);

Hier volgt de volledige broncode:

 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();

De laatste demo-website met de volledig geïntegreerde interactieve afbeelding ziet er als volgt uit:

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

Quickviews gebruiken om aangepaste pop-ups te maken

Zie Aangepaste pop-ups maken met Snelle weergaven.

Business.Adobe.com-bronnen

Ecommerce Integrations Personalized Experiences Content Intelligence Theme Editor Dynamic Forms Digital Rights Management