Schritt-für-Schritt-Anleitung zum Hinzufügen eines benutzerdefinierten HTML-Blocks in PrestaShop

Benutzerdefinierten HTML-Block in PrestaShop hinzufügen | Schritt-für-Schritt-Anleitung von Knowband

 

Warum sollten wir einen benutzerdefinierten HTML-Block zu unserem PrestaShop Store hinzufügen?

Das Hinzufügen eines benutzerdefinierten HTML-Blocks zur PrestaShop-Website kann deren Funktionalität oder Gesamtstil verbessern, indem es den Ladenbesitzern ermöglicht, benutzerdefinierte Texte, Bilder, Links oder andere HTML-Elemente in die Website einzufügen. Diese Blöcke können hinzugefügt werden, um unterschiedliche Inhalte auf verschiedenen Controllern oder zu präsentieren Seiten.

Der Vorgang zum Hinzufügen eines benutzerdefinierten HTML-Blocks im PrestaShop-Shop ist für alle Versionen ähnlich.

Um einen benutzerdefinierten Block hinzuzufügen, verwenden wir ein benutzerdefiniertes Modul im PrestaShop-Shop.

Warum ein benutzerdefiniertes Module?

Warum ein benutzerdefiniertes Modul – Knowband

Flexibilität und eine engere Integration in einen Online-Shop sind zwei Hauptvorteile der Erstellung eines maßgeschneiderten HTML-Blocks mit einem bestimmten PrestaShop-Modul. Diese Strategie funktioniert besonders gut, wenn Shopbesitzer bestimmte Kriterien haben, die die bereits vorhandenen Module nicht erfüllen, oder wenn neue Funktionen hinzugefügt werden ohne die Kerndateien der Plattform zu verändern, ist erwünscht.

Durch die Entscheidung, ein benutzerdefiniertes Modul zu erstellen, können PrestaShop-Shop-Besitzer das Erscheinungsbild ihrer E-Commerce-Umgebung genau an ihre Marketingziele und Kundeninteraktionsstrategien anpassen. Diese Anpassung ermöglicht eine weitere Personalisierung des Benutzererlebnisses, was die Kundenzufriedenheit und -loyalität erhöhen kann Darüber hinaus gibt es Geschäftsinhabern die Flexibilität, sich schnell an sich ändernde Markttrends anzupassen und einen Wettbewerbsvorteil zu wahren, indem einzigartige Funktionen integriert werden, die die Kundenzufriedenheit und die betriebliche Effizienz steigern.

Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen und Verwenden eines benutzerdefinierten HTML-Blocks im PrestaShop-Shop: –

Schritt 1: Erstellen Sie Basisdateien und ein Modulverzeichnis

  1. Fügen Sie ein neues Verzeichnis hinzu: Navigieren Sie zum Modulverzeichnis der PrestaShop-Installation und erstellen Sie einen neuen Ordner mit dem Namen „myhtmlblock’.
  2. PHP-Hauptdatei: Bitte erstellen Sie eine Datei mit dem Namen „myhtmlblock.php‘ in diesem Verzeichnis. Diese Datei enthält die Hauptklasse Ihres Moduls.

Schritt 2: Codieren Sie Ihr Modul

Öffnen Sie „myhtmlblock.php“ und fügen Sie den folgenden PHP-Code hinzu, um Ihr Modul zu definieren:

Screenshot des PHP-Codes

 

Stellen Sie außerdem sicher, dass in jedem einzelnen Ordner des HTML-Moduls eine Datei mit dem Namen „index.php“ mit dem folgenden Code vorhanden ist:

Screenshot eines benutzerdefinierten HTML-Blocks in PrestaShop

 

Schritt 3: Fügen Sie eine Vorlagendatei hinzu

Erstellen Sie im Modulverzeichnis eine Ordnerstruktur wie folgt: „views/templates/hook“ und erstellen Sie im Hook-Verzeichnis eine Datei mit dem Namen „displayHome.tpl“:

Screenshot eines benutzerdefinierten HTML-Blocks in PrestaShop

 

Bitte beachten Sie, dass am Anfang der Vorlagendatei ein Kommentar zum Dateipfad und seinem Namen hinzugefügt wurde, um diesen im HTML-Inhalt Ihres Shops anzuzeigen.

Schritt 4: Fügen Sie bei Bedarf eine Konfigurationsseite hinzu

Wenn der Shop-Inhaber den HTML-Inhalt über das Admin-Panel konfigurierbar machen möchte, muss er ein Konfigurationsformular in der Methode „getContent()“ Ihrer Modulklasse implementieren, sodass der Administrator oder Store-Inhaber dazu in der Lage ist Ändern Sie den HTML-Text, ohne den Code zu ändern.

Schritt 5: Installation des Moduls

  • Rufen Sie das PrestaShop-Admin-Panel auf.
  • Wählen Sie unter „Module“ die Option „Modulmanager“.
  • Klicken Sie auf „Modul hochladen“ und wählen Sie die ZIP-Datei Ihres Moduls aus oder suchen Sie Ihr Modul in der Modulliste, wenn es bereits auf dem Server ist.
  • Wählen Sie „Installieren“.

Installieren des Moduls

 

Schritt 6: Platzieren Sie das Modul an anderen Haken (optional)

Der benutzerdefinierte HTML-Block in Prestashop muss an mehreren Stellen auf der PrestaShop-Website angezeigt werden. Daher müssen wir die Methode „install()“ des Moduls ändern, um mehrere Hooks zu registrieren. Jeder Hook verfügt über eine bestimmte Stelle auf der Website, an der Inhalte angezeigt werden können.

Zu den typischen Haken gehören:

  • displayFooter
  • displayLeftColumn
  • displayRightColumn
  • displayProductAdditionalInfo
  • displayTop

Schritt 7: Testen Sie Ihr Modul

Gehen Sie nach der Installation zur Startseite Ihrer Website, um Ihren neuen benutzerdefinierten HTML-Block in Aktion zu sehen.

benutzerdefinierter HTML-Block

 

Wenn Sie ein Konfigurationsformular hinzugefügt haben, versuchen Sie, den HTML-Blockinhalt über das PrestaShop-Backoffice zu ändern, um zu sehen, ob er korrekt aktualisiert wird.

Dieser Ansatz gibt Ihnen die volle Kontrolle darüber, was Ihr Modul tut und wo es auf Ihrer PrestaShop-Site angezeigt wird, was es zu einer leistungsstarken Möglichkeit macht, die Funktionalität und das Design Ihres Shops anzupassen.

Falls Sie Fragen/Vorschläge haben, können Sie sich unter unserer E-Mail-Adresse support@knowband.com an unser technisches Support-Portal wenden.

Schauen Sie sich unser Bestseller-Modul an One Page Supercheckout für Prestashop und Opencart Android- und iOS Mobile App Builder-Plugin Hier können Sie die Produktvisualisierung in Ihrem Geschäft mithilfe von verbessern Prestashop Product Designer / Customizer Addon.

Außerdem können Sie hier unsere neuesten Videos ansehen:

 

 

Adrienne

We are professionals in the eCommerce industry, specializing in plugin development. With years of experience, We provide the best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also offer custom module development and customization services for websites and modules. Our team remains at the forefront of industry trends, delivering cutting-edge solutions to enhance eCommerce website functionality. With a customer-centric approach, our company is trusted partner for eCommerce plugin solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *