How to Configure Modules and Assign Them to Layouts in OpenCart 2.x?
Since OpenCart 2.0.x has a completely redesigned admin panel, there are some UI changes that might require some time for you to adjust.
While the new modules and layout system may seem a challenging concept for the OpenCart 2.x user, it is more or less the same as in the earlier versions.
In this blog post, we will walk you through the essentials and shed some light on how to configure modules and assign them to layouts.
This guide assumes that you already have a working OpenCart 2.x.
Module vs. Extension
In OpenCart terms, an extension is a collection of files which extend/add some OpenCart functionality. Extensions can usually be downloaded from the OpenCart extension store.
A module is a group of settings related to an extension. The modules are assigned to layouts and positions.
Creating a new module
You can create any number of modules with specific settings. In OpenCart 2.x the modules can be assigned a name which is later on used to help you identify the different sets of settings when assigning the modules to the desired layouts and positions.
We will walk you through the process of creating a module and assigning it to a layout. We will use the integrated Banner extension in OpenCart for this example.
To access the banner extension, go to the Admin panel of your store, click on Extensions > Modules > Banner edit button. Here is how it looks like:
Filling the fields
Next, we should populate the module's fields, but first here is a bit of info on what each of the fields purpose is:
Module Name: The name, which will be used for the newly created module. Later, you can see this name in the Modules page and when you add it to a layout. We suggest you to write a unique and descriptive name, which you can easily recognize later.
Banner: A dropdown list with the available banners. These banners are set from System > Design > Banners.
Width: The width in pixels that the banner slider will take.
Height: The height in pixels that the banner slider will take.
Status: Enable or disable the current module.
When you are ready with the setup, click Save. Once you press Save, you will be redirected to the Modules page where a new entry has been added.
After you have set up the module correctly, you can assign it to a specific layout from System > Design > Layouts.
This is done by choosing a layout and adding the module we created as presented in the screenshot below (notice how the module name is displayed next to the extension name). This will connect the module and the front-end, making your banner visible on the selected layout.
After we are done here, we need to click Save once again.
Layout Override
The layout override functionality is a great way for users looking to create a custom product layout. For example, let’s say that we want to add a banner to one of the default products in OpenCart - Canon EOS 5D.
To do that, we have to create a new layout or modify an existing one. In this example we will use the default Manufacturer layout. You can get to the Manufacturer layout from System > Design > Layouts.
In the first step we created a Banner > Test module that we will have to use now. To do this, click on the plus button, select the module and adjust the settings as shown in the screenshot below.
Now we need to save the layout settings. Next stop is editing the product’s settings and overriding the standard product layout.
In order to do that, go to Catalog > Products > Canon EOS 5D and click the edit button.
The product page will load. There we need to click on the Design tab.
On the design tab we will see a list of all of our stores. In this example we have set up only 1 store, called Default. There we have to select which layout we wish to override the default one.
For the sake of our example we will select the Manufacturer layout. Once we are done here, we need to click on Save in the top right corner. To see the changes, we will go the the store front and select the edited product, Canon EOS 5D.
Here is how the new overrided layout looks like. Conversely, you can spot the difference when compared to any other product using the standard layout.
Conclusion
The layout system in OpenCart 2.0 provides the same powerful feature and the same level of flexibility as in OpenCart 1.5.6x. The only difference is how the modules are organized and how we assign them to layouts. We don’t have to afraid from the new things, right, so it is a matter of time to get used to them.
