DokumentationAEM 6.4Användarhandbok om resurser

Karusellbanner carousel-banners

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • User
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.

Carousel-banners gör det möjligt för marknadsförare att öka konverteringsgraden genom att enkelt skapa interaktivt roterande marknadsföringsmaterial och leverera det till alla skärmar.

Det kan vara tidskrävande att skapa och ändra innehåll i reklambanners, vilket begränsar möjligheten att snabbt publicera nytt innehåll eller göra det mer riktat. Med Carousel Banners kan du snabbt skapa eller ändra roterande banners, lägga till interaktivitet som till exempel klickbara områden som länkar till produktdetaljer eller relaterade resurser, och leverera dem till alla skärmar så att du kan få ut nytt marknadsföringsmaterial snabbare.

Carousel Banners utses av en banderoll med ordet CAROUSELSET:

chlimage_1-438

På din webbplats kan en karusellbanderoll se ut så här:

chlimage_1-439

Här kan du navigera bland bilderna (genom att klicka på siffrorna). Dessutom roteras bildrutorna automatiskt baserat på ett tidsintervall som du kan anpassa. Bilder som du lägger till i karusellbanderollen har stöd för både aktiveringspunkter och bildscheman, där användarna kan trycka eller gå till en hyperlänk eller öppna ett Quickview-fönster.

I det här exemplet har en användare tryckt på eller klickat på ett bildschema och öppnat fönstret Quickview för handskar:

chlimage_1-440

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

NOTE
Icke-administrativa användare måste läggas till i dam-users för att kunna skapa eller redigera karusellbanderoller. Om du har problem med att skapa eller redigera kontaktar du systemadministratören som kan lägga till dig i dam-users grupp.

Så här kommer du igång snabbt:

  1. Identifiera hotspot- och bildschemavariabler (endast för kunder som använder AEM Assets + Dynamic Media)

    Börja med att identifiera dynamiska variabler som används i den befintliga Quickview-implementeringen så att du kan ange klickbara områden och data från bildscheman korrekt när du skapar en karusellbanderoll i AEM Assets.

    note note
    NOTE
    Om du är kund hos AEM Sites eller e-handel kan du använda den inbyggda funktionen för att navigera till produktsidor och söka efter befintliga skal i produktkatalogen. Du behöver inte ange variabler för hotspot eller bildschema manuellt. Se information om konfigurera e-handel.
    Om du använder AEM Assets och Dynamic Media anger du manuellt data för hotspot-områden och bildscheman och integrerar sedan den publicerade URL:en eller inbäddningskoden med ditt tredjeparts innehållshanteringssystem.

  2. Valfritt: Skapa en visningsförinställning för en karuselluppsättning om det behövs.

    Om du är administratör kan du anpassa karusellens beteende och utseende genom att skapa en egen förinställning för Carousel-visningsprogrammet. Den största fördelen är att du kan återanvända den här anpassade visningsförinställningen för flera bildspel. Man kan också anpassa karusellens beteende och utseende direkt när man skapar karusellen. Detta är det bästa sättet när du vill ha en mycket specifik design för en viss karusell.

  3. Överföra en bildbanderoll.

    Ladda upp bildbanners som du vill göra interaktiva.

  4. Skapa en Carousel-uppsättning.

    I Carousels Sets navigerar användarna genom banderollbilder och trycker på hotspot-områden eller bildscheman för att få tillgång till relevant innehåll.

    Om du vill skapa en karuselluppsättning i Assets trycker du på Create och väljer sedan Carousel Sets. Lägg till resurser i bilderna och tryck på Save. Du kan också redigera karusellens utseende och beteende direkt i redigeraren.

  5. Lägg till aktiveringspunkter eller bildscheman i en bildbanderoll.

    Lägg till en eller flera hotspot-områden eller bildscheman i en bildbanderoll och koppla dem till en åtgärd som en länk, en snabbvy eller ett Experience Fragment. När du har lagt till aktiveringspunkter eller bildscheman avslutar du den här uppgiften genom att publicera karuselluppsättningen. Med Publicering skapas den inbäddningskod som du kan använda för att kopiera och tillämpa på webbplatsens landningssida.

    Se (Valfritt) Förhandsgranska Carousel Banners - Valfritt. Om du vill kan du visa en representation av karuselluppsättningen och testa dess interaktivitet.

  6. Publicera Carousel Banners.

    Du publicerar en Carousel-uppsättning på samma sätt som andra resurser. I Assets navigerar du till Carousel Set och markerar den och trycker eller trycker på Publish. När du publicerar en Carousel Set aktiveras URL:en och strängen Embed.

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

Om du behöver redigera Carousel-uppsättningar, se redigera Carousel-uppsättningar. Dessutom kan du visa och redigera Carousel Set-egenskaper.

Identifiera variabler för aktiveringspunkt och bildschema identifying-hotspot-and-image-map-variables

Börja med att identifiera dynamiska variabler som används i den befintliga Quickview-implementeringen så att du kan ange klickbara områden eller data från bildscheman korrekt när du skapar karuselluppsättningar i AEM Assets.

När du lägger till aktiveringspunkter eller bildscheman i en banderollbild i AEM Assets måste du tilldela varje hotspot eller bildschema en SKU och valfria ytterligare variabler. Sådana variabler används senare för att matcha hotspot-områden eller bildscheman med QuickView-innehåll.

NOTE
Om du är kund hos AEM Sites och/eller AEM Ecommerce hoppar du över det här steget. Du behöver inte identifiera hotspot- eller bildschemavariabler manuellt. kan du använda integreringen med e-handel för produktintegrering. Se information om konfigurera e-handel. Dessutom kan du använda den interaktiva komponenten och lägga till den på webbsidan.
Om du är kund hos AEM Assets eller Media publicerar du URL:en eller Bädda in kod och integrerar sedan med ditt tredjepartssystem för innehållshantering och identifierar hotspot-områden och bildscheman manuellt.

Det är viktigt att kunna identifiera antalet och typen av variabler som ska kopplas till hotspot- eller bildschemadata. Varje hotspot eller bildschema 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. Samtidigt bör varje hotspot eller bildschema inte innehålla mer data än vad som är nödvändigt. Orsaken är att det skulle göra inmatningsprocessen alltför komplex och pågående hotspot- eller bildschemahantering mer felbenägen.

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

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 Quick View -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 (Windows) eller Command-Option-I (Mac) för att öppna panelen Utvecklarverktyg och trycker sedan på Network -fliken.
  • I Firefox kan du antingen aktivera plugin-programmet för Firebug genom att trycka på F12 (Windows) eller Command-Option-I (Mac) och använda fliken Net. Du kan också använda det inbyggda inspektörsverktyget och nätverksfliken.

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 eller bildscheman 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- eller bildschemats datadefinition i karusellbanderollfunktionen.

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

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å productId= frågesträngsparameter, och det är tydligt ett SKU-värde. Därför behöver våra aktiveringspunkter eller bildscheman 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 hotspot-områden/bildscheman: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 -parametern och kategori-ID:t lagras i category=parameter.

Definitionerna av hotspot/bildschema är par. Det vill säga ett SKU-värde och en ytterligare variabel som kallas categoryId. De resulterande paren är följande:

  • SKU är 305466 och categoryId är 1100004.

  • SKU är 310181 och categoryId är 1100004.

  • SKU är 308706 och categoryId är 1740148.

Överför bildbanderoller uploading-image-banners

Om du redan har överfört de bilder du vill använda går du vidare till nästa steg, Skapa Carousel-uppsättningar. Observera att bilderna som används i karusellen måste laddas upp när Dynamic Media har aktiverats.

Information om hur du överför bildbanderoller finns i Överför resurser.

NOTE
Icke-administrativa användare måste läggas till i dam-users för att kunna skapa eller redigera karusellbanners. Om du har problem med att skapa eller redigera kontaktar du systemadministratören som kan lägga till dig i dam-users grupp.

Skapa en Carousel-uppsättning:

  1. Navigera till den mapp där du vill skapa Carousel-uppsättningen i Resurser och tryck på Create > Carousel Set.

  2. På Carousel Banner Editor sida, tryck Tap to open Asset Selector för att välja bilden för den första bilden.

    På Carousel Banner Editor gör du något av följande:

    • Knacka i det övre vänstra hörnet av sidan Add Slide ikon.
    • I mitten av sidan trycker du på Tap to open Asset Selector.

    Tryck här för att välja resurser som du vill inkludera i karuselluppsättningen. De markerade resurserna visas med en bock. När du är klar trycker du på Select.

    Med resursväljaren kan du söka efter resurser genom att skriva ett nyckelord och trycka på Return. Du kan också använda filter för att förfina sökresultatet. Du kan filtrera efter sökväg, samling, filtyp och tagg. Markera filtret och tryck sedan på ikonen Filter i verktygsfältet. Ändra vyn genom att trycka på View ikon och markera Column View, Card View, eller List View.

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

  3. Fortsätt med att lägga till bilder tills du har lagt till alla bilder som du vill rotera genom i Carousel-uppsättningen.

  4. (Valfritt) Gör något av följande:

    • Om det behövs drar du bildrutorna för att ändra ordning på bilderna i uppsättningslistan.
    • Om du vill ta bort en bild markerar du bilden och trycker sedan Delete Slide i verktygsfältet.
    • Om du vill använda en förinställning trycker du på den förinställda listrutan längst upp till höger på sidan och väljer sedan en förinställning som ska användas på uppsättningen samtidigt.

    Om du vill ta bort en bildruta trycker du på bildrutan och trycker på Delete Slide i verktygsfältet. Om du vill flytta en bildruta trycker du på ikonen för att ändra ordning och håller ned och flyttar till önskad plats.

  5. När du har lagt till bilderna i bildrutor kan du lägga till en aktiveringspunkt, ett bildschema eller båda delarna. Se lägga till hotspot-områden eller bildscheman.

  6. Du kan ändra den visuella designen och beteendet för karuselluppsättningar genom att trycka eller klicka på flikarna Beteende och Utseende och göra justeringar av hur karusellbanderollen ser ut eller hur specifika komponenter fungerar. Se hantera visningsförinställningar om du vill ha mer information om hur du använder visningsprogrammet.

    note note
    NOTE
    För karusellbanderoller kan följande saker behöva justeras:
    • Längd som en bild visas. Som standard visas varje bild i 9 sekunder.
    • Animering. Som standard tonas varje bildruteövergång ut. Du kan ändra det till en bildövergång.
    • Knapparnas format. Användarna kan rotera genom banners genom att trycka på varje punkt eller nummer. Du kan ändra var de angivna indikatorknapparna visas (och om de är numeriska eller prickade) och hur stora de är.
    • Ändra markeringsformatet för ett bildschema eller ikonen som används för aktiveringspunkter.
    • Innan du redigerar en visningsförinställning väljer du det format du vill basera förinställningen på. Om du inte gör det förlorar du alla ändringar när du börjar redigera visningsförinställningen om du väljer att ändra till en annan förinställning.

    Du kan också förhandsvisa hur karusellbanderollen kommer att se ut. Se (Valfritt) Förhandsgranska Carousel Banners.

  7. Tryck Save när du är klar.

Lägga till aktiveringspunkter eller bildscheman i en bildbanderoll adding-hotspots-or-image-maps-to-an-image-banner

Du kan lägga till aktiveringspunkter eller bildscheman i en banderoll med hjälp av Carousel Set-redigeraren.

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

Se Upplevelsefragment.

NOTE
Observera att verktygen för delning av sociala medier i Carousel Banner inte stöds när du bäddar in visningsprogrammet i en 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.

Kom ihåg att spara ditt arbete när du lägger till hotspot-områden eller bildscheman i en bild. 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 att skapa en karusellbanderoll kan du använda Preview för att se hur karusellbanderollen kommer att se ut för kunderna.

Se (Valfritt) Förhandsgranska Carousel Banners.

NOTE
När du lägger till aktiveringspunkter i en bild i en Interaktiv bild eller en Carousel-banderoll lagras hotspot-informationen på samma plats - 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.
NOTE
Om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas dina aktiveringspunkter bort.

Lägga till aktiveringspunkter i en bildbanderoll:

  1. Navigera från Assets till karuselluppsättningen som du vill göra interaktiv.

  2. Välj Carousel-uppsättning och tryck Edit.

  3. Markera den bildruta som du vill göra interaktiv i Carousel Viewer Editor.

  4. I det övre vänstra hörnet av sidan trycker du på Hotspot eller Image Map.

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

    • För aktiveringspunkter: Tryck på den plats i bilden där du vill att hotspot-området ska visas.
    • För bildscheman: Tryck på bilden och dra sedan från det övre vänstra hörnet till det nedre högra hörnet för att skapa bildschemaområdet. Du kan justera storleken på bildschemat genom att dra i hörnen.

    Om det behövs drar du hotspot- eller bildschemat till en ny plats. Lägg till ytterligare hotspot-områden eller bildscheman efter behov.

    Tryck på fliken Actions om du vill ta bort ett hotspot-område eller bildschema. Under rubriken Maps & Hotspots i listrutan Selected Type väljer du namnet på det hotspot-område eller bildschema som du vill ta bort. Tryck på ikonen Trash bredvid menyn och tryck sedan på Delete.

  6. Skriv namnet på aktiveringspunkten eller bildschemat i textfältet Namn. Det här namnet visas även i Maps & Hotspot nedrullningsbar lista. Genom att ange ett namn blir det enkelt att identifiera hotspot-området eller bildschemat om du bestämmer dig för att göra ändringar i det i framtiden.

  7. Gör något av följande i dialogrutan Actions tab:

    • Tryck på Quickview.

      • Om du är kund hos AEM Sites och e-handel 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å bockmarkeringen i det övre högra hörnet av sidan för att gå tillbaka till Carousel Banner Editor.

      • Om du inte är AEM Sites- eller e-handelskund

        • Se Identifiera hotspot-variabler som du kanske vill 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.
        • Se Arbeta med väljare för mer information.

    • Tryck på Hyperlink.

      • Om du är AEM Sites-kund trycker du på Site Selector -ikon (mapp) för att navigera till en URL.

        note note
        NOTE
        Den URL-baserade länkningsmetoden är inte 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 på Experience Fragment.

      • Om du är AEM Sites-kund trycker du på Search ikon (förstoringsglas) för att öppna sidan Experience Fragment. 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.

        Anteckning: Observera att verktygen för delning av sociala medier i Carousel Banner inte stöds när du bäddar in visningsprogrammet i en 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.

    experience_fragment-carouselbanner

    Du kan också förhandsvisa hur karusellbanderollen kommer att se ut. Se (Valfritt) Förhandsgranska Carousel Banners.

  8. Tryck på Save.

  9. Publicera karuselluppsättningen. Publicering skapar den inbäddningskod eller URL som du kan använda på din webbsida. Om du är kund hos AEM Sites kan du lägga till karuselluppsättningen direkt på din webbsida.

    Se Publicera resurser.

    Se Lägga till en karuselluppsättning på webbplatsens landningssida

NOTE
Icke-administrativa användare måste läggas till i dam-users för att kunna skapa eller redigera karusellbanderoller. Om du har problem med att skapa eller redigera kontaktar du systemadministratören som kan lägga till dig i dam-users grupp.

Du kan utföra en mängd redigeringsuppgifter på Carousel Sets, till exempel:

  • Lägg till bilder i en Carousel-uppsättning. Se även Arbeta med väljare.
  • Sortera om bilderna i Carousel-uppsättningen.
  • Ta bort resurser i Carousel-uppsättningen.
  • Använd en visningsförinställning.
  • Ta bort Carousel-uppsättningen.
  • Lägg till eller redigera hotspot-områden och bildscheman. Se även Arbeta med väljare.

Tänk på att om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas aktiveringspunkter bort.

Redigera en Carousel-uppsättning:

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

    • Håll pekaren över en Carousel Set-resurs och tryck sedan Edit (pennikon).
    • Hovra över en Carousel Set-resurs, tryck Select (bockmarkeringsikon) och sedan trycka Edit i verktygsfältet.
    • Tryck på en Carousel Set-resurs och tryck sedan på i det övre vänstra hörnet av sidan Edit (pennikon).

  2. Om du vill redigera Carousel-uppsättningen gör du något av följande:

    • Om du vill lägga till en bildruta trycker du på Add Slide navigera sedan till den resurs som du vill lägga till i bildrutan och tryck på bockmarkeringen.
    • Om du vill ändra ordning på bildrutorna drar du en bildruta till en ny plats (markera sorteringsikonen för att flytta objekt).
    • Om du vill lägga till en hotspot eller ett bildschema trycker du på ikonerna för hotspot eller bildschema och ser lägga till hotspot-områden och bildscheman.
    • Om du vill redigera karuselluppsättningens utseende eller beteende trycker du på Appearance tabb eller Behavior och sedan ange önskade alternativ.
    • Om du vill redigera aktiveringspunkter eller bildscheman markerar du en aktiveringspunkt eller ett bildschema på lämplig bildruta och gör de ändringar som behövs under Actions -fliken.
    • Om du vill ta bort en bildruta markerar du den och trycker sedan på Delete Slide i verktygsfältet.
    • Om du vill använda en förinställning trycker du på den förinställda listrutan längst upp till höger på sidan och väljer sedan en visningsförinställning.
    • Om du vill ta bort en hel Carousel-uppsättning går du till Carousel-uppsättningen, markerar den och trycker sedan Delete.

Du kan använda Preview för att se hur karusellbanderollen kommer att se ut för kunderna och för att testa hotspot-områden och bildscheman för att säkerställa att de beter sig som förväntat.

När du är nöjd med karusellbanderollen kan du publicera den.

Du kan förhandsgranska karusellbanners från Carousel Editor (föredragen metod) eller från Viewers lista.

Förhandsgranska Carousel banners:

  1. I Assets navigera till en befintlig karusellbanderoll som du har skapat och tryck för att öppna den.

  2. Tryck på Edit.

  3. I listan med visningsförinställningar i det högra hörnet av verktygsfältet väljer du ett visningsprogram för att förhandsgranska karusellbanderollen.

    experience_fragment-carouselbanner-viewerdropdown

  4. Tryck på Preview.

  5. Tryck på hotspot-områden eller bildscheman på bilden för att testa deras associerade åtgärder.

Förhandsgranska karusellbanners från visningslistan:

  1. I Assets navigera till en befintlig karusellbanderoll som du har skapat och tryck för att öppna den.
  2. Nära det övre vänstra hörnet av Preview tryck på Content ikon.
  3. I Viewers i panelen till vänster på sidan trycker du på namnet på den visningsförinställning för Carousel banner som du vill använda.
  4. Tryck på hotspot-områden eller bildscheman på bilden för att testa deras associerade åtgärder.

Du måste publicera karusellen för att kunna använda den. När du publicerar en Carousel Set aktiveras URL:en och Bädda in kod. Carousel publiceras också i Dynamic Media Cloud, som är integrerat med ett CDN för skalbar och högpresterande leverans.

Om du använder en befintlig interaktiv bild med aktiveringspunkter för din Carousel-banderoll måste du publicera den interaktiva bilden separat när du har publicerat karusellbanderollen.

Om du ändrar en befintlig publicerad interaktiv bild som du använder i en karusellbanderoll måste du publicera den interaktiva bilden innan ändringarna återspeglas i karusellbanderollen.

Se Publicera Dynamic Media Assets om du vill ha information om hur du publicerar Carousel-banners.

Lägga till en Carousel-banderoll på din webbplatssida adding-a-carousel-banner-to-your-website-page

När du har överfört banderollbilder för att skapa en karusell, lagt till hotspot-områden och/eller bildscheman i banderollen och publicerat karuselluppsättningen är du nu redo att lägga till den på din befintliga webbsida.

Om du är kund hos AEM Sites kan du lägga till karusellbanderollen direkt på din sida 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 kan du dock manuellt lägga till karusellbanderollen på webbplatsens landningssida enligt beskrivningen i detta avsnitt.

  1. Kopiera den publicerade Carousel-uppsättningens inbäddningskod.

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

  2. Lägg till den inbäddningskod som du kopierade från AEM Assets på din webbsida.

    Den kopierade inbäddningskoden är responsiv så den bör automatiskt passa inbäddningsområdet på sidan.

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

Det sista steget i den här processen är att integrera karusellbanderollen med en befintlig Quickview-implementering på din webbplats. 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 Carousel-banderollen ersätter steg 1 och delvis steg 2, när en användare klickar på en hotspot eller bildschema inuti karusellbanderollen, hanteras en sådan användarinteraktion av användaren. Visningsprogrammet returnerar en händelse till webbsidan som innehåller alla hotspot- eller bildschemadata som tidigare lagts till.

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

  • Lyssnar på en händelse som skickas av karusellbanderollen.
  • Skapar en URL för snabbvyn baserat på hotspot- eller bildschemats 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.

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 QuickView-URL:en är i stort sett annorlunda än den process som användes för att identifiera hotspot- och bildschemavariabler som beskrivs tidigare.

Se Identifiera hotspot- och bildschemavariabler.

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.

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

Se Använda snabbvyer för att skapa anpassade popup-fönster.

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