Technologie > JavaScript

Zurück

Zusätzliche Komfortfunktionen via JavaScript

Der PepperShop setzt JavaScript ein um moderne Bedien-, Design und Integrationselemente umzusetzen und um den Komfort zu erhöhen.

Ein Bestellabschluss ist auch ohne JavaScript möglich (wenn nicht ein Payment Service Provider verwendet wird, welcher in seinem Terminal JavaScript voraussetzt oder eine spezifische, auf JavaScript basierte Technologie zur Artikelauswahl aktiv ist). So kann man auch mit den einfachsten Eingabegeräten im PepperShop einkaufen.

Zusätzlich zu reinem JavaScript stellt der PepperShop auch fertige, auf JavaScript Technologie basierende, Subsysteme zur Verfügung, so dass Entwicklungen kostengünstig und schnell umgesetzt werden können.

jQuery

jQuery ist die am weitesten verbreitete JavaScript Library. Sie bietet viele nützliche und auch essentielle Funktionen, um komfortabel, effizient und Browser unabhängig Programmieren zu können.

Es gibt inzwischen eine Vielzahl von anderen JavaScript Libraries und Frameworks welche jQuery als Basis voraussetzen. Mit dem PepperShop muss man sich darum nicht mehr kümmern. Es wird jQuery direkt integriert und aktiviert mitgelierfert, dazu auch viele der jQuery-UI Widgets.

Im PepperShop stehen folgende jQuery Add-Ons zur Verfügung:

Produkt	Beschreibung
Bootstrap:	Sehr umfangreiches Framework zur Anzeige von modernem HTML5 Code
Fancybox:	Flexibles Add-On zur grafischen Visualisierung von Bildern (z.B. Zoomanzeige)
cloudzoom:	Add-On, dass erlaubt mit der Maus über ein Bild zu fahren, wo dann ein gezoomter Ausschnitt einer grösseren Version des Bildes angezeigt wird
bxSlider:	Slider Komponente zum Rendern einer animierten Fläche mit HTML-Inhalt oder Bildern
jpicker:	Sehr umfangreicher Color-Picker
qtip:	Add-On um Zusatzinfos zu einem Element anzuzeigen (Tooltipps)
selectmenu:	Add-On HTML Dropdown Menüs modern zu gestalten und auch um komplexe Elemente als Inhalte anzeigen zu können
slidemenu:	Menü-Komponente um verschachtelte, gestaltbare Menuüs zu rendern. Wird im PepperShop verwendet, wenn die Kategorien in der Hauptnavigation angezeigt werden sollen

Unabhängig von jQuery gibt es noch die JavaScript Libraries jscolor (sehr schneller Color-Picker) und Tigra Calendar (Kalender-Widget), welche die «JavaScript-Helferlein» Runde komplettieren.

Bootstrap

Bootstrap ist ein schlankes, intuitives und mächtiges Front-End Framework für schnelleres und einfacheres Web Development. Es basiert auf jQuery.

Highslide JS

Highslide JS ist ein schöner, auf JavaScript basierender Bilder / Medien und Gallery Viewer. Diese kommerzielle Library ist sehr umfangreich programmierbar (mehr noch als die Fancybox) und es gibt auch Adaptoren für die PepperShop API.

JSON-API

JSON (JavaScript Object Notation) bietet eine einfache und einheitliche Übertragungsart für JavaScript Objekte / Daten an. (Info: Ab PepperShop v.6 gibt es zudem auch eine REST basierte Webservice API als Modul)

Für den PepperShop wird mit dem Mobile PepperShop Modul ein sehr umfangreiches JSON API geschrieben, welches die kundenseitige Interaktion mit dem PepperShop aus einer anderen Applikation heraus erlaubt.

Unter anderen stehen folgende Aufrufe bereit:

API-Calls	Beschreibung
catalog get_category\|get_product:	Kategorien / Unterkategorien auslesen, Artikel einer Kategorie und Details eines Artikels auslesen
search search_product:	Artikelsuche
basket load\|save:	Warenkorb laden und speichern (z.B. wenn Anzahl geändert hat oder Produkt entfernt werden soll)
address load\|save:	Kasse / Lieferadresse: Laden und speichern
login save\|save_temp\|logout:	Login Steuerung: speichern eines Kunden mit und ohne Logindaten, abmelden
home get_infos:	Startseite: Content Auslesen (Content-Slider, Startseite HTML-Block, Artikel auf Startseite, Links auf Startseite, Detailanzeige von statischen Pages (z.B. AGB)
environment get_environment:	Umgebungsdaten auslesen und speichern, z.B. Sprache / Währung

Für viele Fälle ist aber vermutlich die PepperShop Webservice API besser geeignet: Webservices (REST API oder SOAP / WSDL)