2.2 Install and View Phoca Cart Back End

Before we can view the Phoca Cart back end, we first need to install it onto the Joomla website we built in Chapter 1.

Download Phoca Cart Component, Modules and Demo Data
Go to the Phoca Cart Download page: https://www.phoca.cz/download/category/100-phoca-cart-component

01

Click on the green Download button to download the component.

Warning: Do not download any Developer version as these may cause problems for your website database!.

Then scroll down the page and click on the Phoca Cart User Manual Download. Also download the Phoca Cart Demo Data. Also download the Phoca Cart All modules package. Transfer all of these zipped folders from your Downloads folder to your Joomla business website Extensions folder.

Then open your Joomla Control panel and go to Extensions – Manage - Install – Upload Package File - to install the main Phoca Cart component which includes basic payment method plugins: Cash On Delivery, PayPal Standard, POS Cash. It even includes basic shipping method: Shipping Standard. These plugins are automatically installed with the component.

02

Next, before we configure Phoca cart, install the Phoca Cart Module package. This will install 10 Phoca Cart modules.

03

Then install the Phoca Cart Demo Data. The sample Product and Category images will be automatically copied into the Joomla Media Manager.



This warning will appear:

04

Check the Agree box. Then click Install. This warning will appear:

05

To uninstall the now empty Phoca Install folder, go to Extensions, Manage, Manage. Check the box to the left of the Phoca Install component. Then click Uninstall.

Create a Shop Menu Item
To see the cart with the Demo data, create a new Menu Item. Go to Menus – Main Menu – Add New Menu item. For Joomla Menu Item type, select Phoca Cart – Category List Layout (default view). Here is an image of some of the Phoca Cart Menu Item types:

06

Type in a title such as Our Demo Store and save and close the new menu item. Then view the shop with the default Protostar template (we will review integrating Phoca Cart with the Astroid Template in Chapter 3).

Here is the Shop page with the Protostar template:

07

Click on the Audi category:

08

Click on View Product for the Audi A5:

09

Click the Blue Color option. Then click Add to Cart.

Unfortunately, we can not see the cart because it is a module. It is either not active or not in a module position recognized by Protostar.

Add the Phoca Cart “Your Cart” module
Go to Extensions, Modules. Scroll down to the Phoca Cart module and click on it to open it. Change the Status to Publish. Assign it to the Protostar Right Sidebar module position (position 7). Change the title from Phoca Cart Cart Module to just Your Cart. Change Display Image and Load Component media from No to Yes.

Assign the Cart to Only Appear on the Demo Store pages
For Menu Assignment, choose Only on Selected Pages. Then click None. Then check Our Demo Store. Then click Save and view site.

10

Click View Cart Checkout.

11

Customers are required to register to make a purchase. We will change this so customers can make purchases without registering.

Phoca Cart Control Panel
Click on Components - Phoca Cart. If you did not install Sample Data, when you open Phoca Cart for the first time, a popup with Getting Started Wizard will be displayed. It is recommended to start the wizard to set up all necessary settings. Here is the Phoca Cart Control Panel with the Wizard in the upper right corner:

12

The Phoca Cart Control Panel can appear to be complex the first time you look at it. There are more than 30 menu items in the left column. Click on the Options button in the upper right corner of the control panel to see even more settings that may need adjustment.

13

There are 9 tabs of options that we will review in the next section.

For now, just scroll down the Display tab page and you will see that the page has been divided into 10 sections with literally dozens of parameters that can be set. Thankfully, most of these settings can be left at their default values. Next click on the Main tab. This is where you can set the height and width of Product and Category images and Thumbnails. Note that there are three sizes, Small, Medium and Large.

Check out the Getting Started Wizard
Click Cancel to close the Options screen (which is labeled as Phoca Cart Configurations). This returns us to the Phoca Cart Control Panel. Click on Start Wizard. Then in the popup, click Start Wizard again.

14

The Wizard has 10 steps and 8 of them have already been done. We will run through the first three steps again just to see what each screen looks like. The first three steps are to create a category, create a tax rate and create a product. First, click on Create Category. We will create a new category called Books.

15

Then click Select Image.

16

It is important to set up images folders to hold our category and product images – as opposed to having one thousand images all in the same folder.

Note that the path uses the Joomla images folder and places all Shopping Cart category images in a folder called phocacartcategories. Note also that this folder name is lower case letters with no spaces.

The Sample Data has created 3 folders already in this categories folder. We will create another folder called books. Click Create Folder.

17

Type in the lower case letters “books”. Then click Create Folder. Then open the books folder by clicking on it. Then click Upload. We will navigate on our Home computer file manager to our books category image (which we already created) and which is about 300 pixels tall and has been compressed to 96 DPI for the web. Click Upload. (Note: If you have several images, click Multiple Upload instead).

18

Then click Browse and find this category image folder with the file manager on your Home computer. Select the image. Then click Start Upload. Your category image will now appear in the File Name section. Click on the uploaded image to select it. This will not only load the image – Phoca Cart will automatically create a Thumbnail version of this image.

Now scroll down the page and fill in a Description for your new Product category.

19

Then click Save and Close. (or you can click Save and New if you have more product categories to add). This takes us to the Product Categories Table:

20

Before we continue with the Wizard, let’s look at the Joomla Media Manager. In the top menu, click Content, Media.

There are two Phoca Cart images folders. One is for categories. The other is for products. Click on the phocacartcategories folder to open it. Then click on the books folder to open it.

21

Click on the thumbs folder to see three thumbnail versions of the book image. Then click on Detail view.

22

Three thumbnail images were created – a large one 300 pixels tall, a medium one 200 pixels tall and a small one 120 pixels tall. Now that we understand how Phoca Cart works with Joomla to create its categories and products, let’s go back to Components Phoca Cart and Start the Wizard again.

Create a Tax Rate
The next step is to create the tax rate. This is important to do before creating any products because each product will be assigned to a tax rate. Click Create Tax.

23

We will call this tax Washington Sales Tax (which will also include local taxes). Then click Save and Close.

Create a Product
Next go back to the Wizard and click Create a Product. We will create a product called Better Word Processing. Give it a price of $20 and a Tax Rate of the Washington Sales Tax rate and assign it to the Books category:

24

Scroll down and make it a Featured Product. This will make it appear on our Shop Home page.

Select a Background image. This brings up all of the images in the Joomla media folder you can choose from. In addition, you can create a new folder and upload a new image. Then scroll down and add a description.

Then click on the Images Option tab. Click Select Image. This opens the Joomla Media Manager Phoca Cart Products folder. Click Create Folder to create a new folder. Call it books. Then open this folder and upload our book image to this folder. Then select it.

25

Then click Save and Close. Then visit the front end of our website.

Here is our Books category with one book in it with the default Icon view:

26

Click on the Middle Icon to a second layout:

27

Then click on the List icon to see a different Category View Layout:

28

Click View Product.

29

Summary

Phoca Cart uses web page building processes that are very similar to Joomla. As with Joomla, you begin by creating Categories and Sub-categories for your Products. Create these categories on your Home computer first with one new folder in your file manager for each category.

Then you create Products and assign them to categories. Phoca Cart Products are similar to Joomla articles in that you can begin by creating Product Descriptions and Product images using Libre Writer documents and placing these inside of your Product category folders in your File Manager.

Then create the Phoca Cart product categories on your website by going to Categories and clicking New. Then create your products on your website by going to Products and clicking New.

Both of these steps were taken care of for us when we installed the Phoca Cart sample content. But you will eventually need to replace the sample content with your own Product Categories and Products.

Creating a Phoca Cart Menu item is also similar to creating a Joomla Menu item. First you create Phoca Cart categories. Then create Phoca Cart Products. Then go to the Main Menu and click New. Then click on SELECT to select the Menu Item type. The only difference is that instead of selecting a Joomla Menu Item Type, you select a Phoca Cart Menu Item Type.

Hint: Rather than deleting the sample content, consider keeping the sample categories and products and simply unpublishing them – as they can help you learn how to use Phoca Cart Product Attributes. Often after you have created one Product with complex fields and attributes, you can simply clone a sample product and then relabel it to match your own products.

What’s Next?
This completes our tour of the Phoca Cart back end. In the next section, we will review how to do the initial set up of your online store in Phoca Cart Configuration Options.