Samples Product Information Home Page Download Pricing

Inline Frames

Inserting an Inline Frame into your webpage will require some knowledge of HTML. As there are many HTML editors or webpage design tools available, instructions specific to their use are beyond the scope of this tutorial.
Instead, this chapter will describe only the details of how CleverCart's inline frames are implemented and provide example code.

You can view the actual code on any existing HTML page by right-clicking the page in your browser and selecting View Page Source.

If you already have a working website that you are considering adding an online catalog to, have a look at its source code and compare this with the code described here and also the live code on the Sample Page .
You can find the correct section by searching for the word iframe. Press Ctrl+F to open a search dialog.

There are only a few lines required and viewing working samples may help you decide whether to contract out or try to complete this on your own.


There are two Inline Frames on CleverCat's Sample Page - one for the catalog content and another for the cart quantity notification.
Here are the actual code segments from that page which create the frames:

Cart Quantity

Catalog Content

As you can see, there's not a lot of code required for the actual Inline Frame. If you've looked at the page source of the live example, you'll see that there is more code required to place the frame in the correct position on the page than there is to make the frame functional.
The functional parts of this code are src= and name= and looking at the code for the Category buttons will make this clear.

Category Buttons

When the first button of these three buttons is clicked, the a href instruction tells the browser to open cartSample1.php in the target window catContent.
In this case, catContent is the name of the Inline Frame for the Catalog Content. This is specified in the iframe tag by name="catContent" So, each button simply specifies a new php file to be opened in the Inline Frame and that is how category navigation is implemented. Each of these php files is generated by CleverCat as a separate category.

Referring back to the Catalog Content code, it should now be clear that src= specifies the default php file to be displayed when the page is first opened. In this example, that is the same file as the first Category button.

Similarly, src= and name= are important in the Cart Quantity code. The default src= is the name of the php file, inlineCart.php which provides a count on the items in the cart. name=inlineCart is important because that is the name used in the cleverCart.php, the file which processes the transaction of adding items to the cart.


In summary, there is very little HTML code required to implement CleverCat's cart solution but the coding required to place and format the Inline Frames in an existing page will vary considerably between websites so this may still be a job you want to contract out to someone with more experience. If you are new to HTML and are taking on this project on your own, remember to make backups of your files before you start editing them.

What's Next?
In the tutorial so far, I've demonstrated creating a PayPal shopping cart and a general purpose cart which records selected items in a mySQL table. CleverCat's area of expertise is in creating catalogs efficiently and economically and the remainder of this tutorial will focus on using the data in that mySQL table to print a customized PDF catalog.
However, now that you have a functioning cart and mySQL database, you can use that data for any purpose. We provide a basic cart summary page which you can adapt to submit all items at once to PayPal or another payment gateway or use to compile a list for product ordering. You'll find these additional files in the HTML subfolder of the folder where you installed CleverCat. For most users, this will be something similar to C:\Program Files (x86)\CleverCat\HTML\.


Return to Tutorial Selection or Continue to the next chapter: Linked Templates