Prestashop Vorlagenseiten

Dateistruktur für ein Thema

Wenn Sie eine Thema erstellen, müssen Sie Denk vor die verschiedenen Seiten und Informationen, die Ihr Thema hat, ordnungsgemäß zu behandeln, um Ihren Kunden ein umfassendes Erlebnis anzubieten. Hier ist wieder das Standard-Theme eine gute Möglichkeit, lassen Sie sich inspirieren, sowohl in der Vielfalt der Dateien, die es bietet und Verhaltensweisen, die es für bietet, sondern auch in ihrem Code, die Sie eintauchen können, um besser zu verstehen, wie funktioniert eine Thema.

Zuerst, hier ist die Liste der notwendigen Vorlagendateien (Spoiler-Warnung: Es gibt 60 von ihnen. Ja, alle sind notwendig, um verschiedene PrestaShop-Funktionen):

<tdKlasse "ConfluenceTd" => Reihenfolge-Adresse-Produkt-line.tpl<tdKlasse "ConfluenceTd" => bestellen-return.tpl
Dateiname
Warum ist es notwendig
Andere Vorlagendateien, die von dieser Vorlage im Standard-theme
404.php tpl Zeigt, wenn eine Datei nicht gefunden werden kann.  
Address.tpl Ermöglicht dem Kunden eine neue Adresse erstellen.
  • Errors.tpl
addresses.tpl Ermöglicht dem Kunden ihren aktuellen Adressen an.  
Authentication.tpl Ermöglicht dem Kunden zum Einloggen in ihr Konto.
  • Bestellung-steps.tpl
  • Errors.tpl
Best-sales.tpl

Zeigt die meistverkauften Produkte.

  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl
Breadcrumb.tpl  Zeigt den Kategorie-Pfad in der aktuellen Produkt/Kategorie.
  • Breadcrumb.tpl
Kategorie-Cms-Baum-branch.tpl Führt durch den CMS-Kategorien, um sie anzuzeigen.
  • Kategorie-Cms-Baum-branch.tpl
Kategorie-count.tpl Zeigt die Anzahl der Produkte in einer Kategorie.  
Kategorie-Baum-branch.tpl Führt durch die Produktkategorien, um sie anzuzeigen.
  • Kategorie-Baum-branch.tpl
Category.tpl Zeigt den Inhalt einer Kategorie: Szene, Bild, Text, Produkt-Comparator, etc..
  • Errors.tpl
  • Scenes.tpl
  • Kategorie-count.tpl
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl
  • Produkt-compare.tpl
CMS.tpl Zeigt den Inhalt einer CMS-Seite.  
Kontakt-form.tpl Zeigt das Kunden-Kontakt-Formular.
  • Errors.tpl
Discount.tpl Zeigt die Liste der Kunden-Gutscheine.  
Errors.tpl Zeigt die aktuellen Fehler.  
Footer.tpl Die Fußzeile zeigt.
  • Global.tpl
Global.tpl Definiert verschiedene Smarty-Variablen, bemerkenswertesten JavaScript sind.  
Gast-tracking.tpl Zeigt die Tracking-Seite für Gast-Kunden (Besucher mit unberücksichtigt).
  • Bestellung-detail.tpl
Header.tpl Zeigt den Header: HTML Doctype, links zu CSS-Dateien usw..
  • Breadcrumb.tpl
History.tpl Zeigt alle ihre bisher getätigten Bestellungen an den Kunden.
  • Errors.tpl
Identity.tpl Zeigt und der persönlichen Kundendaten aktualisiert.
  • Errors.tpl
Layout.tpl Fordert die wichtigsten Bausteine zum Thema: Header, Footer, Spalten, aktuellen Vorlage und Live Edit.
  • Header.tpl
  • Footer.tpl
Maintenance.tpl Zeigt eine spezielle Seite für wann der Store in der Pflege ist.  
Hersteller-list.tpl Zeigt eine Liste aller Hersteller.
  • Errors.tpl
  • NBR-Produkt-page.tpl
  • Pagination.tpl
Manufacturer.tpl Die Produkte von einem einzigen Hersteller anzeigen.
  • Errors.tpl
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl
meine account.tpl Zeigt den Kunden-Account-Seite.  
NBR-Produkt-page.tpl Zeigt die Anzahl der Produkte auf der aktuellen Seite.  
neue products.tpl Zeigt einen Block mit den neuen Produkten.
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
Bestellung-Adresse-Multishipping-products.tpl Zeigt die Adressen um ein Produkt, das in einer multishipping Situation zu liefern.
  • Bestellung-Adresse-Produkt-line.tpl
Bestellung-Adresse-multishipping.tpl  
  • Bestellung-steps.tpl
  • Errors.tpl
  • Bestellung-Adresse-Multishipping-products.tpl
   
Bestellung-address.tpl  
  • Bestellung-steps.tpl
  • Errors.tpl
Bestellung-carrier.tpl  
  • Bestellung-steps.tpl
  • Errors.tpl
Bestellung-confirmation.tpl  
  • Errors.tpl
  • Bestellung-steps.tpl
Bestellung-detail.tpl    
Bestellung-follow.tpl    
Bestellung-Opc-neue-account.tpl    
Bestellung-opc.tpl  
  • Einkaufen-cart.tpl
  • Bestellung-address.tpl
  • Bestellung-Opc-neue-account.tpl
  • Bestellung-carrier.tpl
  • Bestellung-payment.tpl
  • Errors.tpl
Bestellung-payment.tpl  
  • Errors.tpl
  • Bestellung-steps.tpl
  • Shopping-Cart-Produkt-line.tpl
 
  • Errors.tpl
Bestellung-slip.tpl    
Bestellung-steps.tpl    
Pagination.tpl    
Password.tpl  
  • Errors.tpl
Preise-drop.tpl  
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
Produkt-compare.tpl    
Produkt-Liste-colors.tpl    
Produkt-list.tpl    
Produkt-sort.tpl    
ProduktTPL  
  • Errors.tpl
  • Produkt-list.tpl
Produkte-comparison.tpl    
eingeschränkt-country.tpl    
Scenes.tpl    
Search.tpl  
  • Errors.tpl
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl
Shopping-Cart-Produkt-line.tpl    
Einkaufen-cart.tpl  
  • Bestellung-steps.tpl
  • Errors.tpl
  • Shopping-Cart-Produkt-line.tpl
Sitemap.tpl  
  • Kategorie-Baum-branch.tpl
  • Kategorie-Cms-Baum-branch.tpl
Stores.tpl    
store_infos.tpl    
Lieferanten-list.tpl    
Supplier.tpl Macht es möglich, die Liste der Produkte pro Lieferant anzuzeigen.
  • Errors.tpl
  • Produkt-sort.tpl
  • NBR-Produkt-page.tpl
  • Produkt-compare.tpl
  • Pagination.tpl
  • Produkt-list.tpl

Wir tauchen in die Art und Weise eine Thema gliedert: Ordner, Dateien, wo sie hingehören und wie man richtig mit ihnen umgehen

Organisation eines Themas

  • Organisation eines Themas
    • Ordner
      • Thumbnail-Datei
      • CSS und Sass
        • CSS
        • Sass / Kompass
      • Schriftart
      • Bild
      • JavaScript
      • Sprache
      • Das mobile Design
    • Dateien
      • Vorlagendateien
      • Stylesheets
      • Image-Dateien
      • Werkzeuge

Ordner

Die Hauptordnern PrestaShop Thema sind:

  • Die soll Ordner enthält alle temporären Dateien, die generiert und wiederverwendet, um die Serverlast zu erleichtern. Der Ordner ist standardmäßig leer.
  • Die /CSS Ordner enthält alle CSS-Dateien.
    • Die /Sass der Ordner enthält alle Sass .scss Quellcode-Dateien, bevor sie in die CSS-Dateien kompiliert werden.
  • Die / Font der Ordner enthält die benötigten Schriftartdateien.
  • Die / IMG der Ordner enthält alle Bilder.
  • Die angehängte der Ordner enthält die JavaScript-Dateien.
  • Die / lang Ordner enthält das Thema Übersetzungen. Seine Zugangsrechte sollte bei CHMOD 666 (zum Beispiel), festgelegt werden, so dass das Back-Office-Übersetzungstool kann lesen und hinein schreiben.

Die folgenden Ordner nicht direkt themenbezogene, sondern Hilfe, die Sie ganz PrestaShops Funktion sicherstellen, haben eine Design, die mit Ihrem Thema übereinstimmt:

  • Die /Mails Ordnerenthält die Vorlagen für die Emails, dass PrestaShop sendet (Auftragsbestätigung, Passwort anfordern, Versand-Benachrichtigungen, etc.).
  • Die / mobile der Ordner enthält die mobile Version des Themas.
  • Die /modules Ordner enthält die Vorlagendateien für viele Module.
  • Die crosscutting Ordner enthält die Vorlagendateien für die PDF-Dateien, dass PrestaShop generiert (Rechnungen, Lieferschein, Beschaffungsaufträgen, etc.).

Der Stamm des Ordners enthält nur, TPL-Dateien sowie die Preview.jpg Thumbnail-Datei.

Thumbnail-Datei

Die Preview.jpg Datei im Stammverzeichnis des Faltblatt des Themas ist die Miniatur, die in ihre Back-Office-Design-Auswahl von PrestaShop verwendet wird.

Es dient als eine visuelle Erinnerung daran, was das Thema ist, und Sie sollten es daher machen, Ihr Firmen Logo, statt einen Screenshot.

Es kann jeder Größe haben – des Standard-Themas ist 180 * 445 Pixel.

Es muss eine JPEG-Datei sein.

CSS und Sass

CSS

Das Thema CSS-Dateien befinden sich der /CSS Ordner.

Es wird empfohlen, ein gemeinsames Stylesheet für globale CSS-Regeln zu haben: Global.CSS.
Dann hätte jeder des Controllers eine eigene CSS-Datei: zum Beispiel Product.CSS für die Produkt-Seite.

Sass / Kompass

Sass und CompassDateien sind optional: Sie müssen nicht diese Tools verwenden, um die CSS-Dateien für das Back-Office-Design zu erstellen.

Wenn Sie Sass und Compass verwenden, empfehlen wir dringend, die Quelle zu setzen .scss Dateien in der /Sass Thema, so dass andere Entwickler Zugang zum Thema haben und leichter überarbeiten können.

Von dort können Sie generieren, die CSS-Dateien in der /CSS Ordner aus den Sass-Dateien in der /Sass Ordner!

Schriftart

Die / Font Ordner ist optional: Es enthält Schriftarten, die Sie gewählt haben, für Ihr Thema zu verwenden.

Zum Beispiel die verwendet standardmäßig PrestaShop Thema Font Awesome Zeichensatz festlegen)http://fortawesome.github.IO/Font-awesome/) für seine reaktionsschnelle Icons und hat daher die folgenden Dateien ihre / Font Ordner:

  • Fontawesome-webfont.eot
  • Fontawesome-webfont.svg
  • Fontawesome-webfont.ttf
  • Fontawesome-webfont.woff

Wenn Sie nicht Ihr Thema mit einer bestimmten Schriftart oder Symbolsatz beachten Sie erstellen, können Sie diesen Ordner überspringen.

Bild

Themenbezogene Bilder sind in gespeichert werden die / IMG Ordner.

Sie können Unterordner für eine bessere Organisation erstellen. Zum Beispiel hat das Standarddesign die folgenden Unterordner:

  • /Icon für einfache Symbole (z. B. die in der ausgewählten Schriftart nicht verfügbar).
  • /jQuery für jQuery-spezifische Bilder.

Sie können bei Bedarf weitere erstellen.

JavaScript

JavaScript-Dateien werden in gespeichert werden die angehängte Ordner.

Im Gegensatz zu CSS-Dateien empfehlen wir Ihnen nicht zu eine gemeinsamen/globale JavaScript-Datei haben, noch haben Sie eine einzelne Datei pro Controller.

Sprache

Die Übersetzungsdateien in gespeichert werden sollen die / lang Ordner.

Dateien sollten nach ihrer ISO-3166-1 Alpha-2-Code in Kleinbuchstaben benannt werden: zum Beispiel Fr.php.

Diese Dateien sollten von PrestaShop integrierte Übersetzungs-Tool erzeugt werden (befindet sich bei der Lokalisierung / Übersetzung im Menü).


Wagen 0 Einkaufswagen

keine Produkte

Kostenloser Versand! Versand
$0.00 Gesamt

Auschecken