PHP-eSeller

Shopping Cart

Shopping Cart ....

The shopping cart displays are located at /eseller/index.php and the login page is located at /eseller/login.php assuming that you have installed the application in a folder called eseller.

The shopping cart system provides 'Add to cart' buttons and 'View cart' buttons enabling a purchaser to add items to a cart before purchase. Physical goods and digital goods can be added to a cart at the same time and purchased at the same time.

The system uses a set of templates which are located in the folder /templates/. You choose which template you are going to use by going into the Global Set Up admin section and choosing the template from the drop down list.

Depending on which template you select the kind of features you have are :

  • in built search system which searches the main text of the item and also extra keywords fields
  • navigation system which will display by categories and subcategories
  • an mp3 clip system which allows mp3 clips to be included with the item

It is quite easy to modify the templates, removing a particular feature if you do not require it.

The template system ....

This application uses the 'patTemplate' system

On-Line documentation can be found at :
http://trac.php-tools.net/patTemplate/wiki
and at :
http://examples.php-tools.net/patTemplate/examples/index.php

There are a number of sites that have created examples, and tutorials. Some of these are :
http://www.devarticles.com/c/a/PHP/Simple-PHP-Templates-With-PatTemplate/
or
http://www.devshed.com/c/a/PHP/TemplateBased-Web-Development
-With-patTemplate-part-1/

http://www.devshed.com/c/a/PHP/TemplateBased-Web-Development
-With-patTemplate-part-2/

For the most part you will not need to understand the details of the patTemplate system or how to program with it. You should be able to modify the existing template examples to fit in with your own layout requirements.

The patTemplate separates php coding from the display pages and hence makes it easier to modify html code without worrying about breaking the php code.

Using the template system ensures that you can easily change text, or layout by simply changing html pages.

Brief description of the templates

All the templates are located in the 'template' folder under its own folder name.

You only need to modify these files to create a new template, you do not have to modify any other files outside this folder - that is the advantage using this method.

If you wish to work on a template, the best method is to create a new folder in the 'templates' folder, copy an existing set of files to it and then modify the files. The new folder name will automatically appear in the list of templates in the Global set up admin section.

Each template file starts off with its identification which is something like

<patTemplate:tmpl name="main"> and ends with </patTemplate:tmpl>

Obviously you should not modify these codes.

Main templates

The file main.htm is the starting point for the shopping cart and the login_main.php is the starting point for the login system. These main templates reference a number of sub templates.

For example :

<patTemplate:link src="popular" />

will display the list of most popular purchased items. If you do not want your templates to display the list of most popular items then simply leave this line of code out.

The src reference in <patTemplate:link src="popular" /> identifies the file name of the sub template, in this case popular.htm

The two templates main.htm and login_main.php will have the overall structure of the page and include the reference to the css stylesheet.

Sub templates

The sub templates are used to display the content.

Some sub templates have non-repeating content in them as can be seen in the template file content_detail.htm, while others have repeating regions as can be seen in the template file cart_detail.htm

content_detail.htm looks something like this :

<patTemplate:tmpl name="content_detail">
<table width="100%" border="0" width="100%" align="left">
<tr>
  <td>{DETAIL_BUTTON}</td>
</tr>
<tr>
  <td valign="top">
  <div class="item_title">Item : {DETAIL_ITEM_TITLE}</div>
</td>
</tr>
<tr>
  <td valign="top">{DETAIL_CURRENCY} {DETAIL_MC_GROSS}</td>
</tr>
<tr>
  <td valign="top">{DETAIL_ITEM_DESCRIPTION_FULL}</td>
</tr>
</table>
</patTemplate:tmpl>

Variables within {..} brackets are the variables that are replaced when the page is rendered. Obviously you should not modify these names. If you do not like the layout of the page, then move the variables around or change the table layout. If you wish to change the colors and fonts you can do that directly with html coding although is usually best done in a style sheet. The style sheet is not referenced in this file, it is referenced in the main.htm file.

The cart_detail.html template is more complicated because it has a repeating region and looks something like this :

<patTemplate:tmpl name="content">

<table width="100%" align="left" border="0">
<tr>
  <td></td>
</tr>

<tr>
  <td>Page : {DISPLAY_PAGING}</td>
</tr>
<tr>
<td>
<table border="0" width="100%" align="left">
	<patTemplate:tmpl name="content_entry">
	<tr>
		<td colspan="3"><hr class="rule" /></td>
	</tr>
	<tr>
		<td width="15"> </td>
		<td valign="top" align="left" colspan="3">
		<div class="item_title">{ITEM_TITLE}</div>
		<div class="price">Price : {CURRENCY}{MC_GROSS}</div>
	</td>
		<td width="15"> </td>
	</tr>
	<tr>
		<td width="15"> </td>
		<td valign="top" align="left">
		<div class="description">
			{ITEM_IMAGE}
			{ITEM_DESCRIPTION}
		</div>
		</td>
		<td width="15"> </td>
	</tr>
	<tr>
		<td colspan="3">
			<a href="index.php?recid={RECID}">more ...</a>
		</td>
		</tr>
	<tr>
		<td colspan="3">
			{CONTENT_BUTTON}
		</td>
	</tr>
	</patTemplate:tmpl>
</table>
</td>
</tr>
<tr>
	<td>Page : {DISPLAY_PAGING}</td>
</tr>
</table>
</patTemplate:tmpl>

The repeating region starts with:

<patTemplate:tmpl name="content_entry">

You do have to be a bit more careful when modifying this template so that you do not change the area that is repeating.

Template structure

This gives a brief description of the template files.

main.htm Is the starting point for shopping cart displays.

cart displays :
  • cart_detail.htm
  • cart_empty.htm
  • cart_summary.htm
content displays :
  • content.htm
  • content_detail.htm
  • content_empty.htm
navigation displays :
  • navigation_main.htm
  • navigation_sub.htm
  • navigation_expand_menu.htm
search displays :
  • search_query.htm
  • search_results.htm
  • search_results_empty.htm
most popular displays :
  • popular.htm
  • popular_detail.htm
other :
  • footer.htm
  • welcome.htm
login_main.htm Is the starting point for the customer login area to download the products.
  • login.htm
  • login_downloads.htm
  • login_messages.php

Template customisation

The best place to start is with the main.htm file and the login_main.htm file. Each of these files is where you place your logo and it also contains some href links which you may want to either remove or modify. After that you may want to modify footer.htm file which is the main footer for the pages, and then welcome.htm file which is used in some of the templates to display a start up page.

All styles are located in the /stylesheets/styles.css file for the particular template.

Changing logo

Each template has its own stylesheet (styles.css in the stylesheet folder) and all images are located in the images folder for that template. (Actually, the images for the buy now buttons, add to cart buttons etc are separate from the templates and are located in the common /eseller/images/btn/ folder because those images are managed dynamically).

The logo for each template is header_logo.gif which is located in the images folder for each template. This graphic is placed in the main.htm file and login_main.htm file which you should beable to see by opening main.htm and login_main.htm with an editor.

To add your own logo, you can either create a logo called header_logo.gif and just copy it into the appropriate template images folder, or change the name of the image in the main.htm file and login_main.htm file. You may have to be aware of the size of the image.

Footer href links

The template file footer.htm contains other links which you may want to change for your web site.

Modifying href links

The template files main.htm and login_main.htm contain href links which you want to modify or remove. You should be able to see those href links by opening the files with an editor.

Paging

Paging in the shopping cart template system is controlled in functionscart/content.php file. At the top of the file you can define the number of items per page and if you want paging to be turned off.

Using the mp3 players for music clips

By default the application uses a window popup with some javascript to act as an mp3 clip player. There is no configuration required and all you need to do is enter the url of the mp3 clip into the product item.

You may also use a flash button by ticking the tick box on the Global set up page. There are a number of versions of this button supplied with the distribution zip file, with slightly different color schemes. Just rename the file that you want to mp3button.swf

A different flash player can be found at http://www.alsacreations.fr/dewplayer/ and is also included in the distribution. This is dewplayer.swf. Again, to use this player just rename the file dewplayer.swf to mp3button.swf.

AJAX style PayPal digital shopping cart

For a full description of the AJAX style shopping cart, refer to here :

PayPal Digital Shopping Cart


Find out more

Pricing : PHP-eSeller costs $55 U.S. Dollars, and yes we sell the product using our own application. Click here to go to the purchase page for further details.

Demo : To view an on-line demo illustrating the admin pages and store front, click here.
The demo is live and you may purchase items to see how the system works. Items are $0.01 or $0.02 in value.   

Enquiries : If you have any questions about the product, go to the contacts page by clicking here.

Showcase : To see how customers have used the application, go to the user sites page by clicking here