Materialien BestPrice-Order-Modul
Hier stellen wir Ihnen ein Beispiel-Template für die Bestellfunktion des BestPrice-Order-Moduls zur Verfügung. Passen Sie dieses an Ihr Shop-Design an und beachten Sie die untenstehende Tabelle, um die Anzeige des Preisstaffel-Diagramms zu konfigurieren.
Wegweiser: BestPrice-Order-Modul
Referenz: E-BP-Tags
Hinweise zur Integration
HTML-Integration
Dieses Plugin wurde im Framework Solid.js geschrieben und nutzt das HTML-Element canvas, um das Diagramm darzustellen. Daher ist es notwendig, ein canvas-Element im Template einzubinden.
Die Höhe und Breite des canvas-Elements wird durch das JavaScript-Modul berechnet und ersetzt.
Die Berechnung der Höhe und Breite ist abhängig vom Style des Parents-Elements.
JavaScript Integration
Es besteht aus zwei Script-Tags:
▪JavaScript-Modul ws-best_price_modul_1.0.0.js
▪Konfiguration und Ausführung des JavaScript-Moduls
Beispiel-Template
<html>
<head>
<!--Head Elements-->
</head>
<body>
{WS-Include}
<script src="/$WS/ws_sysdata/js/ws-best_price_modul_1.0.0.js"></script>
<script type="text/javascript">
function ws_AJAXloadProductStart(){}
function ws_AJAXloadProductError(){}
function ws_AJAXloadProductResponseSuccess(){}
function ws_AJAXloadProductResponseError(){}
function reloadinfos(value) {
~WS-DisableAmpersandLinkEncoding~
ws_AJAXloadTemplate("~PR-Link($PR-ProdIndex$)~&amount=" +value, '~WS-Charset~', ws_AJAXloadProductStart, ws_AJAXloadProductError, 'ws_AJAXloadProductResponseSuccess()', 'ws_AJAXloadProductResponseError()');
~WS-EnableAmpersandLinkEncoding~
return true;
}
</script>
<h2>Bestpricemodul</h2>
<div>Startet: ~E-BP_Begin~</div>
<div>Endet: ~E-BP_End~</div>
<div style="margin-top: 50px">
<!-- Prüfung auf diverse Situationen -->
{E-BP_LOGGED-IN}<div>Ich bin gerade angemeldet</div>{/E-BP_LOGGED-IN}
{!E-BP_LOGGED-IN}<div>Ich bin gerade <strong>NICHT</strong> angemeldet</div>{/!E-BP_LOGGED-IN}
{E-BP_HAS-ADDRESS}<div>Ich habe eine Rechnungsadresse</div>{/E-BP_HAS-ADDRESS}
{E-BP_HAS-DELIVERY-ADDRESS}<div>Ich habe eine Lieferadresse</div>{/E-BP_HAS-DELIVERY-ADDRESS}
{E-BP_ACTIVE}<div>Diese Kampagne ist aktiv</div>{/E-BP_ACTIVE}
{E-BP_BEFORE-BEGIN}<div>Diese Kampagne ist noch nicht aktiv</div>{/E-BP_BEFORE-BEGIN}
{E-BP_FINISHED}<div>Diese Kampagne ist schon beendet</div>{/E-BP_FINISHED}
{E-BP_Error}<div style="color:red">~E-BP_Error~</div>{/E-BP_Error}
</div>
<!-- Anzeige des Diagramms -->
<div id="canvasContainer" style="height: 250px">
<canvas id="bulk"></canvas>
</div>
<script>
function runCanvas() {
var canvasElement = document.getElementById('bulk');
var newCanvas = newBulkBestPrice(canvasElement,{
barType:'horizontal',
progressWidth:20,
progressLineWidth:2,
progressLineColor:'black',
progressFillColor:'#6dfa36',
fontType:'normal 7pt Helvetica',
dataBar: [
~DC-Counter1_reset~
{@E-BP_PriceList}
~DC-Counter1_inc~
{!DC-Counter1(1)},
{/!DC-Counter1(1)}
{
text:'~E-BP_PriceList-Price~ \u20AC',
countStand: ~E-BP_PriceList-Amount~
}
{/@E-BP_PriceList}
],
totalMount: ~E-BP_TotalAmount~
});
}
// run on page load
runCanvas();
// run on resize of the window
window.addEventListener('resize',runCanvas);
</script>
<!-- Schritt 1: Auswahl der Variante und Menge -->
{E-BP_CAMPAIGN}
<h3>Kampagne - ~E-BP_BasicPrice~</h3>
<form action="~FORM-Template(ws_product.htm)~" method="Post" name="product">
<div>Aktueller Preis: {E-BP_CurrentPrice}~E-BP_CurrentPrice_Format~{/E-BP_CurrentPrice}{!E-BP_CurrentPrice}~PR-OrgPrice~ ~WS-CurrencySymbol~ {/!E-BP_CurrentPrice}</div>
<div>Aktuell schon bestellte Produkte: ~E-BP_TotalAmount_Format~</div>
<!-- Anzeige der Preisstaffel -->
<div style="margin-top: 50px">
<div>Preisstaffel:</div>
<div style="padding-left: 50px">
{@E-BP_PriceList}
<div>~E-BP_PriceList-Amount~ Stück: ~E-BP_PriceList-Price_Format~ ~WS-CurrencySymbol~</div>
{/@E-BP_PriceList}
</div>
</div>
<input type="hidden" name="wsbp_act" value="show_summary">
<input type="hidden" name="pi" value="~PR-ProdIndex~">
<div style="margin-top: 50px">
<input type="text" name="amount" value="{E-BP_Amount}~E-BP_Amount~{/E-BP_Amount}" onblur="reloadinfos(this.value)"/>
{E-BP_ACTIVE}
<input type="submit" value="Bestellen">
{/E-BP_ACTIVE}
</div>
</form>
{/E-BP_CAMPAIGN}
<!-- Schritt 2: Auswahl der Lieferadresse und Bestätigung der Bestellung-->
{E-BP_SUMMARY}
<h3>Summary</h3>
<form action="~FORM-Template(ws_product.htm)~" method="Post" name="product">
<!-- Wichtige Hiddenfelder -->
<!-- Aktion -->
<input type="hidden" name="wsbp_act" value="preorder">
<!-- Produktindex -->
<input type="hidden" name="pi" value="~PR-ProdIndex~">
<!-- Anzahl, die Bestellt werden soll -->
<input type="hidden" name="amount" value="~E-BP_Amount~" />
<!-- Eine OrderID um Doppelbestellungen zu vermeiden -->
<input type="text" name="orderid" value="~E-BP_OrderId~" >
<!-- Anzeige der Rechnungsadresse -->
<p style="margin-top: 50px">
<div>
<input type="radio" name="use_delivery_address" value="no" {!E-BP_HAS-DELIVERY-ADDRESS}checked{/!E-BP_HAS-DELIVERY-ADDRESS}> Liefere an Rechnungsadresse:
</div>
<!-- Anzeige von Informationen der Rechnungsadresse -->
{E-BP_BillingAddress}
<div>
Vorname:
~E-BP_Address-Firstname~
</div>
<div>
Nachname :
~E-BP_Address-Lastname~
</div>
{/E-BP_BillingAddress}
</p>
<!-- Anzeige von Informationen der Lieferadresse -->
{E-BP_HAS-DELIVERY-ADDRESS}
<p>
<div>
<input type="radio" name="use_delivery_address" value="yes" checked> Liefere an Lieferadresse:
</div>
{E-BP_DeliveryAddress}
<div>
Vorname:
~E-BP_Address-Firstname~
</div>
<div>
Nachname :
~E-BP_Address-Lastname~
</div>
{/E-BP_DeliveryAddress}
</p>
{/E-BP_HAS-DELIVERY-ADDRESS}
<div style="margin-top: 50px">
<div>
Gewählte Menge: ~E-BP_Amount~
</div>
<!-- Pflicht: User muss eine Confirm-Checkbox anwählen, damit die Bestellung ausgeführt werden kann -->
<input type="hidden" name="confirm" value="yes">
<input type="submit" value="Bestellen">
</div>
</form>
{/E-BP_SUMMARY}
<!-- Schritt 3: Bestellbestätigung -->
{E-BP_CONFIRM}
<h3>Bestätigung</h3>
<p>Danke für die Bestellung!<p>
<div>Aktueller Preis: {E-BP_CurrentPrice}~E-BP_CurrentPrice~{/E-BP_CurrentPrice}{!E-BP_CurrentPrice}~PR-OrgPrice~ ~WS-CurrencySymbol~ {/!E-BP_CurrentPrice}</div>
<div>Aktuell schon bestelle Produkte: ~E-BP_TotalAmount~</div>
<div>Ihre Bestellmenge: ~E-BP_Amount~</div>
<p style="background-color:#00FF00">
Sobald die Kampagne abgelaufen ist bekommen Sie eine E-Mail bezüglich der finalen Bestellung.
Sie können auch in ihrem Kundenkonto alle Laufende Kampagnen, zu denen Sie Vorbestellungen getätigt haben, noch einmal ansehen.
</p>
{/E-BP_CONFIRM}
<!-- Zusammenfassung aller Reservierungen von aktiven Kampagnen des Kunden -->
<div id="zusammenfassung_bestprice">
{ST-Ajax}<WS-Ajax-zusammenfassung_bestprice>{/ST-Ajax}
<p>
<table style="border-spacing: 10px;border-collapse: separate;margin-top: 50px;">
<tr>
<td>Listenpreis</td>
<td>Bestellpreis</td>
<td>Ersparnis</td>
<td>Gesamtersparnis</td>
</tr>
<tr>
<td>~E-BP_BasicPrice_format~</td>
<td>~E-BP_CurrentPrice_format~</td>
<td>~E-BP_CurrentSaving_format~</td>
<td>~E-BP_TotalSaving_format~</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Preis:</td>
<td>~E-BP_TotalPrice_format~</td>
</tr>
</table>
</p>
<p style=";margin-top: 50px;">
<div style="font-weight:bold">Reservierungen</div>
<table style="border-spacing: 10px;border-collapse: separate;">
<tr style="font-weight: bold">
<td>Produkt</td>
<td>Menge</td>
<td>Aktueller Stückpreis</td>
<td>Aktueller Gesamtpreis</td>
<td>Aktuelle Ersparnis (pro Stück)</td>
<td>Aktuelle Gesamtersparnis</td>
</tr>
{@E-BP_Orders}
{NO_PARSING}{PR-AdvData({/NO_PARSING}~E-BP_ProdIndex~{NO_PARSING})}{/NO_PARSING}
<tr>
<td>~E-BP_Name~</td>
<td>~E-BP_Amount~</td>
<td>
{E-BP_CurrentPrice}~E-BP_CurrentPrice_format~{/E-BP_CurrentPrice}{!E-BP_CurrentPrice}~PR-OrgPrice~{/!E-BP_CurrentPrice}~WS-CurrencySymbol~
</td>
<td>~E-BP_TotalPrice_format~ ~WS-CurrencySymbol~</td>
<td>~E-BP_CurrentSaving_format~ ~WS-CurrencySymbol~ </td>
<td>~E-BP_TotalSaving_format~ ~WS-CurrencySymbol~</td>
</tr>
{NO_PARSING}{/PR-AdvData({/NO_PARSING}~E-BP_ProdIndex~{NO_PARSING})}{/NO_PARSING}
{/@E-BP_Orders}
</table>
<div style="padding: 10px; padding-bottom: 0px; border-top: 1px solid black">
Gesamtpreis aller Reservierungen: ~E-BP_CompletePrice_format~ ~WS-CurrencySymbol~</div>
<div style="padding: 10px">
Gesamtersparnis aller Reservierungen: ~E-BP_CompleteSaving_format~ ~WS-CurrencySymbol~
</div>
<div style="padding: 10px; padding-bottom: 0px; border-top: 1px solid black">
Gesamtpreis aller Reservierungen + aktueller Reserviervorgang: ~E-BP_NewCompletePrice_format~ ~WS-CurrencySymbol~
</div>
<div style="padding: 10px">
Gesamtersparnis aller Reservierungen + aktueller Reserviervorgang: ~E-BP_NewCompleteSaving_format~ ~WS-CurrencySymbol~
</div>
{ST-Ajax}</WS-Ajax-zusammenfassung_bestprice>{/ST-Ajax}
</div>
</table>
</p>
{/WS-Include}
</body>
</html>
Konfiguration des Preisstaffel-Diagramms
Name |
Type |
Parent |
Beschreibung |
barType |
String <horizontal|vertical> |
root |
Anzeige des Diagramm-Balkens (horizontal oder vertikal) |
progressWidth |
Number |
root |
Breite des Diagramm-Balkens |
ProgressLineWidth |
Number |
root |
Linienbreite des Diagramm-Balkens |
ProgressLineColor |
String <text|hex|rgb> |
root |
Linienfarbe des Diagramm-Balkens |
progressFillColor |
String <text|hex|rgb> |
root |
Hintergrundfarbe des Diagramm-Balkens |
fontType |
String < type & size & font_name> |
root |
Typ, Größe und Schriftart |
TotalMount* |
Number |
root |
Aktuelle Anzahl der bestellten Produkte |
dataBar* |
Array |
root |
Muss ein oder mehrere Objekte enthalten. |
text* |
String |
dataBar[Obj] |
Anzeige des Texts im Diagramm. |
countStand |
Number |
dataBar[Obj] |
Positionierung und Anzeige der Menge und des zugehörigen Preises im Diagramm. |
Parameter mit Sternchen * sind notwendig. Alle anderen Parameter sind optional.