PrestaShop-Theming erklärt

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Prestashop ist wohl die Nummer 1 unter den Open-Source-E-Commerce-Lösungen im Web. Es bietet unzählige Funktionen, Add-Ons und Themen, aber der Mangel an guter Dokumentation hat Neulingen die Wahrnehmung gegeben, dass es unnahbar ist. In diesem Artikel werde ich Sie durch den Prozess des Erstellens Ihres eigenen benutzerdefinierten Themas sowie durch das Erstellen und Anpassen von Prestashop-Modulen führen.

Prestashop läuft auf PHP und mySQL und verlässt sich bei seinen "Vorlagen"(Seiten) auf die Smarty-Engine. Machen Sie sich keine Sorgen, wenn Sie mit Smarty nicht vertraut sind. Sie verwenden es im Grunde, um Seiten mit Platzhalterabschnitten zu erstellen, und Prestashop füllt die Informationen aus, wenn die Seite geladen wird. Der Übergang ist einfach, wenn Sie beispielsweise Lenker- oder Unterstreichung-Vorlagen verwendet haben.

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

Registrieren Sie Ihr Thema

Ihre Site sollte ungefähr so aussehen wie das folgende Bild, wenn Sie Prestashop mit den Standardeinstellungen einrichten.

Der Prozess zum Erstellen eines eigenen Themas beginnt mit dem Erstellen eines Ordners. Navigieren Sie in dem Dateibrowser Ihrer Wahl zum Stammverzeichnis von Prestashop, und Sie finden einen Ordner mit dem Namen themes. Erstellen Sie im themes-Ordner ein neues Verzeichnis mit dem Namen Ihres Themas. Ich werde meine "Demo" nennen.

Wenn Sie diesem Ordner ein Bild Ihrer Vorlage hinzufügen und preview.jpg nennen, sollte Prestashop Ihre Vorlage automatisch finden und dem Back-End hinzufügen. Wenn dies nicht der Fall ist oder Sie das Bild später hinzufügen möchten, können Sie das Thema manuell hinzufügen. Wechseln Sie dazu im Menü "Einstellungen" zur Option "Themen" und klicken Sie oben auf "Neu hinzufügen". Sobald Sie fertig sind, sehen Sie Ihr Thema in der Mitte der Seite. Aktivieren Sie es, indem Sie einfach darauf klicken und auf die Schaltfläche Speichern klicken.

Fügen Sie Ihre Logos hinzu, während Sie hier sind. Sie finden diese Option am Ende der Seite. Möglicherweise müssen Sie das Limit für das Hochladen von Dateien in Prestashop (oder sogar in der Konfigurationsdatei von PHP) erhöhen, wenn Sie ein sehr großes Bild haben.

Crashkurs in Prestashop

Smarty ist eine Vorlage-Engine für PHP, die die Trennung von Präsentation und Anwendungslogik erleichtert.

Wie bereits erwähnt, verwendet Prestashop Smarty zum Generieren der Seiten. Daher haben alle Vorlagendateien die Erweiterung .tpl. Es gibt viele Seiten, die Sie erstellen müssen, um ein vollständiges Thema zu erhalten. Nehmen Sie sich einen Moment Zeit und sehen Sie sich die Dateiliste an.

Letztendlich bestimmt die Funktionalität Ihres Themas, welche Seiten Sie implementieren sollten. Diese Seite basiert auf den Dateien im Ordner "Controller". Sie können die Standard-Controller überschreiben oder eigene benutzerdefinierte Controller hinzufügen, die zu Ihrem Thema passen. Aber das geht über den Rahmen dieses Artikels hinaus. Unter den Controllern in controller\front directory befinden sich zwei Vorlagendateien, die automatisch geladen werden: header.tpl und footer.tpl.

Der Hauptinhalt Ihrer Site wird mithilfe von "Hooks" von Modulen geladen.

In Prestashop gibt es zwei Arten von Hooks: Action- und Display-Hooks. Diese funktionieren beide auf die gleiche Weise, unterscheiden sich jedoch im Zweck. Ein Hook gibt dem Benutzer grundsätzlich die Möglichkeit, benutzerdefinierten Code an eine externe Quelle anzuhängen. Im Fall eines Aktions-Hooks wird jeder an den Hook angehängte Code ausgeführt, wenn der Hook aufgerufen wird. Zum Beispiel wird Prestashop mit einem Standard-Hook namens actionProductAdd geliefert, der beim Hinzufügen eines Produkts ausgeführt wird. Sie können diesem Hook also ein Modul hinzufügen, wenn Sie jedes Mal, wenn ein neues Produkt hinzugefügt wird, einen E-Mail-Newsletter senden möchten.

Ein Display-Hook ist sehr ä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. in der rechten Seitenleiste) auf, und alles, was zurückgegeben wird, wird auf der Seite platziert. Sie können alle aktuell registrierten Hooks anzeigen, indem Sie im hinteren Administrator auf die Seite Module > Positionen gehen.

Persönlich finde ich es am besten, mit einem Standard-HTML-Thema zu beginnen. Dies ist keine Voraussetzung, aber ich kann es aus mehreren Gründen nur empfehlen:

So können Sie sofort sehen, welche Hooks Sie benötigen und wie Sie Ihre Inhalte aufteilen.
Es gibt Ihnen eine klare Richtung, welche Vorlagendateien Sie erstellen müssen, sowie eine Vorstellung davon, was statischer Inhalt sein wird und was ein Modul sein sollte. Es ermöglicht Ihnen auch, die Datei preview.jpg sofort hinzuzufügen.

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

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

Erstellen der Vorlagenpartials

Jetzt erstellen wir die Datei header.tpl in Ihrem Themenverzeichnis und füllen sie mit Ihrem Themen-Header. Dies umfasst den doctype, den Bereich und alles im Text, was auf allen Seiten angezeigt werden soll. Hier ist ein Beispiel für die Datei header.tpl:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Prestashop Site</title>
    <link rel="stylesheet" type="text/css" href="{$css_dir}bootstrap.min.css">

    {if isset($css_files)}
      {foreach from=$css_files key=css_uri item=media}
        <link rel="stylesheet" type="text/css" href="{$css_uri}">
      {/foreach}
    {/if}

    {if isset($js_files)}
      {foreach from=$js_files item=js_uri}
        <script src="{$js_uri}"></script>
      {/foreach}
    {/if}
  </head>
  
  <body>
    <div id="head">
      <div id="menu">
        {$HOOK_TOP} 
      </div>
      <div id="banner">
        <img src="http://nettuts.s3.amazonaws.com/2169_prestashop/{$logo_url}" alt="Header Image">
      </div>
    </div>

In diesem Code sind einige Dinge zu beachten. Ich habe den CSS-Dateinamen mit {$css_dir} vorangestellt. Dies ist eine Smarty-Variable, die auf einen Ordner namens css im Verzeichnis Ihres Themas verweist, in dem sich alle CSS-Dateien befinden sollten.

In der nächsten Zeile wird die foreach-Schleife von Smarty verwendet, um alle CSS-Dateien der aktivierten Module hinzuzufügen. Wenn Sie eine CSS-Datei mit dem Namen global.css im css-Verzeichnis erstellen, fügt die Schleife diese Datei automatisch der Seite hinzu.

Einige Zeilen später verarbeitet eine weitere foreach-Schleife die JavaScript-Dateien im js-Verzeichnis und fügt sie der Seite hinzu. Im letzten Abschnitt öffne ich das body-Element und definiere einen Hook für das Menümodul. Zuletzt zeige ich das Logo der Site an.

Wenn Sie kein Prestashop-Veteran sind, fragen Sie sich wahrscheinlich, wo ich diese Variablen finde. Wie ich bereits sagte, fehlt leider die Dokumentation von Prestashop, aber sie bieten ein Debugging-Werkzeug, das Sie starten können, indem Sie {debug} zu einer der Vorlagendateien hinzufügen. Wenn Sie die entsprechende Seite in Ihrem Browser öffnen, wird ein Popup mit einer Liste aller Variablen für diese bestimmte Vorlage angezeigt. Auf diese Weise können Sie schnell (mit Strg/cmd-F erheblich) feststellen, welche Variablen definiert sind und welche Werte sie haben.

Jetzt erstellen wir die footer.tpl-Vorlage. Ich werde dies einfach halten und nur die Elemente <body/> und <html/> schließen, aber Sie können jederzeit auf jeder Seite alles hinzufügen, was Sie anzeigen möchten. Dies kann alles umfassen, von Hooks bis hin zu benutzerdefiniertem JavaScript. Es gibt keine Grenzen für das, was Sie hier setzen könnten.

Die letzte Datei, die ich implementieren möchte, ist die Datei index.tpl. Dies ist die "Startseite"-Datei, die angezeigt wird, wenn ein Benutzer auf das Stammverzeichnis Ihrer Site zugreift. Im Standard-Prestashop-Thema werden die Seitenleisten in die Datei header.tpl geladen, und die eigentliche Indexvorlage enthält nur einen Aufruf des displayHome-Hooks. Dies ist in Ordnung, wenn Sie möchten, dass die Seitenleisten auf allen Seiten angezeigt werden. Ich möchte jedoch noch einmal betonen, dass Hooks nach Ihren Wünschen implementiert werden. Sie müssen keinen Hook implementieren und können Ihre eigenen benutzerdefinierten Hooks hinzufügen, wenn Sie mehr als die Standardfunktionalität benötigen.

Beim Erstellen Ihrer Indexseite müssen Sie entscheiden, welche Teile statisch sind und welche Teile dynamisch über Module geladen werden sollen. Ich habe das Hauptmenü aus der Kopfzeile entfernt, weil ich das mit einem Modul steuern wollte. Also habe ich einen Hook dort platziert, wo ich das Menü haben wollte, und ich kann ein Modul erstellen, das an diesen Hook angehängt wird. Sie können mehrere Elemente mit demselben Hook laden. Es gibt keinen Grund, mehrere Hooks zusammenzufügen, und Sie können die Reihenfolge der Module eines Hooks im Back-End unter Module > Positionen verwalten.

Lokalisierung

Die letzte Prestashop-spezifische Funktion, die Sie berücksichtigen sollten, sind die Lokalisierungstools von Prestashop. Mit Prestashop können Sie Ihre Website mithilfe einer Smarty-Funktion mit dem Namen l einfach in mehrere Sprachen übersetzen. Sie verwenden es, indem Sie eine Standardzeichenfolge durch die Funktion l ersetzen und die Zeichenfolge als Parameter übergeben. Hier ist ein Beispiel für ein <h1/>-Element mit und ohne Übersetzung:

{* Without Translation Tool *}
<h1>Subscribe to us!</h1>

{* With Translation Tool *}
<h1>{l s='Subscribe to us!'}</h1>

Auch wenn Sie derzeit nicht vorhaben, Ihre Website zu übersetzen, handelt es sich um eine kleine Änderung, mit der Sie Ihre Seiten problemlos übersetzen können, wenn Sie sich später dazu entschließen. Sobald Sie diese Änderungen an Ihren Vorlagen vorgenommen haben, können Sie im Back-End auf die Seite Lokalisierung > Übersetzungen gehen und auf die Nationalität klicken, in die Sie übersetzen möchten.

Das Hinzufügen von nicht standardmäßigen Sprachen ist einfach und wird im zweiten Abschnitt der Seite behandelt (treffend "Sprache hinzufügen/aktualisieren" genannt).

Ein weiterer Vorteil der Verwendung der Prestashop-Lokalisierung ist die Liste der Ausdrücke, die Prestashop Ihnen gibt. Anstatt Ihre gesamte Website zu durchsuchen, können Sie die Liste der Phrasen einfach einem Muttersprachler Ihrer gewünschten Sprache übergeben und die Werte schnell eingeben, ohne Ihr Thema zu berühren.

Geben Sie nun den spezifischen HTML-Code Ihrer Startseite in die index.tpl ein und stellen Sie sicher, dass Sie die Hooks angeben, die Sie verwenden möchten. Denken Sie daran, die Smarty-Funktion {debug} zu verwenden, wenn Sie sehen möchten, dass die Variablen für Ihre Vorlage verfügbar sind.

Jetzt können Sie einen Browser öffnen und zum Stammverzeichnis Ihrer Website navigieren. Meins sieht so aus:

Es sieht vielleicht nicht nach viel aus, aber Sie haben die äußere Hülle Ihrer Vorlage erstellt. Wenn Ihre Vorlage wie ein Durcheinander von Objekten aussieht, liegt dies wahrscheinlich daran, dass viele Module installiert sind. Standardmäßig aktiviert Prestashop viele Module. Ich empfehle, auf die Modulseite zu gehen und alle Module zu deinstallieren. Machen Sie sich keine Sorgen, dass Sie sie verlieren, da Sie sie neu installieren können, indem Sie auf die Schaltfläche Installieren neben dem gewünschten Modul klicken.

Wenn Sie ein Prestashop-Thema erstellen, werden Sie feststellen, dass Module für ungefähr 90% des Inhalts verantwortlich sind. Es gibt Module, die die Produkte anzeigen, Module für den Warenkorb usw. Ein wesentlicher Teil des Prestashop-Themas besteht zumindest darin, dass Sie wissen, wie Sie das Aussehen von Modulen anpassen können.

Module

Module in Prestashop sind nicht mit Wordpress-Widgets identisch.

Module in Prestashop sind nicht mit Wordpress-Widgets identisch. Die Module von Prestashop können nur an vom Modulersteller angegebene Hooks angehängt werden. Wenn Sie beispielsweise ein Modul erstellen, in dem ein Block "Newsletter abonnieren" angezeigt wird, und ihn so einrichten, dass er in eine der Seitenleisten verschoben wird, können Sie ihn nicht im Fußzeilenbereich platzieren.

Dies mag umständlich erscheinen, aber es gibt einen sehr guten Grund dafür: Wenn Sie ein Modul erstellen, stellen Sie für jeden der Hooks, die Sie verwenden möchten, eine separate Funktion bereit. Zum Beispiel, wenn sich ein Menümodul je nach Position in der Vorlage unterschiedlich verhalten kann.

Dies gibt Ihnen viel Raum, um ein Modul anzupassen.

Diese Vorgehensweise ist viel sinnvoller, wenn Sie andere Arten von Hooks in Betracht ziehen: Action-Hooks. Sie möchten natürlich nicht, dass die Funktion, die ausgeführt wird, wenn Sie ein neues Produkt hinzufügen, ausgeführt wird, wenn ein Benutzer ein Produkt von Ihnen kauft. Gleiches gilt für Display-Hooks; Jeder Hook hat seine eigene Funktion, sodass Sie damit machen können, was Sie wollen.

Beim Erstellen eines Themas gibt es zwei Möglichkeiten, Module hinzuzufügen. Die erste Möglichkeit besteht darin, ein eigenes Modul zu erstellen. Dies ist die langwierigere Option, aber Sie erhalten viel mehr Kontrolle über das Endprodukt. Auf der anderen Seite enthält der offizielle Modulkatalog über 2000 Module (und noch mehr auf Websites von Drittanbietern). Die Chancen stehen gut, dass Sie etwas finden, das Ihren Bedürfnissen entspricht.

Ihre zweite Möglichkeit besteht darin, ein fertiges Modul zu installieren. Prestashop bietet Ihnen die Möglichkeit, das Erscheinungsbild durch Überschreiben der Vorlagendateien anzupassen. Dies ist die bessere Option, wenn Sie nicht wirklich mit dem Codieren Ihres eigenen Moduls beginnen möchten und sich auf die grafische Seite konzentrieren können. Ich werde beide Optionen behandeln. Beginnen wir also mit dem ersten.

Eigenes Modul erstellen

Wir werden ein Modul erstellen, das eine konfigurierbare Anzahl von Produkten auf der Homepage anzeigt. Dies basiert lose auf dem Standardmodul, aber mein Modul wird etwas mehr in die zugrunde liegenden Klassen von Prestashop eingehen, um Ihnen hoffentlich einen tieferen Einblick in den Prozess zu geben.

Erstellen Sie zunächst einen Ordner im modules-Verzeichnis und anschließend eine darin enthaltene PHP-Datei mit demselben Namen wie der Ordner. Wenn Sie den modules-Ordner öffnen, wird eine Namenskonvention angezeigt, bei der alle Module, die ausschließlich Inhalte anzeigen, mit dem Wort "Block" beginnen. Dies ist natürlich keine Voraussetzung, aber es macht Sinn. Ich werde meinen Ordner blockdisplayproducts benennen und darin die PHP-Datei mit demselben Namen erstellen.

Öffnen Sie die PHP-Datei und definieren Sie die Modulklasse:

<?php

if (!defined('_PS_VERSION_'))
exit;

class BlockDisplayProducts extends Module
{
	public function __construct()
	{
		$this->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('Display Products Module');
		$this->description = $this->l('Displays a configurable amount of products for the home page.');
	}

}

Prestashop-Module sind objektorientiert; Daher müssen Sie eine Klasse für Ihr Modul erstellen. Der Name Ihrer Klasse sollte die Kamelversion des Ordnernamens sein.

Oben in der Datei sehen Sie eine if-Anweisung. Dadurch wird sichergestellt, dass die Datei nicht direkt über den Browser geladen wird. Als nächstes muss Ihre Klasse entweder die Modulklasse direkt unterklassifizieren oder einen Nachkommen der Modulklasse unterordnen.

Innerhalb des Konstruktors richten wir die Eigenschaften des Moduls ein. Prestashop verwendet diese Informationen, um sie im Back-End anzuzeigen:

name ist ein eindeutiger "Codename" und nicht der tatsächliche Name, der im Backend angezeigt wird.
tab teilt Prestashop die Kategorie des Moduls mit. Eine vollständige Liste der Kategorien finden Sie, indem Sie die Datei Controllers\Admin\AdminModuleController.php öffnen.
author, name und version sind selbsterklärend.
need_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 etwas protokollieren muss, während die Modulseite aktiv ist, sollten Sie dies in 1 ändern.

In den letzten beiden Zeilen werden der tatsächliche Anzeigename und die Beschreibung für Ihr Modul festgelegt. Sie verwenden dieselbe Lokalisierungsmethode, um sie in verschiedene Sprachen übersetzen zu können. Diese beiden Zeilen müssen nach der Initialisierung der Eltern gemäß der von Prestashop bevorzugten Reihenfolge, die von ihren offiziellen Modulen verwendet wird, verlaufen.

Der nächste Schritt besteht darin, die Installationsmethode zu überschreiben. Hier können wir die benötigten Hooks sowie die Standardoptionen für unser Modul angeben. Wenn eine der Einstellungen fehlschlägt, schlägt die Installation fehl.

Dieses Modul ist für die Startseite vorgesehen, daher werde ich es mit dem Home-Hook verbinden. Wir möchten dem Header auch eine CSS-Datei hinzufügen, was bedeutet, dass wir auch den Header-Hook hinzufügen müssen. Wenn Sie zum Back-End auf der Seite Module > Positionen gehen, finden Sie die technischen Namen der Hooks (die wir hier angeben werden).

Fügen Sie direkt nach der Funktion __construct() Folgendes hinzu:

public function install()
	{
			if (parent::install() == false || $this->registerHook('displayHome') == false || $this->registerHook('displayHeader') == false || Configuration::updateValue('DP_Number_of_Products', 6) == false)
					return false;
			return true;
	}

Dadurch werden die beiden Hooks hinzugefügt und die Standardanzahl der Produkte auf sechs festgelegt. Sie sollten der Eigenschaft einen eindeutigen Namen geben, damit andere Module Ihre Werte nicht beeinträchtigen. Ein einfacher Ansatz fügt den Namen oder die Initialen Ihres Moduls am Anfang des Namens hinzu.

Sie können Ihr Modul jetzt auf der Modulseite installieren. Es sollte erfolgreich installiert werden, wenn alles korrekt eingerichtet ist. Gehen Sie zur Positionsseite, die unter den beiden Hook als registriert angezeigt wird.

Das Implementieren von Hooks ist recht einfach. Erstellen Sie eine öffentliche Funktion mit dem Wort "hook" gefolgt vom Namen des Hooks. Beginnen wir mit dem Header-Hook. Wir möchten nur, dass unserem Thema eine CSS-Datei hinzugefügt wird. Hier ist die komplette Funktion:

1	public function hookdisplayHeader($params)
2	{
3	$this->context->controller->addCSS(($this->_path).'blockdisplayproducts.css', 'all');
4	}

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

Der nächste Hook ist etwas komplizierter. Es sollte eine bestimmte Anzahl von Produkten aus der Datenbank abrufen und in eine Vorlagendatei laden. Die Funktion zum Abrufen der Produkte gibt keine Bilder oder Links der Produkte zurück. Daher müssen wir einige verschiedene Funktionen aufrufen und eine Reihe von Produkten "erstellen". Hier ist die komplette Funktion:

public function hookdisplayHome($params)
	{
		$languageId = (int)($params['cookie']->id_lang);
		$numberOfProducts = (int)(Configuration::get("DP_Number_of_Products"));
		$productsData = Product::getProducts($languageId, 0, $numberOfProducts, "id_product", "ASC");
		if (!$productsData)
			return "error";
			
		$products = array();
		$link = new Link(null, "http://");
		
		foreach($productsData as $product){
			$tmp = Product::getCover($product['id_product']);
			array_push($products, array(
				'name' => $product['name'],
				'author' => $product['manufacturer_name'],
				'desc' => $product['description_short'],
				'price' => $product['price'],
				'link' => $link->getProductLink(new Product($product['id_product'])),
				'image' => $link->getImageLink($product['link_rewrite'], $tmp['id_image'])
			));
			
		}
		$this->smarty->assign(array(
			'products' => $products
		));

		return $this->display(__FILE__, 'blockdisplayproducts.tpl');
	}

Zunächst werden die Anzahl der anzuzeigenden Produkte und die Sprach-ID des Benutzers ermittelt. 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 gab, die Produkte zu beenden, wenn dies der Fall war. Der nächste Block ist der Teil, den ich zuvor erwähnt habe und der ein Array mit allen Eigenschaften aufbaut, die wir zum Anzeigen des Elements benötigen. Dies schließt das Bild und den Link ein, die nicht mit den restlichen Produktdaten zurückgegeben wurden. Im letzten Abschnitt wird das Produktarray zu Smarty hinzugefügt und die Vorlagendatei Ihrer Wahl geladen. Ich habe die Vorlagendatei und die CSS-Dateien mit demselben Namen wie das Modul benannt, dies ist jedoch keine Voraussetzung. Sie können es benennen, was Sie wollen.

Wenn Sie Ihre Site jetzt öffnen, wird nur die Meldung "Keine Vorlage für Modulblockdisplay-Produkte gefunden" angezeigt. Erstellen wir also die Vorlagendatei im Verzeichnis unseres Moduls und benennen sie so, wie Sie es gerade in der Hook-Funktion angegeben haben. Dieser Teil hängt wirklich von Ihrem spezifischen Themenlayout ab, aber hier ist meine Vorlagendatei:

{if $products !== false}
	<div id="home_products_title"><h1>{l s='OUR BOOKS' mod='blockdisplayproducts'}</h1></div>
	{foreach from=$products item=product name=productLoop}
		<div class="home_products_book">
			<div class="home_products_picture"><img src="http://nettuts.s3.amazonaws.com/2169_prestashop/{$product.image}" alt="{$product.name|strip_tags|escape:html:'UTF-8'}" /></div>
			<div class="home_products_author">{$product.author|upper|strip_tags|escape:html:'UTF-8'}</div>
			<div class="home_products_info">
				<div class="home_products_title">{$product.name|strip_tags|escape:html:'UTF-8'}</div>
				<div class="home_products_description">{$product.desc}</div>
				<div class="home_products_price">${$product.price|string_format:"%.2f"}</div>
				<div class="home_products_openButton"><a href="{$product.link}" class="btn btn-inverse">{l s='View' mod='blockdisplayproducts'}</a></div>
			</div>
		</div>
	{/foreach}
{/if}

Da Prestashop Smarty-Vorlagen verwendet, verfügen Sie über eine Reihe von Hilfsfunktionen, die Sie beim Anzeigen Ihrer Daten verwenden können. Wir beginnen mit einer if-Funktion, um sicherzustellen, dass das Produktarray in Ordnung ist. Wenn dies der Fall ist, gehen wir in eine for-Schleife und generieren für jede den angegebenen HTML-Code. 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 gewünschte Anzahl von Dezimalstellen zu formatieren. Eine vollständige Liste der Modifikatoren finden Sie hier.

Beachten Sie außerdem, dass Sie beim Übersetzen von Zeichenfolgen hier den Namen Ihres Moduls eingeben müssen. Dies liegt daran, dass die Übersetzung nicht an ein Thema gebunden ist, sondern an das Modul selbst. Andererseits ist die Funktion l vorlagenspezifisch; Damit es Ihre Übersetzungsdatei finden kann, ist der Name des Moduls erforderlich.

Sie können Ihre Site jetzt im Browser anzeigen. Wenn Sie Produkte hinzugefügt haben, sollten diese jetzt auf der Startseite angezeigt werden.

Jetzt ist unser Modul voll funktionsfähig, aber es gibt keine Möglichkeit, die Anzahl der zurückgegebenen Produkte anzupassen. Dazu müssen wir eine Funktion namens getContents hinzufügen. Wenn Ihr Modul über diese Funktion verfügt, fügt Prestashop automatisch eine Konfigurationsschaltfläche auf der Seite "Module" hinzu. Alles, was von dieser Funktion zurückgegeben wird, wird auf der Konfigurationsseite angezeigt. Fügen Sie die Funktion zunächst der Klasse des Moduls hinzu und füllen Sie sie mit folgenden Elementen:

public function getContent(){
		
		
		$html  = '<div style="width:400px; margin:auto">';
		$html .= '	<h2>' . $this->displayName . ' Settings</h2>';
		$html .= '	<form action="'. Tools::safeOutput($_SERVER['REQUEST_URI']). '" method="post"><fieldset>';
		$html .= '		' . $this->l('Number of Products to Display') . ': <input type="number" name="numProds" value="' . (int)(Configuration::get('DP_Number_of_Products')) . '" />';
		$html .= ' 		<input type="submit" value="' . $this->l('Save') . '" />';
		$html .= '	</fieldset></form>';
		$html .= '</div>';
		
		return $html;
	}

Diese Funktion baut einfach den HTML-Code auf, der zum Anzeigen eines Formulars mit einem Zahlenfeld und einer Schaltfläche zum Speichern erforderlich ist. Auch hier verwende ich die Methode $this->l(), damit Sie das Modul in Zukunft in andere Sprachen übersetzen können, falls dies erforderlich sein sollte. 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 unterstützt. Das heißt, wenn es für Ihren persönlichen Gebrauch ist, dann fühlen Sie sich frei!

Das einzige andere, was kryptisch erscheinen könnte, ist die Tools::safeOutput()-Funktion, die wir für die URL aufrufen. Ich bin mir ehrlich gesagt nicht 100% sicher, wie wichtig dieser Aufruf ist, aber er entfernt alle HTML-Tags und konvertiert die erforderlichen Zeichen in HTML-Entitäten.

Gehen Sie als Nächstes zur Modulseite und klicken Sie auf die Schaltfläche Konfigurieren auf Ihrem Modul. Sie werden mit dem Formular begrüßt, das wir gerade erstellt haben.

Sie können die Nummer anpassen und auf Speichern klicken, aber wir haben die Speicherfunktion noch nicht beschrieben, sodass sie immer wieder auf 6 zurückgesetzt wird (der Wert, der bereits gespeichert ist).

Fügen Sie in der Funktion den folgenden Code am Anfang der Funktion hinzu:

1	if (Tools::isSubmit('numProds')){
2	Configuration::updateValue('DP_Number_of_Products', (int)(Tools::getValue('numProds')));
3	}

Dies prüft, ob der Wert übergeben wurde - d. h. ob der Wert numProds als Variable $_GET oder $_POST vorhanden ist. 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, was zurückgegeben werden soll, wenn das Formularfeld nicht gefunden wurde. Anschließend wird eine formatierte Zeichenfolge mit dem übermittelten Wert zurückgegeben. Es ist wichtig, dies zu setzen, bevor Sie das HTML-Formular generieren. Andernfalls enthält das Formular die alten Werte, die den aktualisierten Werten zugeordnet sind.

Mit diesem letzten Code haben wir das Modul fertiggestellt. Das einzige andere, was Sie tun sollten, ist, Ihrem Modulordner ein 16x16-GIF-Symbol hinzuzufügen.

Wir sind jetzt bereit, mit der nächsten Option zur Integration von Modulen in Ihr Thema fortzufahren.

Bestehende Module überschreiben

Die zweite Möglichkeit besteht darin, ein vorhandenes Modul zu verwenden und es nach Ihren Wünschen neu zu gestalten. Diese Option ist erheblich einfacher, da Sie nur die ".tpl"-Datei(en) aus dem Modul neu erstellen müssen.

In meinem Beispielthema fehlt immer noch ein oberes Navigationsmenü. Passen wir dieses Modul an. Aktivieren/installieren Sie das Modul zunächst auf der Seite 'Module' mit dem Namen 'Oberes horizontales Menü'. Der nächste Schritt besteht darin, einen Ordner in Ihrem Themenverzeichnis zu erstellen, der als modules bezeichnet wird. Erstellen Sie darin einen weiteren Ordner mit dem tatsächlichen Namen des Moduls - in unserem Fall ist dies blocktopmenu. Beim Laden der tpl-Dateien eines Moduls prüft Prestashop zunächst, ob sich im aktivierten Modul-Überschreibungsverzeichnis für Themen mit demselben Namen eine Datei befindet. In diesem Fall wird die Themen-Version anstelle der Standardversion geladen. Die tpl-Datei des Menümoduls heißt blocktopmenu.tpl, daher müssen Sie in dem soeben erstellten neuen Ordner eine Datei mit demselben Namen erstellen.

Der einfachste Weg, um herauszufinden, welche Art von Daten ein Modul bietet, besteht darin, entweder in die tpl-Datei zu schauen und zu sehen, welche Daten sie verwenden, oder das Werkzeug {debug} zu laden. Um die Sache zu beschleunigen, kann ich Ihnen sagen, dass dieses Plugin nur eine einzige Variable namens MENU bietet, die eine Zeichenfolge enthält, in der alle Menüelemente zusammengefasst sind

tags. Dies allein gibt Ihnen nicht viel Spielraum, wenn es darum geht, das Erscheinungsbild anzupassen. Aber was ist, wenn Sie für jeden Artikel etwas anderes als nur ein li-Tag hinzufügen möchten? Zum Glück Smarty zur Rettung! Dies ist kein Artikel über Smarty, daher werde ich diesen Teil kurz halten, aber im Grunde werden wir eine Kombination aus der Funktion zum Ersetzen von Zeichenfolgen und der Explosionsfunktion von PHP verwenden, um die einzelnen Elemente zu isolieren. Anschließend können wir den HTML-Code mit einer foreach-Schleife erstellen. Hier ist meine fertige Vorlagendatei für dieses Modul:

<div id="menuItems" class="divcollapse">
	<ul>
		{assign var=tmpMenu value=$MENU|replace:'<li>':''}
		{assign var=items value='</li>'|explode:$tmpMenu} 
		{foreach $items as $item}
			{if !$item@last}
		    	<li>{$item}</li>
		    	{if ($item@index + 2) != $item@total}
		    		<div class="divcollapse logo"><img src="http://nettuts.s3.amazonaws.com/2169_prestashop/{$img_dir}icon.png" alt="logo"/></div>
		    	{/if} 
		    {/if}
		{/foreach}
	</ul>
</div>

Das ist eine Menge neuer Code, also werde ich ihn Zeile für Zeile durchgehen. Es beginnt mit dem Öffnen der Tags div und ul; diese sind rein aus ästhetischen Gründen. Als nächstes verwenden wir einen Smarty-Befehl namens assign. Dies macht genau das, wonach es sich anhört: es weist einer Variablen einen Wert zu. In der ersten Zuweisungsanweisung entfernen wir die öffnenden li-Tags und in der zweiten explodieren wir die Zeichenfolge durch das schließende li-Tag. Das Ergebnis ist ein Array mit einer Liste von Menüelement-Links. Wir bewegen uns dann zu einer foreach-Schleife, in der wir jedes Element im Inneren anzeigen

tags - außer, diesmal haben wir nach jedem Menüpunkt ein Symbolbild hinzugefügt, mit Ausnahme des letzten Menüpunkts. Möglicherweise haben Sie auch bemerkt, dass ich den letzten Wert im Array insgesamt vermeide. Dies liegt daran, dass der letzte Wert nur ein Zeilenumbruchzeichen ist.

Wenn Sie bisher alles korrekt ausgeführt haben, können Sie es jetzt nach Ihren Wünschen gestalten und auf der Seite "Konfigurieren" des Moduls einige Seiten zum Menü hinzufügen. Sobald Sie fertig sind, sollten Sie in der Lage sein, zu Ihrer Site zu gehen und zu sehen, wie das Menü wie erwartet funktioniert!

Schlussfolgerung

Dies war eine sehr kurze, aber gründliche Überprüfung der Techniken, die zum Erstellen von PrestaShop-Themen erforderlich sind. Im Verlauf des Tutorials habe ich die erforderlichen Schritte zum Erstellen eines vollständigen mehrsprachigen Themas und zwei verschiedene Möglichkeiten zum Einfügen von Themenmodulen in Ihre Vorlage durchlaufen.

In Zukunft schlage ich vor, dass Sie etwas tiefer in Smarty eintauchen, da es eine Reihe versteckter Funktionen bietet, die Ihnen wirklich helfen können. Ein guter Ort, um mehr über Prestashop zu erfahren, ist nicht viel. Ich empfehle die Quelle zu lesen. Zum Zeitpunkt dieses Schreibens ist die Dokumentation von Prestashop in Bezug auf die Themen etwas fleckig. Ihr Quellcode ist jedoch sehr gut dokumentiert. Eine weitere hervorragende Option besteht darin, andere Module und Themen zu untersuchen, um ein tieferes Verständnis dafür zu erlangen, wozu Prestashop in der Lage ist.

Ich hoffe, Ihnen hat das Lesen dieses Artikels gefallen. Wenn Sie Fragen zum Artikel selbst oder zu Prestashop im Allgemeinen haben, können Sie unten einen Kommentar hinterlassen!

Benötigen Sie erstklassige, sofort einsatzbereite PrestaShop-Themen? Besuchen Sie ThemeForest!

Nützliche Links: PrestaShop Plugins von CodeCanyon.