This may be a little more information than you need, and some of it has been stated in this thread already, but writing it out helps me understand it.
First, there are two kinds of hooks.
1)
Code Hooks (CH) - CH's are named, preset
points within the core code that an addon developer can use to run addon specific code. For example, if an addon developer created an addon that needed to execute a php function every time a product was saved, the addon developer would use a CH. In order to do this the addon developer must register the php function with the named CH using a standard process defined by the CS-Cart team. Since your question does not involve CH's, I won't go into more detail.
2)
Template Hooks (TH) - TH's are named, preset
blocks within the template code of particular skin that an addon developer can use to customize the appearance of that skin. For example, since you want to customize the CSS you will need to use the "index:styles" hook.
TH's look like this.
{hook name="index:styles"}{/hook}To use a TH, all you have to do is create a TH template file at a specific location with a specific name using a simple naming convention. The formula for the naming convention is as follows.<webroot>/skins/<skin name>/<area>/addons/<addon name>/hooks/<controller name>/<hook name>.<action>.tplThat's kind of a lot to process so let's break it down.
<webroot> - This is the path to the root folder of your webpage. On my development server it is "/home/tschoonover/www". Generally speaking, you shouldn't post this on the internet, lol.
skins - This is the literal directory name "skins". It contain a folder for your current skin as well as any skins that you may have previously used.
<skin name> - This is the folder of your currently active skin. For example, if you were using the "Austere" skin in the storefront, this value would be "austere". Note that the skin used for the admin area is almost always different than the skin used for the storefront. So generally speaking, if you want to make a TH change to the admin, this value will be "basic".
<area> - This will generally be
customer (for the storefront),
admin (for the admin panel), or
mail (for the mail client). Keep in mind that not all skins will have all three of the above areas. In fact, of all the free skins that ship with CS Cart, only basic includes an admin area. So if you want to make TH changes to both your storefront AND your admin, you will probably have to create TH template files in two separate skin folders.
addons - Just another literal directory name. This folder contains a bunch of addon folders.
<addon name> - This is the name of your addon. For example, if you wanted to modify the
My changes addon, this would be "my_changes".
hooks - Another literal folder name. This contains all the template hook files for a particular addon.
<controller name> - This is the name of the controller where the TH will be called. I'm not totally sure how this is determined. As far as I can tell, you use the prefix in the TH name (the part before the colon).
Can someon confirm this?{hook name="[B][COLOR="lime"]index[/COLOR][/B]:styles"}{/hook}<hook name> - This is simply the name of the hook--the part that follows the colon.
{hook name="index:[B][COLOR="Lime"]styles[/COLOR][/B]"}{/hook}<action> - This will be either
pre,
post, or
override.
Pre causes the content of your TH template file to be inserted before the TH block.
Post causes it to be inserted after.
Override causes it to replace the block entirely. In the above example, the TH block is empty so it doesn't matter which one you use.
1) Where do we put that file?
I assume that you want your CSS change to apply to the storefront and not the admin or mail areas. If that is correct then the fully qualified filename will be:
<webroot>/skins/<skin name>/customer/addons/my_changes/hooks/index/styles.post.tpl
If any of the above folders do not exist, you will need to create them.2) Do I just create the above file and my_changes directory with the custom css in there?
The styles.post.tpl file must have that exact name and exist at that exact location. The CSS however can go wherever you wish. It's path is determined by the value of the href attribute of the link tag. For example, if you use the link tag in the documentation examples....
<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />Then the fully qualified CSS filename will be:
<webroot>/skins/<skin name>/customer/addons/my_changes/styles.css
3) And why would I not just add this line of code to the index.tpl file?
That would work, but you would lose your change when you upgraded to the next version of CS-Cart. Placing your custom changes within an addon allows you to isolate your custom code from the official product code. For simple customizations like the one you describe, it may seem like a lot of extra work, but for really complex customizations it is essential to keep them separated. Can you imagine being forced to extract and reinsert 10,000 lines of custom code each time a new version of cs cart was released. That's how they do it at my company and they have like 10-15 programmers for just one product. The managers call them recoders. They sit in front of green screens all day long doing nothing but cutting and pasting. I feel really bad for them but they seem to kind of like it in their own way. Of course they are RPG programmers so they love doing things the hardest, most obsolete and incompatible way possible.
Anyway, hope that helps a bit. Let me know if you notice anything that is inaccurate.
Also, here is an important tip that may save you several hours of frustration!
*****Important Tip*****Once you've made your TH change, be sure to clear your cache by using one of the following http requests. If you don't do this, CS Cart may behave as if your changes do not exist.
http://<your domain name>/index.php?cc
http://<your domain name>/admin.php?cc
12
Sign In
