2.1 Tour of the Phoca Cart Front End

In our previous articles, we installed a Joomla foundation on our business website. In this article and the next, we will look at the Phoca Cart Front End and Back End in order to learn a little more about the similarities and differences between Phoca Cart and Joomla and how they combine to create a powerful platform for an online store.

We are now at Step 5 in our website building process:

01ar

 

Tour of the Phoca Cart Front End
The best place to see the Phoca Cart front end is to visit the Phoca Cart Astroid Demo Site: https://www.phoca.cz/phocacartdemo/astroid/

Here is the top of the page:

01

Top Bar Features
At the very top of the Demo Home page is a thin dark top bar that has the business address, phone number and contact information. These are all set in the Astroid template rather than in the Phoca Cart Control Panel. This information can be turned off if you want.

To the right of the Store Contact Information are three icons. The first icon is a link to the Phoca Cart shopping cart. The second icon is a link to a Phoca Cart Product Comparison table. The third link is to a Phoca Cart Wish List created by the customer. The three zeros indicate that all three of these tools are empty. All three of these features are set in the Phoca Cart Control Panel.

To the right of the three icons is a EUR and a drop down arrow. This is a Phoca Cart feature which allows the customer to choose which currency to display product prices in. This feature can be turned off in the Phoca Cart Control Panel.

Menu Bar Features

The second bar has the Astroid Logo on the left and a Main Menu with three menu items on the right. The logo is an Astroid feature that can be replaced by loading your own logo into the Joomla Media Manager.

Menu items can be added or deleted from the Main Menu by going to the Joomla Menus, Main Menu. Click on the First Menu item called Eshop. This is simply the Shop Home Menu item and is the same as clicking on the Astroid store logo image.

Click on the second Menu Item called All Categories This reveals a Phoca Cart Mega Menu showing text and images of all 6 Product Categories in this Demo Shop:

02

This Mega Menu is a module that comes with the Phoca Cart package of 10 free modules. But it is not installed by default. To install it, go to the Phoca Cart Control Panel and scroll down to Extensions. Then enable it with at Joomla, Extensions, Modules. The final menu item, Brands, shows the icons of all 6 brands in this Demo store.

Phoca Carousel Module Features
The third Row is the Phoca Cart Carousel. The Phoca Carousel Module is a free module. But it does not come with the initial package of 10 free modules. Instead, it is one of dozens of free Phoca Cart extensions we will review in Section 2.4.

Phoca Cart Categories Display
Below the slideshow is a Breadcrumbs Row to help customers understand where they are at on the site. Then below this is a Phoca Cart Categories Display with several modules in the left side menu:

03

Everything in this area is controlled by the Phoca Cart Control Panel.

You can go to any category by clicking on the View Category button or by clicking on the Categories links in the side menu.

Below these links is a Product filter which by default is set to filtering by price. Click on the drop down arrow to hide the price search form.

Below the Price filter is a Manufacturers Module. Click on one of these links to be taken to a page with all products made by that manufacturer.

Features of Rows Below the Phoca Cart Categories Area
Scroll down the page below the Phoca Cart component area. These are extra rows which you can create in the Astroid Template Edit area. First is a full width semi-transparent text box module which overlays a fixed background image of a tent. The module is set up to use a parallax effect in the Astroid template. Below this are two rows each with three modules (one for each category). These are created in the Joomla Module Manager. The 3 modules positions for each row are created in the Astroid Template Edit screen.

04

At the very bottom of the page are four menus. The four module positions were created in the Astroid Template Edit screen.

05

Each of the 4 bottom menus is created in Joomla Menus, Menus. Each is then assigned a Module Position in Joomla, Extensions, Modules. What is displayed above the menu items is the title of the module. Then menu items are added to each menu by going to the Menus, Main Menu page and clicking on New. All of these links are of the Menu Item Type: System Links, URL.

Category Page Features
Click on the Mountains category to go to the Mountains category page.

06

There are three products in this category. It is currently set in the Phoca Cart control panel to not show category descriptions on the Home page – only on the Category pages.

It is also set to not show Product descriptions on the Category page – only on the Product pages. These settings can be changed in the Phoca Cart Control Panel.

Hover over the View Product button.

07

Hover brings up four icons below the buttons. The first is the Show Cart icon. The second icon, called Quick View, brings up a product popup. The third icon adds the product to the customers Wish List. And the fourth icon adds the product to a Product Comparison table.

Product Pages Features
Click on a View Product button.

08

This shows the product but does not display the product description. You can change the setting to show the Product Description and turn off the Manufacturer. Reviews and Ratings can be left on or turned off as well. The Product Tabs area can also have tabs for a Product Detailed or Long Description, a Product Video and Product Specifications in addition to Product Reviews.

The Products page can also display one or more “tags and labels” as well as a series of attributes for the customer to select things like Product color and size. We will review how to add Videos, Specifications, Tags, Labels and Attributes to Products in Chapter 4 – Shop Processes.

Cart Page Features
Click Add to Cart. This pop up will appear.

09

Click Proceed to Checkout. The following Checkout page will appear.

Checkout Page Features

10

The product has been set to No Tax. It has also been set to require registering in order to make a purchase. You can change this to Allow Guest Checkout in the Phoca Cart Control Panel. You can also change which fields are shown and /or required in the Billing and Shipping Address form and the Shipping Options form and the Payment options form.

Coming in February 2021
As of January 2021, there are still a couple of important missing features in Phoca Cart. The first missing feature is the ability to display all products in all categories on the same page. Currently products can only be displayed on the page of the category the product is in. But that is about to change. Phoca Cart version 3.5.5 has this important feature. A public release of version 3.5.5 is likely to come out in February 2021. We will update when that happens.

As of January 2021, if you create a Top Level Shop category and two sub categories each with 2 products, the only way to display all 4 products is to assign all 4 products to the parent category in addition to the sub-category. Then the 4 products will all display on the parent category page. Version 3..5.5 will solve this problem.

The second missing feature is being able to display sub-categories on the same page as parent categories and with the same appearance. Currently, sub-categories do not display at all. To get them to display on Parent category pages, you need to go to the Phoca Cart Control Panel and click on Options. Then in the first tab, called Display, you need to change Display Subcategories from 0 (meaning none are displayed) to 2 or 3 depending on how many sub-categories you have. Also scroll down the page to Category and Items View and change Display Subcategories from 0 to 2 or 3.

11

The sub-categories are only displayed as links. These category and display options will be greatly improved when Phoca Cart 3.5.5 comes out in February 2021.

Summary of the Phoca Cart Front End
The Phoca Cart Demo page is created by the combination of Joomla settings, modified by Phoca cart settings and then modified by Astroid Template settings. One of the challenges for beginners is knowing where to look to change a setting in the back end to make a change in content and appearance in the front end. Therefore, we will next install Phoca Cart and then take a brief look at the Phoca Cart back end. We will then spend the rest of the book going into more detail about Joomla, Phoca Cart and Astroid to explain how they all work together to help you create a State of the Art online store.