Eine Warenkorb ist ein HTML-Block-Element, das mit einem ID-Attribut und der Klasse "sc-cart
" gekennzeichnet ist.
Eine Webseite kann eine oder mehrere unterschiedliche Warenkorb-Boxen.
<div id="shopcart" class="sc-cart">
</div>
Wenn die Box von pagescriptor.js erfasst wurde, wird die Klasse sc_active
hinzugefügt:
<div id="shopcart" class="sc-cart sc_active">
</div>
Artikel-Eigenschaften
pagescriptor.js erwartet für jeden Artikel mindestens diese beiden Eigenschaften:
"pid
" = Eindeutige Kennung des Artikel
"preis
" = Der Preis für den einzelnen Artikel.
Diese vordefinierten Eigenschaften können durch weitere
Artikel-Eigenschaften ergänzt weden, die selbstgewählte Namen tragen und unter diesen im
Template als Platzhalter verwendet werden: z.B. 'name
' und als Platzhalter
'%%name%%
'
"Hinzufügen"-Hyperlink
Der "Hinzufügen"-Hyperlink enthält die Klasse "sc-cart-add
" und das REL-Attribute mit dem ID-Namen des Warenkorbs, dem das Produkt hinzu2gefügt werden soll.
Ein Hinzufügen-Link muss, um einen neuen vollständigen Datensatz anlegen zu können, die
Produkteigenschaften enthalten. Die Produkteigenschaften sind in Form einer Query eingesetzt.
Deshalb müssen sie auch URL-codiert (Wikipedia: URL-Encoding;
Online URL Decoder/Encoder) werden.
<a class="sc-cart-add" href="?pid=14674&name=Grosse%20Tasche,%2040%20x%2030%20cm&color=rot&preis=19.99" rel="shopcart"> Kaufen</a>
Innerhalb des Warenkorb kann eine vereinfachte Form des Hinzufügen-Links benutzt werden. Wenn ein Artikel schon im Warenkorb liegt, reicht es nur die Artikel-ID zu übertragen:
<a class="sc-cart-add" href="?pid=14674" rel="shopcart">hinzufügen</a>
"Entfernen"-Hyperlink
Ähnlich sieht der Entfernen-Link aus, der an jeder Stelle der Seite benutzt werden kann:
<a class="sc-cart-remove" href="?pid=14674" rel="shopcart">löschen</a>
Warenkorb-Template
Das Programm liest nach dem Laden der Seiten die ersten 5 Zeilen aus der Warenkorb-Box als Template ein.
1. Zeile: Kopf, wird einmal ausgeben.
2. Zeile: Schleife, wird mit den Artikeldaten gefüllt, so oft, wie Artikel vorhanden sind.
3. Zeile: Fuss, wird einmal hinter der Schleife ausgegeben.
4. Zeile: Auswertung: wird mit den Summen - Gesamtbetrag, Anzahl Artikel...- gefüllt und einmal ausgegeben.
5. Zeile: Wenn der Warenkorb leer ist, wird nur (!) diese Zeile ausgegeben.
Im Template können folgende Platzhalter benutzt werden:
In der 2. Zeile: "%%pid%%
","%%preis%%
" und die selbstgewählten Produkteigenschaften (z.B. aus dem Beispiel oben"%%color%%
" ).
Zusätzlich kann noch der Platzhalter %%num%%
für die Anzahl dieses Artikels verwendet werden.
4. Zeile: Die Platzhalter in der Auswertung werden von pagescriptor.js automatisch berechnet:
"%%teile%%
" Summe aller Teile, "%%anzahl%%
" Summe unterschiedlicher Artikel und "%%sum%%
" mit dem Gesamtbetrag.
Der Quellcode für das Template des Beispiel-Warenkorb unten:
<h4>Warenkorb</h4><ul>
<li><a class="sc-cart-add" href="?pid=%%pid%%" rel="shopcart">+</a> / <a href="?pid=%%pid%%" class="sc-cart-remove" rel="shopcart">-</a> %%name%% (Artikelnummer: %%pid%%) %%num%% Stück x %%preis%% €</li>
</ul>
<p class="cs-sum">%%teile%% Teile, %%anzahl%% verschiedene Artikel, Summe: %%sum%% €</p>
<p>Der Warenkorb ist leer!</p>
Der Quellcode für das Template der Beispiel-Merkliste unten:
<h4>Merkliste</h4><ul>
<li>%%name%% (Artikelnummer: %%pid%%) %%preis%% €</li>
</ul>
<p>Die Merkliste ist leer!</p>
Beispiel
Wähle einen Artikel:
- Täschchen, 10 x 20 cm, Farbe: rot
Preis: 19.99 €(#14674)
Kaufen |
Merken
- Kleine Tasche, 20 x 30 cm, Farbe: blau
Preis: 9.99 €(#1891)
Kaufen |
Merken
- Grosse Tasche, 40 x 30 cm, Farbe: gelb
Preis: 40.00 €(#00545)
Kaufen |
Merken
Warenkorb
- + / - %%name%% (Artikelnummer: %%pid%%) %%num%% Stück x %%preis%% €
%%teile%% Teile, %%anzahl%% verschiedene Artikel, Summe: %%sum%% €
Der Warenkorb ist leer!
Merkliste
- %%name%% (Artikelnummer: %%pid%%) %%preis%% €
Die Merkliste ist leer!