7.1 How to customize the default Phoca Cart forms

In this section, we will review how to add a shop welcome article, how to improve the purchase success thank you message and how to add your shop address, shop logo and shop contact information to the standard Phoca Cart forms.

Step 1: Create Shop Welcome article

By default, there is no Welcome article that appears on the shop Home page. It just shows a bunch of categories with no explanation of what the shop is about or why customers should buy products from us. We have already created a Welcome article for the Home page of our website. But we also need a Welcome article for the Home page of our online store. To address this problem, we will create the following article as a normal Joomla article:

Title: Welcome to our Phoca Cart Demo Store!

Because the Shop Welcome article title is not shown on the Shop Home page, we also need to place the title at the top of the article in bold large letters:

Welcome to our Phoca Cart Demo Store!

The goal of our Phoca Cart Demo Store is to help you set up your own online store using Joomla and Phoca Cart.

01

This top section was added to the Store Home page of our Phoca Shop store by creating a normal Joomla article and then placing the article at the top of the Phoca Cart component by going to Phoca Cart Control Panel, Options, General Display Options, Main Description.

Above this Welcome article is a simple Phoca Cart Product Slider module added by going to Extensions, Modules and editing the Phoca Cart Product Slider module by changing the number of products to 6 and changing its name and placing it in the Banner Module position for our store template. Then go to Components, Phoca Cart, Products and select 6 products to be Featured products.

Below this main Store Description section is a section showing our Demo Product Categories. This is followed by an optional section using the Phoca Cart Products module showing a few featured products. It could alternately show any of several categories of products:

<hr />

Choose from the following categories of products:

<hr />

Before transferring this article to the Joomla Articles table, save the Phoca Cart image to your home computer file manager as shop-welcome-01.jpg. Then upload it to your Joomla Media Manager. Then click Content, New Article and copy paste the article. Replace the image place holder text with the image and replace both <hr /> with a horizontal line (icon in the JCE editor). Then click Save and Close.

Once your own custom Welcome article is done, go to Phoca Cart Options, Display tab and scroll down to General Display Options.

02

Choose Select and select your Shop Welcome article. Then click Save and Close. Then view the Shop to see the result:

03

Because the Shop Welcome Article is a normal Joomla article, you can further edit this article whenever you want.

Step 2: Replace the Product Order Success message with a custom Product Order Success Message

Go to Phoca Cart Options Display tab and scroll down to Info View :

04

Click Create. This will open a new Joomla article edit screen. Copy and paste the following (or make up your own content):

Thank you for your purchase! You should receive an email confirming this order with information about how to download the product if it is a virtual product or how to track the shipping of the product for all other products. If you have any questions about your order, feel free to email us at this special email address: orders (at) ouronlinestore (dot) com

05

Then click Save and Close. Then on the Options screen, click Save and Close. Then in the shop, place a new order to view the result.

06

Step 3: Do a Language Override to Replace the word Info with Thank you for your purchase!

Unfortunately, the title of the article was not shown on the Order Success screen. Also the sentence “Your order has been successfully processed, thank you” is still shown at the bottom of the page. We will therefore have to do a language override for the word Info. Go to Extensions, Languages, Overrides. Then select English. Then click New. Enter the word Info into the Search box. Then scroll way down the page to COM_PHOCACART_INFO with the value Info. Then change the text from Info to Thank you for your order!

07

Then click Save and Close and place another order to see the result:

08

Note that the default sentence “Your order has been successfully processed… “ no longer appears on the Order Success page. Look in your Joomla articles table and you will see that this Thank you for your order article is a standard Joomla article which you can further edit whenever you want.

Step 4: View the current Order Confirmation Forms
Go to Phoca Cart, Orders and click on the View Order icon in the Action column for a recent order.

09

Note that it is missing our Shop logo and Shop Address. Click on View Invoice

10 

The Invoice form is also missing or shop logo and address. Then click on View Delivery Note

11

All three forms are missing our Shop Name, Logo and contact info.

Step 5 Create a Custom Shop Logo
We will use Libre Draw to create a shop logo that is 300 pixels wide by 100 pixels tall. Then optimize the image with Libre Writer. Then Save the image as logo.jpg. Then resize and crop the image with a Linux Mint tool called Pix. Then save the image again as logo-100x300.jpg. Then load this image to your Joomla Website Media folder. Then select the image in Options, Store tab, Store Logo. Here is the result of adding our shop name and a shop logo:

12

The order form and invoice form now show our Store name and logo, but do not provide our shop address or other contact information. We therefore need to add an article to provide this information. Go to Options, Store and click on Store Information, Create.

13

This will bring up a new Joomla article. Call it store information. Add your email address and store address. Then click Save and Close. Then go back to Orders and click on the Order form.

14

Step 6 Move the Store Information from the logo area to the bottom of the form

To delete the Shop Information from the logo area, go to Options, Store tab and for Store Information, click Clear. Then to add the same article to the bottom of the Order form, go to Options, Billing tab where we can replace various parts of the default forms with our own content. Invoice, Order and Delivery Note each have their own Top, Middle and Bottom sections.

15

For Order, Global Bottom, click Select to select an Article. Then select Our Shop Information. Then click Save and Close. Then click on an Order to view the Order form.

16

Location of Top, Middle and Bottom Description
The Top Description area is below the Billing Address and above the Item area. The Middle Description area is below the Item area and above the Bottom Description area.

Step 7 How to Add Custom Images to the default forms
You can add images to the Order, Invoice or Delivery Note forms. However, the JCE Editor is set to insert relative URLs for images and email or PDF forms require absolute URLs. We therefore first need to change the JCE Editor from Relative URL to Absolute URL. Go to Components, JCE Editor, Editor Profiles, Default Editor, Editor Parameters tab and change URL conversion from Relative to Absolute. Then click Save and Close. Then go back to Components, Phoca Cart, Options, Billing and for Order, Global Middle, click Create to create a new article. Add some text and an insert an image. Then click Save and Close to close the article. Then click Save and Close to close the Options section. Then go to an order and view the custom order form.

17

Step 8 Add US States to Order and Invoice Forms
The billing and shipping addresses on the Order and Invoice forms are not correct US addresses. The State is missing and the zip code is on the beginning of line 3 when it should be on the end. Part of this problem is related to how our form fields are in the wrong order on the Checkout page:

18

Note that the ZIP appears before the City. To fix this problem, go to Phoca Cart, Form Fields. Then click on the arrows in the upper left corner of the table to sort the fields. Then move the City above the Zip code.

19

Then reload the Checkout Page to verify that these fields are now in their correct order. This fixed the Checkout page but did not fix the Order form.

Create a New Custom Field called State?
We could create a new required field called State. Then move this field just above the Zip Code field. Sadly, however, new custom fields are not shown on the default Order and Invoice forms. We can solve this problem by using the default Region field and then using States as values for the regions. We can then use a language override to change the word Region into State.

However, the Zip Code field still comes BEFORE City and State on the default Order and Invoice forms associated with each Order. This is because the layout for the default Order and Invoice forms is set by com_phocacart/layouts/order.php. We therefore need to do a template override of this file. However, this particular file is not one of the options shown on the normal template override creation screen. We will therefore need to do a manual template override.

How to do a Manual Template Override
A template override allows us to alter the content of any part of our website in a way that the change is preserved even when the original or default code is updated. The easy way to do a template override is to go to Extensions, Templates, Templates. Then click on the default template and click Create Overrides.

20

Select the Component or Layout you want to change and it automatically will put a duplicate of the component or layout fille you want to change inside the html folder of your default template. Then click on this duplicate file and make whatever changes you need.

But what if you want to change a part of the default code that is not shown on the Create Overrides screen? Thankfully, it is still possible to create an override. But we need to take a couple of additional steps..

Find and copy the file you want to override in your home file manager

We need to create a custom override for com_phocacart/layouts/order.php.

So open your Home computer file manager and click on your website extensions folder to open it. Then extract the com_phocacart component. Then click on the com_phocacart folder to open it. Then click on the Packages folder to open it. Then extract a second com-Phocacart folder. Then click on the extracted folder to open it. Then click on the site folder to open it. Then click on on layouts to open this folder. Then look for the order.php file. Open this file with bluefish. Then select and copy the code for this file into your clipboard.

Click on Extensions, Templates, Templates. Then click on your default template to open it. Then click on Manage Folders.

21

In the left column, click on the com_phocacart folder to select it. Then type layouts into the Folder Name box on the right column. Then click Create.

Then click on New File to bring up this screen:

22

For File Name, type order. For file type, select PHP. Then select the layout folder in the left column. Then click Create. Then open order.php which will be a blank file and click Paste to paste the code in your clipboard into this file.

Modify the file

Scroll down the file to line 412. Starting at Line 412 to line 418 (billing address section), here is the default code:

$city = array();

if ($v['zip'] != '') { $city[] = $v['zip'];}

if ($v['city'] != '') { $city[] = $v['city'];}

if (!empty($city)) {$ob[] = implode("\n", $city).'<br />';}

//echo '<br />';

if (!empty($v['regiontitle'])) {$ob[] = $v['regiontitle'].'<br />';}

if (!empty($v['countrytitle'])) {$ob[] = $v['countrytitle'].'<br />';}

We will manually moved the zip code line below the region line and make the zip code line like the region line. Also delete 2 line breaks and two dots, so the lines 412 to 418 changed to:

$city = array();

if ($v['city'] != '') { $city[] = $v['city'];}

if (!empty($city)) {$ob[] = implode("\n", $city);}

if (!empty($v['regiontitle'])) {$ob[] = $v['regiontitle'];}

if (!empty($v['zip'])) {$ob[] = $v['zip'];}

if (!empty($v['countrytitle'])) {$ob[] = $v['countrytitle'].'<br />';}

Copy the new code into your clipboard. Then carefully select the old code and then click Paste. Then click Save.

Then scroll down to line 464 to 470 (shipping address section). Then click Save and Close. Then click Close. Then click Components, Phoca Cart and click on Orders to view an Order form.

Billing and Shipping addresses on the default Order and Invoice forms are now City, State and then Zip all on one line.

23

Use a language override to change the word Region into State.

Currently, when we place an order, the field still shows as Region:

24

To fix this problem, go to Extensions, Languages, Overrides. Then click on English, Site. Then click New. Then enter Region in the search box. Scroll down to COM_PHOCACART_REGION_LABEL to select it. Change the text Region to State. Then click Save and New.

Then search for Region again. Scroll down to COM_PHOCACART_SELECT_REGION to select it. Change the text Select Region to Select State. Then click Save and Close

25

We still have to add all of the 50 states as values to the Region field. But when done, we have an order form customized for any store in the Unites State.

What’s Next?

In the next article, we will review how to create custom emails to send to customers when their order status changes.