Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Hooks Question Rate Topic   - - - - -

 
  • BrightFire
  • Member
  • Members
  • Join Date: 11-Nov 07
  • 93 posts

Posted 05 February 2010 - 07:15 PM #41

Sorry if my question is a little basic.

I am planning to modify a core template to use my own styles. I found the docs on the My Changes addon, and I plan to use that. I found the docs on the hooks. My question is when it says:

Create the template styles.post.tpl with the content


1) Where do we put that file?

2) Do I just create the above file and my_changes directory with the custom css in there?

3) And why would I not just add this line of code to the index.tpl file?
Thanks,

Chris
BrightFire New Media Designs
www.brightfiredesigns.com

 

Posted 06 February 2010 - 06:16 AM #42

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>.tpl

That'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

 
  • bitmanx63
  • Junior Member
  • Members
  • Join Date: 14-Jan 10
  • 22 posts

Posted 07 February 2010 - 08:45 PM #43

Timothy, your post really helped explain the TH hooks. I went through the process as previously stated with addon's, duplicating the skin, creating the hooks directory, making the proper .TPL code changes. What I didn't find clear was the code impacted for a TH hook impacts only that code in between the {hook name}....{/hook}.

Example, I take the base bottom.tpl code, copy it to the "addons\my_changes\hooks\index", edit that code to remove the "<div class="bottom-search center">" code and notice nothing changes since my goal was the remove the bottom search functionality. So the only code impacted in that base "\skins\my_skins\customer\bottom.tpl" is in between the {hook name} because teh search code in this case was above the {hook} tags. So basically I still have edit code outside the "addons\my_changes\" directories if I need extensive customization.

In my case for the "\skins\my_skins\customer\bottom.tpl" I just moved the "{hook name="index:bottom"}" line to the top of the file and my "bottom.override.tpl" rendered the code properly.

Tell me if I'm wrong here but it still seems like future upgrades will require file level diff's to ensure something wasn't missed regardless of the addon architecture.

 
  • jobosales
  • Senior Member
  • Members
  • Join Date: 04-Nov 06
  • 3114 posts

Posted 07 February 2010 - 09:19 PM #44

In my case for the "\skins\my_skins\customer\bottom.tpl" I just moved the "{hook name="index:bottom"}" line to the top of the file and my "bottom.override.tpl" rendered the code properly.

Tell me if I'm wrong here but it still seems like future upgrades will require file level diff's to ensure something wasn't missed regardless of the addon architecture.

You will be notified in during the upgrade process of any files which contain customization; this will at least help to make reapplying changes easier.

It also appears that the 'hooks' available are still in flux with additional hooks being added. This should help with future customization but, of course, means that you will need to reconcile your customizations. Even using hooks, there is the possibility that a change in the core code might affect your hook.

The problem with bottom.tpl has been reported to the developers months ago (basically asking that the fix you made be implemented in the core code). You might want to add your comments to nudge the developers along:
http://forum.cs-cart...ew&vbug_id=1412

Bob
CS-Cart 2.0.14 (testing)