Prestashop ist wohl die führende Open-Source-E-Commerce-Lösung im Web. Es bietet unzählige Funktionen, Add-Ons und Themes, aber aufgrund der fehlenden guten Dokumentation haben Neuankömmlinge die Ansicht, dass dies nicht annähernd möglich ist. In diesem Artikel werde ich Sie durch den Prozess des Erstellens Ihres eigenen benutzerdefinierten Designs sowie das Erstellen und Anpassen von Prestashop-Modulen führen.

Prestashop läuft unter PHP und MySQL und setzt bei seinen "Templates" (Seiten) auf die Smarty-Engine. Machen Sie sich keine Sorgen, wenn Sie mit Smarty nicht vertraut sind. Sie verwenden es im Wesentlichen zum Erstellen von Seiten mit Platzhalterabschnitten. Prestashop füllt die Informationen aus, wenn die Seite geladen wird. Es ist einfach, zu wechseln, wenn Sie etwas wie Lenker- oder Unterstreichungsvorlagen verwendet haben.

Ich gehe davon aus, dass Sie Prestashop bereits heruntergeladen und installiert haben. Wenn nicht, können Sie die neueste Version herunterladen. Sie haben ein Anleitungsvideo, das Sie sich ansehen können, um zu erfahren, wie Sie es einrichten.

Registrieren Ihres Designs

Ihre Site sollte in etwa wie das folgende Bild aussehen, wenn Sie Prestashop mit den Standardeinstellungen einrichten.

Das Erstellen eines eigenen Designs beginnt mit dem Erstellen eines Ordners. Navigieren Sie im Dateibrowser Ihrer Wahl zum Stammverzeichnis von Prestashop. Dort finden Sie einen Ordner namens themen. In der themen Erstellen Sie ein neues Verzeichnis mit dem Namen Ihres Designs. Ich werde meine "Demo" nennen.

Wenn Sie diesem Ordner ein Bild Ihrer Vorlage hinzufügen und dieses benennen preview.jpg, Prestashop sollte Ihre Vorlage automatisch finden und zum Backend hinzufügen. Wenn dies nicht der Fall ist oder Sie es vorziehen, das Bild später hinzuzufügen, können Sie das Design manuell hinzufügen. Gehen Sie dazu in die Themes Option unter der Einstellungen Menü und klicken Sie auf Neue hinzufügen oben. Sobald Sie fertig sind, sehen Sie Ihr Thema in der Mitte der Seite. Aktivieren Sie es, indem Sie einfach darauf klicken und die Taste drücken sparen Taste.

Fügen Sie Ihr Logo / Ihre Logos hinzu, während Sie hier sind. Sie finden diese Option am unteren Rand der Seite. Möglicherweise müssen Sie das Datei-Upload-Limit in Prestashop (oder sogar die Konfigurationsdatei von PHP) erhöhen, wenn Sie ein sehr großes Bild haben.

Crash-Kurs in Prestashop

Smarty ist eine Template-Engine für PHP, die die Trennung der Präsentation von der Anwendungslogik erleichtert.

Wie bereits erwähnt, verwendet Prestashop Smarty zum Generieren der Seiten. Alle Vorlagendateien haben also eine .tpl Erweiterung. Es gibt viele Seiten, die Sie erstellen müssen, um ein vollständiges Thema zu erhalten. Nehmen Sie sich einen Moment Zeit und sehen Sie sich die Dateiliste an.

Letztendlich bestimmt die Funktionalität Ihres Themas, welche Seiten Sie implementieren sollen. Diese Seite basiert auf den Dateien im Ordner "Controller". Sie können die Standardcontroller überschreiben oder eigene benutzerdefinierte Controller hinzufügen, die zu Ihrem Design passen. Aber das würde den Rahmen dieses Artikels sprengen. Unter den Controllern in Controller \ Front-Verzeichnis sind zwei Vorlagendateien, die automatisch geladen werden: header.tpl und footer.tpl.

Der Hauptinhalt Ihrer Site wird mit Hilfe von "Hooks" von Modulen geladen..

In Prestashop gibt es zwei Arten von Hooks: Action- und Display-Hooks. Beide funktionieren auf dieselbe Weise, unterscheiden sich jedoch in ihrem Zweck. Ein Haken gibt dem Benutzer grundsätzlich die Möglichkeit, benutzerdefinierten Code an eine externe Quelle anzuhängen. Im Falle eines Aktionshakens wird der an den Haken angefügte Code ausgeführt, wenn der Haken aufgerufen wird. Zum Beispiel wird in Prestashop ein Standard-Hook namens actionProductAdd das läuft beim Hinzufügen eines Produktes. Sie können also ein Modul an diesen Haken anschließen, wenn Sie jedes Mal, wenn ein neues Produkt hinzugefügt wird, einen E-Mail-Newsletter senden möchten.

Ein Anzeigehaken ist sehr ähnlich, aber anstatt eine Funktion mit einem Ereignis zu verbinden, verbinden Sie eine Funktion mit einer bestimmten Stelle in der Vorlage. Mit anderen Worten, Prestashop ruft Ihr Modul an einem bestimmten Punkt (z. B. rechte Seitenleiste) auf, und alles, was zurückgegeben wird, wird in die Seite eingefügt. Sie können alle derzeit registrierten Hooks anzeigen, indem Sie in die Module> Positionen Seite im hinteren Admin.

Ich persönlich finde es am besten, mit einem Standard-HTML-Design zu beginnen. Dies ist keine Voraussetzung, aber ich empfehle es aus mehreren Gründen:

• Sie können sofort sehen, welche Hooks Sie benötigen und wie Sie Ihren Inhalt teilen.
• Es gibt Ihnen eine klare Richtung, welche Vorlagendateien Sie erstellen müssen, und Sie erhalten eine Vorstellung davon, was statischer Inhalt sein soll und was ein Modul sein sollte. Sie können auch hinzufügen preview.jpg sofort ordnen.

Das folgende Bild ist ein Bild meiner Beispiel-HTML-Vorlage:

Und hier sehen Sie, wie ich es in Prestashop-Hooks aufteilen werde:

Erstellen der Vorlagenpartials

Lass uns jetzt die erstellen header.tpl Datei in Ihrem Themenverzeichnis und füllen Sie sie mit Ihrem Themenheader. Dies beinhaltet die doctype, Bereich und alles im Körper, der auf allen Seiten angezeigt werden soll. Hier ist ein Beispiel header.tpl Datei:

     if isset ($ css_files) foreach from = $ css_files key = css_uri item = media  / foreach / if if isset ($ js_files) foreach von = $ js_files item = js_uri  / foreach / if   
 
 $ HOOK_TOP 
 
  
 

Es gibt einige Dinge, die in diesem Code hervorgehoben werden müssen. Ich habe den CSS-Dateinamen mit vorinstalliert $ css_dir. Dies ist eine Smarty-Variable, die auf einen Ordner verweist css in Ihrem Verzeichnis, in das alle CSS-Dateien verschoben werden sollen.

Die nächste Zeile verwendet Smarty's für jeden Schleife, um alle CSS-Dateien der aktivierten Module hinzuzufügen. Beachten Sie dies, wenn Sie eine CSS-Datei erstellen, die als aufgerufen wird global.css in dem css In diesem Verzeichnis fügt die Schleife diese Datei automatisch zur Seite hinzu.

Ein paar Zeilen später noch eine für jeden Schleife verarbeitet die JavaScript-Dateien im js Verzeichnis und fügt sie der Seite hinzu. Im letzten Abschnitt öffne ich das Body-Element und definiere einen Haken für das Menümodul. Zum Schluss zeige ich noch das Logo der Site.

Wenn Sie kein Prestashop-Veteran sind, fragen Sie sich wahrscheinlich, wo ich diese Variablen finde. Wie bereits erwähnt, ist die Dokumentation von Prestashop leider nicht vorhanden, sie bieten jedoch ein Debugging-Tool, das Sie durch Hinzufügen starten können debuggen in eine der Vorlagendateien. Wenn Sie die entsprechende Seite in Ihrem Browser öffnen, wird ein Popup mit einer Liste aller Variablen für diese bestimmte Vorlage angezeigt. Auf diese Weise können Sie schnell (mit Hilfe von Strg / cmd-F) drastisch feststellen, welche Variablen definiert sind, sowie deren Werte.

Lass uns jetzt die erstellen footer.tpl Vorlage. Ich werde das einfach halten und einfach das schließen und Sie können jedoch Elemente hinzufügen, die Sie am unteren Rand jeder Seite anzeigen möchten. Dies kann alles von Hooks bis zu benutzerdefiniertem JavaScript beinhalten. Es gibt keine Grenzen für das, was Sie hier setzen könnten.

Die letzte Datei, die ich implementieren möchte, ist die index.tpl Datei. Dies ist die "Homepage" -Datei, die angezeigt wird, wenn ein Benutzer auf das Stammverzeichnis Ihrer Site zugreift. Im Standard-Prestashop-Design werden die Seitenleisten in geladen header.tpl Datei, und die eigentliche Indexvorlage enthält nur einen Aufruf an displayHome Haken. Dies ist in Ordnung, wenn Sie möchten, dass die Seitenleisten auf allen Seiten angezeigt werden. Ich möchte jedoch noch einmal betonen, dass Hooks nach Belieben implementiert werden. Sie müssen keine Hooks implementieren und Sie können Ihre eigenen benutzerdefinierten Hooks hinzufügen, wenn Sie mehr als die Standardfunktionalität benötigen.

Beim Erstellen Ihrer Indexseite müssen Sie entscheiden, welche Teile statisch sind und welche Teile dynamisch durch Module geladen werden sollen. Ich habe das Hauptmenü aus der Kopfzeile entfernt, da ich dies mit einem Modul steuern wollte. Also habe ich einen Haken dort platziert, wo ich das Menü wollte, und ich kann ein Modul erstellen, das an diesen Haken angehängt wird. Sie können mehrere Elemente mit demselben Haken laden. Es gibt keinen Grund, mehrere Hooks zusammenzufügen, und Sie können die Reihenfolge der Hook-Module im Backend unter verwalten Module> Positionen.

Lokalisierung

Das letzte Prestashop-spezifische Feature, das Sie in Betracht ziehen sollten, sind die Lokalisierungstools von Prestashop. Mit Prestashop können Sie Ihre Site mithilfe einer Smarty-Funktion (genannt) problemlos in mehrere Sprachen übersetzen l. Sie verwenden es, indem Sie eine Standardzeichenfolge durch die l Funktion, übergeben die Zeichenfolge als Parameter. Hier ist ein Beispiel eines

Element mit und ohne Übersetzung:

* Ohne Übersetzungstool * 
Abonnieren Sie uns!
 * Mit Übersetzungstool * 
l s = "Abonnieren Sie uns!"

Auch wenn Sie derzeit nicht planen, Ihre Website zu übersetzen, ist dies eine kleine Änderung, mit der Sie Ihre Seiten problemlos übersetzen können, wenn Sie sich später dazu entschließen. Sobald Sie diese Änderungen an Ihren Vorlagen vorgenommen haben, können Sie in die Lokalisierung> Übersetzungen Seite im Backend und klicken Sie auf die Nationalität, in die Sie übersetzen möchten.

Das Hinzufügen von nicht voreingestellten Sprachen ist einfach und ich werde es im zweiten Abschnitt der Seite behandeln (passenderweise "Sprache hinzufügen / aktualisieren")..

Ein weiterer Vorteil der Verwendung von Prestashop-Lokalisierung ist die Liste der von Prestashop verwendeten Phrasen. Anstatt die gesamte Website zu durchlaufen, können Sie die Liste der Phrasen einfach einem Muttersprachler Ihrer gewünschten Sprache übergeben und die Werte schnell eingeben, ohne Ihr Thema zu berühren.

Geben Sie nun den spezifischen HTML-Code Ihrer Homepage ein index.tpl, und stellen Sie sicher, dass Sie die Haken verwenden, die Sie verwenden möchten. Denken Sie daran, die debuggen Smarty-Funktion, wenn die Variablen für Ihre Vorlage verfügbar sind.

Jetzt können Sie einen Browser öffnen und zum Stammverzeichnis Ihrer Site navigieren. Meines sieht so aus:

Es sieht zwar nicht nach viel aus, aber Sie haben die äußere Hülle Ihrer Vorlage erstellt. Wenn Ihre Vorlage wie ein Durcheinander von Objekten aussieht, liegt dies wahrscheinlich daran, dass Sie viele Module installiert haben. Standardmäßig aktiviert Prestashop viele Module. Ich empfehle, auf die Modulseite zu gehen und alle Module zu deinstallieren. Machen Sie sich keine Sorgen, sie zu verlieren, da Sie sie erneut installieren können, indem Sie auf die Installationsschaltfläche neben dem gewünschten Modul klicken.

Wenn Sie ein Prestashop-Design erstellen, werden Sie feststellen, dass die Module für etwa 90% des Inhalts verantwortlich sind. Es gibt Module, die die Produkte, Module für den Einkaufswagen usw. anzeigen. Ein wesentlicher Teil eines Prestashop-Themers umfasst zumindest ein funktionierendes Wissen darüber, wie das Aussehen von Modulen angepasst werden kann.

---

Module

Module in Prestashop sind nicht identisch mit Wordpress-Widgets.

Module in Prestashop sind nicht identisch mit Wordpress-Widgets. Prestashop-Module können nur an Hooks angehängt werden, die der Modulersteller angibt. Wenn Sie beispielsweise ein Modul erstellen, das einen Block "Newsletter abonnieren" enthält, und Sie so einrichten, dass es sich in einer der Seitenleisten befindet, können Sie es nicht in den Fußzeilenbereich einfügen.

Dies mag umständlich erscheinen, aber es gibt einen sehr guten Grund: Wenn Sie ein Modul erstellen, stellen Sie für jeden der gewünschten Hooks eine eigene Funktion bereit. Beispielsweise kann sich ein Menümodul je nach Position in der Vorlage anders verhalten.

Dies gibt Ihnen viel Raum zum Anpassen eines Moduls.

Diese Vorgehensweise ist viel sinnvoller, wenn Sie andere Arten von Hooks in Betracht ziehen: Action Hooks. Sie möchten natürlich nicht, dass die Funktion, die ausgeführt wird, wenn Sie ein neues Produkt hinzufügen, ausgeführt wird, wenn ein Benutzer ein Produkt von Ihnen kauft. Gleiches gilt für Display-Hooks. Jeder Haken hat eine eigene Funktion, mit der Sie machen können, was Sie wollen.

Beim Erstellen eines Designs gibt es zwei Möglichkeiten, Module hinzuzufügen. Die erste Möglichkeit besteht darin, ein eigenes Modul zu erstellen. Dies ist die langwierigere Option, aber Sie erhalten viel mehr Kontrolle über das Endprodukt. Auf der anderen Seite befinden sich mehr als 2000 Module im offiziellen Modulkatalog (und noch mehr auf Websites von Drittanbietern). Die Chancen stehen gut, dass Sie etwas finden, das Ihren Bedürfnissen entspricht.

Ihre zweite Option ist die Installation eines vorgefertigten Moduls. Mit Prestashop können Sie das Erscheinungsbild anpassen, indem Sie die Vorlagendateien überschreiben. Dies ist die bessere Option, wenn Sie nicht wirklich mit der Codierung Ihres eigenen Moduls beginnen möchten, und Sie können sich auf die grafische Seite konzentrieren. Ich werde beide Optionen behandeln. Beginnen wir mit dem ersten.

Eigenes Modul erstellen

Wir erstellen ein Modul, das eine konfigurierbare Anzahl von Produkten auf der Startseite anzeigt. Dies basiert lose auf dem Stock-Modul, aber mein Modul wird ein wenig mehr in die darunter liegenden Klassen von Prestashop einsteigen, um Ihnen hoffentlich einen tieferen Einblick in den Prozess zu geben.

Erstellen Sie zuerst einen Ordner in der Module erstellen Sie eine PHP-Datei mit demselben Namen wie der Ordner. Wenn Sie das öffnen Module In diesem Ordner sehen Sie eine Namenskonvention, bei der alle Module, die ausschließlich Inhalt anzeigen, mit dem Wort "Block" beginnen. Dies ist natürlich keine Anforderung, ist aber sinnvoll. Ich werde meinen Ordner benennen Blockanzeigeprodukte, und darin werde ich die PHP-Datei mit demselben Namen erstellen.

Öffnen Sie die PHP-Datei und definieren Sie die Modulklasse:

name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; parent :: __ construct (); $ this-> displayName = $ this-> l ('Produktmodule anzeigen'); $ this-> description = $ this-> l ('Zeigt eine konfigurierbare Anzahl von Produkten für die Startseite an.'); 

Prestashop-Module sind objektorientiert. Daher müssen Sie eine Klasse für Ihr Modul erstellen. Der Name Ihrer Klasse sollte die Kamelversion des Ordnernamens sein.

Oben in der Datei sehen Sie ein ob Aussage. Dadurch wird sichergestellt, dass die Datei nicht direkt über den Browser geladen wird. Als nächstes muss Ihre Klasse entweder die Klasse Modul direkt oder eine Deklasse der Klasse Modul subklassen.

Innerhalb des Konstruktors richten wir die Eigenschaften des Moduls ein. Prestashop verwendet diese Informationen zur Anzeige im Backend:

• Name ist ein eindeutiger "Codename", und es ist nicht der tatsächliche Name, der im Backend angezeigt wird.
• Tab teilt Prestashop die Kategorie des Moduls mit. Eine vollständige Liste der Kategorien finden Sie in der Controller \ Admin \ AdminModuleController.php Datei.
• Autor, Name und Ausführung sind selbsterklärend.
• needs_instance weist Prestashop an, beim Zugriff auf die Modulseite eine Instanz Ihrer Variablen zu erstellen. Dies ist normalerweise nicht erforderlich. Wenn Ihr Modul jedoch eine Nachricht anzeigen oder protokollieren muss, wenn die Modulseite aktiv ist, müssen Sie dies in a ändern 1.

In den letzten beiden Zeilen werden der tatsächliche Anzeigename und die Beschreibung für Ihr Modul festgelegt. Sie verwenden dieselbe Lokalisierungsmethode, um sie in verschiedene Sprachen übersetzen zu können. Diese beiden Zeilen müssen nach der Initialisierung der Eltern gemäß der bevorzugten Reihenfolge von Prestashop, die von ihren offiziellen Modulen verwendet wird, ausgeführt werden.

Der nächste Schritt besteht darin, die Installationsmethode zu überschreiben. Hier können wir die Hooks angeben, die wir benötigen, sowie die Standardoptionen für unser Modul. Wenn eine der Einstellungen fehlschlägt, schlägt die Installation fehl.

Dieses Modul ist für die Homepage gedacht, also verbinde ich es mit dem Home Hook. Wir möchten auch eine CSS-Datei zum Header hinzufügen, dh wir müssen auch den Header-Hook hinzufügen. Wenn Sie zum Backend unter dem gehen Module> Positionen Seite finden Sie die technischen Namen der Haken (was wir hier angeben).

Gleich nach dem __konstruieren() Funktion, fügen Sie Folgendes hinzu:

public function install () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Konfiguration :: updateValue ('DP_Number_of_Products', 6) == false) gibt false zurück; wahr zurückgeben; 

Dadurch werden die beiden Haken hinzugefügt und die Standardanzahl der Produkte auf sechs festgelegt. Sie sollten der Eigenschaft einen eindeutigen Namen geben, damit andere Module Ihre Werte nicht beeinträchtigen. Ein einfacher Ansatz fügt den Namen oder die Initialen Ihres Moduls am Anfang des Namens hinzu.

Sie können Ihr Modul jetzt auf der Modulseite installieren und es sollte erfolgreich installiert werden, wenn alles korrekt eingerichtet ist. Gehen Sie zur Positionsseite, und es wird wie unter den beiden Haken registriert angezeigt.

Das Implementieren von Hooks ist ziemlich einfach. Erstellen Sie eine öffentliche Funktion mit dem Wort "hook", gefolgt vom Namen des Hooks. Beginnen wir mit dem Header-Haken. Wir möchten nur, dass unserem Design eine CSS-Datei hinzugefügt wird. Hier ist die komplette Funktion:

public function hookdisplayHeader ($ params) $ this-> context-> controller-> addCSS (($ this -> _ path). 'blockdisplayproducts.css', 'all'); 

Erstellen Sie diese CSS-Datei in Ihrem Themeverzeichnis, und Ihre Vorlage sollte sie in den Header laden.

Der nächste Haken ist etwas komplizierter. Es sollte eine bestimmte Anzahl von Produkten aus der Datenbank abrufen und diese in eine Vorlagendatei laden. Die Funktion zum Abrufen der Produkte gibt die Bilder oder Links der Produkte nicht zurück. Daher müssen wir einige verschiedene Funktionen aufrufen und eine Reihe von Produkten "bauen". Hier ist die komplette Funktion:

öffentliche Funktion hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Konfiguration :: get ("DP_Number_of_Products")); $ productsData = Product :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); if (! $ productsData) gibt "Fehler" zurück; $ products = array (); $ link = neuer Link (null, "http: //"); foreach ($ productsData als $ product) $ tmp = Product :: getCover ($ product ['id_product']); array_push ($ products, array ('name' => $ product ['name'], 'author' => $ product ['Hersteller_name']), 'desc' => $ product ['description_short'], 'price' = > $ product ['price'], 'link' => $ link-> getProductLink (neues Produkt ($ product ['id_product'])), 'image' => $ link-> getImageLink ($ product ['link_rewrite') ], $ tmp ['id_image'])));  $ this-> smarty-> zuweisen (array ('products' => $ products)); $ this-> display zurückgeben (__ FILE__, 'blockdisplayproducts.tpl'); 

Es beginnt mit der Anzeige der Anzahl der anzuzeigenden Produkte und der Sprach-ID des Benutzers. Wir rufen dann an, um die zugewiesene Anzahl von Produkten ab dem ersten registrierten Produkt zu erhalten. Danach stellen wir sicher, dass es keine Probleme gibt, die Produkte zu beenden, falls vorhanden. Der nächste Block ist der zuvor erwähnte Teil, der ein Array mit allen Eigenschaften aufbaut, die wir zum Anzeigen des Elements benötigen. Dazu gehören das Bild und der Link, die nicht mit den restlichen Produktdaten zurückgegeben wurden. Der letzte Abschnitt fügt das Produkt-Array zu Smarty hinzu und lädt die Vorlagendatei Ihrer Wahl. Ich habe die Vorlagendatei und die CSS-Dateien mit demselben Namen wie das Modul benannt. Dies ist jedoch keine Voraussetzung. Sie können es nennen, was Sie wollen.

Wenn Sie Ihre Site jetzt öffnen, wird nur eine Nachricht angezeigt.Es wurde keine Vorlage für Modulblockanzeigeprodukte gefunden."Also erstellen wir die Vorlagendatei im Verzeichnis unseres Moduls und benennen sie genauso, wie Sie sie gerade in der Hook-Funktion angegeben haben. Dieser Teil hängt wirklich von Ihrem spezifischen Themenlayout ab, aber hier ist meine Vorlagendatei:

if $ products! == false 
l s = "UNSERE BÜCHER" mod = "blockdisplayproducts"
 foreach from = $ products item = Produktname = productLoop 
 
 
$ product.author | upper | strip_tags | escape: html: 'UTF-8'
 
 
$ product.name | strip_tags | escape: html: 'UTF-8'
 
$ product.desc
 
$ $ product.price | string_format: "%. 2f"
 
l s = "View" mod = "blockdisplayproducts"
 
 
 / foreach / if

Da Prestashop Smarty-Vorlagen verwendet, stehen Ihnen eine Reihe von Hilfsfunktionen zur Verfügung, mit denen Sie Ihre Daten anzeigen können. Wir beginnen mit einem ob Funktion, um sicherzustellen, dass das Produktfeld in Ordnung ist. Wenn ja, gehen wir in eine zum Schleife, die den angegebenen HTML-Code für jede generiert. Wir verwenden die integrierten Hilfsfunktionen von Smarty, um HTML-Tags zu entfernen und den Namen des Autors in Großbuchstaben umzuwandeln, und wir verwenden eine andere Methode, um den Preis auf die gewünschte Anzahl von Dezimalstellen zu formatieren. Eine vollständige Liste der Modifizierer finden Sie hier.

Beachten Sie auch, dass Sie beim Übersetzen von Strings hier den Namen Ihres Moduls eingeben müssen. Dies liegt daran, dass die Übersetzung nicht an ein Thema gebunden ist, sondern an das Modul selbst. Auf der anderen Seite die l Funktion ist vorlagenspezifisch; Damit Ihre Übersetzungsdatei gefunden werden kann, ist der Name des Moduls erforderlich.

Sie können Ihre Site jetzt im Browser anzeigen. Wenn Sie Produkte hinzugefügt haben, sollten diese jetzt auf der Startseite angezeigt werden.

Unser Modul ist jetzt voll funktionsfähig, aber es gibt keine Möglichkeit, die Anzahl der zurückgegebenen Produkte anzupassen. Dazu müssen wir eine Funktion hinzufügen getContents. Wenn Ihr Modul über diese Funktion verfügt, fügt Prestashop auf der Seite "Module" automatisch eine Schaltfläche zum Konfigurieren hinzu. Alles, was von dieser Funktion zurückgegeben wird, wird auf der Konfigurationsseite angezeigt. Um zu beginnen, fügen Sie die Funktion zur Klasse des Moduls hinzu und füllen Sie sie mit Folgendem aus:

öffentliche Funktion getContent () $ html = '
'; $ html. = ' 
'. $ this-> displayName. ' Die Einstellungen
'; $ html. = ' 
'; $ html. = ". $ this-> l ('Anzahl der anzuzeigenden Produkte'). ': '; $ html. = ' '; $ html. = ' 
'; $ html. = '
'; return $ html; 

Diese Funktion erstellt einfach den HTML-Code, der zum Anzeigen eines Formulars mit einem Zahlenfeld und einer Schaltfläche zum Speichern erforderlich ist. Wieder benutze ich die $ this-> l () Damit Sie das Modul in Zukunft in andere Sprachen übersetzen können, sollten Sie dies tun. Ich habe ein Zahlenfeld im HTML-Formular verwendet, aber seien Sie vorsichtig, wenn Sie ein kommerzielles Modul erstellen. Es wird immer noch nicht von allen Browsern unterstützt. Das heißt, wenn es für Ihren persönlichen Gebrauch ist, dann fühlen Sie sich frei!

Das einzige, was kryptisch erscheinen mag, ist das Werkzeuge :: safeOutput () Funktion, die wir für die URL aufrufen. Ich bin ehrlich gesagt nicht zu 100% sicher, wie wichtig dieser Aufruf ist, aber er führt alle HTML-Tags aus und konvertiert die erforderlichen Zeichen in HTML-Entitäten.

Gehen Sie als Nächstes auf die Modulseite und klicken Sie auf die Schaltfläche "Konfigurieren" in Ihrem Modul. Sie werden mit dem Formular begrüßt, das wir gerade erstellt haben.

Sie können die Nummer anpassen und auf "Speichern" klicken, aber wir haben noch nicht in die Speicherfunktion geschrieben, so dass sie weiterhin auf 6 zurückgesetzt wird (der bereits gespeicherte Wert)..

Fügen Sie wieder in der Funktion den folgenden Code am Anfang der Funktion ein:

if (Tools :: isSubmit ('numProds')) Configuration :: updateValue ('DP_Number_of_Products', (int) (Tools :: getValue ('numProds'))); 

Dies prüft, ob der Wert übermittelt wurde - d. H. Ob der Wert numProds existiert als $ _GET oder $ _POST Variable. Wir aktualisieren dann die Eigenschaft, in der wir den Wert gespeichert haben. Die Methode Tools :: getValue akzeptiert den Namen eines Formularfelds und optional eine zweite Zeichenfolge, die zurückgegeben werden soll, wenn das Formularfeld nicht gefunden wurde. Anschließend wird eine formatierte Zeichenfolge mit dem übergebenen Wert zurückgegeben. Es ist wichtig, dies vor dem Generieren des HTML-Formulars anzugeben. Andernfalls enthält das Formular die alten Werte, die den aktualisierten entsprechen.

Mit diesem letzten Code haben wir das Modul fertiggestellt. Die einzige andere Sache, die Sie tun sollten, ist das Hinzufügen eines 16x16-GIF-Symbols zum Modulordner.

Nun können wir zur nächsten Option übergehen, um Module in Ihr Design zu integrieren.

Vorhandene Module überschreiben

Die zweite Möglichkeit besteht darin, ein vorhandenes Modul zu verwenden und es nach Ihren Wünschen neu zu gestalten. Diese Option ist wesentlich einfacher, da Sie lediglich die ".tpl" -Datei (en) aus dem Modul neu erstellen müssen.

Bei meinem Beispielthema fehlt immer noch ein oberes Navigationsmenü. Passen wir dieses Modul also an. Um zu beginnen, aktivieren / installieren Sie das Modul auf der Seite "Module", die als "oberes horizontales Menü" bezeichnet wird. Der nächste Schritt ist das Erstellen eines Ordners in Ihrem Themeverzeichnis mit dem Namen Module. Erstellen Sie darin einen weiteren Ordner mit dem tatsächlichen Namen des Moduls - in unserem Fall ist dies der Fall blocktopmenu. Beim Laden der tpl-Dateien eines Moduls prüft Prestashop zunächst, ob sich im aktivierten Themes-Modul Überschreibungsverzeichnis eine Datei mit demselben Namen befindet. Wenn ja, wird die Themes-Version anstelle der Standardversion geladen. Die tpl-Datei des Menümoduls wird benannt blocktopmenu.tpl, Sie müssen also im neu erstellten Ordner eine Datei mit demselben Namen erstellen.

Der einfachste Weg, um herauszufinden, welche Art von Daten ein Modul anbietet, besteht darin, entweder die Tpl-Datei einzusehen und zu sehen, welche Daten sie verwenden, oder die zu laden debuggen Werkzeug. Um die Sache zu beschleunigen, kann ich Ihnen sagen, dass dieses Plugin nur eine einzige Variable, genannt, enthält SPEISEKARTE, Diese enthält eine Zeichenfolge, in der alle Menüpunkte zusammengefasst sind

 
 wende var = tmpMenu-Wert = $ MENU | Ersetzen: '
': " zuweisen var = items value ="
"| explode: $ tmpMenu foreach $ items als $ item wenn! $ item @ last 
$ item
 if ($ item @ index + 2)! = $ item @ total 
 / if / if / foreach 
 

Tags - außer, diesmal haben wir nach jedem Menüelement ein Symbolbild hinzugefügt, mit Ausnahme des letzten Menüelements. Möglicherweise haben Sie auch festgestellt, dass ich den letzten Wert im Array alle zusammen meide. Dies liegt daran, dass der letzte Wert nur ein Zeilenvorschub ist.

Wenn Sie bisher alles korrekt ausgeführt haben, können Sie es jetzt nach Ihren Wünschen gestalten und einige Seiten zum Menü von der "configure" -Seite des Moduls hinzufügen. Sobald Sie fertig sind, sollten Sie in der Lage sein, zu Ihrer Site zu gelangen und das Menü wie erwartet zu sehen!

---

Fazit

Dies ist eine sehr kurze, aber gründliche Überprüfung der zum Erstellen von PrestaShop-Themen erforderlichen Techniken. Im Verlauf des Tutorials habe ich die notwendigen Schritte durchlaufen, um ein voll mehrsprachiges Thema zu erstellen, und es gibt zwei Möglichkeiten, themenorientierte Module in Ihre Vorlage ein

Code