php shopping cart
free shopping cart   shopping cart software

Free Shopping Cart PHP Software

Files to Customize for The Look
And Design Of Your Store

The basics to designing AFCommerce is first to know which files need to be edited. This guide will layout the main files that should be changed, and how to make changes that will affect all of the pages associated with your shopping cart, including the extra pages that you create for your own content. There are 5 - 8 main files that need to be changed, so they will be covered first, and later on, I will add a short description for other files that "could" be changed when doing major reconstruction of the default AFCommerce design. The location of most of these files are in the main AFCommerce directory, which is the directory on your web server where you uploaded the software too. The file that defines the actual text that is displayed on all pages can be found inside the language directory (lang/), which is also the location of the buttons (images) the software uses. Any file marked with 3 stars (***) signifies that file is more important than the others, meaning that there is much more code that can be changed in that file for major changes.

The main files are:

  • header.php

  • bannerinclude.php

  • toplayout.php ***

  • carttop.php

  • bottomlayout.php

  • footer.php ***

  • sytle.css *** - (version 3 also has a second style file, named style-v3.css)

  • lang1.php (English) - other languages are named langx.php, where the "x" is the id number for the language you're creating or editing.
    (version 3 also has a second language file, named lang1-v3.php)

  • header.php -

  •       Header is for all php and html code for the beginning of each web page of your shopping cart. This file is actually rarely edited, since version 2 allows you to add your website title in the admin area, as well as, your meta tabs for keywords and website description. Mainly, if you need to add php code before any output is created, you would add this code to this file. Also, if you use any JavaScript that must be included inside the "HEAD" tags, this file would be used for that too.

    Since Version 2.5, AFCommerce dynamically creates unique title and meta tags for all of your product, category and manufacture pages. Version 3 has even more search engine features, allowing you to enter unique keywords for your products, which of course are the most important pages in your store. So you should use the admin area to create your base title and meta tags, and allow our system to do the rest. Keep your base title and meta tags very short and to the point because if they are too long, the search engines will ignore them. Our system makes each page haveunique title tags, so you must keep the title you enter in the admin area short because our system will add targeted words to each page, which will make the default title a little longer.

    Search engine optimization is beyond the scope of this document, however I can give you a quick explanation. Everyone wants to be at the top of the search engines, of course you do, its a huge amount of free traffic, so people get pretty desperate when it comes to a "quick fix" to going right to the top. Believing a company that tells you they can get you to the top few pages for only around 50 dollars or more, there is actually not much they can do for you, if anything at all, for any amount of money. Search engines today are much smarter than ranking a web page based on a few words that you write inside these "magic tags", with billions of web pages out there, you basically have to build a solid website, with good content and other, high traffic websites linking back to you to get a high ranking. So meta tags these days are used for telling some search engines and website listing directories what category your website belongs in, and the description is used for what people see next to your website when viewing these listings.

    So I put all of them into one file because you can have the same information in every page, and not be hurting your search engine positions. Believe me if it was hurting it some how I could easily change it to have meta tabs for each page like other carts have it, with less than an hour of work, but by putting them all in one file, all you have to do is change them in one place, and all of your pages are affected. Imagine when you have to add them, or change them in the future, you would have to edit each page inside your shopping cart, and I made it even easier by letting you simply add them inside the admin area, so you won't need to even know how to edit a file to add your own meta tabs.

    The header file has this advantage in any aspect of every file that will be added to your cart (probably up to 100 files), so this file is used to add any code that could go at the top of all your files. This method also makes it easier for website builders, like my own, to completely design AFCommerce with ease.

    This file ends off with an opening table tag for the banner of your website. Do not remove this table unless you intend on having no banner on your site at all. Keep the file structure I have in place to avoid unnecessary customization work, every possible custom layout can use my structure with minor design work.

  • bannerinclude.php -

  •       bannerinclude.php is included directly after header.php and its purpose is only for the actual html code for the banner of your website and absolutely nothing else. The banner of a website is the top portion of your website, and to give an example, by default, the image tag calling the AFCommerce banner is in this file. Remember that there is a table opened in the header file, and this table is closed at the very beginning of toplayout.php. This is done so that novice designers who do not want, or know how to, redesign the entire shopping cart can simply change the code in this file and replace the image at the top of all of their web pages. This way, they would not have to figure out the structure of the entire shopping cart to change the banner, they would only need to change this file.

  • *** toplayout.php -

  •       toplayout.php is included in your pages directly after bannerinclude.php. This file starts off by closing the table for the banner (opened in header), and toplayout is probably the most important file to the design of the site (that and the style sheet of course). So toplayout is the file you should try to understand first, it starts with an ending table for the banner, then opens a second table for the top links that go across the top (I am talking about the default look here). Someone could add anything they want there, either keep the top links, add more rows of links, remove this table and have nothing under the banner, add advertisements like I do on or whatever else they want.

    After the second table closes, the top portion of every page on your website is complete, so at this point, toplayout begins the left hand side of every page, so you will see that a third table is opened next. This third table is the most important table for your entire website, and whenever you have any kind of alignment problem, this table will almost always be the problem. We will call this table the "main structure table" for reference, so let's try to understand how this table works, so you will be able to manipulate the structure of your website easily. This table is controlled in different files, depending on which type of layout you want to use on your website. By default, AFCommerce has 2 columns, but you can easily change the location of the left column to the right hand side of the page, or you can add a third column for additional links, images, features, or basically anything you can think of. The right hand column, if you ever decide to add one, should go inside of the file named "bottomlayout.php", which is covered in this document below.

    The left hand side of each page (by default) displays all of the shopping cart's links, like your categories, manufactures, view cart, checkout, my account, etc. So when I refer to these links, I will call them the "cart's links", and any links to your custom pages (including the 4 pages I provide with the software, like the home page, about us, resources, and contact us), I will refer to them as the "main links", so please take note of these simple terms for reference. With that said, let's now explain the structure of your pages. You are strongly recommended to keep my structure in place, although it is your website, so you can change it if you want to, but I feel this would cause unnecessary work for you, and whenever I release new updated files, you would have to keep doing this work over and over again. Almost anything you would ever want to do with your own layout can be done with my file structure, and honestly, I believe that every possible layout could be used with my structure, but I say "almost" just in case someone comes up with some kind of design I never imagined, which should be very rare. Since there are very few files with your customization work in them, you can easily upload my new files, and NOT overwrite the files listed in this guide, and your custom work will not be destroyed, and will work completely with the new pages. It will be very rare for you to need to change this pages again, unless there is some kind of new feature that requires it, and I will make sure this only happens when it is absolutely necessary.

    The first table division (td) of the main structure table has a width of 150 pixels and you'll see that all of the cart's links are on the left hand side of each page by default. So you should notice that after the first table division is opened, all of the cart link's begin to be listed in the order I built by default. Feel free to move these links around however you see fit, and add any new items you want displayed on the left hand side here. Toplayout then finishes off by closing the td for the left hand side, and then opens the main table division for the body (content) of each page. The reason for this is to establish one solid structure for all pages, and any actual page, like for example "contact us", only has the body of that specific page inside of that file, and simply includes the file "carttop.php" at the very top of that page. Carttop is the file that includes header, bannerinclude, and toplayout, as well as doing a few other things, and this is explained below, with an example.

  • carttop.php -

  •       carttop.php is the one file that allows people to add new pages very easily because all you have to do is include this file at the top of any page (very first line), and it will open your database connection, declare all functions, start all security features, and more (carttop.php is the file that includes header, bannerinclude and toplayout as well). This file should NOT normally be edited, but you should understand what its does. After you include carttop, just start adding the content for that page, and the entire structure that you built inside the files mentioned in this guide will be built automatically. After you add the content for that page, simply include footer.php, as the very last line, and footer will basically finish off the page structure the same way carttop starts it. Footer is explained below, but for now, lets focus on the top and left side of the pages, and you can learn about the right side and bottom in the next steps.

    So if you look at the about us page, you'll see that its a pretty short file, because all it does is include its own content from one of the files in the lang directory (so when someone is using multiple languages they can have the same page's content be pulled from the language the visitor is currently using). I don't want to get too confusing by throwing too much at you at once, so for now forget about the different languages, but let's say you needed to add a new page, this is how you would do it:

    <?php include ("carttop.php"); ?>
    This is the content of my page, I can add anything Y normally would add
    to a page here, and this page will look like all the other ones !
    <?php include ("footer.php"); ?>

    That's it, you could name that page anything you want, make a link to it somewhere and there you go, a new page would be added to your website. Pretty easy right? I hope so.

  • *** bottomlayout.php -

  •       Bottomlayout is very similar to toplayout, except instead of handling the code on the left hand side, it handles the html code on the right side. By default, bottomlayout is blank because there is no right hand column in the default look. So let's say that you didn't like the default look, and instead of having everything that is on the left, you wanted it all on the right. Well you would move the html code that is on the left hand side, inside of the toplayout file to bottomlayout. This could be done by entirely moving the first table division of the main structure table (explained above in toplayout) to the bottomlayout, including the table division tags. Do not remove any of the other code from toplayout when moving a column over, especially the main structure table's opening table tag and table row tag (<tr>). I would never recommend adding more than 3 columns to this table, and remember that the body of your page (where your content is located), needs to take up at least 500 pixels, and is usually better with at least 600 pixels.

    To start a third column, you will need to open a new table division tag inside of bottomlayout, and also remember to close that table division at the very end of this file. Do not add an entire table, just the td opening tag as the first line of output. If you forget to add this table division the code you put inside of this file will be added to the end of your content (or worse), which will not create a 3rd column. If you forget to close the table division on the last line of output, your pages may have some problems lining up your footer properly.

    If your not adding a 3rd column, and you are not trying to move the cart's links to the right hand side, you shouldn't edit this file at all.

  • footer.php -

  •       The footer.php file is very similar to carttop.php except that instead of being all universal information at the top of the file, it is all the information that goes at the bottom. If you're using my structure exactly the way I intended, which is not required, the footer file should only have html that will go at the bottom of each page. The right hand side of each page should go in to bottomlayout.php, and you will notice that the footer file is where bottomlayout is included, so it really wouldn't make much difference if you put the right hand column's (if you added one) html code inside of footer, but I think it keeps things more organized to keep them in separate files. You can do it which ever way you want. Adding a right hand column is explained above in the explanation of bottomlayout.php.

  • sytle.css -

  •       The style.css file is the style sheet for the entire AFCommerce software. It contains the rules for your website's colors and fonts, as well as, other xml rules. A CSS tutorial is beyond the scope of this document, but there is a lot of help online and tutorials everywhere that gives examples and explanations. If you do not know how to add your own style sheet statements, you can simply read through this file and change the colors and font attributes of the classes that are already defined. So you can basically look at the page of your website that you want to change a color or font on, see which class is being called in the area you need to change, find this same class in the style.css file, and change the numbers of the fields that you want to edit.

  • lang/lang1.php -

  •       This is the English language file where the text for your website is defined. This is a popular technique most software uses, so that you assign variables to every piece of text on your website, and depending on which language file is included into your pages, will determine the text that is to be displayed. This is what makes it possible to have your website translated in to multiple languages, and cart can switch from one language file to the next, depending on which language your visitors choose to view your site in.

    You may edit this file and change the default text that is displayed on the shopping cart's pages. If you plan on using only one language, you may directly add any new text to your pages without storing them in this file, and simply add your text to the file your editing directly.

    This file uses php's "define" directive, which takes 2 fields. The first field is the variable that will be used inside your pages, DO NOT EDIT THESE VALUES. The second field is for the actual text, and you may change the default text by changing it inside the double quotes, "". If you need to add a double quote inside of these fields, you must "escape" them properly following normal php rules. To escape a doubt quote, you must simply add a back slash, \, in front of each quote you use, like this: \"

    I originally developed this software to work with my website builder, and if a script can completely redesign this software, a person should be able to do amazing things with it. The Amazing Flash Website Building System can completely customize the AFCommerce shopping cart, so I created the website design add on, which will be available for purchase around April 2006, to work like a mini website builder that completely manages one AFCommerce website directly on your own web server (which means you can host it yourself for better control and improved security). The website builder rewrites all of the files listed in this guide, as well as providing you with other tools that create html code automatically for you. The website design add on also has additional add ons for it, that allow someone with no knowledge of html, JavaScript, css or php to do truly impressive tasks easily and automatically. These additional add ons include a web page builder (creates unlimited new custom pages), a content management system (for your own pages that already exist), email and payment form creators, an awesome calendar builder, and much more.

    The website design add on comes with over 100 free banner templates, and allows you to simply push one button, and switch between different style sheet templates, and 8 completely different structural layouts for your website, any time you want. There are over 4000 unique designs included for free, and premium flash banners and style sheets available. The different structural layouts are as follows:

  • main links across the top, cart links on the left

  • main links across the top, cart links on the right

  • main links on left side, cart links on the left

  • main links on left side, cart links on the right

  • main links on right side, cart links on the left

  • main links on right side, cart links on the right

  • main links across the bottom, cart links on the left

  • main links across the bottom, cart links on the right

  • Copyright 2004 - 2011

    Powered by