JSON-Schnittstelle Beispiele
Inhalt
1. Crosslinks zuordnen und ausgeben
2. Verschränkter Zugriff auf 2 Dateien
3. Beispiel für EJD-ElementIterator
5. Beispiel Payload für ASSE erstellen: Vergleich DC-FP und JSON
6. CMS-Inhalte über JSON-Schnittstelle in den Shop integrieren
1. Crosslinks zuordnen und ausgeben
Dieses Beispiel zeigt die Zuordnung mehrerer Crosslink-Artikel mit Titel und Beschreibung zu einem Produkt.
Wegweiser: JSON-Schnittstelle
Beispiel der JSON-Datei "crosslink-$PR-Number$.json" im Root-FTP-Verzeichnis gespeichert (global):
{
"headline": "Hier steht eine Überschrift",
"description": "Hier steht eine Beschreibung. Es kann auch HTML-Code verwendet werden.",
"crosslinkProducts":
[
{
"productID": "12345",
"section": {
"title": "Individueller Titel für die Sektion, in der sich das Produkt 12345 befindet.",
"description": "Individuelle Beschreibung für die Sektion, in der sich das Produkt 12345 befindet."
}
},
{
"productID": "23456",
"section": {
"title": "Individueller Titel für die Sektion, in der sich das Produkt 23456 befindet.",
"description": "Individuelle Beschreibung für die Sektion, in der sich das Produkt 23456 befindet."
}
},
{
"productGroup": "RNA1,RNA2,TNA1,TNA2",
"section": {
"title": "Individueller Titel für die Sektion, in der sich die Produktgruppe befindet.",
"description": "Individuelle Beschreibung für die Sektion, in der sich die Produktgruppe befindet."
}
}
]
}
Code im Template Produktdetailansicht (ws_product.htm):
<!-- globale JSON-Datei laden, ID vergeben und prüfen -->
~EJD-LoadData(global,crosslink-$PR-Number$.json,cross)~
{EJD-DataOK(cross)}
~EJD-SetUseID(cross)~ <!-- die ID "cross" wird für folgende Tags als Standard gesetzt -->
<!-- Ausgabe der Überschrift und Beschreibung -->
~EJD-DA-Value(headline)~<br>
~EJD-DA-Value(description)~<br>
<hr>
~EJD-DA-TouchArrayElements(crosslinkProducts)~ <!-- berührt Anzahl der Array-Elemente "3" -->
~DC-ZeroLoop1_set($EJD-LastValueAccessed$)~ <!-- setzt die Anzahl der Schleifendurchläufe auf 3 -->
{@DC-ZeroLoop1}
~EJD-DA-Value(crosslinkProducts[$DC-ZeroLoop1_position$].section.title)~<br> <!-- Ausgabe des Titels -->
~EJD-DA-Value(crosslinkProducts[$DC-ZeroLoop1_position$].section.description)~<br> <!-- Ausgabe der Beschreibung -->
<!-- Einzelprodukt -->
{!EJD-DA-NameExists(crosslinkProducts[$DC-ZeroLoop1_position$].productGroup)}
~EJD-DA-TouchValue(crosslinkProducts[$DC-ZeroLoop1_position$].productID)~ <!-- berührt die Produkt-ID -->
~DC-FPproductIndex_set($EJD-LastValueAccessed$)~ <!-- setzt die Produkt-ID in das DC-Tag -->
{PR-LoadData($DC-FPproductIndex$,0)}
<img src="~PR-MiniThumbnail~" alt="~PR-Name_StripHtml~"><br>
~PR-Name~<br>
~PR-Price~ ~WS-CurrencySymbol~<br>
{/PR-LoadData($DC-FPproductIndex$,0)}
{/!EJD-DA-NameExists(crosslinkProducts[$DC-ZeroLoop1_position$].productGroup)}
<!-- Produktgruppe -->
{EJD-DA-NameExists(crosslinkProducts[$DC-ZeroLoop1_position$].productGroup)}
~EJD-DA-TouchValue(crosslinkProducts[$DC-ZeroLoop1_position$].productGroup)~ <!-- berührt die Anzahl der Elemente von "productGroup" -->
~DC-DynamicLoop1_set($EJD-LastValueAccessed$)~ <!-- setzt die Anzahl der Schleifendurchläufe auf 4 -->
{DC-DynamicLoop1}
{@DC-DynamicLoop1}
{PR-LoadData($DC-DynamicLoop1_data$,0)}
<img src="~PR-MiniThumbnail~" alt="~PR-Name_StripHtml~"><br>
~PR-Name~<br>
~PR-Price~ ~WS-CurrencySymbol~<br>
{/PR-LoadData($DC-DynamicLoop1_data$,0)}
{/@DC-DynamicLoop1}
{/DC-DynamicLoop1}
{/EJD-DA-NameExists(crosslinkProducts[$DC-ZeroLoop1_position$].productGroup)}
<hr>
{/@DC-ZeroLoop1}
{/EJD-DataOK(cross)}
Ausgabe:
Hier steht eine Überschrift
Hier steht eine Beschreibung. Es kann auch HTML-Code verwendet werden.
Individueller Titel für die Sektion, in der sich das Produkt 12345 befindet.
Individuelle Beschreibung für die Sektion, in der sich das Produkt 12345 befindet.
...
<!-- Produktdaten: Bild, Name, Preis -->
...
<hr>
Individueller Titel für die Sektion, in der sich das Produkt 23456 befindet.
Individuelle Beschreibung für die Sektion, in der sich das Produkt 23456 befindet.
...
<!-- Produktdaten: Bild, Name, Preis -->
...
<hr>
Individueller Titel für die Sektion, in der sich die Produktgruppe befindet.
Individuelle Beschreibung für die Sektion, in der sich die Produktgruppe befindet.
...
<!-- Produktdaten: Bild, Name, Preis -->
...
2. Verschränkter Zugriff auf 2 Dateien
Das folgende Anwendungsbeispiel zeigt den Zugriff auf 2 JSON-Dateien und die kombinierte Ausgabe.
Wegweiser: JSON-Schnittstelle
Inhalt der JSON-Datei "img_captions_productpage.json", Subshop-spezifisch gespeichert, erhält im Template die ID "cap", mit sprachabhängigen Überschriften für Bilder:
{
"MainPicture": "Detailansicht",
"SmallImages": "weitere Ansichten",
"BigImages": "Galerie"
}
Inhalt der JSON-Datei "<Produktnummer>.json", Subshop-spezifisch gespeichert, erhält im Template die ID "data", mit Daten zu einem Produkt, rot markierter Eintrag für die Ausgabe unten optional.
Beachten Sie bitte, dass das Verzeichnis der Bilder ("URL") auf den Shop-Server ("../benutzer/templates/img/") verweist und nicht auf den zusätzlichen FTP-Zugang für die JSON-Schnittstelle.
{
"MainPicture": "img/12345.jpg",
"Images": [{
"Descr": "Ansicht vorne",
"URL": "img/12345-1.jpg"
}, {
"Descr": "Ansicht oben",
"URL": "img/12345-2.jpg"
}, {
"Descr": "Ansicht profil",
"URL": "img/12345-3.jpg"
}]
}
Verwendung im Template (z. B. Produktdetailansicht (ws_product.htm)):
<!-- Laden der Beschriftungen -->
~EJD-LoadData(subshop,img_captions_productpage.json,cap)~
<!-- Laden der Bilder -->
~EJD-LoadData(subshop,$PR-Number$.json,data)~
<!-- Anzeige der Hauptansicht, wenn Hauptbild vorhanden -->
{EJD-DA-NameExists(MainPicture,data)}
~EJD-DA-Value(MainPicture,cap)~: <img src="~EJD-DA-Value(MainPicture,data)~">
{/EJD-DA-NameExists(MainPicture,data)}
<!-- Anzeige der weiteren Bilder wenn vorhanden -->
~EJD-DA-TouchArrayElements(Images,data)~
{DC-CompareDigitGT($EJD-LastValueAccessed$,0)}
<!-- Setzen der Loop, bevor die Überschrift ausgegeben wird -->
~DC-ZeroLoop1_set($EJD-LastValueAccessed$)~
<!-- Überschrift aus captions-Datei -->
~EJD-DA-Value(SmallImages,cap)~:<br>
<!-- Loop über die Bilder -->
{@DC-ZeroLoop1}
<br>
<img src="~EJD-DA-Value(Images[$DC-ZeroLoop1_position$].URL,data)~">
<br>
~EJD-DA-Value(Images[$DC-ZeroLoop1_position$].Descr,data)~
<br>
{/@DC-ZeroLoop1}
{/DC-CompareDigitGT($EJD-LastValueAccessed$,0)}
Ausgabe mit Datenelement "MainPicture" in <Produktnummer>.json:
Detailansicht: <img src="img/12345.jpg">
weitere Ansichten:
<img src="img/12345-1.jpg">
Ansicht vorne
<img src="img/12345-2.jpg">
Ansicht oben
<img src="img/12345-3.jpg">
Ansicht profil
Ausgabe ohne Datenelement "MainPicture" in <Produktnummer>.json:
weitere Ansichten:
<img src="img/12345-1.jpg">
Ansicht vorne
<img src="img/12345-2.jpg">
Ansicht oben
<img src="img/12345-3.jpg">
Ansicht profil
3. Beispiel für EJD-ElementIterator
Es wird eine beliebige JSON-Datei mit einer maximalen Verschachtelung von 1 ausgegeben.
Wegweiser: JSON-Schnittstelle
JSON-Datei "test.json":
{
"firstName": "Rack",
"lastName": "Jackson",
"gender": "man",
"age": 24,
"address": {
"streetAddress": "126",
"city": "San Jone",
"state": "CA",
"postalCode": "394221"
},
"phoneNumbers": [
{ "type": "home", "number": "7383627627" }
]
}
Verwendung im Template:
~EJD-LoadData(global,test.json,jdat)~
{EJD-DataOK(jdat)}
~EJD-SetUseID(jdat)~
{@EJD-ElementIterator()}
~EJD-ElementIterator~ : ~EJD-DA-Value($EJD-ElementIterator$)~<br>
{EJD-DA-IsObject($EJD-ElementIterator$)}
~DC-FP1_set($EJD-ElementIterator$)~
{@EJD-ElementIterator($DC-FP1$)}
~EJD-ElementIterator~ : ~EJD-DA-Value($DC-FP1$.$EJD-ElementIterator$)~<br>
{/@EJD-ElementIterator($DC-FP1$)}
{/EJD-DA-IsObject($EJD-ElementIterator$)}
{/@EJD-ElementIterator()}
{/EJD-DataOK(jdat)}
Ausgabe:
firstName : Rack
lastName : Jackson
gender : man
age : 24
address : object
streetAddress : 126
city : San Jone
state : CA
postalCode : 394221
phoneNumbers : array
4. Beispiel für das Laden der technischen Antwort des Zahlungsdienstleisters Paymorrow
Verwendung auf Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) (Zugriff auf einzelne Felder per JSON-Schnittstelle):
<!-- LoadJSON GetPaymentToken (es wird versucht die technische Antwort des Paymorrow-Systems einzulesen) -->
~EJD-LoadData(intern,PaymorrowGetPaymentTokenResponse,paym_get)~
<!-- Technische Antwort des Paymorrow-Systems konnte eingelesen werden (und es kann innerhalb dieses Bereichs darauf zugegriffen werden) -->
{EJD-DataOK(paym_get)}
<!-- Zugriff auf ResponseID -->
~EJD-DA-Value(getPaymentTokenResponse.responseId,paym_get)~
{/EJD-DataOK(paym_get)}
{!EJD-DataOK(paym_get)}
Technische Antwort des Paymorrow-Systems konnte nicht eingelesen werden. Fehlercode: ~EJD-DataOK(paym_get)~
{/!EJD-DataOK(paym_get)}
<!-- LoadJSON Authorize -->
~EJD-LoadData(intern,PaymorrowAuthorizeByRefResponse,paym_aut)~
{EJD-DataOK(paym_aut)}
Technische Antwort des Paymorrow-Systems konnte eingelesen (und es kann innerhalb dieses Bereichs darauf zugegriffen) werden
{/EJD-DataOK(paym_aut)}
{!EJD-DataOK(paym_aut)}
Technische Antwort des Paymorrow-Systems konnte nicht eingelesen werden. Fehlercode: ~EJD-DataOK(paym_aut)~
{/!EJD-DataOK(paym_aut)}
5. Beispiel Payload für ASSE erstellen: Vergleich zwischen DC-FPX_append und JSON
Diese beiden Code-Beispiele zeigen die Unterschiede beim Zusammenstellen der Payload ("ViewContent"), die mit ASSE-Fire an externe Systeme übermittelt wird.
Wegweiser: Asynchronous-Server-Side-Events
Beispiel mit DC-FPX_append:
~DC-FPjsonResult_set({"data":[{)~
~DC-FPjsonResult_append("event_name": "ViewContent")~
{CAT-Data}
~DC-FPjsonResult_append(,"contents": [)~
~DC-Int3_set(0)~
{@PR-Data}
~DC-Int3_inc~
{!DC-Int3(1)}~DC-FPjsonResult_append(,)~{/!DC-Int3(1)}
~DC-FPjsonResult_append({)~
~DC-FPjsonResult_append("id": "$PR-ProdIndex$")~
~WS-DisablePriceAndNumberFormat~
~DC-FPjsonResult_append(,"item_price": $PR-Price$)~
~WS-EnablePriceAndNumberFormat~
~DC-FPjsonResult_append(})~
{/@PR-Data}
~DC-FPjsonResult_append(])~
{/CAT-Data}
~DC-FPjsonResult_append(}]})~
<!-- Ausgabe (optional) -->
~DC-FPjsonResult~
<!-- Auslösen der Übertragung -->
~ASSE-Fire(<ID>,$DC-FPjsonResult$)~
Beispiel mit JSON-Tags:
~EJD-CreateNewData(jdat)~
{EJD-DataOK(jdat)}
~EJD-DA-SetToEmptyArray(data,jdat)~
~EJD-DA-ArrayExtend(data,jdat)~
~EJD-DA-SetToEmptyObject(data[0],jdat)~
~EJD-DA-SetStringValue(data[0].event_name,ViewContent,jdat)~
{CAT-Data}
~EJD-DA-SetToEmptyArray(data[0].contents,jdat)~
~DC-Int1_set(0)~
{@PR-Data}
~EJD-DA-ArrayExtend(data[0].contents,jdat)~
~EJD-DA-SetToEmptyObject(data[0].contents[$DC-Int1$],jdat)~
~EJD-DA-SetStringValue(data[0].contents[$DC-Int1$].id,$PR-ProdIndex$,jdat)~
~WS-DisablePriceAndNumberFormat~
~EJD-DA-SetRealValue(data[0].contents[$DC-Int1$].item_price,$PR-Price$,jdat)~
~WS-EnablePriceAndNumberFormat~
~DC-Int1_inc~
{/@PR-Data}
{/CAT-Data}
{/EJD-DataOK(jdat)}
<!-- Ausgabe (optional) -->
~EJD-RawDataOutput(jdat)~
<!-- Auslösen der Übertragung -->
~ASSE-Fire(<ID>,$EJD-RawDataOutput(jdat)$)~
Beide Code-Beispiele erzeugen auf der Produktübersichtsseite (ws_category.htm) ein JSON-Objekt mit den Indizes und Preisen der Produkte, die in der Kategorie enthalten sind.
Beispiel der Ausgabe:
{ "data": [
{ "event_name": "ViewContent",
"contents": [
{ "id": "20002", "item_price": 37.95 },
{ "id": "72727", "item_price": 59.95 },
{ "id": "85165", "item_price": 39.95 },
...
{ "id": "88163", "item_price": 19.95 }
]
}
] }
Der Vorteil der Umsetzung mit den JSON-Tags ist, dass alle Klammern für die Verschachtelungen vom Shop erzeugt werden.
6. CMS-Inhalte über JSON-Schnittstelle in den Shop integrieren
Wie Sie mithilfe der JSON-Schnittstelle Inhalte aus Content-Management-Systemen in den Shop integrieren, erfahren Sie im Kapitel Wegweiser: Integration eines CMS