Content on front end

 

Description

This tutorial will explain the different ways to easily display your content (products and categories) on the front end with HikaShop.

Content, in HikaShop, will be displayed using two Joomla elements : Menus and Modules. There is an extensive documentation on Joomla about the creation of menus and modules, so we highly invite you to understand these key concepts before reading this tutorial. We also invite you to look at how we did it on our demo website which features all the possibilities explained here.

 

Product page with a menu

If you sell only few products, like we do on HikaShop, you might want to add Joomla menus directly linking to your products pages.

First, log in on the back-end and go to the menu "Menu" and click on one of your menu areas

Main menu

Then, click on new to create a new menu

Main menu

You will have to click on the menu Item Type HikaShop in order to display the list of menu types of HikaShop. Then, click on the Product "Product page" link.

Main menu

You will be able to set standard Joomla options for the menu as well as select a product to display on the right part of the screen

Main menu

You're done. If your menu area is already displayed on your front end, you should already see the new menu linking to your product. If you don't see it, you might need to purge your Joomla cache before seeing it.

 

Listing of products with a menu

This section will enable to add a menu linking to a listing of your products.

First, log in on the back-end and go to the menu "Menu" and click on one of your menu areas

 

Main menu

Then, click on new to create a new menu

Main menu

You will have to click on the menu Item Type HikaShop in order to display the list of menu types of HikaShop. Then, click on the Product "Products listing" link.

Main menu

You will be able to set standard Joomla options for the menu. Then, click on apply in order to save the menu information and stay on the same page.

Main menu

After clicking on apply, the right part of the edit screen will display a link going to the HikaShop options where you will be able to personnalize how the products listing will be displayed on you website. As we had too many options with advanced options, we couldn't put them in the standard menu options so we decided to do a special screen for them

Main menu

You can filter your products so as to only display products in one category. By default, the main product category is selected which englobes all the products. Note that if a product is not directly in the category but in a child category, it won't be displayed unless you change the "Sub elements filter" to "All sub elements".

You can also choose how to display your products by selecting the number of items on one page, the number of columns. You can also choose how each item of the listing will be displayed by selecting the type of item layout and the options below on the right of the screen.

You can find more information about all those options by clicking on the "Help" button while you are on that screen.

After saving this page, your menu is ready to be used :)

 

Listing of categories with a menu

This section will enable to add a menu linking to a listing of your products.

First, log in on the back-end and go to the menu "Menu" and click on one of your menu areas

 

Main menu

Then, click on new to create a new menu

Main menu

You will have to click on the menu Item Type HikaShop in order to display the list of menu types of HikaShop. Then, click on the Category "Categories listing" link.

Main menu

You will be able to set standard Joomla options for the menu. Then, click on apply in order to save the menu information and stay on the same page.

Main menu

After clicking on apply, the right part of the edit screen will display a link going to the HikaShop options where you will be able to personnalize how the categories listing will be displayed on you website. As we had too many options with advanced options, we couldn't put them in the standard menu options so we decided to do a special screen for them

Main menu

You can filter your categories so as to only display categories which are in another category. By default, the main product category is selected which englobes all the product categories. Note that if a category is not directly in the category but in a child category, it won't be displayed unless you change the "Sub elements filter" to "All sub elements".

You can also choose how to display your categories by selecting the number of items on one page and the number of columns. You can choose whether to display them as a list (like we did) or as DIVs. The later will display additional options where you will be able to choose how each item of the listing will be displayed by selecting the type of item layout and the options below.

You can find more information about all those options by clicking on the "Help" button while you are on that screen.

A category listing menu is only displaying the categories by itself, so that's why there the "Associated modules" option. Once you display once your menu on your front end, you should get a products listing module generated automatically and added to that "Associated modules" option. That's this module which will display the products listing under the categories. So, you can personalize the listing of the products by going in the menu Display->Content modules and editing the module associated to the menu you created OR by just clicking on the link of the module in that "Associated modules" option. You will again see lots of options to configure your products listing the way you want it.

In case you don't see your products on your categories listing menu in the front end:

If by any means the products listing module is not associated automatically, you might get an error message when saving the hikashop options of your category listing menu with a link to create the associated module automatically. So you should try that in such cases. As a last resort, you can always create a products listing module yourself and associate it to your category listing menu yourself by following this procedure:

Go in the menu Display->Content modules.

Main menu

Then, click on new to create a listing of products.

Main menu

The key point here is to have it synchronized with the listing of categories with the option "Synchronize with currently displayed item when possible". This will means that when a particular category is display, only the products linked to that category (directly or indirectly based on the "Sub elements filter" option) are displayed. Also, since this module will be displayed by HikaShop you might want to unpublish it to avoid having it displayed by Joomla somewhere else on your template. You can find more information about all the other options by clicking on the "Help" button while you are on that screen.

Main menu

Once your listing of products module is done, press save and go back to your categories listing menu you previously created. You can use the HikaShop menu Display->Content menus where you should see it. Then, click on the name of the menu to edit it.

Main menu

Main menu

There, when you click on the "Select" button of the option "Associated modules" a popup will open for you to choose which modules you want to be displayed below the listing of categories. click on "Yes" for your listing of products module (which is called "Products" on the screenshot below) and click on the OK button.

Main menu

After saving this page, your menu is ready to be used.

 

Products with a module

This section will enable to add a module displaying a listing of your products. For that, you will first have to go to the menu Display->Content module of HikaShop.

Main menu

Then, click on new to create a new module.

Main menu

You will be able to enter a name for our module, publish it, etc. Select the content type "Product" to display a listing of products and turn off the synchronization to avoid displaying only products of the category displayed on the current page when that happens. All the options will help you personnalize the module to your needs.

Main menu

For example, you can easily display the three latest products of your store by setting the option "Ordering direction" to "Descending" and the option "Ordering field" to "product_created".

You can find more information about all the other options by clicking on the "Help" button while you are on that screen.

Then, you will want to save your changes by clicking on "Apply". You will notice that a button "Joomla module options" has appeared after that. You can click on it to further personnalize your module using the Joomla options.

Main menu

Categories with a module

This section will enable to add a module displaying a listing of your categories. For that, you will first have to go to the menu Display->Content module of HikaShop.

Main menu

Then, click on new to create a new module.

Main menu

You will be able to enter a name for our module, publish it, etc. Select the content type "Category" to display a listing of categories and turn off the synchronization to avoid displaying only child categories of the category displayed on the current page when that happens. All the options will help you personnalize the module to your needs.

Main menu

For example, you can easily display all the first level categories of your store by using the same options as the screenshot above.

You can find more information about all the other options by clicking on the "Help" button while you are on that screen.

Then, you will want to save your changes by clicking on "Apply". You will notice that a button "Joomla module options" has appeared after that. You can click on it to further personnalize your module using the Joomla options.

Main menu

 

The "Menu" option of the hikashop options of your module is one of the most important one when you're creating a category listing module. There, you should have a hikashop category listing menu set. Normally, when displaying your module on the front end for the first time, that menu should be created automatically. However, you can always create it manually by following the "Categories with a menu" tutorial above and then set it in that "Menu" option if, for any reason, it wasn't created automatically. If that option is not setup automatically or manually, you will get 404 errors on Joomla 1.6+ if the SEF is activated in the configuration of Joomla when you click on the categories link of your module.

If you want to have a category listing module looking like on the left area of our demo website, you should set the option "Show sub categories" of your module to "All direct sub categories" and a layout in list in the hikashop options of your module. You can look at the options of that module.

 

Related products

If you want to display related products beneath the product page, you need to follow the indications on that page.

 

FAQ

  • I don't see any pagination on the listing of products.
That's probably because you have the "Random" option of your menu (for products listing menus) or of the associated module of your menu (for categories listing menus) which is activated. In that case, no pagination is displayed and the products on the page change each time you're displaying the page. If you turn off that option, the pagination will be displayed if there are more items to display than the "Number of items" option of your menu/associated module.
  • I'm trying to change the display settings in the tab Display of the configuration but I don't see the changes on my product/category listing on the front end.
That's because the settings on that screen are only for NEW menus and modules. Existing modules and menus have their own set of options that you can access via the menus Display->Content menus and Display->Content modules.
  • I'm changing the display settings of my category listing menu in the HikaShop options of the menu but I don't see the changes on the products listing on the front end.
That's because the settings on that screen are only for the categories. For the products, you need to click on the link in the "Associated modules" option of the hikashop options of your menu which will direct you to the hikashop options of the associated module which was created automatically by HikaShop and which handle the display of the products for that category listing menu.
  • How to change the size of thumbnails ?
In the hikashop options of your menus and modules, you will find a image height and image width option where you will be able to set the size of your thumbnails. If you don't set anything in them, it will use the values of the thumbnail height and width options of the Files tab of the configuration.