nopcart in RapidWeaver einbauen

Prinzipiell kann man nopcart mit jeder RapidWeaver Vorlage verwenden. Da ich jedoch einige Spezialitäten eingebaut habe (z.B. mediabox, Validierung des Formulars, AJAX, …), funktioniert die mitgelieferte Version nur mit Vorlagen, welche das mootools Framework in Version 1.1 einsetzen und mediabox schon per se eingebaut ist. Bei folgenden von mir entwickelten Vorlagen ist das der Fall:
Diamond, POP, Sphere, Konzern

Natürlich können Sie auch mootools (V 1.1) und mediabox (standard nicht advanced) der Vorlage selber hinzu fügen. Bitte entschuldigen Sie, dass ich hier nicht näher darauf eingehen kann.

Sie finden folgende Schnippsel, welche Sie als Vorlage verwenden können:

nopcartcartcss.rwsnippet
Einfacher CSS Code, welcher die nopcart Tabelle gestaltet. Diesen Code fügen Sie dem Feld "CSS" im Page Inspector hinzu

nopcartcartpagehtml.rwsnippet
Dies ist die HTML Vorlage für die "Warenkorb" Seite. Fügen Sie diesen Beispielcode dem Hauptinhalt hinzu. Beachten Sie, dass es sich um HTML Code handelt und daher der Text auf einer Formatieren Text Seite markiert und sämtliche Stile ausgeschaltet werden sollen (über Menü Format -> Formattierung ignorieren)

nopcartcheckoutcss.rwsnippet
CSS Code für die Bestell-Seite

nopcartcheckouthtml.rwsnippet
Der beispielhafte HTML Code für die Bestellseite. Gehört in den Hauptinhalt

nopcartcheckoutjavascript.rwsnippet
Dieser Code gehört ins Javascript Feld der Bestellseite (Page Inspector). Der Code wird für die Validierung und mediabox benötigt

nopcartheaderjsinclude.rwsnippet
Dieser Code gehört in jeder Shopseite in den Kopfbereich (Page Inspector)

nopcartproductform.rwsnippet
Jedes Produkt wird per HTML Form angegeben. Dies ist eine HTML Maske eines solchen Formulars für 1 Produkt.

Einige Skripte müssen entsprechend dem Shopbetreiber angepasst werden:

checkout.php:

$youremail=
Hier muss die E-Mail Adresse eingegeben werden, an welche die Bestellung geschickt werden soll

nopcart.js
Anpassungen sind nur im Bereich "Options for everyone" vor zu nehmen (Währung, Versand, …)

Zuallererst sollten Sie mindestens 3 Seiten in RapidWeaver erstellen:

1. Produktseite
Hier werden Ihre Produkte gelistet. Es ist problemlos möglich, auch mehrere Produktseiten zu benutzen, um z.B. die Produkte zu strukturieren (z.B.: Bilder -> Fotografien -> schwarz-weiss)

2. Warenkorb-Seite
Dies ist die Seite für den Warenkorb

3. Bestell-Seite
Auf dieser Seite wird der Kunde die Bestellung per Formular abschicken

Ich gehe im weiteren Verlauf davon aus, dass Sie die Seiten nicht umbenennen (Dokument/Ordner Name im Page Inspector).

Jeder Seite müssen die folgenden Skripte hinzu gefügt werden:

nopcart.js
Die Hauptdatei, welche benötigt wird und sämtliche Funktionen zur Verfügung stellt

language_xx.js
Die Sprachdateien für den Shop. Wollen Sie den Shop in deutscher Sprache verwenden, benutzen Sie die Datei "language_de.js"

Beachten Sie, dass die Lokalisierungen von nopcart noch nicht vollständig sind. Sie werden also eventuell noch zusätzlich einige Anpassungen in den anderen Skript-Dateien (nopcart.js, checkout.php) vornehmen müssen. Meine Anpassung von nopcart benutzt Deutsch als Standardsprache. Falls Sie den Shop in Deutsch gestalten wollen, sollten als keine weiteren Anpassungen nötig sein. Sollten Sie den Shop in einer anderen Sprache aufsetzen wollen, so müssen Sie die weiteren Dateien in einem Texteditor öffnen und ändern.

[1] Fügen Sie die beiden Skripte (nopcart.js und language_xx.js) und das "Hinzufügen" Icon (cart_24x20.jpg) zu den Ressorucen aller Shop-Seiten hinzu.

Fügen Sie folgenden Code im "Kopf"-Feld im Page Inspector ein:

<script src="assets/language-ge.js"></script>
<script src="assets/nopcart.js"></script>

Jedes Produkt wird per HTML Formular in den Hauptinhalt der Seite eingebaut. Sie finden eine Vorlage des Formulars als Schnippsel beiliegend. Ein solches Formular sieht dann etwa folgendermassen aus:

<form name=order action="cart.html" onSubmit="AddToCart(this);">
    Product Description<br />
    Amount: <input type=text size=2 maxlength=3 name=QUANTITY onChange=’this.value=CKquantity(this.value)’ value="1" />
    Size: <select name="ADDITIONALINFO">
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
        </select>
<input type="image" src="assets/cart_24x20.jpg" border=0 value="Add to Cart" align=top />
<input type=hidden name="PRICE" value="12.50" />
<input type=hidden name="NAME" value="ProductName" />
<input type=hidden name="ID_NUM" value="ProductID" />
</form>

Wichtig ist die genaue Bezeichnung in den Namen Attributen:

QUANTITY: Anzahl
ADDITIONALINFO: Zusatzinformationen (z.B. Farbe, Grösse, …)
PRICE: Der Preis
NAME: Produktname
ID_NUM: Produkt ID

CSS für die Tabellengestaltung hinzu fügen:

Die Tabelle kann in nopcart individuell angepasst werden. Ich habe als Schnippsel folgenden Code als Beispiel eingefügt:

.nopheader {
    background-color: #dfdfdf;
    padding: 2px 6px;
    color: #333;
}

table {
    background-color: transparent;
    border: none;
    width: 100%;
}

table tr {
    background-color: #f0f0f0;
}

td.nopentry {
    color: #333;
}

td.noptotal * {
    font-weight: bold;
    padding: 2px 6px;
    color: #111;
}

td.noptotal {
    border-top: 2px solid transparent;
}

[1] Fügen Sie diesen Code im CSS Feld im Page Inspector ein und passen Sie es gegebenenfalls an.

[2] HTML Code hinzu fügen:
In den Hauptinhaltsbereich gehört folgender Code. Natürlich können Sie diesen noch weiter anpassen:

<!–Shopping Cart ManageCart Begin–>
<h2 style="margin-top: 20px;">Folgende Produkte befinden sich in Ihrem Warenkorb:</h2>
<p>
<FORM ACTION="checkout.html" METHOD="GET" onsubmit="return ValidateCart(this)">    
<SCRIPT>
ManageCart();
</SCRIPT>
<p><em>Verpackungsmaterial und Porto werden zusätzlich verrechnet.</em></p>
<INPUT type=SUBMIT value=" Zur Kasse " style="margin-top: 20px;">
</FORM>    
<!–Shopping Cart ManageCart End –>
<p><a href="index.html" title="Weiter Einkaufen">Weiter einkaufen</a></p>

Auch hierfür besteht ein Schnippsel.

Zu guter Letzt muss noch die Bestellseite angepasst werden:

[1] Fügen Sie folgenden Code ins JavaScript Feld ein:

function delCookie (name) {
    var expireNow = new Date();
    document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/";
}

window.addEvent(‘domready’, function(){
    $(‘mb_response’).setStyle(‘display’,'none’);
    $(‘order’).addEvent(‘submit’, function(e) {
     new Event(e).stop();
     var resp = $(‘mb_response’).empty();
    
     this.send({
     update: resp,
     onComplete: function() {
Mediabox.open(‘#mb_response’, ”, ”);
            if (!($(‘success’))) {
            delCookie(‘NumberOrdered’);
            
}

         }
     });
    });
});

[2] Fügen Sie folgenden Code ins CSS Feld ein und passen Sie diesen gegebenenfalls an:

.nopheader {
    background-color: #dfdfdf;
    padding: 2px 6px;
    color: #333;
}

table {
    background-color: transparent;
    border: none;
    width: 100%;
}

table tr {
    background-color: #f0f0f0;
}

td.nopentry {
    color: #333;
}

td.noptotal * {
    font-weight: bold;
    padding: 2px 6px;
    color: #111;
}

td.noptotal {
    border-top: 2px solid transparent;
}
tr.needed {
    color: #000;
    font-weight: bold;
}

#mb_response {
    color: #ccc;
}

[3] Fügen Sie den Beispiel-HTML Code in den Hauptinhaltsbereich ein (zu viel um hier ab zu bilden). Den Code finden Sie als Schnippsel (nopcartcheckouthtml.rwsnippet)

Ausserdem müssen Sie noch den Code für die Bestellfunktion bereit stellen. Dieser befindet sich im Dokument "checkout.php". Dieses Dokument muss zu den Ressourcen hinzu gefügt werden. Das Formular auf der HTML Seite zeigt via "action" Attribut auf diese Seite:

<form id="order" action="assets/checkout.php" method="POST" onSubmit="return CheckForm(this)" style="padding-bottom: 20px; padding-top: 20px;">

Es ist auch möglich, nopcart ohne PHP zu benutzen. Dies kann sinnvoll sein, falls der Provider PHP nicht unterstützt – was zum Beispiel bei Apple’s MobileMe der Fall ist. Es gibt mehrere Möglichkeiten, den Shop trotzdem verwenden zu können:

1. Einsatz des CGI Perl Scripts (checkout.pl)
Falls der Provider CGI Skripte unterstützt, kann anstelle von "checkout.php" dieses Skript benutzt werden. Das Skript muss in diesem Fall im CGI Verzeichnis des Providers abgelegt werden. Auf der Bestellseite muss dann im HTML Formular als Action, der Pfad zu diesem Skript angegeben werden (z.B. action="http://www.mydomain.com/cgi-bin/checkout.pl")

2. Benutzen eines Formmailers
Viele Provider bieten ein Skript zum Versenden von Formularen an. Da dies je nach Provider unterschiedlich sein kann, kann ich hier keine weiteren Angaben machen. Bitte kontaktieren Sie in diesem Fall den Support Ihres Providers. Meist wird das Formular als action auf den Formmailer zeigen (z.B. "/cgi-bin/formmail") und einige versteckte Felder müssen dem Formular hinzu gefügt werden.

3. Direkt über das E-Mail Programm des Kunden
Nicht hübsch, aber dies ist die letzte Möglichkeit: Das Formular wird direkt über das E-Mail Programm des Kunden versendet. Geben Sie in der Bestellseite beim Formular folgendes an:

<form action="mailto:you@yourdomain.com" enctype="text/plain">

wobei nach mailto Ihre E-mail Adresse eingesetzt werden soll.