Prestashop is aantoonbaar de # 1 open-source e-Commerce-oplossing op het web. Het biedt talloze functies, add-ons en thema's, maar het gebrek aan goede documentatie heeft nieuwkomers de perceptie gegeven dat het ongenaakbaar is. In dit artikel zal ik u helpen bij het maken van uw eigen aangepaste thema, evenals het maken en aanpassen van Prestashop-modules.

Prestashop draait op PHP en mySQL en vertrouwt op de Smarty-engine voor zijn "Sjablonen" (pagina's). Maak je geen zorgen, als je niet bekend bent met Smarty. U gebruikt het in feite om pagina's met tijdelijke aanduidingen te maken en Prestashop vult de informatie in wanneer de pagina wordt geladen. Het is gemakkelijk om over te schakelen naar, als je iets hebt gebruikt als Stuurbalken of Onderstreepssjablonen.

Ik ga ervan uit dat je Prestashop al hebt gedownload en geïnstalleerd. Zo niet, dan kunt u de nieuwste versie downloaden; ze hebben een instructievideo die u kunt bekijken om te leren hoe u deze instelt.

Uw thema registreren

Uw site moet er ongeveer zo uitzien als de volgende afbeelding, als u Prestashop instelt met de standaardinstellingen.

Het maken van een eigen thema begint met het maken van een map. Ga in je gewenste bestandsbrowser naar de hoofdmap Prestashop en je zult een map vinden met de naam thema's. Binnen in de thema's map, maak een nieuwe map met de naam van uw thema. Ik ga de mijne bellen, "Demo."

Als u een afbeelding van uw sjabloon toevoegt aan deze map en deze een naam geeft preview.jpg, Prestashop moet uw sjabloon automatisch vinden en toevoegen aan de back-end. Als dit niet het geval is, of als u de foto later wilt toevoegen, kunt u het thema handmatig toevoegen. Ga hiervoor naar Thema's optie onder de voorkeuren menu en klik Voeg nieuw toe op de top. Eenmaal voltooid, ziet u uw thema in het midden van de pagina. Activeer het door erop te klikken en op te drukken Opslaan knop.

Voeg uw logo ('s) toe terwijl u hier bent; je kunt deze optie onderaan de pagina vinden. Mogelijk moet je de limiet voor het uploaden van bestanden in Prestashop (of misschien zelfs het configuratiebestand van PHP) verhogen als je een erg grote afbeelding hebt.

Crashcursus in Prestashop

Smarty is een template-engine voor PHP, die de scheiding tussen presentatie en applicatielogica mogelijk maakt.

Zoals ik eerder al zei, gebruikt Prestashop Smarty voor het genereren van de pagina's; dus alle sjabloonbestanden hebben een .tpl uitbreiding. Er zijn veel pagina's die u moet maken om een ​​volledig thema te hebben; neem een ​​moment en bekijk de lijst met bestanden.

Uiteindelijk bepaalt de functionaliteit van uw thema welke pagina's u moet implementeren. Deze pagina's zijn gebaseerd op de bestanden in de map controllers en u kunt de standaardcontrollers negeren of uw eigen aangepaste controllers toevoegen aan uw thema. Maar dat valt buiten het bestek van dit artikel. Onder de controllers in controllers \ map vooraan zijn twee sjabloonbestanden die automatisch laden: header.tpl en footer.tpl.

De belangrijkste inhoud van uw site wordt geladen door modules met behulp van "Hooks".

Er zijn twee soorten haken in Prestashop: actie- en display-hooks. Deze werken allebei op dezelfde manier, maar ze verschillen qua doel. Een haak geeft de gebruiker in feite een middel om aangepaste code aan een externe bron te koppelen. In het geval van een actiehaak wordt elke code die aan de haak is bevestigd, uitgevoerd wanneer de haak wordt aangeroepen. Prestashop wordt bijvoorbeeld geleverd met een standaardhaak genaamd actionProductAdd die wordt uitgevoerd bij het toevoegen van een product. U kunt dus een module aan deze haak toevoegen als u elke keer dat een nieuw product wordt toegevoegd een e-mailnieuwsbrief wilt sturen.

Een haak op het scherm lijkt erg op elkaar, maar in plaats van een functie aan een gebeurtenis te koppelen, verbindt u een functie met een specifieke plaats op de sjabloon. Met andere woorden, Prestashop roept uw ​​module aan op een specifiek punt (bijvoorbeeld de rechterzijbalk) en alles dat wordt geretourneerd, wordt op de pagina geplaatst. Je kunt alle momenteel geregistreerde hooks bekijken door naar de Modules> Posities pagina in de back-admin.

Persoonlijk vind ik het het beste om te beginnen met een standaard HTML-thema. Dit is geen vereiste, maar ik kan het om een ​​aantal redenen sterk aanbevelen:

• Hiermee kun je meteen zien welke hooks je nodig hebt en hoe je je inhoud moet verdelen.
• Het geeft u een duidelijke richting aan welke sjabloonbestanden u moet maken, en geeft u een idee van wat statische inhoud zal zijn en wat een module zou moeten zijn. Je kunt er ook aan toevoegen preview.jpg bestand meteen.

De volgende afbeelding is een afbeelding van mijn voorbeeld HTML-sjabloon:

En hier kun je zien hoe ik het opsplits in Prestashop-haken:

De sjabloonpartials maken

Laten we nu de header.tpl bestand in je themadirectory en vul het met je thema-header. Dit omvat de doctype, gebied en alles in de hoofdtekst die u op alle pagina's wilt weergeven. Hier is een voorbeeld header.tpl het dossier:

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

Er zijn een paar dingen om op te wijzen in deze code. Ik preprended de CSS-bestandsnaam met $ Css_dir. Dit is een Smarty-variabele die naar een opgeroepen map verwijst css in de directory van uw thema, waar alleen uw CSS-bestanden naartoe moeten gaan.

De volgende regel gebruikt Smarty's foreach loop om alle CSS-bestanden van de ingeschakelde modules toe te voegen. Het is vermeldenswaard dat, als u een CSS-bestand maakt met de naam global.css in de css map, voegt de lus het bestand automatisch aan de pagina toe.

Een paar regels later, nog een foreach lus verwerkt de JavaScript-bestanden in de js map en voegt ze toe aan de pagina. In het laatste gedeelte open ik het body-element en definieer ik een haak voor de menumodule. Ten slotte begin ik met het weergeven van het logo van de site.

Tenzij je een Prestashop-veteraan bent, vraag je je waarschijnlijk af waar ik met deze variabelen aan het komen ben. Zoals ik eerder zei, ontbreekt de documentatie van Prestashop helaas, maar ze bieden wel een foutopsporingstool die u kunt starten door toe te voegen Debug naar een van de sjabloonbestanden. Wanneer u de bijbehorende pagina in uw browser opent, krijgt u een pop-up met een lijst met alle variabelen voor die specifieke sjabloon. Hiermee kunt u snel (met behulp van ctrl / cmd-F dramatisch helpt) vaststellen welke variabelen zijn gedefinieerd, evenals hun waarden.

Laten we nu de footer.tpl sjabloon. Ik ga dit simpel houden en sluit gewoon de en elementen, maar voel je vrij om iets toe te voegen dat je onderaan elke pagina wilt weergeven. Dit kan alles zijn van hooks tot aangepast JavaScript; er zijn geen grenzen aan wat je hier zou kunnen plaatsen.

Het laatste bestand dat ik wil implementeren is het index.tpl het dossier. Dit is het 'startpagina'-bestand dat wordt weergegeven wanneer een gebruiker de hoofdmap van uw site opent. In het standaard Prestashop-thema worden de zijbalken geladen in de header.tpl bestand en de werkelijke indexsjabloon bevat alleen een aanroep naar de displayHome haak. Dit is prima als u wilt dat de zijbalken op alle pagina's staan, maar nogmaals, ik wil benadrukken dat haken op uw gemak worden geïmplementeerd. U hoeft geen enkele haak te implementeren en u kunt uw eigen aangepaste haken toevoegen als u meer nodig hebt dan de standaardfunctionaliteit.

Bij het maken van uw indexpagina moet u beslissen welke onderdelen statisch zijn en welke onderdelen dynamisch moeten worden geladen via modules. Ik heb het hoofdmenu uit de kop verwijderd omdat ik dit wilde regelen met een module. Dus plaatste ik een haak waar ik het menu wilde hebben en ik kan een module maken die aan deze haak hecht. Je kunt meerdere items met dezelfde haak laden. Er is geen reden om meerdere haken bij elkaar te voegen en je kunt de volgorde van de haakmodules in de back-end hieronder beheren Modules> Posities.

Localization

De laatste Prestashop-specifieke functie die u moet overwegen, zijn de lokalisatietools van Prestashop. Met Prestashop kunt u eenvoudig uw site in meerdere talen vertalen met behulp van een Smarty-functie, genaamd l. U gebruikt het door een standaardstring te vervangen door de l functie, waarbij de tekenreeks als een parameter wordt doorgegeven. Hier is een voorbeeld van een

element, zowel met als zonder vertaling:

* Without Translation Tool * 
Abonneer je op ons!
 * Met vertaalhulpmiddel * 
l s = "Abonneer u op ons!"

Zelfs als u momenteel niet van plan bent om uw site te vertalen, is het een kleine wijziging waarmee u eenvoudig uw pagina's kunt vertalen als u later besluit dit te doen. Zodra u deze wijzigingen aanbrengt in uw sjablonen, kunt u naar de Lokalisatie> Vertalingen pagina in de back-end en klik op de nationaliteit waarnaar u wilt vertalen.

Het toevoegen van niet-standaard talen is eenvoudig en ik behandel het in het tweede gedeelte op de pagina (toepasselijk de naam "Een taal toevoegen / bijwerken").

Een ander voordeel van het gebruik van Prestashop's lokalisatie is de lijst met de zinnen die Prestashop u geeft. In plaats van de hele site door te nemen, kunt u de lijst met zinnen gewoon aan een moedertaalspreker van uw gewenste taal overhandigen en snel de waarden invoeren zonder uw thema aan te raken.

Voer nu de HTML van uw startpagina in naar de index.tpl, en zorg ervoor dat u de haken levert die u wilt gebruiken. Vergeet niet om de te gebruiken Debug Smarty-functie, als u wilt dat de variabelen beschikbaar zijn voor uw sjabloon.

Nu kunt u een browser openen en naar de hoofdmap van uw site gaan. De mijne ziet er zo uit:

Het ziet er misschien niet zo uit, maar je hebt de buitenste schil van je sjabloon gebouwd. Als uw sjabloon eruit ziet als een puinhoop van objecten, komt dit waarschijnlijk omdat u veel modules hebt geïnstalleerd. Standaard maakt Prestashop vele modules mogelijk; Ik raad aan om naar de modulespagina te gaan en alle modules te verwijderen. Maak je geen zorgen over het verlies ervan, want je kunt ze opnieuw installeren door op de knop Installeren naast de gewenste module te klikken.

Wanneer u een Prestashop-thema maakt, merkt u dat modules verantwoordelijk zijn voor ongeveer 90% van de inhoud. Er zijn modules die de producten, modules voor het winkelwagentje, enz. Tonen. Een belangrijk onderdeel van het zijn van een Prestashop-themaker omvat op zijn minst een praktische kennis over hoe het uiterlijk van modules kan worden aangepast..

---

modules

Modules in Prestashop zijn niet hetzelfde als Wordpress-widgets.

Modules in Prestashop zijn niet hetzelfde als Wordpress-widgets; De modules van Prestashop kunnen alleen worden gekoppeld aan haken die door de maker van de module worden opgegeven. Als u bijvoorbeeld een module maakt die een blok 'aanmelden voor nieuwsbrief' weergeeft en u deze instelt om in een van de zijbalken te gaan, kunt u deze niet in het voettekstgebied plaatsen.

Dit lijkt misschien omslachtig, maar er is een zeer goede reden voor: wanneer u een module maakt, biedt u een afzonderlijke functie voor elk van de haken die u wilt gebruiken. Bijvoorbeeld als een menunodule zich anders kan gedragen op basis van de locatie in de sjabloon.

Dit geeft u veel ruimte om een ​​module aan te passen.

Deze oefening is logischer als je andere soorten haken beschouwt: actiehaken. U wilt duidelijk niet de functie die wordt uitgevoerd wanneer u een nieuw product toevoegt om uit te voeren wanneer een gebruiker een product van u koopt. Hetzelfde geldt voor display-hooks; elke haak heeft zijn eigen functie, waardoor je ermee kunt doen wat je wilt.

Bij het bouwen van een thema zijn er twee manieren om modules toe te voegen. De eerste optie is om uw eigen module te maken. Dit is de meer vervelend optie, maar je krijgt veel meer controle over het eindproduct. Aan de andere kant zijn er meer dan 2000 modules in de officiële modulescatalogus (en zelfs meer op sites van derden). De kans is groot dat u iets vindt dat aan uw behoeften voldoet.

Uw tweede optie is om een ​​kant-en-klare module te installeren; Prestashop biedt u de mogelijkheid om het uiterlijk aan te passen door de sjabloonbestanden te overschrijven. Dit is de betere optie, als je niet echt wilt beginnen met het coderen van je eigen module, en het stelt je in staat om je te concentreren op de grafische kant. Ik ga beide opties behandelen; dus laten we beginnen met de eerste.

Maak je eigen module

We zullen een module bouwen die een configureerbaar aantal producten op de startpagina weergeeft. Dit is losjes gebaseerd op de voorraadmodule, maar mijn module zal iets meer ingaan op de onderliggende klassen van Prestashop om u hopelijk een grondiger blik op het proces te geven.

Maak eerst een map in de modules map en maak vervolgens een PHP-bestand aan in de map met dezelfde naam als de map. Wanneer u de modules map, ziet u een naamgevingsconventie, waarbij alle modules die alleen inhoud weergeven beginnen met het woord "blokkeren". Dit is natuurlijk geen vereiste, maar het is logisch. Ik zal mijn map een naam geven blockdisplayproducts, en daarin maak ik het PHP-bestand met dezelfde naam.

Open het PHP-bestand en definieer de modulesklasse:

name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; bovenliggende :: __ construct (); $ this-> displayName = $ this-> l ('Display Products Module'); $ this-> description = $ this-> l ('Geeft een configureerbaar aantal producten weer voor de startpagina.'); 

Prestashop-modules zijn objectgeoriënteerd; daarom moet je een klasse maken voor je module. De naam van uw klas moet de camel-cased-versie van de naam van uw map zijn.

Bovenaan het bestand ziet u een als uitspraak. Dit zorgt ervoor dat het bestand niet rechtstreeks via de browser wordt geladen. Vervolgens moet uw klasse de klasse Module of subklasse direct een subklasse van de klasse Module subklasse.

Binnen de constructor stellen we de eigenschappen van de module in. Prestashop gebruikt deze informatie om weer te geven in de back-end:

• naam is een unieke "codenaam" en het is niet de werkelijke naam die wordt weergegeven in de back-end.
• tab vertelt Prestashop de categorie van de module. Je kunt een volledige lijst met categorieën vinden door de Controllers \ Admin \ AdminModuleController.php het dossier.
• schrijver, naam en versie zijn zelf verklarend.
• needs_instance vertelt Prestashop om een ​​exemplaar van uw variabele te maken bij toegang tot de modulepagina. Dit is meestal niet nodig, maar als uw module een bericht moet weergeven of iets moet loggen wanneer de modulepagina actief is, moet u dit wijzigen naar een 1.

De laatste twee regels stellen de eigenlijke weergavenaam en beschrijving voor uw module in, en ze gebruiken dezelfde lokalisatiemethode om ze naar verschillende talen te kunnen vertalen. Deze twee regels moeten uitgaan van de initialisatie van de ouder volgens de voorkeursvolgorde van Prestashop die wordt gebruikt door hun officiële modules.

De volgende stap is om de installatiemethode te overschrijven. Hier kunnen we de haakjes specificeren die we nodig hebben, evenals de standaardopties voor onze module. Als een van de instellingen mislukt, mislukt de installatie.

Deze module is bedoeld voor de startpagina, dus ik zal hem verbinden met de thuishaak. We willen ook een CSS-bestand toevoegen aan de header, wat betekent dat we ook de header hook moeten toevoegen. Als je naar de back-end gaat onder de Modules> Posities pagina, kunt u de technische namen van de hooks vinden (wat we hier zullen specificeren).

Direct na de __construct () functie, voeg het volgende toe:

public function install () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Configuratie :: updateValue ('DP_Number_of_Products', 6) == false) return false; geef waar terug; 

Dit voegt de twee haken toe en stelt het standaard aantal producten in op zes. U moet de eigenschap iets uniek noemen, zodat andere modules uw waarden niet hinderen. Een eenvoudige benadering voegt de naam of initialen van uw module toe aan het begin van de naam.

U kunt nu uw module op de modulepagina installeren en deze moet met succes worden geïnstalleerd als alles correct is ingesteld. Ga naar de positiespagina en deze wordt weergegeven zoals geregistreerd onder de twee haken.

Het implementeren van hooks is vrij eenvoudig; maak een openbare functie met het woord "haak" gevolgd door de naam van de haak. Laten we beginnen met de headerhaak. We willen gewoon dat het een CSS-bestand toevoegt aan ons thema. Hier is de complete functie:

openbare functie hookdisplayHeader ($ params) $ this-> context-> controller-> addCSS (($ dit -> _ pad). 'blockdisplayproducts.css', 'all'); 

Maak dat CSS-bestand in uw themadirectory, en uw sjabloon zou het moeten laden in de header.

De volgende haak is een beetje ingewikkelder. Het moet een bepaald aantal producten uit de database halen en in een sjabloonbestand laden. De functie om de producten op te halen, retourneert de afbeeldingen of links van de producten niet, dus we moeten een paar verschillende functies noemen en een reeks producten 'bouwen'. Hier is de complete functie:

openbare functie 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"); als (! $ productsData) "error" retourneert; $ 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 ['prijs'], 'link' => $ link-> getProductLink (nieuw product ($ product ['id_product'])), 'image' => $ link-> getImageLink ($ product ['link_rewrite' ], $ tmp ['id_image'])));  $ this-> smarty-> assign (array ('producten' => $ producten)); return $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); 

Het begint met het verkrijgen van het aantal producten dat wordt weergegeven en de taal-ID van de gebruiker. Vervolgens bellen we om het toegewezen aantal producten te krijgen vanaf het eerste geregistreerde product. Daarna zorgen we ervoor dat er geen problemen zijn om de producten te laten uitstromen als die er waren. Het volgende blok is het gedeelte dat ik eerder noemde en dat een array opbouwt met alle eigenschappen die we nodig zullen hebben bij het weergeven van het item. Dit omvat de afbeelding en de link die niet zijn geretourneerd met de rest van de productgegevens. De laatste sectie voegt de array producten toe aan Smarty en laadt het sjabloonbestand van uw keuze. Ik noemde het sjabloonbestand en de CSS-bestanden met dezelfde naam als de module, maar dit is geen vereiste; je kunt het noemen wat je maar wilt.

Als u uw site nu opent, ziet u alleen een bericht en ziet u "Geen sjabloon gevonden voor moduleblokdisplayproducten."Laten we dus het sjabloonbestand in de directory van onze module maken, met dezelfde naam die u zojuist hebt opgegeven in de hook-functie. Dit deel hangt echt af van uw specifieke themalay-out, maar hier is mijn sjabloonbestand:

if $ products! == false 
l s = "ONZE BOEKEN" mod = "blockdisplayproducts"
 foreach from = $ products item = product name = productLoop 
 
 
$ Product.author | bovenste | 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

Aangezien Prestashop Smarty-sjablonen gebruikt, hebt u een aantal helperfuncties die u kunt gebruiken bij het weergeven van uw gegevens. We beginnen met een als functie om ervoor te zorgen dat de array met producten in orde is. Als dat zo is, gaan we naar a voor lus, genereert de opgegeven HTML voor elke HTML-code. We gebruiken de ingebouwde helperfuncties van Smarty om HTML-tags te verwijderen en de auteursnaam in hoofdletters te verbergen, en we gebruiken een andere methode om de prijs op het gewenste aantal decimalen in te delen. Zie hier voor een volledige lijst met modifiers.

Merk ook op dat, bij het vertalen van strings hier, u de naam van uw module moet invoeren. Dit komt omdat de vertaling niet is gekoppeld aan een thema, maar aan de module zelf. Aan de andere kant, de l functie is sjabloonspecifiek; dus, om uw vertaalbestand te vinden, heeft het de naam van de module nodig.

U kunt uw site nu in de browser bekijken; als u producten hebt toegevoegd, moeten deze nu op de startpagina worden weergegeven.

Nu is onze module volledig functioneel, maar er is geen manier om het aantal geretourneerde producten aan te passen. Om dit te doen, moeten we een functie toevoegen, genaamd getContents. Als uw module over deze functie beschikt, voegt Prestashop automatisch een configuratieknop toe aan de pagina "modules". Alles wat door deze functie wordt geretourneerd, wordt weergegeven op de configuratiepagina. Voeg om te beginnen de functie toe aan de klasse van de module en vul deze met het volgende in:

openbare functie getContent () $ html = '
'; $ html. = ' 
'. $ this-> displayName. 'Instellingen
'; $ html. = ' 
'; $ html. = ". $ this-> l ('Aantal weer te geven producten'). ': '; $ html. = ' '; $ html. = ' 
'; $ html. = '
'; return $ html; 

Deze functie bouwt eenvoudig de HTML op die nodig is om een ​​formulier weer te geven met een nummervak ​​en een bewaarknop. Nogmaals, ik gebruik de $ This-> l () methode, zodat u de module in de toekomst in andere talen kunt vertalen, mocht u dit nodig hebben. Ik heb een nummerveld gebruikt in het HTML-formulier, maar pas op, als je een commerciële module maakt. Het wordt nog steeds niet door alle browsers ondersteund. Dat gezegd hebbende, als het voor uw eigen persoonlijk gebruik is, voel u dan vrij!

Het enige andere dat cryptisch lijkt, is het Gereedschap :: safeOutput () functie die we oproepen op de URL. Ik ben er eerlijk gezegd niet 100% zeker van hoe cruciaal deze oproep is, maar wat het doet is dat het alle HTML-tags verwijdert en de benodigde tekens converteert naar html-entiteiten.

Ga vervolgens naar de pagina Modules en klik op de knop Configureren op uw module. Je wordt begroet met de vorm die we zojuist hebben gemaakt.

U kunt het aantal aanpassen en op opslaan drukken, maar we hebben nog niet geschreven in de opslagfunctie, dus het zal blijven terugstellen naar 6 (de waarde die al is opgeslagen).

Terug in de functie, voeg de volgende code toe aan het begin van de functie:

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

Hiermee wordt gecontroleerd of de waarde is verzonden, dus als de waarde numProds bestaat als een $ _GET of $ _POST variabel. Vervolgens werken we de property bij waarin we de waarde hebben opgeslagen. De methode Gereedschap :: getValue accepteert de naam van een formulierveld en optioneel een tweede tekenreeks van wat moet worden geretourneerd als het formulierveld niet is gevonden; er wordt dan een opgemaakte reeks geretourneerd met de waarde die is verzonden. Het is belangrijk om dit te plaatsen voordat u het HTML-formulier genereert; anders zal het formulier de oude waarden bevatten zoals deze bij de bijgewerkte zijn.

Met dat laatste stukje code hebben we de module voltooid. Het enige andere dat u moet doen, is een 16x16 GIF-pictogram aan uw modulesmap toevoegen.

We zijn nu klaar om over te gaan naar de volgende optie voor het integreren van modules met uw thema.

Bestaande modules overschrijven

De tweede optie is om een ​​bestaande module te gebruiken en opnieuw te thematiseren volgens uw smaak. Deze optie is aanzienlijk eenvoudiger omdat u alleen het ".tpl" -bestand (en) van de module opnieuw hoeft te maken.

Mijn voorbeeldthema mist nog steeds een topnavigatiemenu, dus laten we die module aanpassen. Om aan de slag te gaan, schakelt u de module in / in op de pagina 'modules', 'Top horizontaal menu'. De volgende stap is om een ​​map te maken in uw thema-map, genaamd modules. Daarin maak je een andere map met de echte naam van de module - in dit geval is dit blocktopmenu. Bij het laden van de tpl-bestanden van een module controleert Prestashop eerst of er zich een bestand bevindt in de map met geactiveerde thema's-overschrijving met dezelfde naam. Als dit het geval is, wordt de versie van het thema geladen in plaats van de voorraad één. Het tpl-bestand van de menommodule krijgt de naam blocktopmenu.tpl, dus je moet een bestand met dezelfde naam maken in de nieuwe map die we net hebben gemaakt.

De eenvoudigste manier om erachter te komen wat voor soort gegevens een module biedt, is om ofwel hun tpl-bestand te bekijken en te zien welke gegevens ze gebruiken, of om de gegevens te laden. Debug tool. Om de zaken te versnellen, kan ik u vertellen dat deze plug-in slechts één variabele heeft, genaamd MENU, die een string bevat met alle menu-items binnenin gecombineerd

 
 assign var = tmpMenu value = $ MENU | replace: '
': " wijs var = items value =" toe
"| explode: $ tmpMenu foreach $ items as $ item if! $ item @ last 
$ Post
 if ($ item @ index + 2)! = $ item @ total 
 / if / if / foreach 
 

tags - behalve deze keer hebben we een pictogramafbeelding toegevoegd na elk menu-item, behalve het laatste menu-item. Het is je ook misschien opgevallen dat ik de laatste waarde in de array samen vermijd. Dit komt omdat de laatste waarde slechts een nieuwlijnteken is.

Als je alles tot nu toe correct hebt uitgevoerd, kun je het nu naar eigen wens thematiseren en enkele pagina's aan het menu toevoegen via de "configure" -pagina van de module. Als u klaar bent, kunt u naar uw site gaan en het menu zien werken zoals verwacht!

---

Conclusie

Dit is een zeer korte maar grondige beoordeling van de technieken die nodig zijn om PrestaShop-thema's te maken. In de loop van de zelfstudie heb ik de nodige stappen doorlopen om een ​​volledig meertalig thema te maken en twee verschillende manieren om themamodules in uw sjabloon te plaatsen.

Vooruitkomend, raad ik aan om een ​​beetje dieper in Smarty te duiken, omdat het een aantal verborgen functies biedt die je echt kunnen helpen. Wat betreft een goede plek om meer te weten te komen over Prestashop, nou, er is niet veel; Ik raad aan om de bron te lezen. Ten tijde van dit schrijven is de documentatie van Prestashop enigszins vlekkerig in de berichtgeving over onderwerpen; hun broncode is echter zeer goed gedocumenteerd. Een andere uitstekende optie is om andere modules en thema's te onderzoeken om een ​​beter begrip te krijgen van wat Prestashop kan.

Ik hoop dat je het leuk vond om dit artikel te lezen. Als je vragen hebt over het artikel zelf, of over Prestashop in het algemeen, kun je hieronder een reactie achterlaten!

Hebt u premium, kant-en-klare PrestaShop-thema's nodig? Bekijk ThemeForest!

Handige links: PrestaShop-plug-ins van CodeCanyon.