DocumentatieAEM 6.4Handleiding voor assets

Carousel-banners carousel-banners

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

Gemaakt voor:

  • User
CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Met carrouselbanners kunnen marketers de conversie stimuleren door eenvoudig interactieve, draaiende promotionele inhoud te maken en deze op elk scherm te leveren.

Het maken en wijzigen van inhoud in promotiebanners kan tijdrovend zijn, waardoor u minder snel nieuwe inhoud kunt publiceren of deze doelgerichter kunt maken. Met carrouselbanners kunt u snel roterende banners maken of wijzigen, interactiviteit toevoegen, zoals hotspots die aan productdetails of verwante bronnen zijn gekoppeld, en deze op elk scherm aanbieden - zodat u nieuwe promotionele inhoud sneller op de markt kunt brengen.

Carousel Banners worden aangeduid door een banner met het woord CAROUSELSET:

chlimage_1-438

Op uw website kan een carrouselbanner er als volgt uitzien:

chlimage_1-439

Hier kunt u door de afbeeldingen navigeren (door op de getallen te klikken). Bovendien worden de dia's automatisch geroteerd op basis van een tijdsinterval dat u kunt aanpassen. Afbeeldingen die u in de carrouselbanner toevoegt, ondersteunen zowel hotspots als afbeeldingen met hyperlinks, waar gebruikers op een hyperlink kunnen tikken of naar een hyperlink kunnen gaan of een Quickview-venster kunnen openen.

In dit voorbeeld heeft een gebruiker op een afbeelding met hyperlinks getikt of erop geklikt en heeft hij het venster QuickView voor handschoenen geopend:

chlimage_1-440

Bekijk een 10 minuten en 33 seconden doorlopen hoe carrouselbanners worden gemaakt. U leert ook hoe u carrouselbanners kunt voorvertonen, bewerken en afleveren.

NOTE
Niet-administratieve gebruikers moeten worden toegevoegd aan de stuwdammen groeperen om carrouselbanners te kunnen maken of bewerken. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u aan de stuwdammen groep.

Zo kunt u snel aan de slag:

  1. Variabelen van hotspots en afbeeldingen met hyperlinks identificeren (alleen voor klanten die AEM Assets + Dynamic Media gebruiken)

    Begin door dynamische variabelen te identificeren die door de bestaande implementatie van QuickView worden gebruikt zodat u hotspots en beeldkaartgegevens behoorlijk tijdens het proces van de de bannerverwezenlijking van de carrousel in AEM Assets kunt ingaan.

    note note
    NOTE
    Als u een AEM Sites- of e-commerceklanten bent, kunt u de ingebouwde functie gebruiken om naar productpagina's te navigeren en de bestaande skus in de productcatalogus op te zoeken. U hoeft niet handmatig hotspot- of afbeeldingskaartvariabelen in te voeren. Zie informatie over eCommerce instellen.
    Als u een AEM Assets- en Dynamic Media-klant bent, voert u handmatig gegevens in voor hotspots en afbeeldingen met hyperlinks. Vervolgens integreert u de gepubliceerde URL of de Embed-code met uw externe contentbeheersysteem.

  2. Optioneel: Maak zo nodig een viewervoorinstelling voor een carrouselset.

    Als beheerder kunt u het gedrag en de weergave van de carrousel aanpassen door uw eigen voorinstelling voor de Carousel-viewer te maken. Het belangrijkste voordeel is dat u deze aangepaste viewer-voorinstelling kunt hergebruiken voor meerdere carrousels. Gebruikers kunnen echter ook het gedrag en de weergave van de carrousel rechtstreeks aanpassen tijdens het ontwerpen van de carrousel. Dit is de voorkeursaanpak wanneer u een specifiek ontwerp voor een bepaalde carrousel wilt.

  3. Een afbeeldingsbanner uploaden.

    Upload afbeeldingsbanners die u interactief wilt maken.

  4. Een carrouselset maken.

    In Carousels Sets navigeert de gebruiker door bannerafbeeldingen en tikt hij op hotspots of afbeeldingen met hyperlinks om toegang te krijgen tot relevante inhoud.

    Tik op Create en selecteer vervolgens Carousel Sets om een carrouselset te maken in Assets. Voeg assets toe aan dia's en tik op Save. U kunt de weergave en het gedrag van de carrousel ook rechtstreeks in de editor bewerken.

  5. Voeg hotspots of afbeeldingen met hyperlinks toe aan een afbeeldingsbanner.

    Voeg een of meer hotspots of afbeeldingen met hyperlinks toe aan een afbeeldingsbanner en koppel deze aan een actie zoals een koppeling, een Snelle weergave of een Experience-fragment. Nadat u hotspots of afbeeldingen met hyperlinks hebt toegevoegd, kunt u deze taak voltooien door de carrouselset te publiceren. Met Publiceren maakt u de insluitcode die u kunt gebruiken om de bestemmingspagina van uw website te kopiëren en toe te passen.

    Zie (Optioneel) Voorvertoning van carrouselbanners bekijken - Optioneel. U kunt desgewenst een voorstelling van de carrouselset weergeven en de interactiviteit ervan testen.

  6. Carrouselbanners publiceren.

    U publiceert een Carousel-set op dezelfde manier als elk ander element. Navigeer in Elementen naar de Carousel-set en selecteer deze en tik of tik op Publish. Als u een Carousel-set publiceert, worden de URL en de insluittekenreeks geactiveerd.

  7. Voer een van de volgende handelingen uit:

Als u Carousel-sets moet bewerken, raadpleegt u Carrouselsets bewerken. Bovendien kunt u Carousel-set, eigenschappen.

Begin door dynamische variabelen te identificeren die door de bestaande implementatie van QuickView worden gebruikt zodat u hotspots of beeldkaartgegevens behoorlijk tijdens het proces van de carrouselreeks creatie in AEM Assets kunt ingaan.

Wanneer u hotspots of afbeeldingen met hyperlinks toevoegt aan een bannerafbeelding in AEM Assets, moet u een SKU en optionele aanvullende variabelen toewijzen aan elke hotspot of afbeelding met hyperlinks. Dergelijke variabelen worden later gebruikt om hotspots of afbeeldingen met hyperlinks te laten overeenkomen met Quickview-inhoud.

NOTE
Als u een AEM Sites en/of AEM ecommerce klant bent, sla deze stap over. U hoeft de variabelen van hotspot of afbeeldingen met hyperlinks niet handmatig te identificeren; u kunt de integratie met Ecommerce voor productintegratie gebruiken. Zie informatie over eCommerce instellen. Daarnaast kunt u de component Interactive gebruiken en toevoegen aan uw webpagina.
Als u een AEM Assets- of Media-klant bent, publiceert u de URL- of insluitcode en integreert u deze vervolgens met het contentbeheersysteem van derden en identificeert u handmatig hotspots en afbeeldingen met hyperlinks.

Het is belangrijk om het aantal en het type variabelen correct te identificeren om met hotspot of beeldkaartgegevens te associëren. Op elke hotspot of afbeeldingskaart die aan een bannerafbeelding wordt toegevoegd, moet voldoende informatie staan om het product ondubbelzinnig te identificeren in het bestaande back-endsysteem. Tegelijkertijd mag elke hotspot of afbeelding met hyperlinks niet meer gegevens bevatten dan nodig is. De reden hiervoor is dat het gegevensinvoerproces hierdoor te complex en voortdurend hotspot- of imagekaartbeheer wordt.

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

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 Quick View knop.
  • 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 (Windows) of Command-Option-I (Mac) om het deelvenster Gereedschappen voor ontwikkelaars te openen en tikt u vervolgens op de knop Network tab.
  • In Firefox kunt u de Firebug-plug-in activeren door op F12 (Windows) of Command-Option-I (Mac) te drukken en het tabblad Net te gebruiken. U kunt ook het ingebouwde paneel en het bijbehorende tabblad Netwerk gebruiken.

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 reactie MIME type is of text/html, text/xml, of text/javascript.

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 of afbeeldingen met hyperlinks 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- of afbeeldingskaart in de bannerfunctie carrousel.

Bekijk de volgende voorbeelden van URL's in QuickView en de resulterende hotspot- of afbeeldingskaartvariabelen:

Enige SKU, die in het vraagkoord wordt gevonden.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • 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

Het enige variabele gedeelte in de URL is de waarde van de productId= de parameter van het vraagkoord, en het is duidelijk een waarde SKU. Daarom hebben onze hotspots of afbeeldingen met hyperlinks alleen SKU-velden nodig die zijn gevuld met waarden zoals 866558, 1196184, 1081492, 1898294.

Eén SKU, gevonden in het URL-pad.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

Het variabele gedeelte bevindt zich in het laatste gedeelte van het pad en wordt de SKU-waarde van de hotspots/afbeeldingen met hyperlinks:6422350843, 1607745002, 0086724882.

SKU en categorie-id in de queryreeks.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

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

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

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

In dit geval bevat de URL twee verschillende onderdelen. SKU wordt opgeslagen in prodId parameter en de categorie-id wordt opgeslagen in de category=parameter.

De definities van hotspot/afbeelding met hyperlinks zijn dus paren. Namelijk een waarde SKU en een extra geroepen variabele categoryId. De resulterende paren zijn:

  • SKU is 305466 en categoryId is 1100004.

  • SKU is 310181 en categoryId is 1100004.

  • SKU is 308706 en categoryId is 1740148.

Beeldbanners uploaden uploading-image-banners

Als u de afbeeldingen die u wilt gebruiken al hebt geüpload, gaat u naar de volgende stap: Carrouselsets maken. Houd er rekening mee dat de afbeeldingen die in de carrousel worden gebruikt, moeten worden geüpload nadat Dynamic Media is ingeschakeld.

Als u afbeeldingsbanners wilt uploaden, raadpleegt u Elementen uploaden.

NOTE
Niet-administratieve gebruikers moeten worden toegevoegd aan de dam-users groeperen om carrouselbanners te kunnen maken of bewerken. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u aan de stuwdammen groep.

Een Carousel-set maken:

  1. Navigeer in Elementen naar de map waar u de Carousel-set wilt maken en tik op Create > Carousel Set.

  2. Op de Carousel Banner Editor pagina, tikken Tap to open Asset Selector om de afbeelding voor de eerste dia te selecteren.

    Op de Carousel Banner Editor Voer een van de volgende handelingen uit op de pagina:

    • Tik in de linkerbovenhoek van de pagina op Add Slide pictogram.
    • Tik in het midden van de pagina op Tap to open Asset Selector.

    Tik om assets te selecteren die u in de carrouselset wilt opnemen. Geselecteerde assets hebben een vinkje. Tik in de rechterbovenhoek van de pagina op Select.

    Met de assetkiezer kunt u naar assets zoeken door een trefwoord te typen en op Return te tikken. U kunt ook filters toepassen om de zoekresultaten te verfijnen. U kunt filteren op pad, verzameling, bestandstype en tag. Selecteer het filter en tik op het pictogram Filter op de werkbalk. Wijzig de weergave door op de knop View pictogram en selecteren Column View, Card View, of List View.

    Zie Werken met kiezers voor meer informatie .

  3. Ga door met het toevoegen van dia's totdat u alle afbeeldingen hebt toegevoegd die u wilt roteren in de Carousel-set.

  4. (Optioneel) Voer een van de volgende handelingen uit:

    • Sleep indien nodig dia's om de volgorde van de afbeeldingen in de lijst met sets te wijzigen.
    • Als u een afbeelding wilt verwijderen, selecteert u de afbeelding en tikt u op Delete Slide op de werkbalk.
    • Tik op de vervolgkeuzelijst met voorinstellingen en selecteer vervolgens een voorinstelling die u meteen op de set wilt toepassen om een voorinstelling toe te passen in de rechterbovenhoek van de pagina.

    Als u een dia wilt verwijderen, tikt u op de dia en tikt u op Delete Slide in de werkbalk. Als u een dia wilt verplaatsen, tikt u op het invoegpictogram en houdt u de muisknop ingedrukt en verplaatst u de gewenste locatie.

  5. Nadat u de afbeeldingen in dia's hebt toegevoegd, kunt u een hotspot, afbeelding met hyperlinks of beide toevoegen aan uw afbeelding. Zie toevoegen, hotspots of afbeeldingen met hyperlinks.

  6. U kunt het visuele ontwerp en het gedrag van carrouselsets wijzigen door op de tabbladen Gedrag en Weergave te tikken of door aanpassingen aan te brengen in de vormgeving van de carrouselbanner of in de manier waarop bepaalde componenten zich gedragen. Zie voorinstellingen viewer beheren voor meer informatie over het gebruik van de viewer-editor.

    note note
    NOTE
    Voor carrouselbanners kunt u het volgende aanpassen:
    • Duur waarin een afbeelding wordt weergegeven. Standaard wordt elke afbeelding 9 seconden weergegeven.
    • Animatie. Elke dia-overgang is standaard vervagen. U kunt dat wijzigen in een dia-overgang.
    • Stijl van de knoppen. Gebruikers kunnen door de banners roteren door op elke punt of elk getal te tikken. U kunt wijzigen waar de knoppen van de ingestelde indicator worden weergegeven (en of ze numeriek of gestippeld zijn) en hoe groot ze zijn.
    • Wijzig de markeerstijl van een afbeeldingskaart of het pictogram dat voor hotspots wordt gebruikt.
    • Voordat u een viewervoorinstelling bewerkt, kiest u de stijl waarvan u de voorinstelling wilt baseren. Als u dit niet doet en u de voorinstelling van de viewer gaat bewerken, gaan alle wijzigingen verloren als u een andere voorinstelling kiest.

    U kunt ook een voorvertoning weergeven van hoe de carrouselbanner eruitziet. Zie (Optioneel) Voorvertoning van carrouselbanners bekijken.

  7. Tikken Save wanneer gereed.

Met de Carousel-set-editor kunt u hotspots of afbeeldingen met hyperlinks toevoegen aan een banner.

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

Zie Ervaar fragmenten.

NOTE
Houd er rekening mee dat de gereedschappen voor het delen van sociale media in Carousel Banner 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.

Terwijl u hotspots of afbeeldingen met hyperlinks toevoegt aan een afbeelding, vergeet dan niet uw werk op te slaan. Undo en Redo Deze 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 carrouselbanner, kunt u optioneel Preview om een voorstelling te zien van hoe uw carrouselbanner aan klanten zal verschijnen.

Zie (Optioneel) Voorvertoning van carrouselbanners bekijken.

NOTE
Wanneer u hotspots toevoegt aan een afbeelding in een Interactieve afbeelding Voor een Carousel Banner wordt de hotspot-informatie opgeslagen op dezelfde metagegevenslocatie, relatief ten opzichte van de locatie van de afbeelding, ongeacht of het een interactieve afbeelding of een Carousel Banner betreft. Deze functionaliteit houdt in dat u in elke viewer eenvoudig dezelfde afbeelding opnieuw kunt gebruiken, samen met de gedefinieerde hotspotgegevens.
Houd er echter rekening mee dat Carousel Banners afbeeldingen met hyperlinks ondersteunen op afbeeldingen die ook hotspots kunnen bevatten. een interactieve afbeelding niet. Houd hier rekening mee als u een interactieve afbeelding of Carousel Banner wilt maken die dezelfde afbeelding gebruikt. U kunt interactieve afbeeldingen en carrouselbanners maken met afzonderlijke kopieën van dezelfde afbeelding.
NOTE
Als u interactieve afbeeldingen met hotspots bewerkt en de afbeelding bijsnijdt, worden de hotspots verwijderd.

Hotspots toevoegen aan een afbeeldingsbanner:

  1. Navigeer vanuit Middelen naar de carrouselset die u interactief wilt maken.

  2. Selecteer de carrouselset en tik op Edit.

  3. Selecteer in de Carousel Viewer Editor de dia die u interactief wilt maken.

  4. Tik in de linkerbovenhoek van de pagina op Hotspot of Image Map.

  5. Voer een van de volgende handelingen uit:

    • Voor hotspots: Tik in de afbeelding op een locatie waar u de hotspot wilt weergeven.
    • Voor afbeeldingen met hyperlinks: Tik op de afbeelding en sleep vervolgens van linksboven naar rechtsonder om het gebied met de afbeeldingskaart te maken. U kunt de grootte van de afbeelding met hyperlinks aanpassen door de hoeken te slepen.

    Sleep indien nodig de hotspot of de afbeelding met hyperlinks naar een nieuwe locatie. Voeg desgewenst extra hotspots of afbeeldingen met hyperlinks toe.

    Tik op het tabblad Actions om een hotspot of afbeelding met hyperlinks te verwijderen. Selecteer onder de kop Maps & Hotspots in het vervolgkeuzemenu Selected Type de naam van de hotspot of de afbeelding met hyperlinks die u wilt verwijderen. Tik op het pictogram Trash naast het menu en tik vervolgens op Delete.

  6. Typ in het tekstveld Naam de naam van de hotspot of de afbeelding met hyperlinks. Deze naam wordt ook weergegeven in het dialoogvenster Maps & Hotspot vervolgkeuzelijst. Als u een naam opgeeft, kunt u de hotspot of de afbeelding met hyperlinks gemakkelijk herkennen als u er later wijzigingen in wilt aanbrengen.

  7. Voer een van de volgende handelingen uit in het dialoogvenster Actions tab:

    • Tik op Quickview.

      • Tik op de Product Picker pictogram (vergrootglas) om het dialoogvenster Select Product pagina. Tik op het product dat u wilt gebruiken en tik vervolgens op het vinkje in de rechterbovenhoek van de pagina om terug te keren naar de Carousel Banner Editor.

      • Als u geen klant van AEM Sites of van de Handel bent

        • Zie Hotspotvariabelen identificeren aangezien u deze variabelen kunt willen bepalen.
        • Voer vervolgens handmatig de SKU-waarde in. In de SKU Value In het tekstveld typt u 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. Geef in het tekstveld een extra variabele op. Bijvoorbeeld: category=Mens is een toegevoegde variabele.
        • Zie Werken met kiezers voor meer informatie .

    • Tik op Hyperlink.

      • Tik op de knop Site Selector om naar een URL te navigeren.

        note note
        NOTE
        De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met AEM Sites pagina's heeft.

      • Als u een standalone klant bent, in HREF tekstveld, geeft u 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 op Experience Fragment.

      • Tik op de knop 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 Ervaar fragmenten.

        Opmerking: Houd er rekening mee dat de gereedschappen voor het delen van sociale media in Carousel Banner 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.

    experience_fragment-carouselbanner

    U kunt ook een voorvertoning weergeven van hoe de carrouselbanner eruitziet. Zie (Optioneel) Voorvertoning van carrouselbanners bekijken.

  8. Tik op Save.

  9. Publiceer de carrouselset. Bij het publiceren wordt de insluitcode of URL gemaakt die u op uw websitepagina kunt gebruiken. Als u een AEM Sites-klant bent, kunt u de carrousel rechtstreeks aan uw webpagina toevoegen.

    Zie Elementen publiceren.

    Zie Een carrousel toevoegen die is ingesteld op de bestemmingspagina van uw website

NOTE
Niet-administratieve gebruikers moeten worden toegevoegd aan de dam-users groeperen om carrouselbanners te kunnen maken of bewerken. Als u problemen ondervindt bij het maken of bewerken van bestanden, raadpleegt u uw systeembeheerder die u aan de dam-users groep.

U kunt diverse bewerkingstaken uitvoeren op Carousel Sets, zoals:

  • Voeg dia's toe aan een Carousel-set. Zie ook Werken met kiezers.
  • Wijzig de volgorde van de dia's in de carrousel-set.
  • Elementen in de Carousel-set verwijderen.
  • Een viewervoorinstelling toepassen.
  • Verwijder de carrouselset.
  • Voeg hotspots en afbeeldingen met hyperlinks toe of bewerk deze. Zie ook Werken met kiezers.

Houd er rekening mee dat als u interactieve afbeeldingen met hotspots bewerkt en de afbeelding bijsnijdt, de hotspots worden verwijderd.

Een Carousel-set bewerken:

  1. Voer een van de volgende handelingen uit:

    • Houd de muisaanwijzer boven een Carousel-set element en tik vervolgens op Edit (potloodpictogram).
    • Houd de muisaanwijzer boven een Carousel-set, tik Select (vinkje pictogram), tikt u vervolgens op Edit op de werkbalk.
    • Tik op een Carousel-set-element en tik vervolgens in de linkerbovenhoek van de pagina op Edit (potloodpictogram).

  2. Voer een van de volgende handelingen uit om de Carousel-set te bewerken:

    • Tik op de knop Add Slide navigeer vervolgens naar het element dat u aan die dia wilt toevoegen en tik op het vinkje.
    • Als u de volgorde van de dia's wilt wijzigen, sleept u een dia naar een nieuwe locatie (selecteer het pictogram voor herschikken om items te verplaatsen).
    • Tik op de pictogrammen van de hotspot of afbeelding met hyperlinks om een hotspot of afbeelding met hyperlinks toe te voegen. Zie toevoegen, hotspots en afbeeldingen met hyperlinks.
    • Tik op de knop Appearance tab of Behavior en stelt u de gewenste opties in.
    • Als u hotspots of afbeeldingen met hyperlinks wilt bewerken, selecteert u op de juiste dia een hotspot of afbeelding met hyperlinks en brengt u de gewenste wijzigingen aan onder de knop Actions tab.
    • Als u een dia wilt verwijderen, selecteert u de dia en tikt u op Delete Slide op de werkbalk.
    • Tik op de vervolgkeuzelijst met voorinstellingen en selecteer een voorinstelling voor de viewer om een voorinstelling toe te passen in de rechterbovenhoek van de pagina.
    • Als u een volledige Carousel-set wilt verwijderen, navigeert u naar de Carousel-set, selecteert u deze en tikt u op Delete.

U kunt Preview om te zien hoe uw carrouselbanner eruit ziet voor klanten en om de hotspots voor carrouselbanners en afbeeldingen met hyperlinks te testen om te controleren of ze zich gedragen zoals verwacht.

Wanneer u tevreden bent met de carrouselbanner, kunt u deze publiceren.

U kunt een voorvertoning van carrouselbanners weergeven via de Carousel Editor (voorkeursmethode) of via de Viewers lijst.

Een voorvertoning weergeven van carrouselbanners:

  1. In Assets Navigeer naar een bestaande carrouselbanner die u hebt gemaakt en tik om deze te openen.

  2. Tik op Edit.

  3. Selecteer in de lijst met voorinstellingen voor viewers in de rechterhoek van de werkbalk een viewer voor een voorvertoning van de carrouselbanner.

    experience_fragment-carouselbanner-viewerdropdown

  4. Tik op Preview.

  5. Tik op de hotspots of afbeeldingen met hyperlinks op de afbeelding om de bijbehorende handelingen te testen.

Een voorvertoning van carrouselbanners weergeven in de lijst Viewers:

  1. In Assets Navigeer naar een bestaande carrouselbanner die u hebt gemaakt en tik om deze te openen.
  2. In de linkerbovenhoek van het dialoogvenster Preview pagina, tikt u op de Content pictogram.
  3. In de Viewers tikt u in het deelvenster aan de linkerkant van de pagina op de naam van de voorinstelling voor de carrouselbannerviewer die u wilt gebruiken.
  4. Tik op de hotspots of afbeeldingen met hyperlinks op de afbeelding om de bijbehorende handelingen te testen.

U moet de carrousel publiceren om deze te kunnen gebruiken. Als u een Carousel-set publiceert, worden de URL en de insluitcode geactiveerd. Het publiceert ook de carrousel naar de Dynamic Media-cloud, die is geïntegreerd met een CDN voor schaalbare en krachtige levering.

Als u een bestaande interactieve afbeelding met hotspots voor uw carrouselbanner gebruikt, moet u de interactieve afbeelding afzonderlijk publiceren nadat u de carrouselbanner hebt gepubliceerd.

Als u een reeds gepubliceerde interactieve afbeelding wijzigt die u in een carrouselbanner gebruikt, moet u de interactieve afbeelding publiceren voordat deze wijzigingen worden weerspiegeld in de carrouselbanner.

Zie Dynamic Media-middelen publiceren voor informatie over het publiceren van carrouselbanners.

Een carrouselbanner toevoegen aan uw websitepagina adding-a-carousel-banner-to-your-website-page

Nadat u bannerafbeeldingen hebt geüpload om een carrousel te maken, hotspots en/of afbeeldingen met hyperlinks naar de banner hebt toegevoegd en de carrouselset hebt gepubliceerd, kunt u deze nu toevoegen aan uw bestaande websitepagina.

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

Als u echter een zelfstandige AEM bent, kunt u de carrouselbanner handmatig toevoegen aan de bestemmingspagina van uw website, zoals beschreven in deze sectie.

  1. Kopieer de insluitcode van de gepubliceerde carrouselset.

    Zie Video- of afbeeldingsviewer insluiten op een webpagina.

  2. Voeg de insluitcode die u van AEM Assets hebt gekopieerd, toe aan uw webpagina.

    De gekopieerde insluitcode reageert hierop, zodat deze automatisch in het insluitingsgebied van de pagina past.

Deze taak is alleen van toepassing als u een zelfstandige AEM Assets-klant bent.

De laatste stap in dit proces is het integreren van de carrouselbanner met een bestaande implementatie van QuickView op uw website. 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 of afbeelding met hyperlinks in de carrouselbanner klikt en tegelijkertijd de carrouselbanner stap 1 en gedeeltelijk stap 2 vervangt, wordt deze gebruikersinteractie door de viewer afgehandeld. De viewer retourneert een gebeurtenis naar de webpagina die alle eerder toegevoegde hotspot- of afbeeldingskaartgegevens bevat.

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

  • Luistert naar een gebeurtenis die door de carrouselbanner wordt uitgegeven.
  • Hiermee maakt u een Quickview-URL op basis van de gegevens van de hotspot of afbeelding met hyperlinks.
  • 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.

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- en afbeeldingskaartvariabelen die eerder zijn behandeld.

Zie Variabelen van hotspots en afbeeldingen met hyperlinks identificeren.

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.

Quickviews gebruiken om aangepaste pop-ups te maken using-quickviews-to-create-custom-pop-ups

Zie Quickviews gebruiken om aangepaste pop-ups te maken.

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