Samples Product Information Home Page Download Pricing

PHP Templates

Now that you have some data in a mySQL table, you can create the templates to show it off. Return to CleverCat's Main Menu and click the Category Editor button. If you are not on the Baseball Gloves category, click the Find button or the Left/Right Arrow buttons at the bottom of the form to find it.

There are four template selection fields on this form for Print, PHP/HTML, Linked Template and Dynamic PDF.

You could use the same template for all four selections if you wanted but, for now, leave the selections as they are. Designing templates is covered in other tutorials and for this one we only need to know where the template selection is made. If there is a selection in the Linked Template field, delete it as we'll cover that in more detail later.

 

Return to the HTML configuration form and click the iFrame tab and change the File Option to PHP.

The catalog content is designed to be displayed in an inline frame. Refer back to the sample pages for an example of an inline frame. My sample page is designed to center itself in a screen with a minimum width of 1,024 pixels and I have sample buttons on the left side of the frame so I set a frame width of 800 pixels. Your own frame width will depend on how your page is setup.
The number of products displayed in a printed template is restricted by the size of the paper but there are no limits to the number of rows or columns that can be displayed on a web page. For example, you might be using a 2x2 grid for a printed template but design a scrolling frame with a width of 1,280 pixels. At this size, you might want 3 or more columns and 10 or 20 rows. If you are using a scrolling frame, there is no limit to the number of rows other than what is convenient for your visitors.
If you are using a non-scrolling frame then you need to set the height of the frame itself so that it is tall enough to display the maximum number of rows. Optionally, you can use the code in the Resize Script field to automatically set the height of the frame to the maximum height required by the content as each page loads. The code in the Resize Script field is added to the template files and the complementary script is required in the container page.

 

Click the HTML tab next to view the Page Navigation options.

The page navigation links you select will be displayed within the frame above the catalog content. The file pageNav.php is required for the links and is copied to the Local Output Folder when the templates are created. This file should be uploaded to the same folder as the template files.

The Copy Images option is not used with PHP. When you are creating HTML files, you can copy the photos to a subfolder of the Local Output Folder and this gives you the ability to preview your HTML pages exactly as they will appear on your server.
You may still want to manually copy your images to the Image Folder as it may be more convenient to have all your files in one place when the time comes to upload them.

This is a good time to mention that if you are only creating PHP files and templates that you don't need to have any product data stored in the local CleverCat database at all. All you really need is the category data. However, as your online templates will resemble printed templates, it may be easier to design templates if you add the data for a single record to the category so that you can use the Print Preview function.

 

Click the Cart tab next. For now, select No Cart as the option. Before we move on to creating a Cart or Dynamic PDF pages, you should upload a basic template file to confirm that all your settings are correct.

 

Click the Print button at the bottom-right of the form or exit to the Main Menu and click Print to get to the Printing Menu.
For this test, select only the Baseball Gloves category for printing by checking its Print? box in the category list.
Click the www button to create the files.

In this screenshot, you can see all the files for this basic test in the Local Output folder. Baseball Gloves.php is the template files. Baseball.css is the style sheet. dbConfig.php is required to give your templates access to the mySQL table and pageNav.php creates the page navigation links.

Additionally, the folder: photos , has been created and a copy of all the image files are in there. These files can be uploaded in their same relative folders. That is, the PHP files can go into the main www or public_html folder and photos can be created as a subfolder of that main folder.

 

The next step is to upload the files.

You can continue to use your website's Control Panel and File Manager utility or you can use an FTP program if FTP has been configured on your server.

Refer to the help files on your Control Panel or contact your website host if you need assistance setting up FTP.

There are many FTP programs available for download. I'm using FTP Commander and this screenshot shows its configuration form.
Note that the User ID is not prefixed with mySite_ as was required by the configuration for the php files.

For your own server, the FTP User Name could be completely different from the database User Name.

Once the files are uploaded, you can test them by entering the complete URL for the template file.
Using my example, that would be:

www.mySite.com/Baseball Gloves.php

 

If all your configuration is correct, you should see your catalog content displayed as shown here.

If so, Congratulations!
Most website developers would have charged thousands of dollars to create the same files and database configuration you've just created.

There's still a bit more work to do of course. You still need to add an inline frame and category navigation buttons to your site and this may be something you're willing to take on yourself or contract out to a developer. Later on, I'll provide some more information about that which may help you make that decision.

If you did not get the template to show up, contact us for assistance. We'll probably ask you to send us some screenshots of the same forms and pages shown in this tutorial.

 

Return to Tutorial Selection or Continue to the next chapter: Adding a Shopping Cart - PayPal