Sehr geehrte Kunden,
heute möchten wir Ihnen ein neues Feature für Ihren Shop vorstellen, den Währungsrechner. Der Währungsrechner bietet Ihren Kunden die Möglichkeit in der Artikeldetailanzeige die angegebenen Preise der Artikel in andere Währungen umzurechnen. Dabei wird beim ersten Aufruf immer der in der Datenbank hinterlegte Preis ggf. auch mit Rabatt angezeigt. Dieser kann dann beliebig umgerechnet werden. Auch die Ausgangswährung lässt sich dabei verändern ebenso wie der Ausgangspreis. Sobald Sie eine Währung auswählen, wird der Preis automatisch berechnet und angezeigt.
Neben den folgenden Screenshots, bieten wir Ihnen an, sich das ganze auch Live auf einer Testinstallation anzusehen.
Nutzen Sie hierzu bitte folgenden Link: Powergap-Shop
Screenshots der Responsive - Version
Der Währungsrechner wird als aufklappbarer Button angezeigt. Mit einem Klick auf "Währungsrechner" öffnen Sie den Inhalt.
Nachdem sich der Inhalt ausgeklappt hat, sehen Sie 4 Felder. Links, der Artikelpreis und die Auswahl der Ursprungswährung. Hier können Sie auch eine andere Währung als Euro angeben.
Rechts ist das Feld mit dem berechneten Preis noch leer, um dies zu berechnen kann zB. Rechts eine Währung ausgewählt werden, in die umgerechnet werden soll.
Sobald eine Änderung am Artikelpreisfeld oder den Währungen gemacht wird (also eine Auswahl getroffen wird), wird das Feld Rechts den berechneten Preis anzeigen.
Screenshots der Nicht Responsive - Version
Um dieses Feature zu nutzen, müssen Sie es folgendermaßen implementieren:
Schritt 1 - CSS einbinden
Über "Layout" > "Schriften / CSS" > "ALL(ROOT)" - muss der folgende CSS Code eingebunden werden. Je nachdem welche Version Sie nutzen (Responsive / Nicht Responsive) wählen Sie den entsprechenden Code und fügen ihn ein.
Hierbei steht es Ihnen frei ob Sie unseren Beispiel CSS Code nehmen oder diesen nach Ihren Wünschen anpassen.
Responsive CSS - Screenshot:
Responsive CSS - Code-Block zum einfügen:
#waehrungs_collapsible {cursor: pointer;padding: 10px;width: 100%;height: 40px;border: none;text-align: center;outline: none;font-size: 15px;}
.waehrungs_collapsible:after {font-size: 13px;color: white;float: right;margin-left: 5px;}
#ergebnis_der_umrechnung{margin-top: 25px;margin-bottom: 25px;}
#waherungsrechner_titel{color: white;}
#waehrungs_icons{transition:all .3s;opacity:1;}
#waehrungs_icons:hover{opacity:.5;}
Nicht Responsive CSS - Screenshot:
Nicht Responsive CSS - Code-Block zum einfügen:
.waehrungs_collapsible {background-color: #000;color: white;cursor: pointer;padding: 10px;width: 100%;border: none;text-align: center;outline: none;font-size: 15px;transition:all .3s;opacity:1;}
.waehrungs_collapsible:after {font-size: 13px;color: white;float: right;margin-left: 5px;}
#waehrungs_icons{transition:all .3s;opacity:1;}
#waehrungs_icons:hover{opacity:.5;}
Schritt 2 - Währungsrechner einbinden
Über "Layout" > "Artikelanzeige" > "Template" > "Pflege" > "Standard" - finden Sie den Code zur Artikeldetailanzeige.
Hier muss folgendes Codestück eingefügt werden:
Wie Sie auf dem Bild sehen können, ist in unserem Beispiel der Währungsrechner direkt unter dem " #basket ".
Selbstverständlich können Sie die Position auch selbst bestimmten.
Natürlich sollte ein Währungsrechner auch in verschiedenen Sprachen selbsterklärend funktionieren und deswegen geben wir Ihnen die Möglichkeit, die angezeigten Texte in anderen Sprachen anzeigen zu lassen, je nachdem ob Ihre Kunden zB. gerade auf den Französischen, Englischen oder Deutschen Seiten unterwegs sind.
Werden die Synonyme nicht gepflegt, wird der Text standardmäßig auf Deutsch (wie im Beispiel zu sehen) ausgegeben.
Schritt 3 (Optional, wenn Sie andere Sprachen verwenden möchten) - SpracheinstellungenDie Übersetzungen lassen sich über - "Rotes T" > "Synonyme / Var. Basket" - einrichten.
Um neue Synonyme hinzuzufügen klicken Sie wie auf dem Bild oben auf "Synonym anlegen".
Hier müssten drei neue Synonyme angelegt werden:
calc_error
cur_calc
Beim Anlegen verwendet Sie bitte bei ID nur folgendes: zB. " calc_ausgabe ".
Anschließend klicken Sie in die Felder für die Sprachen und können diese dann mit den entsprechenden Übersetzungen füllen.
Beispielübersetzungen:
| calc_ausgabe | calc_error | cur_calc |
|---|---|---|
| entsprechen | Ungültige Eingabe... | Währungsrechner |
| correspond to | Invalid input... | Currency calculator |
| ... | ... | ... |
Sollten Sie noch Fragen oder Probleme bei der Einbindung haben, helfen wir Ihnen natürlich gerne weiter.