Förstå layouter i OpenCart

I den här handledningen utforskar vi begreppet layouter i OpenCart. Vi börjar med att utforska kärnlayouterna som är tillgängliga i OpenCart, och när vi går vidare ser vi hur du kan skapa nya layouter. Vidare ser vi layoutsammanslutningen med produkter, kategorier och moduler.

Jag antar att du använder den senaste versionen av OpenCart 2.0. Naturligtvis finns även layouter tillgängliga i tidigare versioner av OpenCart, men vi klarar den senaste versionen eftersom gränssnittet inte är exakt detsamma som i OpenCart 1.x-versionerna.

Konceptuell förståelse av OpenCart Layouts

"Layouts" i OpenCart är konceptet att organisera och tillhandahålla mallar för olika sidor i fronten. Vad betyder det när du säger en annan "typ" av sidan? Om du tittar på de olika sidorna i OpenCart märker du att layouten "struktur" inte är densamma på varje sida. Till exempel är layouten på sidan "produktinformation" inte densamma som den för "produktdetalj" -sidan.

Dessutom varierar strukturen på de olika sidorna som "Kontosidor", "Kontaktsida", "Checkout-sida", etc. Så här kommer layouten in i bilden. Du kan säga att layouter är dekoratormallarna som förbereder hela sidan genom att fylla i de luckor och moduler som är tillgängliga för den specifika layouten.

Å andra sidan är layouter också användbara i OpenCart för att tilldela olika moduler till sidan. Om du till exempel vill visa en "Banner" -modul på produktdetaljsidan kan du göra det från baksidan, eftersom detaljutformningen "produkt" redan är tillgänglig i kärnan. Med OpenCart kan du också skapa nya layouter från back-end så att du kan åsidosätta standardlayouterna som tilldelas de olika sidorna i frontänden.

Utforska kärnlayouterna

Låt oss titta på de inbyggda layouterna som finns i OpenCart. Gå över till baksidan av OpenCart. I navigeringen, gå till System> Design> Layouts, som kommer att lista ut kärnlayouterna.


Som du kan se finns det en ganska lista över redan befintliga layouter. Klicka på Redigera ikon för Hem layout, som visas i ovanstående skärmdump, för att konfigurera layoutrelaterade inställningar.

Låt oss förstå vad exakt varje avsnitt i konfigurationen står för.

Layout-namn

Det är bara namnet på layouten. Det bör vara inställt på något förnuftigt eftersom det kommer att hjälpa oss senare under moduluppdraget.

Ruttuppdrag

Det viktiga här är värdet av kolumnen "Rutt", vilket föreslår att OpenCart ska aktivera denna layoutrelaterade inställning närhelst det finns en webbadress som innehåller "gemensam / hem" på framsidans sida. Det betyder att det aktiverar alla moduler som tilldelas denna layout under begäran om hemsidan i frontänden.

Moduluppdrag

I det här avsnittet kan du se att modulerna redan är konfigurerade för att visas på hemsidan. Det finns tre moduler som är tilldelade till "Content Top" -positionen, även om du kan lägga till fler moduler för att visa dem i olika positioner på hemsidan. Till exempel kan du lägga till en "Banner" -modul i läget "Innehållsunderlag".

På samma sätt kan du också konfigurera inställningarna för de andra layouterna. OpenCart ger ett riktigt praktiskt gränssnitt för att tilldela moduler till olika lägen i layouten.

I nästa avsnitt kommer vi se hur du kan skapa en ny layout och använda den här layouten för att åsidosätta kärnlayouterna för OpenCart.

Lägg till en ny layout från baksidan

Gå över till System> Design> Layouts sida. Klicka på + logga in för att lägga till den nya layouten. Fyll i nödvändig information som visas i följande skärmdump och spara den.

Vi har skrivit in "Custom Product Layout" som namnet på layouten. Vi har också tilldelat modulen "Banner> Category" till läget "Kolumn höger". Det betyder att när vår layout aktiveras för någon begäran i fronten, kommer den att visa "Banner" -modulen i det högra sidofältet.

Det finns två sätt att aktivera layouten för eventuella front-end-förfrågningar. Vi har redan diskuterat den första, "Rutt" -uppgiften i layoutkonfigurationsinställningarna. Den andra är alternativet "Åsidosätt" tillgängligt för vissa sidor i frontänden. Vi fortsätter med det andra alternativet för denna handledning.

Associerade layouter med produkter och kategorier

Nu när vi har skapat den anpassade layouten, låt oss gå vidare och kolla hur du kan använda den överordnade funktionen för layout i OpenCart. Jag använder exemplet på standardprodukter som finns tillgängliga i OpenCart för att göra det enklare.

Gå till Katalog> Produkter, som kommer att lista alla produkter som finns i butiken. Låt oss redigera produkten "iMac" under kategorin "Stationära datorer> Mac".

Gå till produktgränssnittet Design flik, där du ska se Layout Åsidosätt alternativet för standardbutiken. Välj CustomLayout i rullgardinsmenyn och spara produkten.

Du har just överstått standardproduktlayouten för "iMac" -produkten med vår "CustomLayout" -layout! Det betyder att när någon besöker "iMac" -produktdetaljerna i fronten, aktiveras "CustomLayout" för den sidan. Och som vi diskuterade i det föregående avsnittet visas "Banner" -modulen i "Kolumn höger" -läget. Låt oss testa det i fronten!

På samma sätt kan du åsidosätta layouter för kategorier också!

Slutsats

Så jag hoppas att du borde ha en grundläggande förståelse för hur layouter i OpenCart fungerar. Layouts är verkligen användbara för att åsidosätta standardlayouterna och tilldela moduler till olika positioner i OpenCart. Dela dina tankar i form av kommentarer och frågor med hjälp av flödet nedan!