Begrijp Layouts in OpenCart

In deze zelfstudie verkennen we het concept van lay-outs in OpenCart. We zullen beginnen met het verkennen van de kernlay-outs die beschikbaar zijn in OpenCart en naarmate we verdergaan, zullen we bekijken hoe u nieuwe lay-outs kunt maken. Verder zien we de koppeling van lay-outs met producten, categorieën en modules.

Ik neem aan dat u de nieuwste versie van OpenCart 2.0 gebruikt. Uiteraard zijn lay-outs ook beschikbaar in eerdere versies van OpenCart, maar we houden vast aan de nieuwste versie omdat de interface niet precies hetzelfde is als die van de OpenCart 1.x-versies..

Conceptueel begrip van OpenCart-lay-outs

"Layouts" in OpenCart zijn het concept van het organiseren en leveren van sjablonen voor verschillende soorten pagina's aan de voorkant. Wat betekent het als je een andere "soort" pagina zegt? Als u de verschillende pagina's in OpenCart bekijkt, zult u merken dat de lay-outstructuur niet op elke pagina hetzelfde is. De lay-out van de pagina met productvermeldingen is bijvoorbeeld niet hetzelfde als die van de pagina met productdetails.

Verder is de structuur gevarieerd in de verschillende pagina's zoals "Accountpagina's", "Contactpagina", "Afrekenpagina", enz. Dus dit is waar lay-out in beeld komt. Je kunt zeggen dat lay-outs de decoratorsjablonen zijn die de volledige pagina voorbereiden door de beschikbare slots en modules voor die specifieke lay-out op te vullen.

Aan de andere kant zijn lay-outs ook handig in OpenCart om verschillende modules aan de pagina toe te wijzen. Als u bijvoorbeeld een "Banner" -module op de productdetailpagina wilt weergeven, kunt u dat doen vanaf de back-end omdat de detaillay-out "product" al beschikbaar is in de kern. Met OpenCart kunt u ook nieuwe lay-outs maken vanaf de achterkant, zodat u de standaardlay-outs die aan de verschillende pagina's van de front-end zijn toegewezen, kunt overschrijven.

Verken de basislay-outs

Laten we eens kijken naar de ingebouwde lay-outs die beschikbaar zijn in OpenCart. Ga naar de back-end van OpenCart. Ga in de navigatie naar Systeem> Ontwerp> Layouts, die de kernlay-outs zal opsommen.


Zoals je kunt zien is er een behoorlijk overzicht van al bestaande lay-outs. Klik op de Bewerk icoon van de Huis lay-out, zoals getoond in de bovenstaande screenshot, om de layout gerelateerde instellingen te configureren.

Laten we begrijpen waarvoor elke sectie van de configuratie precies staat.

Lay-outnaam

Het is gewoon de naam van de lay-out. Het moet worden ingesteld op iets verstandigs, omdat het ons later tijdens de toewijzing van de module zal helpen.

Route toewijzing

Het belangrijkste hier is de waarde van de kolom "Route", die naar OpenCart suggereert dat wanneer er een URL met "common / home" op de front-end pagina is, deze lay-out-gerelateerde instelling moet worden geactiveerd. Dit betekent dat alle modules die aan deze lay-out zijn toegewezen tijdens het startpagina-verzoek aan de voorkant worden geactiveerd.

Module toewijzing

In dit gedeelte kunt u zien dat de modules al zijn geconfigureerd om op de startpagina te worden weergegeven. Er zijn drie modules toegewezen aan de positie "Inhoud bovenaan", hoewel u meer modules kunt toevoegen om ze op verschillende posities op de startpagina weer te geven. U kunt bijvoorbeeld een "Banner" -module toevoegen aan de positie "Inhoud bodem".

Op dezelfde manier kunt u ook de instellingen voor de andere lay-outs configureren. OpenCart biedt een echt handige interface om modules toe te wijzen aan verschillende posities van de lay-out.

In de volgende paragrafen zullen we zien hoe u een nieuwe lay-out kunt maken en die lay-out kunt gebruiken om de kernlay-outs van OpenCart op te heffen.

Voeg een nieuwe lay-out toe vanaf de back-end

Ga naar de Systeem> Ontwerp> Layouts pagina. Klik op de + teken om de nieuwe lay-out toe te voegen. Vul de vereiste informatie in zoals getoond in de volgende screenshot en sla deze op.

We hebben 'Aangepaste productlay-out' ingevoerd als de naam van de lay-out. We hebben ook de module "Banner> Categorie" toegewezen aan de positie "Kolom rechts". Dit betekent dat wanneer onze lay-out wordt geactiveerd voor elk verzoek aan de voorkant, deze de "Banner" -module op de rechterzijbalk zal weergeven.

Er zijn twee manieren om de lay-out te activeren voor elk front-end verzoek. We hebben al gesproken over de eerste, de "Route" -toewijzing in de lay-outconfiguratie-instellingen. De andere is de optie "overschrijven" die beschikbaar is voor bepaalde pagina's van de front-end. We gaan verder met de tweede optie voor de cursus van deze zelfstudie.

Lay-outs koppelen aan producten en categorieën

Nu we de aangepaste lay-out hebben gemaakt, gaan we verder en kijken we hoe u de functie voor het vervangen van lay-outs in OpenCart kunt gebruiken. Ik gebruik het voorbeeld van standaardproducten die beschikbaar zijn in OpenCart om dingen eenvoudiger te maken.

Ga naar Catalogus> Producten, welke een lijst zal zijn van alle producten die beschikbaar zijn in de winkel. Laten we het product "iMac" bewerken onder de categorie "Desktops> Mac".

Ga in de productbewerkingsinterface naar de Ontwerp tab, waar u de Layout Override optie voor de standaard winkel. kiezen CustomLayout in de vervolgkeuzelijst en sla het product op.

U hebt de standaardproductlay-out van het "iMac" -product net overschreven met onze "CustomLayout" -lay-out! Dit betekent dat wanneer iemand de productdetailpagina "iMac" aan de voorkant bezoekt, "CustomLayout" voor die pagina wordt geactiveerd. En zoals we in het vorige gedeelte hebben besproken, wordt de module "Banner" weergegeven in de positie "Kolom rechts". Laten we het testen aan de voorkant!

Op dezelfde manier kunt u ook indelingen voor categorieën overschrijven!

Conclusie

Dus ik hoop dat je een basiskennis hebt van hoe lay-outs in OpenCart werken. Lay-outs zijn erg handig om de standaardlay-outs op te heffen en modules toe te wijzen aan verschillende posities in OpenCart. Deel uw mening in de vorm van opmerkingen en vragen met behulp van de onderstaande feed!