Installing a store style in the Avactis Shopping Cart
You might wonder why I spent many days working on the design function of the Avactis Shopping Cart.
The reason is quite simple actually.
I really love this program!
In the past 4 or 5 years I have wanted a great cart. I just never could find one that was adequate on the design end of it. In Aug of 2006 a friend said "hey take a look at this!" ... wow what a surprise.
Not only was the operation of the cart user friendly I soon discovered the design part of it could be made very user friendly too.
What I discovered was you actually install the Avactis Cart into your own website design. Not the other way around. So when you are finished you actually have a shopping cart that is totally incorporated into your design.
Here are a few examples of what I did integrating Avactis into my own designs.:
With the method I describe below templates can be made to simply drop into anyone's site who runs this cart and voila the total look of a product will change.
So how did she do that? ... read on.
First I installed the program as instructed into a sub-directory named (cart-demo)
I then created another sub-directory named (beauty)
I copied all files from the default flowers sub-directory into the beauty sub-directory
Next I made a copy of the flowers init.php and the flowers-layout.ini
On the flowers init.php:
for now I only changed what is below.
I changed the name of the layout.ini to my beauty-layout.ini:
On the flowers-layout.ini
I changed the flowers directory to beauty as well as the path to beauty.
I also changed the Templates Directory to: TemplateDirectory = beauty-templates
NOTE there is no semicolon in front of that line ... if you add or leave the semicolon there the program will use the default settings and you will no doubt be wondering why your new changes do not work
I then uploaded both of these files to the server.
Next I created a new sub-directory in the cart-demo directory called beauty-templates (note that name matches the line in the beauty-layout.ini) ... what that line is telling you and the program is search there for the templates for this particular cart.
Since on my own server (as well as many of your servers) this particular program at this time sets the server permissions to no one it is likely you will not be able to alter the original templates that come with the program.
This is simply a work around that makes you in control of your cart without having to bother the tech guys to set permissions so you (the domain owner) can use them. Also since it leaves the default settings on the server without change you can still have a flower cart if you want.
Using this method means you can add as many different product looks to your site as you would like.
Personally I am thrilled because that means my online mall can have a number of different storefront looks depending on what product I choose to sell.
Next I created my site design ... this one.
I made it fairly simple following the format set out in the original flowers site. As you can imagine you could make this as complicated as you like. There is no limit to your creativity.
After I created my design index doc (it works just like a splash/entrance page for any site) only instead of .html I called it .php ... I then used it as the template for all of the other pages on this site.
Next I took the index.php from flowers and copied all of the code that belongs to the program into my design ... below is a short example of what I added so you get an idea. Avactis has very complete instructions and videos on how exactly this is done and what you need to know so I will not be redundant here and add all of that.
My Original:
My Altered:
I uploaded that single document into the new beauty sub-directory and over wrote the "flowers" index.php which I had previously copied into my beauty directory. I then checked with my browser to make sure I had no errors or minor design corrections I wanted to make. Of course the whole cart was still the original flowers with my new design. But there were no program errors.
From that point on I made a copy of my original index.php and simply dropped the necessary cart tags into each document. I used each original flowers doc (i.e. about.php, store.php etc.) ... until I had a duplicate of each document ... only with my new design on it.
There are probably many ways to attack this ... but for me this seemed the easiest.
I pulled all of the main style code out of each template in the program and placed it on the main stylesheet.
That way you only have to access one document to change the inner nuts and bolts of your design.
This ended up a rather long .css but if changes need to be made I do not have to pillage through many templates to make the change.
It was brilliant of the designers of this program to put each piece (i.e. breadcrumbs, navigation etc.) into small modules. Once they are stripped of style and only the basic function is left ... with a stylesheet you can use those small module for ANY DESIGN.
Once all of my templates were stripped down to just what they were suppose to do ... I made a general copy for all other design looks I want to do in the future. I then uploaded those templates into my beauty-templates sub-directory that I created for this design look.
I checked to see if there was anything (other than new buttons etc.) that I had missed.
It would have been easier to simply use the buttons in the flowers program but since I seldom do easy I changed them too. What I created I simply named exactly the same as the original program ... that way I did not have to worry about changing any of the style that called up that image or the docs they might be on in the program.
Visit the Cart Demo
|
