Puteți face imagini statice bogate și atractive pentru clienți prin glisarea și eliberarea punctelor interactive „de vânzări” într-o imagine. Hotspoturile de vânzări combină informații suplimentare despre un produs sau serviciu cu un punct de vânzare și un punct de vânzare „Adăugați în coș” sau „cumpărați”. Clienții pot apăsa aceste zone interactive care sunt conectate direct de produs sau serviciu, le adăugați într-un coș de cumpărături sau să fie conectați la o pagină web. Experiențe directe, cum ar fi creșterea participării clienților și a conversiilor pe site.
Următoarele sunt un banner de vânzări cu o fereastră pop-up cu vedere rapidă. Un utilizator permite vizualizării rapide prin atingerea cercului sau a zonei interactive „a modelului.
Vezi Imagini interactive în acțiune pe site-ul web care este afișat mai sus.
A se vedea modul în care sunt create bannere interactive de imagine
la un tutorial de 10 minute și 33 de secunde despre modul în care semnele sunt create interactive imagine. De asemenea, veți afla cum să previzualizați, să editați și să distribuiți bannere interactive de imagine Imagini interactive rapid la activele AEM.
Găsiți antetul de exemplu în unele dintre sarcinile de pornire rapidă. Acesta conține un tutorial scurt bazat pe un exemplu de pagină web care nu are imagini interactive adăugate la ea.
Tutorialul ajută la ilustrarea pașilor pentru a integra imagini interactive pe propriul dvs. site web.
Pași interactive imagine:
-
(opțional) Identificarea variabilelor de punct interactiv. Dacă utilizați Adobe Experience Manager și resurse media dinamice independente, identificați variabilele dinamice pe care le utilizați în implementarea rapidă existentă. În acest fel, este garantat că puteți introduce date din puncte interactive atunci când creați imaginea interactivă. Vedeți (opțional) Identificarea variabilelor de punct interactiv. Cu toate acestea, dacă utilizați site-uri AEM, AEM eCommerce sau ambele, acest pas nu este necesar.
-
(opțional) Crearea unui set de vizualizator interactiv de imagine prestabilit. Personalizați imaginea grafică care este utilizată pentru a reprezenta zone interactive. Nu este necesar să vă creați propriul vizualizator de imagine interactive prestabilit dacă doriți să utilizați setarea Presetive Interactive Image Viewer, numit
Shoppable_Banner
în schimb.
Vezi (opțional) Crearea unui a Setarea prestabilită a imaginii interactive. -
Încărcarea unui banner de imagini. Încărcați bannerele de imagine pe care doriți să le faceți interactive.
Consultați Încărcarea unui banner de imagini. -
Adăugarea de zone interactive la un suport de imagine. Adăugați una sau mai multe zone interactive la un banner de imagini. Asociați fiecare dintre ele la o acțiune ca hyperlink, o vizualizare rapidă sau un fragment de experiență. După adăugarea de zone interactive, această sarcină va ajunge la publicarea imaginii interactive.
Vedeți adăugarea de zone interactive la un suport de imagine.
Vezi previzualizarea imaginilor interactive – opțional. Dacă doriți, puteți vedea o reprezentare a bannerului de vânzări și puteți testa interactivitatea.
Vezi publicarea resurselor pentru mai multe informații despre cum să publicați resursele interactive de imagine. -
Adăugați o imagine interactivă pe site-ul web sau site-ul web la Experience Manager. Dacă utilizați site-uri, e-commerce sau ambele, puteți adăuga imagini interactive direct la o pagină web la Manager de experiență. Trageți componenta media interactivă pe pagină. Consultați Adăugarea de resurse media dinamice în pagini.
Dacă utilizați active de manager de experiență și medii dinamice independent, copiați codul criptat de pe site. Apoi, includeți-o cu vizualizarea rapidă existentă. Consultați a integrat o imagine interactivă cu site-ul dvs. web.
Dacă utilizați un WCM WCM (Web Content Manager), integrați noul videoclip interactiv cu vizualizarea rapidă existentă care este utilizată pe site. Consultați a integrat o imagine interactivă cu o vizualizare rapidă existentă.
(opțional) Identificarea variabilelor interactive Point
Această sarcină este necesară numai dacă sunt adevărate următoarele:
- doriți să adăugați interactivitate la imagine prin activarea vizualizărilor rapide.
- Experience Manager de implementare Nu utilizează un cadru de integrare a comerțului electronic pentru a extrage datele de produs pentru a experimenta managerul de la orice soluție de e-commerce.Aceste soluții includ IBM WebSphere® Commerce, Calea elastică, Hybris sau Intershop.
Dacă implementarea dvs. AEM utilizează eCommerce, puteți sări peste această sarcină și continuați cu următoarea sarcină.
START Prin identificarea variabilelor dinamice care utilizează implementarea rapidă a vizualizării existente, astfel încât să puteți introduce date interactive pentru a crea imaginea interactivă.
Când adăugați zone interactive Pentru o imagine a titularului la activele managerului de experiență, atribuiți un SKU (unitate de întreținere a stocului). SKU-ul este un identificator unic pentru fiecare produs sau serviciu diferit care oferă. Și, adăugați orice variabilă opțională suplimentară pentru fiecare zonă interactivă. Aceste variabile de puncte interactive sunt utilizate mai târziu pentru a se potrivi cu punctele interactive cu conținutul vizualizării rapide.
Este important să identificați corect numărul și tipul de variabile care vor fi asociate cu datele de puncte interactive. Fiecare zonă interactivă adăugată la o imagine banner trebuie să conțină suficiente informații pentru a identifica produsul fără echivoc în sistemul de back-end existent.
Există diferite modalități de identificare a unui set de variabile care vor fi utilizate pentru datele interactive Puncte.
Uneori este suficient să consultați specialiștii IT responsabili pentru implementarea rapidă existentă. Este posibil ca acești oameni să știe ce este necesar datele minime de date necesare pentru a identifica vizualizarea rapidă în sistem. Cu toate acestea, este posibilă analiza pur și simplu comportamentul existent al codului frontal.
Cele mai multe implementări ale vizualizării rapide Utilizați următoarea paradigmă:
- Utilizatorul Activează un element de interfață de utilizator de pe site. De exemplu, făcând clic pe butonul „Vizualizare rapidă”.
- Site-ul trimite o aplicație AJAX pe server pentru a încărca datele sau conținutul vizualizării rapide, dacă este necesar.
- Datele de vizualizare rapidă sunt traduse în conținut ca pregătire pentru redarea pe pagina web.
- În cele din urmă, codul frontal-end procesează vizual conținutul menționat pe ecran.
Metoda vizitează apoi diferite zone ale site-ului web existent, unde este implementată funcția de vizualizare rapidă. Apoi, activați vizualizarea rapidă și capturați adresa URL AJAX care trimite pagina web pentru a încărca datele sau conținutul vizualizării rapide.
În mod normal, nu este necesar să utilizați niciun instrument de depanare specializat. Browserele web moderne au inspectori web care efectuează o slujbă adecvată. Mai jos sunt câteva exemple de browsere web care includ inspectorii web:
-
Pentru a vedea toate solicitările HTTP de la Google Chrome, apăsați F12 pentru a deschide panoul Instrumente Developer și, a continuați, faceți clic pe Pornit Fila de rețea.
pe un Mac, apăsați Command + Option + I pentru a deschide panoul Instrumente Developer, apoi faceți clic pe fila Rețea -
în Firefox, tu poate activa Firebug Snap-in și utilizând fila de rețea. Sau, puteți utiliza instrumentul Inspector integrat și fila de rețea.
pe un Mac, apăsați Command + Opțiune + I Panoul Instrumente Developers, apoi faceți clic pe Inspector Tab.
Când monitorizarea rețelei este activată în browser, verificați vizualizarea rapidă a paginii.
Acum, căutați adresa URL AJAX de vizualizare rapidă În registrul de rețea și copiați adresa URL înregistrată pentru analiza viitoare. De obicei, când vizualizarea rapidă este activată, există multe cereri trimise către server. În mod normal, adresa URL AJAX a Vizualizării rapide este una dintre primele din listă. Are un traseu sau o parte dintr-un lanț de interogare complex și tipul dvs. de răspuns al MIME este text/html
sautext/javascript
.
În timpul acestui proces, este important să vizitați diferite zone ale site-ului, cu diferite tipuri și categorii de produse. Motivul este că adresele URL cu vizualizare rapidă pot avea părți comune pentru o anumită categorie de site-uri web. Cu toate acestea, acestea se schimbă numai dacă vizitați o zonă diferită a site-ului.
În cel mai simplu caz, singura parte variabilă a URL-ului de vizualizare rapidă este SKU-ul produsului. În acest caz, valoarea SKU este singura piesă de date de care aveți nevoie pentru a adăuga zone interactive la imaginea bannerului.
Cu toate acestea, în cazuri complexe, adresa URL de vizualizare rapidă are elemente diferite în plus față de Sku. De exemplu, diferitele elemente pot include ID-ul de categorie, codul de culoare și codul de dimensiune.În aceste cazuri, fiecare element este o variabilă independentă în definiția datelor interactive de la funcția de imagine a activelor managerului de experiență.
Să vedem următoarele exemple de URL de vizualizare rapidă și variabilele punctelor interactive rezultate:
URL-urile înregistrate cu vizualizare rapidă includ următoarele:
Singura parte a variabilei din adresa URL este valoarea Produsul parametrului lanțului de interogare = și este în mod clar o valoare SKU. Prin urmare, zonele interactive au nevoie doar de câmpuri de SKU umplute cu valori, cum ar fi |
|
SKU Single, care este pe calea URL. |
URL-urile de vizualizare rapidă înregistrată includ următoarele:
Partea variabilă se găsește în ultima parte a traseului și devine valoarea SKU a zonelor interactive: |
SKU și Categorie ID în Lanț de interogare. |
Adresa URL rapidă înregistrată includ următoarele:
În acest caz, în URL există două părți diferite. SKU-ul este stocat în parametrul Ca atare, definițiile punctelor interactive sunt perechi. Adică o valoare SKU și o variabilă suplimentară numită
|
Exemplu
Puteți aplica aceeași abordare utilizată în cele trei exemple înainte de pagina web demo. p. >
pagina demo are mai multe miniaturi de produs, fiecare cu un buton de vizualizare rapidă, etichetat ca „Vezi mai mult”. Cu instrumentul de depanare Web Explorer încă activat, faceți clic pe fiecare buton și notați URL-urile de vizualizare rapidă înregistrată. După activarea celor patru vizualizări rapide ale produsului disponibile pe pagină, acesta are următoarea listă de solicitări de vizualizare rapidă efectuate pe server:
-
/datafeed/Men-Windbreaker.json
- iv id = ”
La examinarea apelurilor către server, puteți vedea că informațiile specifice ale produsului sunt prezente numai în calea de aplicație. De asemenea, constată că lanțul de interogare nu este utilizat deloc și că există două tipuri diferite de fragmente de date implicate:
- primul tip este bărbații sau femeile. Puteți apela această „categorie de produse”.
- Al doilea tip este numele produsului, cum ar fi camopulover, care este probabil SKU-ul produsului.
Având în vedere aceste informații, întreaga adresă URL de vizualizare rapidă are următorul standard:
În funcție de această analiză, ar folosi și SKU
pentru zonele interactive.
este deja gata să încărcați un suport de imagine și să adăugați zone interactive prin funcția de Imagine interactivă de vânzări la activele AEM div id = „81177C48b8”> care este inclusă cu activele AEM. Sau puteți crea propria dvs. afișare personalizată pentru ao folosi cu imagini interactive.
Când creați o setare personalizată prestabilită a afișajului interactiv al imaginii, puteți determina apariția zonelor interactive pe bannerul de imagine .Ca parte a creării setării de vizionare prestabilită, puteți alege să utilizați un grafic de zonă interactiv al unei galerie de imagini predefinite.
După salvarea setării vizualizatorului prestabilit, este activată automat (activată) în Pagina de listă Setările vizualizate prestabilite în activele AEM. Această funcționalitate înseamnă că este vizibilă în componenta media interactivă și ori de câte ori se observă o resursă. Cu toate acestea, pentru a oferi un banner interactiv cu această ajustare a vizualizatorului prestabilit, publicați, de asemenea, setarea vizualizatorului prestabilit. Această regulă este valabilă pentru setările presetate ale vizorului personalizate sau predeterminate „EC53C6266E”> Active > Setări presetate ale vizorului.
În apropierea dreptului de colț superior al paginii, faceți clic pe Creare .
În caseta de dialog Visualizer Preset, tastați un nume pentru a descrie setarea de afișare interactivă interactivă prestabilită.
Acest titlu apare pe partea Vizualizarea listei de setări presetate după salvarea acesteia.
În meniul derulant Tip îmbogățit, selectați Imagine interactivă.
Atingeți Creare.
În pagina de setare a vizualizatorului Editare, apăsați fila Aspect
Faceți una dintre următoarele :
- Pentru a încărca propria imagine a zonei interactive pe care doriți să o utilizați în imagini, apăsați pictograma selector de resurse. În pagina Selectați conținutul, accesați imaginea zonei interactive pe care doriți să o utilizați și selectați-o. Apăsați pictograma de selectare din colțul din dreapta sus.
- Pentru a selecta o imagine interactivă predefinită, apăsați pictograma Galerie a punctelor interactive. În paleta Galerie Interactive Puncte, apăsați pe imaginea zonei interactive pe care doriți să o utilizați.
În apropierea colțului din dreapta sus al paginii, apăsați Salvare. /p>
Asigurați-vă că publicați noua setare a vizualizatorului pre-setat.
Vedeți setările personalizate de vizionare a publicației.
Sunteți gata să încărcați un suport de imagine.
Încărcarea unui suport de imagine
Dacă ați încărcat deja imaginile pe care doriți să le utilizați, avansați la pasul următor, adăugați zone interactive la un suport de imagine. /p>
Pentru a încărca un suport de imagine
-
Load Image Bannere pe care doriți să le faceți interactive.
a se vedea gama de resurse.
este deja gata să adauge zone interactive suportului imaginii; Consultați următoarea sarcină de mai jos.
Adăugarea de zone interactive la un suport de imagine
Puteți adăuga zone interactive la un banner de imagine folosind editorul din interactiv Pagina de gestionare a punctelor.
Atunci când adăugați zone interactive, le puteți defini ca o vizualizare pop-up a vizualizării rapide, cum ar fi un hyperlink sau un fragment de experiență.
Vedeți fragmente de experiențe .
Instrumentele de partajare socială în imaginea interactivă nu sunt compatibile atunci când vizorul este încorporat într-un fragment de experiență. În schimb, utilizați sau creați ajustări presetate Visualizer care nu au instrumente de partajare socială. Aceste setări de vizualizări prestabilite vă permit să le încorporați corect în fragmente de experiențe.
Opțiuni anulare și redo, în apropierea colțului din dreapta sus al paginii, sunt compatibile în timpul sesiunii de sesiune Crearea / Ediția curentă.
Când terminați crearea imaginii interactive, puteți utiliza previzualizarea pentru a vedea o reprezentare a modului în care apare imaginea interactivă pentru clienți.
Vezi (opțional) Vista Anterior de imagini interactive.
Atunci când zonele interactive sunt adăugate la o imagine într-o imagine interactivă sau un suport de carusel, informațiile despre punctul interactiv este magazinul în aceeași locație a metadatelor. Această locație este relativă la locația imaginii, indiferent dacă este o imagine interactivă sau un suport de carusel. Această funcționalitate înseamnă că poate reutiliza cu ușurință aceeași imagine (împreună cu datele de punct interactiv definite) în orice vizualizare. Cu toate acestea, rețineți că bannerele carusel sprijină imagini ale imaginilor care pot conține și zone interactive; O imagine interactivă nu. Păstrați acest lucru în minte dacă doriți să creați o imagine interactivă sau un suport de carusel care utilizează aceeași imagine.În schimb, puteți crea imagini interactive și suporturi de carusel folosind copii independente ale aceleiași imagini.
A se vedea și bannerele carusel.
Dacă editați imagini interactive cu zone interactive și tăiați imaginea, zonele interactive vor fi șterse.
Pentru a adăuga zone interactive la un suport de imagine
-
În vizualizarea resurselor, defilați la bannerul de imagine pe care doriți să îl convertiți la interactive.
-
Faceți una dintre următoarele acțiuni:
-
Treceți mouse-ul peste imagine, apoi apăsați SELECT (pictograma marcajului). În bara de instrumente, apăsați pe Editare.
-
Treceți mouse-ul peste imagine, apoi faceți clic pe mai multe acțiuni (pictograma cu trei puncte) Editați.
-
Pentru ao deschide pe pagina de vizualizare detaliată, apăsați pe imagine. În bara de instrumente, apăsați pe Editare.
În apropierea colțului din stânga sus al paginii, faceți clic pe Adăugare zonă interactivă (pictograma cu degetul) pentru a deschide Pagina de gestionare a punctelor interactive.
-
-
În apropierea colțului din stânga sus al paginii, apăsați zona interactivă.
- în apropiere din colțul din stânga sus al Pagina de gestionare a punctelor interactive, apăsați zona interactivă.
- în imagine, faceți clic pe o locație în care doriți să apară punctul interactiv. Dacă este necesar, trageți zona interactivă pentru a vă ajusta locația. Sau, utilizați tastele săgeată de pe tastatură pentru a controla poziția unui punct interactiv selectat.
- Adăugați mai multe zone interactive după cum este necesar prin repetarea pașilor A și b.
- (opțional) la Ștergeți o zonă interactivă, selectați-o în imagine, apoi apăsați pe Ștergere (pictograma coșului de gunoi) din antetul zonei interactive.
-
în domeniul numelui textului, Introduceți numele zonei interactive. Acest nume apare și în lista derulantă a zonei interactive selectate.
-
Efectuați una dintre următoarele acțiuni:
-
Apăsați QUICK VIEW .
-
Dacă sunteți site-uri AEM sau client de comerț electronic, atingeți sau faceți clic pe pictograma selector de produs (LUPA) pentru a deschide pagina Selectați produsul. Apăsați produsul pe care doriți să îl utilizați, apoi apăsați SELECT în colțul din dreapta sus al paginii. Acesta va reveni la pagina de gestionare a punctelor interactive.
-
Dacă nu este un client al site-urilor de experimentare a managerului sau eCommerce
- vezi identificarea variabilelor DOT interactiv; Trebuie să definiți aceste variabile.
- Următorul, introduceți manual valoarea SKU. În câmpul Text de valoare SKU, scrieți produsul SKU. Valoarea SKU introdusă automat umple partea variabilă a șablonului de vizualizare rapidă. Asigură că sistemul maritim asociază zona interactivă utilizată cu vizualizarea rapidă a unui SKU specific.
- (opțional) Dacă există și alte variabile în vizualizarea rapidă care sunt utilizate pentru a identifica un produs, apăsați Adăugați variabila generică . În câmpul de text, specificați o variabilă suplimentară. De exemplu,
category=Mens
este o variabilă agregată.
-
touch hyperlink.
- Dacă sunteți clientul de site-uri de experiență manager, apăsați pictograma selector de site (folderul). Mergeți la o adresă URL. Metoda de legare bazată pe URL nu este posibilă dacă conținutul interactiv are legături cu adrese URL relative, în special cu link-uri cu site-uri de manager de experiență.
- Dacă este un client independent, în câmpul Text HREF specificați adresa URL completă Traseul către o pagină web conectată aceeași filă.
Consultați Utilizarea selectorilor pentru mai multe informații.
-
Apăsați Fragment de experiențe.
-
Dacă tu Sunt site-urile clientului AEM, atingeți sau faceți clic pe pictograma de căutare (lupă de sticlă) pentru a deschide fragmentul de experiențe. Atingeți fragmentul de experiență pe care doriți să îl utilizați. Apoi, apăsați Selectare în colțul din dreapta sus al paginii. Se va întoarce la pagina de administrare a punctelor interactive.
Vezi fragmente de experiențe. -
Specificați lățimea și înălțimea fragmentului de experiență pe măsură ce doriți să apară pe banner.
NotăInstrumentele de partajare socială în imagine interactivă nu sunt compatibile atunci când vizorul este încorporat într-un fragment de experiență. În schimb, utilizați sau creați ajustări presetate Visualizer care nu au instrumente de partajare socială.Aceste setări de vizualizări prestabilite vă permit să le încorporați corect în fragmente de experiență.
-
-
-
Atingeți Salvare pentru a salva lucrarea și a reveni la pagina de navigare.
-
Publicați imaginea interactivă. Publicația oferă banner-ul prin nor și generează, de asemenea, codul încorporat care vă permite să vă integrați cu un site web al unei terțe părți.
Vedeți resursele de publicare.
După adăugarea de zone interactive și publicați Imagine interactivă, sunteți gata să îl adăugați pe site-ul web existent.
Vedeți integrarea unei imagini interactive cu site-ul dvs. / / P> Div>
NotăDacă editați imagini interactive cu zone interactive și tăiați imaginea, zonele interactive vor fi șterse.
-
-
(opțional) Anterioară Imagini interactive
Puteți previzualiza pentru a vedea o reprezentare a aspectului care va avea imaginea interactivă pentru clienți. Previzualizarea permite, de asemenea, să testați zonele interactive ale imaginii pentru a vă asigura că se comportă în modul așteptat.
Când sunteți mulțumit de imaginea interactivă, puteți să-l publicați.
Consultați Inalaying imaginea Viewer sau videoclipuri pe o pagină Web.
Vedeți linkul URL către aplicația web. Metoda de legare bazată pe URL nu este posibilă dacă conținutul interactiv are legături cu adresele URL relative, în special cu paginile de site-uri AEM.
Consultați Adăugarea de resurse media dinamice în pagini.
Pentru a previzualiza imagini interactive
- În vizualizarea resurselor, defilați la imaginea interactivă existentă pe care ați creat-o și apăsați pentru ao deschide în previzualizare.
- În apropierea colțului din stânga sus al paginii de previzualizare, în dropul de conținut -Dowdown, Atingeți Afișaje.
- În lista de vizualizatori, apăsați ShopPaable_banner sau numele setării prestabilite a afișajului interactiv al imaginii pe care l-ați creat.
- pentru a testa asociatul Acțiuni ale zonelor interactive, apăsați zonele interactive ale imaginii.
Publicarea resurselor interactive de imagine
Vedeți resursele de publicare pentru mai multe informații despre cum să publicați resursele de imagine Interactici tu.
Integrarea unei imagini interactive cu site-ul dvs.
După încărcarea unei imagini a bannerului, adăugând zone interactive la acesta și publicați imaginea interactivă, sunteți gata să îl adăugați la Pagina site-ului.
Dacă sunteți site-uri clienți AEM, puteți adăuga imaginea interactivă prin glisarea componentei media interactivă la pagina dvs. Consultați Adăugarea de resurse dinamice media la pagini.
Dacă sunteți independent de active AEM, puteți adăuga manual imaginea interactivă pe site-ul dvs. așa cum este descris în această secțiune.
-
Copiați codul încorporat al imaginii interactive publicate.
Consultați Afișarea imaginii sau a videoclipurilor pe o pagină Web. -
Adăugați copierea codului încorporat la dorit Locație în interiorul paginii web.
Codul încorporat copiat este configurat pentru un mediu interactiv, astfel încât acesta să fie setat automat în zona atribuită.
exemplu
cu site-ul Show ca exemplu, rețineți că imaginea celor trei persoane este o etichetă statică IMG
Integrare este la fel de simplă ca și ștergerea etichetei IMG
și înlocuiți-o cu codul încorporat copiat din activele AEM. Puteți vedea că rezultatul arată imaginea de vânzări interactivă pe pagină cu trei puncte interactive ale cercului.
În acest moment, zonele interactive ale Imaginea de vânzări interactivă a site-ului demo are doar scopuri de vizualizare. Acestea nu sunt încă integrate cu vederile rapide existente.
Pentru a aplica o imagine de vânzări interactivă pentru un mediu interactiv, includeți atributul interactiv de configurare a imaginii ZoomView.iscommand
pe traseu. În acest caz, se numește componenta și iscommand
este comanda „Crop” Server de imagini care se aplică.
Consultați atributul de configurare ZoomView.iscomand.
Consultați comanda Crop Image Server.
este deja gata să integreze imaginea interactivă cu o vizualizare rapidă pe site-ul dvs. Web. /p>
Integrarea unei imagini interactive cu o vizualizare rapidă existentă
Această sarcină se aplică numai dacă este un client independent din activele AEM.
Ultimul pas al acestui proces este de a integra imaginea interactivă cu o implementare rapidă de vizualizare rapidă pe site.Nu există o soluție pentru integrare care funcționează în toate cazurile. Fiecare implementare rapidă este unică și este necesară o abordare specifică. Ca atare, participația unei persoane IT din față este utilă.
Implementarea rapidă a vizualizării existente reprezintă în mod normal un lanț de acțiuni interdependente care apar pe pagina web în ordinea următoare:
- Un utilizator activează un element în interfața de utilizator a site-ului web.
- Codul frontal-end primește o adresă URL de vizualizare rapidă bazată pe elementul de interfață de utilizator care a fost activat în pasul 1. /li>
- Codul frontal trimite o solicitare AJAX utilizând adresa URL obținută la pasul 2.
- logica back-end returnează datele sau conținutul de vizualizare rapidă corespunzător codului frontal.
- Codul frontal-end încarcă datele sau conținutul vizualizării rapide.
- Opțional, capătul de cod frontal convertește datele de vizualizare rapidă încărcată într-o reprezentare HTML.
Codul frontal-end afișează o casetă de dialog modal sau un panou și reprezintă conținutul HTML de pe ecran pentru Utilizator final.
Aceste apeluri nu reprezintă neapărat apeluri publice de API independente la care logica site-ului apelează de la un pas arbitrar. În schimb, este un apel în lanț în care fiecare pas următor este ascuns în ultima fază (apel înapoi) al pasului anterior.
Când imaginea interactivă a tabelului de vânzări înlocuiește pasul 1 și, în parte , până la pasul 2, un utilizator atinge o zonă interactivă în imaginea tabelului de cumpărături. Vizualizatorul gestionează această interacțiune a utilizatorului. Vizisinul returnează un eveniment pe site-ul web care conține toate datele interactive adăugate anterior la activele AEM.
Într-un controler de eveniment de acest tip, codul frontal-final face următoarele:
- Ascultați un eveniment emis de imaginea de vânzări interactive.
- Creați o adresă URL de vizualizare rapidă bazată pe datele zonei interactive.
- Activează procesul pentru a încărca vizualizarea rapidă de la Serverul și procesați-l pe ecran pentru afișare.
Codul încorporat returnat de activele Managerului de experiență are un driver de eveniment gata să fie discutat, ca Ve în următoarea sursă de cod evidențiat:
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();
Prin urmare, este necesar să se decominați codul și să înlocuiți corpul controlerului fictiv cu codul specific al site-ului web.
Procesul de construcție al URL-ului de vizualizare rapidă este opus procesului utilizat pentru identificarea s variabilele punctelor interactive care au fost acoperite anterior.
a se vedea identificarea variabilelor dot interactive.
În exemplele anterioare de URL de vizualizare rapidă puteți vedea în următoarele exemple cum este construită URL-ul Vizualizare rapidă în fiecare caz:
SKU Single, găsit în Lanțul de interogare |
iv i id = „b8e74ec3da” | s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, }); |
SKU E Categorie ID în interogare Lanțul |
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, }); |
Ultimul pas pentru a activa adresa URL de vizualizare rapidă și a activa panoul de vizualizare rapidă necesită asistența unei persoane front-end de la compania dvs. Ei au cunoștințe pentru a ști mai bine cum să activeze cu exactitate implementarea vizualizării rapide de la pasul corespunzător, având o adresă URL de vizualizare rapidă gata de utilizare.
Puteți vedea cum se aplică acești pași pe site-ul demo pentru a fi complet Integrați o imagine interactivă de vânzări cu codul de vizualizare rapidă. Anterior, structura URL-ului de vizualizare rapidă a fost identificată ca fiind următoarea:
/datafeed/$categoryId$-$SKU$.json
Pentru a reconstrui această adresă URL în interiorul controlerului quickViewActivate
, puteți folosi câmpurile categoryId
și SKU
. Aceste câmpuri sunt disponibile în obiectul inData
că codul de vizualizare trece la controler:
var sku=inData.sku;var categoryId=inData.categoryId;var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
demonstrația site-ului Activează dialogul Vizualizare rapidă utilizând o simplă funcție de apel loadQuickView()
. Această funcție ia doar un argument, care este adresa URL de date rapidă de vizualizare. Ca atare, ultimul pas pentru integrarea imaginii de vânzări interactive este de a adăuga următoarea linie de cod la controlerul quickViewActivate
:
loadQuickView(quickViewUrl);
Următoarea este codul sursă complet:
iv id = „d7e8febbba1”
site-ul final demonstrativ cu imaginea interactivă interactivă.
Utilizarea vizualizărilor rapide pentru a crea ferestre pop-up personalizate
Consultați utilizând vizualizări rapide pentru a crea ferestre pop-up personalizate.