Aktuelles / BlogAktuelles / Blog

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Weitere Informationen zu Contentpapst Weitere Informationen zum CP::Shop

Neueste Beiträge


Entwickler-Blog: Tipps & Tricks

<< zum vorherigen Eintragzum nächsten Eintrag >>

Quicktipps: Grafische Preisdarstellung, Blättern ohne Neuladen per AJAX und Webfonts (Do, 24.03.2011)

Erfahren Sie in diesem Beitrag u.a., wie Sie die Preise der Artikel in der Shop-Software CP::Shop als Grafik anzeigen können, wie auf der Webseite/im Online-Shop zwischen den einzelnen Seiten ohne Neuladen geblättert werden kann und wie Sie über die Google Web Fonts zusätzliche Schriftarten zur Gestaltung der Webseite verwenden können.

Shop-Software CP::Shop: Preise der Artikel als Grafik anzeigen

Die Preise der Artikel werden standardmäßig als Text ausgegeben und dann wie die restlichen Elemente des Online-Shops per Cascading Style Sheets (CSS) gestaltet, wodurch eine weitestgehend individuelle und zugleich browserübergreifend identische Darstellung möglich wird (u.a. Schriftart, Größe, Farbe). Soll die Darstellung der Preise jedoch um spezielle Effekte erweitert werden, für die CSS keine Unterstützung bietet bzw. die noch nicht in allen modernen Browsern unterstützt werden (CSS3), so können stattdessen mit einer einfachen Anpassung Grafiken für die Preise genutzt werden.

Shop-Software CP::Shop: Preise als Grafik anzeigen (Anklicken zum Vergrößern) Individuelle Schriftarten über die Google Web Fonts I (Anklicken zum Vergrößern) Individuelle Schriftarten über die Google Web Fonts II (Anklicken zum Vergrößern)

Dabei wird pro Zahl + Dezimaltrennzeichen/Komma eine eigene Grafik benötigt. Diese Grafiken sollten gleich hoch sein, die Breite kann variieren. Die einzelnen Grafiken sollten im eigenen Vorlagenset abgelegt werden, z.B. im Ordner "/themes/[VORLAGENSET]/images/layout/". In folgendem Beispiel sehen Sie, wie in der Vorlage für die Detailansicht der Artikel die Ausgabe des Bruttopreises über den {cp:tag} "{cp:shop:price:taxprice}" durch die grafische Darstellung ersetzt werden kann:

Die Grafiken müssen dafür als "number_1.png" usw. bzw. "number_decimal.png" im angegebenen Ordner hinterlegt werden. Beachten Sie, dass beim vermehrten Einsatz von Grafiken sich jedoch die Ladezeit beim erstmaligen Aufruf verlängern kann, daher sollte diese Möglichkeit nur genutzt werden, wenn eine Anpassung der Darstellung per HTML/CSS nicht möglich ist.

Schneller Laden per AJAX: Vor-/Zurückblättern ohne ein Neuladen der Seiten

Aus dem Administrationsbereich kennen Sie bereits einen der Vorteile des Einsatzes von AJAX: Es muss nicht zwingend die gesamte Seite neu geladen werden, um einzelne Inhalte beim Klick auf Links oder andere Elemente zu aktualisieren. Besonders vorteilhaft ist dies z.B. beim Blättern in mehrseitigen Auflistungen, wenn sich jeweils nur der Inhaltsbereich ändert und die restlichen Inhalte identisch sind. Auch im öffentlichen Bereich Ihrer Webseite können Sie diese Möglichkeit nutzen, wenn Sie eine aktuelle Version der standardmäßigen Vorlagensets einsetzen. Dafür müssen Sie einen Link folgendermaßen erweitern:

Bei der Verarbeitung der Vorlage wird die Angabe für die CSS-Klasse über "class" standardmäßig ersetzt durch "contentpapst_content_load". Beim Klick auf einen derart gekennzeichneten Link wird das standardmäßige Verhalten des Browsers unterdrückt und es wird nicht die dort angegebene Webseite aufgerufen. Handelt es sich um einen Inhalt aus Contentpapst/CP::Shop, so wird stattdessen die angegebene Seite per AJAX geladen und nur der Inhaltsbereich wird aktualisiert. Die Aktualisierung des Inhaltes wird für den Besucher verdeutlicht, indem zum Anfang der Seite zurückgesprungen und während der Verarbeitung der Inhaltsbereich halbtransparent dargestellt wird.

Das Vor-/Zurückblättern in Auflistungen per AJAX empfiehlt sich vor allem bei sehr umfangreichen Webseiten. Sie können Ihren Besuchern damit das Navigieren zwischen vielen Einträgen stark erleichtern. Testen Sie dies direkt hier im Blog.

Mit den Google Web Fonts individuelle Schriftarten auf der Webseite nutzen

Während man bei der Gestaltung von Webseiten und Online-Shops bislang nur die Wahl zwischen einer Handvoll standardmäßiger Schriftarten hatte, die in verschiedenen Browserns bzw. unter verschiedenen Betriebssystemen unterstützt wurden (Arial, Verdana, Tahoma etc.), können mit Lösungen wie den "Google Web Fonts" mittlerweile auch zahlreiche weitere Schriftarten genutzt werden. Bei den Google Web Fonts werden auf den jeweiligen Browser zugeschnittene Cascading Style Sheets (CSS) für einzelne Schriftarten bereitgestellt, wodurch eine möglichst breite Browserkompatibilität gewährleistet wird.

Einmal auf einer Seite eingebunden, können die Google Web Fonts anschließend für alle Textelemente oder auch nur selektiv eingesetzt werden, z.B. nur für die Überschriften oder die oben angesprochenen Preise im Online-Shop. Der Kreativität sind mit diesen neuen Möglichkeiten für die Schriftarten nun keine Grenzen mehr gesetzt. Die standardmäßigen Schriftarten können weiterhin als Fallback genutzt werden, sofern ein alter Browser ein dynamisches Nachladen von Schriftarten per CSS nicht unterstützt.


Blog-Eintrag kommentieren

Um einen Kommentar zu diesem Beitrag zu verfassen, können Sie sich im folgenden Formular entweder manuell mit Benutzername und Email-Adresse identifizieren oder aber Sie loggen sich über ein vorhandenes Profil bei Facebook, Twitter, OpenID etc. ein. Auf Wunsch haben Sie die Möglichkeit, sich automatisch über weitere Kommentare informieren zu lassen.

<< zurück

Weitere Einträge in der Kategorie "Tipps & Tricks"