Suchergebnisse: templates

ältere Beiträge

Templatesystem (PHTML-Dateien)

Templatesystem (PHTML-Dateien)

Da wpShopGermany als Plugin und nicht als Shoptheme eingesetzt wird, werden entsprechende Hürden automatisch gesetzt. Denn wpShopGermany generiert Ausgaben (Produktansichten, Warenkorb, Widgets, etc), welche formatiert werden müssen. Diese Ausgaben sind vollständig anpassbar.

Im Grunde muss man unterscheiden, was man konkret anpassen möchte: Texte und Wörter oder komplette HTML-Darstellungen. Beides wird entsprechend kompatibel von wpShopGermany getrennt voneinander verarbeitet. Mit Hilfe des WordPress Plugins Loco Translate können sämtliche wpShopGermany-Texte oder nur einzelne Wörter angepasst werden. Somit lässt sich nicht nur eine komplett andere Sprache anlegen und nutzen, sondern man kann auch nur einzelne Wörter anpassen, ohne direkt den Code editieren zu müssen. Spätestens beim nächsten Update wissen Sie das Feature zu schätzen, wenn Sie keine der PHTML-Dateien auf Änderungen überprüfen müssen, da alles in einer Sprachdatei steht, die bei einem Update nicht überschrieben wird.

Die HTML-Ausgabe Templates liegen alle im wpShopgermany Ordner „views/“. In nahezu jedem Template steht in den oberen Zeilen ein Kommentar, welcher beschreibt was das Template konkret macht, sofern es nicht schon anhand des Namens erkenntlich ist. Die Template Dateien haben alle als Dateiendung „phtml“. Denn sie sind nicht nur reine HTML-Dateien, sondern können auch (für den Fortgeschrittenen Anwender) PHP-Code ausführen, sofern dies erforderlich ist. Damit wird eine extreme Flexibilität geschaffen, um Ansichten nach jedem Geschmack anzupassen.
Mit der Verwendung des Ordners “user-views” können angepasste PHTML-Dateien updatesicher genutzt werden.

Weiterführende Informationen:

Unterschiede der Templates erkennen

Jeder der in der Vergangenheit sein Template an die persönlichen Bedürfnisse angepasst hat,  wird vor jedem wpShopGermany-Update gezittert haben. Durch Updates kommen stets Neuerungen, Verbesserungen oder Bugfixes in das System, welche wiederum teilweise durch die Templates ausgegeben werden können. Je größer eine Anpassung war, umso größer war der Aufwand bei einem Update. Zwar haben wir im Changelog stets die Dateien aufgelistet, die geändert wurden, aber das ist für einen Entwickler nur die halbe Miete. Für wpShopGermany 3 gibt es jetzt eine Verbesserung.

(mehr …)

eigene Layoutanpassungen: PHTML-Templates richtig verwenden

Jede Darstellung der Produkte in wpShopGermany wird durch PHTML-Templates gesteuert. Diese Dateien sind im Grunde HTML-Dateien, welche auch PHP-Code enthalten und ausführen dürfen (nicht: müssen!). Der enthaltene HTML-Code kann mit Hilfe von CSS an die eigenen Bedürfnisse angepasst werden. Alle PHTML-Dateien liegen im Plugin-Ordner /wp-content/plugins/wpshopgermany/views/. In der wpShopGermany-Templateübersicht werden alle verwendeten Templates aufgelistet.

Möchte man ein Template individuell anpassen, so kann man es direkt editieren.

Besser und Update-resistent ist folgende Methode:

Legen Sie einen neuen Ordner /wp-content/uploads/wpsg/user_views/ an, und kopieren sie die zu editierende Datei samt Pfad in diesen Ordner. Bei Updates werden alle Dateien im Ordner views/ überschrieben. Der Ordner user_views/ bleibt unverändert.
Soll z.B. das wpShopGermany-Widget verändert werden, kopieren Sie es von views/Warenkorb/index.phtml nach /wp-content/uploads/wpsg/user_views/Warenkorb/index.phtml und editieren es dort erst.
Kopieren Sie niemals den kompletten Ordner views/ nur um einige Änderungen vorzunehmen, kopieren Sie immer nur die Datei, die Sie bearbeiten wollen!

Rechnungsmodul Mailtemplates

PDF-Template

Ab Version 2.0.0 liegt das Mail-Template im Dateisystem unter:
\wp-content\plugins\wpshopgermany\views\mods\mod_rechnungen\rechnungsmail.phtml

Die Generierung des PDF Dokumentes kann in der unten angegebenen Datei angepasst werden:

wp-content/plugins/wpshopgermany/views/mods/mod_rechnungen/rechnung_pdf.phtml

Um das System auch weiterhin updaten zu können sollte die Datei nach

wp-content/uploads/wpsg/user_views/mods/mod_rechnungen/rechnung_pdf.phtml

verschoben werden (Ordner müssen ggf. angelegt werden). Diese wird dann bei einem Update nicht überschrieben und Ihre persönlichen Änderungen bleiben erhalten.
Bei dem Dateityp *.phtml handelt es sich um eine HTML Datei mir eingebetten PHP Code und diese kann mit einem Editor Ihrer Wahl beliebig verändert werden.
Das Briefpapier welches hochgeladen werden kann, dient als Hintergrund für das PDF. Das Briefpapier wird dabei auf eine DIN A4 Seite gestreckt, es sollte also im Seitenverhältnis von 210/297mm vorliegen.
Das Logo wird an der rechten oberen Ecke des PDF Dokumentes platziert und mit einer Auflösung von 96dpi unter Beachtung des Seitenverhältnisses angezeigt.

Achtung! Versionen kleiner 2.0.0 nutzen ein anderes Verfahren zur Generierung der Mailtemplates.

Das Template heißt “Mailtemplate (Rechnung)” und kann unter Konfiguration -> Templates bearbeitet werden. Das Template sieht standardmäßig wie folgt aus:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Hallo ###vname### ###name###,

Sie erhalten hiermit die Rechnung in Höhe von ###betrag### € für Ihre Bestellung mit der Bestellnummer ###o_id###.

Mit freundlichen Grüßen

Ihr wpShopGermany Team

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Die Bezeichnungen ###vname###, ###name###, ###betrag### und ###o_id### dienen hierbei als Platzhalter und werden bei der Generierung mit den entsprechenden Werten gefüllt.

Um den Mailversand vom WordPress-eigenen php-Mailer auf SMTP umzustellen, wird empfohlen, ein WordPress-PlugIn dafür zu nutzen (z.B.: WP Mail SMTP).

Übersicht der PHTML-Dateien (HTML-Templates)

Mit wpShopGermany ist es möglich seine Produkte out-of-the-box anzubieten. Wer mehr möchte benötigt HTML-Kenntnisse, denn mit wpShopGermany ist es möglich jede Ansicht akribisch genau selbst zu definieren (ganz nach Kenntnisstand). Die Dateien liegen im Ordner /wp-content/plugins/wpShopGermany/views/. Möchte man eine Datei abändern, so kopiert man sie inklusive Pfad in den Ordner /wp-content/uploads/wpsg/user_views/. Dieser Ordner wird bei einem Update nicht überschrieben und alle Änderungen bleiben erhalten. Dennoch sollte man bei einem Update überprüfen, welche Dateien sich geändert haben und die Änderungen in seinem user_views-Ordner übernehmen. Falsche Anzeigen und fehlerhafte Bestellungen wären sonst die Folge!

Es geht sogar noch mehr! Die PHTML-Dateien lassen den Einsatz von PHP zu. Somit können im Shop dynamische Anfragen erstellt oder generiert werden. Probieren Sie es aus!

Eine Übersicht aller Dateien aus dem views/-Ordner geben wir in unserem WebSVN. Dort haben Sie nicht nur die Möglichkeit alle Dateien einzusehen, sondern auch alle gemachten Änderungen (Revisionen vergleichen).

WebSVN

 

veraltet:

Nachfolgend die Liste der Dateien und Ordner aus /wp-content/plugins/wpShopGermany/views/ für wpShopGermany2:

  • Admin/
    Admin-Backend

    • adminHead.phtml
    • deinstall.phtml
    • index.phtml
    • index_modul.phtml
    • lizenz.phtml
    • modul.phtml
    • module.phtml
    • mwst.phtml
    • pages.phtml
    • zugriff.phtml
    • template.phtml
    • land.phtml
  • mods/
    • mod_attribute/
      Produktattribute
    • mod_auftragsbestaetigung/
      Mailtext für manuelles versenden der Auftragsbestätigung
    • mod_bankeinzug/
      Zahlungsart Bankeinzug
    • mod_cab/
      Zahlungsart clickandbuy
    • mod_downloadprodukt/
      Typ: Downloadprodukt

      • produkt_addedit.phtml
        Admin-Backend
      • zahlung_downloadprodukt.phtml
        Mail nach Zahlungseingang
    • mod_gutschein/
      Admin Texte
    • mod_kundenkontakt/
      Admin Texte

      • templates/
        frei verfügbare Templates für Mail im Backend

        • zahlungserinnerung.phtml
        • zahlungsaufforderung.phtml
      • orderView.phtml
        Ansicht für Backend
    • mod_kundenlogin/
      • buyed.phtml
        “Gekauftes” – Bestellübersicht im Frontend
      • checkoutLogin.phtml
        Eingabe des Logins innerhalb des Checkouts (checkout.phtml)
      • checkoutPwd.phtml
        Eingabe des Passworts innerhalb des Checkouts (checkout.phtml)
      • index.phtml
        Admin-Backend: Kundenverwaltung
      • login.phtml
        Login-Seite (im ausgeloggten Zustand)
      • mail_newPwd.phtml
        Opt-In Mail, wenn neues Passwort angefordert
      • mail_newPwdSend.phtml
        Mail, wenn Passwort erhalten
      • profil.phtml
        Login-Seite / Benutzerdaten, Adresse (im eingeloggten Zustand)
      • view.phtml
        Kundeneinzelansicht im Admin-Backend
    • mod_land/
      Versandzonenauswahl im Backend
    • mod_mail/
      Allgemeine Mailtexte

      • mail_admin.phtml
        Bestellbestätigung an Verkäufer
      • mail_besteller.phtml
        Bestellbestätigung an Besteller
      • mail_statusaenderung.phtml
        Statusänderung
    • mod_paypal/
      Zahlungsart Paypal
    • mod_prepayment/
      Zahlungsart Vorauskasse

      • do.phtml
        Anzeige in Ausführungsbestätigung do.phtml (Warenkorb)
      • mail.phtml
        Block in Bestellbestätigung
    • mod_produktauswahl/
      Admin-Backend: RTE
    • mod_produktbilder/
      • produkt_addedit.phtml
        Admin-Backend: Bild hinzufügen/Upload/Anzeige
      • produktbild.phtml
        Frontend-Anzeige der Produktbilder
    • mod_produktgruppen/
      • add.phtml
        Admin-Backend: neue Gruppe
      • index.phtml
        Admin-Backend: Produktgruppenübersicht
      • list.phtml
        Frontend: Produktgruppenansicht
      • produkt_addedit.phtml
        Admin-Backend: Produkt bearbeiten
      • show.phtml
        Frontend: einzelne Produktgruppe
    • mod_produktvars/
      Produktvariablen

      • basketrow.phtml
        Anzeige unter Produkt in Warenkorb (basket.phtml)
      • orderrow.phtml
        Anzeige in Bestellübersicht im Admin-Backend
      • overviewrow.phtml
        Anzeige unter Produkt in Bestellzusammenfasung (overview.phtml)
      • produkt_addedit.phtml
        ergänzt Admin-Backend: Produkt anlegen
      • mail.phtml
        Anzeige in Bestellmails
    • mod_rechnungen/
      kostenpflichtiges Rechnungsmodul

      • rechnungsmail.phtml
        Mailtext an Rechnungsempfänger
      • copymail.phtml
        Mailtext an Rechnungsempfänger, wenn Rechnungskopie versendet wird
      • gutschriftmail.phtml
        Mailtext an Gutschriftempfänger
      • texte.phtml
        Admin-Backend
      • rechnung_pdf.phtml
        Formatierung des Rechnungsbogens (PDF)
    • mod_shippingadress/
      Lieferanschrift
    • mod_stock/
      Lagerbestand
    • mod_varianten/
      Produktvarianten
    • mod_weight/
      Produktgewicht
  • Order/
    Admin-Bereich

    • index.phtml
    • view.phtml
  • Produkt/
    Admin-Bereich

    • add.phtml
    • index.phtml
  • templates/
    alles was nicht in mods/ abbildbar ist

    • produkt
      Produkttemplates, für Produktpräsentation (erweiterbar)

      • standard.phtml
      • ausverkauft.phtml
      • downloads.phtml
  • Warenkorb/
    • basket.phtml
      Warenkorb (Auswahl Menge, Produktvariablen, Produkt entfernen)
    • checkout.phtml
      Adressangaben, Bestellvariablen
    • checkout2.phtml
      Zahlungsarten, Versandarten
    • do.phtml
      Ausführungsbestätigung
    • error_cookies.phtml
      Fehlemeldung, wenn kein Cookie gelesen werden kann
    • index.phtml
      Widget
    • overview.phtml
      Bestellzusammenfassung
  • global.css
    globale CSS-Datei für alle phtml-Dateien

Produkttemplates und Produktbilder

Ab Version 2.0.0 wurde das Templatesystem neu implementiert, die Templates sind jetzt unter:

wp-content/plugins/wpshopgermany/views/templates/produkt/*.phtml

zu finden. Es handelt sich bei diesen Dateien um HTML Dateien mit eingebettetn PHP- Code. Wenn sie hier ihre eigenen Ideen zur Produktdarstellung einbringen möchten, empfiehlt es sich diese Dateien nach

wp-content/uploads/wpsg/user_views/templates/produkt/*.phtml zu kopieren und die Änderungen dort vorzunehmen. Diese Vorgehensweise erlaubt auch weiterhin das Plugin zu updaten ohne das ihre persönlichen Einstellungen dabei überschrieben werden.

Als Standard wird ein Produktbild angezeigt, welches per Thickbox sich vergrößern lässt. Sind mehrere Produktbilder angegeben worden, werden diese ebenfalls in der Thickbox hintereinander angezeigt. Dabei wird zur Sortierung der Originalbildname herangezogen. Anton.jpg wird also vor Bertie.jpg angezeigt.

Wichtig: Es werden nur Bilder vom Format .jpg in vollem Umfang unterstützt!

Ein Aufruf zur Anzeige zweier Produktbilder in einem Produtkttemplate sieht jetzt wie folgt aus:

<?php echo $this->mods['mod_produktbilder']->genBild($this->data["p_id"], 1, 100, 100, 'c'); ?>
<?php echo $this->mods['mod_produktbilder']->genBild($this->data["p_id"], 2, 100, 100, 'c'); ?>

Ab Version 3.0 müssen die Funktionen wie folgt aufgerufen werden:

<?php echo $this->callMod('wpsg_mod_produktbilder', 'genBild', array($this->view['data']['id'], 1, 100, 100, 'c')); ?>
<?php echo $this->callMod('wpsg_mod_produktbilder', 'genBild', array($this->view['data']['id'], 1, 100, 100, 'c')); ?>

und entspricht dem früheren Platzhalter

###BILD_1_100_100_c###
###BILD_2_100_100_c###

Zur Erläuterung sei gesagt: Aus den vohandenen Modulen wird das Modul [wpsg_mod_produktbilder] mit der Methode “genBild” aufgerufen. Dieser werden die folgenden Parameter übergeben:

  • picture ID im Bsp = data[‘p_id’]
  • Nummer des Bildes im Bsp = 1 = das erste Bild
  • Bildbreite im Bsp = 100 (pixel)
  • Bildhöhe im Bsp = 100 (pixel)
  • Modus zur Größenanpassung im Bsp = c = C steht dabei für “CROP” und bedeutet das dass Bild auf die kürzeste Seite skaliert und dann mittig zugeschnitten wird

die weiteren Aufrufe für den Skaliermodus sind im folgenden dargestellt

S steht für “SKALIERUNG” und bedeutet, das dass Bild auf die angegebene Größe unter Beachtung des Seitenverhältnisses skaliert wird.

Z steht auch für Skalierung, hier wird aber das Seitenverhältnis nicht beachtet.

Wenn sie nur die URL zu einem skallierten Bild brauchen, so können sie folgenden Aufruf verwenden. (Das Bild wird dabei generiert und zwischengespeichert)

<?php echo $this->callMod('wpsg_mod_produktbilder', 'makeTn', array($product_id, $file, $width, $height, $mode)); ?>

Einen Array mit allen Bildern eines Produktes erhalten Sie mit folgender Funktion:

<?php $arBilder = $this->callMod('wpsg_mod_produktbilder', 'getProduktBilder', array($product_id)); ?>

Bei Versionen älter als 2.0.0 ist hier noch die veraltete Vorgehensweise beschrieben.

In den Produkttemplates kann der Platzhalter ###BILD### verwendet werden um das erste Bild des Produktes anzuzeigen. Alle weiteren Bilder werden in der Thickbox angezeigt.

Ab Version 1.3 ist es nun möglich die Bilder einzeln anzusprechen und auch die Bildgrößen zu definieren. Möchte man beispielsweise Bild 1 und Bild 2 anzeigen, so kann man die Platzhalter ###BILD_1### und ###BILD_2### verwenden.

Es ist auch möglich, die Platzhalter mit Parametern zu versenden. Die Platzhalter müssen dann mit Parametern wie folgt versehen werden:

###BILD_NR_BREITE_HOEHE_CSZ###

Beispiel: ###BILD_1_100_100_c###

NR ist die Nummer des Bildes, so wie sie im Dateisystem liegen (alphabetisch aufsteigender Dateiname)
BREITE ist die Breite des Bildes in Pixeln
HOEHE ist die Höhe des Bildes in Pixeln
CSZ ist der Modus wie das Bild an die Größe angepasst wird. (Erkärung, siehe oben)

Weitere nützliche Aufrufe bzgl. Produktbilder

  • Alle Bilder (Dateinamen) eines Produktes anhand der ProduktID ermitteln:
    <?php $arBilder = $this->callMod(‘wpsg_mod_produktbilder’, ‘getProduktBilder’, array($produkt_id)); ?>
  • URL zu dem Ordner in dem die Bilder liegen:
    <?php $url = $this->callMod(‘wpsg_mod_produktbilder’, ‘getPicPath’, array($produkt_id, true)); ?>
  • Pfad zu dem Ordner in dem die Bilder liegen:
    <?php $path = $this->callMod(‘wpsg_mod_produktbilder’, ‘getPicPath’, array($produkt_id)); ?>

Standardtemplates ab Version 1.1.0 (Stand Version 1.5.5 09.02.2011)

Da die Templates in der Datenbank liegen und von den Shopbetreibern angepasst werden können aktualisieren wir sie nicht bei einer neuen Version. Wird allerdings eine neue Funktion implementiert so sind oft neue Platzhalter im Template nötig. Aus diesem Grund haben wir hier die 3 Standardtemplates separat aufgelistet, diese können auch verwendet werden um das Original wieder herzustellen, falls Fehler bei der Anpassung gemacht wurden.

Standardtemplate

Dieses Template unterstützt alle Module und ist als Ausgangspunkt für ihre Modifikationen gedacht.

wpshopgermany_temp_standard

Stückartikel

Dieses Template ist das Standardtemplate und kann für Stückartikel modifiziert werden.

wpshopgermany_temp_stueck

Downloadprodukte

Dieses Template wurde speziell für Downloadprodukte angepasst. Ausgaben wie Varianten und Gewicht wurden hier bereits entfernt.

wpshopgermany_temp_download

Ausverkauft

Dieses Template ist für ausverkaufte Produkte gedacht. Wenn Sie es verwenden möchten muss es im Modul “Lagerbestand” ausgewählt sein.

wpshopgermany_temp_ausverkauft


Diese Templates funktionieren ab Version 1.1.0 ! und kleiner Version 2.0.0!

HTML-Templates individuell anpassen

Jede Darstellung  der Produkte in wpShopGermany wird durch PHTML-Templates gesteuert. Diese Dateien sind im Grunde HTML-Dateien, welche auch PHP-Code enthalten und ausführen dürfen (nicht: müssen!). Der enthaltene HTML-Code kann mit Hilfe von CSS an die eigenen Bedürfnisse angepasst werden. Alle PHTML-Dateien liegen im Plugin-Ordner /wp-content/plugins/wpshopgermany/views/. In der wpShopGermany-Templateübersicht werden alle verwendeten Templates aufgelistet.

Möchte man ein Template anpassen, so kann man es direkt editieren.

Besser und Update-resistent ist folgende Methode:

Legen Sie einen neuen Ordner /wp-content/uploads/wpsg/user_views/ an, und kopieren sie die zu editierende Datei samt Pfad in diesen Ordner. Bei Updates werden alle Dateien im Ordner views/ überschrieben. Der Ordner user_views/ bleibt unverändert.
Soll z.B. das wpShopGermany-Widget verändert werden, kopieren Sie es von views/warenkorb/index.phtml nach /wp-content/uploads/wpsg/user_views/warenkorb/index.phtml und editieren es dort erst.
Kopieren Sie niemals den kompletten Ordner views/ nur um einige Änderungen vorzunehmen, kopieren Sie immer nur die Datei, die Sie bearbeiten wollen!

Manchmal reicht es nicht die Produkttemplates anzupassen, wenn man z.B. den Warenkorb durch eigene Buttons verändern will etc.

Dazu bieten wir ein von Magento inspiriertes Verfahren an. Die Templates liegen in phtml Dateien vor, welche im Prinpzip HTML Dateien mit einfachem PHP-Code sind. Diese Dateien liegen unter  in /wp-content/plugins/wpShopGermany/views.

Möchte man nun beispielsweise die Darstellung des Warenkorbs verändern, so schaut man sich die Datei /wp-content/plugins/wpShopGermany/views/warenkorb/basket.phtml an. Diese ist mit HTML Kenntnissen anpassbar. Um die Datei aber nicht nach jedem Update neu anpassen zu müssen ist es möglich sie im Ordner /wp-content/uploads/wpsg/user_views/warenkorb/basket.phtml abzulegen.

Auf die gleiche Weise kann man auch css Anpassungen durchführen. Man kopiert einfach die gewünscht css-Datei aus dem Ordner /wp-content/plugins/wpShopGermany/views/css nach /wp-content/uploads/wpsg/user_views/css/ und führt dort die Anpassungen durch.

Dies hat auch den Vorteil, das sie die Orginale unverändert lassen. Sollten sie versehentlich einen Teil des Templates löschen, so können sie jederzeit die Datei in ../user_views durch die Datei in ../views ersetzen, denn alle darin enthaltenen Dateien können in ../user-views neu angepasst werden.

Selbst das Backend können sie auf diese Art und Weise ihren ganz persönlichen Ansprüchen anpassen. Jedoch sollte man beachten, dass nebne der Datei aus dem Ordner css, auch der Ordner gfx (ebenfalls in den user_views) zu kopieren ist, da verschiedene Icons sonst nicht mehr sichtbar sind und deren Möglichkeiten nicht mehr zur Verfügung stehen.

Dieses Feature ist ab Version 1.0.2 enthalten.

Produkttemplates ab Version 2.0.0

Ab Version 2.0.0 sind die Templates der Produkte auch im Dateisystem abgelegt. Die Standardtemplates liegen unter views/templates/produkt und können mit Dateien gleichen Namens unter user_views/templates/produkt überschrieben werden. Weiterhin ist es hier möglich weitere Dateien unter user_views/templates/produkt anzulegen und als Template für Produkte zu nutzen.

wpShopGermany 4.4.10

  • Bugfix: Bestellungen mit Teil – Gtuscheinen können jetzt mit PayPal zurückerstattet werden
  • Bugfix: Steuersatz 0 führt nicht zu einem Fehler beim schreiben der Rechnung
  • [Veränderte Templates]

wpShopGermany 4.4.9

ältere Beiträge