Displaying the core VirtueMart menus
Now we will display and arrange some of the VirtueMart modules. Let's try and do this in a way that might be used in our final trading Joomla! e-commerce site. Of course, you probably have very specific layout plans. But this recipe should show enough of the ins and outs for you to make any modifications to suit your plan.
Getting ready
First we need a plan. Here is a good one. We want a product search in the top right and a product category box on the left of the module. Next we want a shopping cart on the right with a currency choice selector under that. Basic, but functional.
How to do it...
Let's start with the product search box. This is distinct from the regular Joomla! search box that searches the Joomla! articles. You might have noticed that the VirtueMart search box is already enabled for us. So we just need to move it to the top right of our site:
- Navigate to Extensions | Module Manager. Near the top of the list you will see the VM-Search in Shop module.
- Notice in the Position column it is shown as in position-4. This is what we need to change, as shown in the following screenshot:
- Click on VM - Search in Shop. You now see the following screenshot:
- Click on the Select Position button and choose position-0. This does assume you haven't changed the template from the default one. If you have, it doesn't matter, just look down the Templates column for the search position for your template.
- Click on Save when you are done. Check the store front and you should see your product search box neatly positioned.
Next we will position the Product Categories box. Now at the moment we don't have any product categories but we will in the next chapter. So let's position it on the left ready.
- If you are not on the Module Manager screen, then navigate to Extensions | Module Manager from the main Joomla! menu.
- Now click on the New button. You will see the Select a module type pop up. Click on VirtueMart Category and you will then be able to fine-tune the module.
- Let's name ours
Categories. Click on the Select Position button and choose position-4. In the following screenshot it shows what the key parts of the configuration will look like when you are done:
- position-4 is the same position that the VM - Search in Shop module was in before we moved it. Click on Save to position your new module. You can't see it yet. But it is there.
Now we want the shopping cart and the Currency Selection box on the right. Notice they are already visible but on the left. The following steps show how to move them over:
- Go to the Module Manager page (you know where it is).
- First click on VM - Shopping Cart.
- Click on the Select Position button and change the position to
position-8. - Click on Save. Done! Now do the same for the Currency Selector box.
How it works...
Page layout in Joomla! is done with modules. Modules can be custom-made like the Menu module we created previously or can be predefined but with optional settings like the modules we just positioned.
There's more...
Did you notice that in the main Module Manager page there were a few more modules than those which actually exist on the site pages? Remember the Product Categories module that was seemingly invisible? Well, there are a number of other VirtueMart modules which are already enabled for us that will seemingly spring to life when there is some relevant content to show in them. We will get to that in the next chapter when we look at merchandising your VirtueMart store.