Simple template changes - best practices?

Store Builder Questions
1

I’m confused on what is the best* way to make simple changes to my skin. Let’s say I’m using the “Basic” skin and want to tweak the layout of “product_multicolumns.tpl”.



Should I:


  1. edit the .tpl file directly in /skins/basic/…
  2. edit the .tpl file in /var/skins/basic/… and /skins/basic/…
  3. create a new template by cloning “Basic” and giving it a new name and edit this
  4. use My Changes addon with a “product_multicolumns.override.tpl”
  5. create a new addon called “Custom Product Multicolumns”



    *best = simplest, smartest, version-proofest :slight_smile:



    thanks!

    Glen
2

The simplest way is to use the hook and My Changes. This will keep your changes from being overwritten by future upgrades.



Bob

3

I use the my changes addon and it makes it a lot easier when it comes to upgrades. It took me a while to figure out how it works, but once the idea clicked I have been able to make quite a few changes without ever actually touching the template files. By doing this most of my changes aren’t overwitten during an upgrade.



Brandon

4

Thanks for the replies -they’ve confirmed my hunch that My Changes was the way to go. Too bad the KB article is somewhat lacking. Is there a good How-To thread in this forum? I’ve looked but no luck.

5

You could check out:



[url]http://forum.cs-cart.com/showthread.php?t=10273&highlight=local+modifications[/url]



Tbirnseth did a addon called local modifications that does the same thiing as the my changes addon. I personally use the my changes addon as it is supported by CS-Cart while his is not.



I’ll give you a couple of examples.



First, I want to have my own styles, but I don’t want to have my styles overwitten when I upgrade. So I need to create 2 files.



The first file is to follow the original CS-Cart style sheet. Becuase css is cascading, if I have my own styles follow CS-Cart’s styles than my styles will “overwrite” CS-Cart’s.



So the file is called:



skins/basic/customer/addons/my_changes/hooks/index/styles.post.tpl



In that file I put:






Now CS-Cart know where to find my style sheet so now I need to create it. So I create a file called:



skins/basic/customer/addons/my_changes/css/local_styles.css



In this file I put all of my own styles just like any other style sheet.



The reason why this works is that the hook is called up from:



skins/basic/customer/common_templates/styles.tpl



It’s called from:


{hook name="index:styles"}{/hook}



Now I also want to replace the original header with my own image and remove the quick menu.



I need to create a file called:



skins/basic/customer/addons/my_changes/hooks/index/main_content.override.tpl



In this file I have:


```php {* $Id: main_content.override.tpl 7412 2009-05-04 08:03:01Z Brandon $ *}




Saltwater To Go








{assign var="escaped_current_url" value=$config.current_url|escape:url}
{if !$auth.user_id}
{$lang.sign_in}
{$lang.or}
{$lang.register}
{else}
{$user_info.firstname} {$user_info.lastname}
({include file="buttons/button.tpl" but_role="text" but_href="$index_script?dispatch=auth.logout&redirect_url=`$escaped_current_url`" but_text=$lang.sign_out})
{/if}

{if $settings.General.secure_auth != "Y"}


{$lang.sign_in}


{include file="views/auth/login_form.tpl" style="popup" form_name="login_popup_form" id="popup"}


{/if}


{include file="common_templates/search.tpl"}








{*{include file="addons/my_changes/my_files/cart_status_salt.tpl"}*}

{if $localizations|sizeof > 1}

{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"lc=" items=$localizations selected_id=$smarty.const.CART_LOCALIZATION display_icons=false key_name="localization" text=$lang.localization}


{/if}

{if $languages|sizeof > 1}
{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"sl=" items=$languages selected_id=$smarty.const.CART_LANGUAGE display_icons=true key_name="name" language_var_name="sl"}

{/if}

{if $currencies|sizeof > 1}

{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"currency=" items=$currencies selected_id=$secondary_currency display_icons=false key_name="description"}


{/if}


```

I know to create this file because the hook is called from:

skins/basic/customer/main.tpl

As:

```php {hook name="index:main_content"}
{include file="top.tpl"}

{/hook} ```

Basically anywhere there is a {hook}Some text{/hook} you can replace it by creating your own file.

I hope this has been some help. Like I said, it took me a while to figure it out, but now I see how useful it really is.

Brandon
6

Wow - thanks for the how-to! I’ll have to read through it tomorrow. I’ve also been testing the “Skin Revisions” addon from EZ Merchant Solutions.

Glen

7

I’ve read over your example My Changes as well as EZ-Cart’s “Customizing Your Store” PDF and now have a good understanding of how this works.



Now, in the case of a complete skin redesign which do you think is better?:

  1. Use the “My Changes” method with “Basic” skin and carve it into the design I need.
  2. Create a completely new skin folder.



    Option 1 seems like it could make integration of “Basic” skin changes and improvements automatic during the version upgrade process.



    Option 2 seems like it would be more straightforward in the template design process. Integration of skin changes and improvements would have to be handled manually with a diff examination of upgrade.



    thanks,

    Glen
8

Glen,



The thing I don’t know about with just creating a whole new skin is how to upgrade it. I honestly haven’t looked into it, but when an upgrade is done I know that the skins are upgraded and I know that the base skin is upgraded. The thing I don’t know is if you create your own skin if will it pull the information for the upgrade from the base skin.



If it will pull the information and overwrite your changes than what is the point of creating your own skin in the first place?



Of course, if you do manual upgrades and don’t use the upgrade script than I guess you can just upgrade your skin the way you want.



Maybe I just don’t get it, I don’t know.



Brandon

9

I wish CS-Cart would include a “bare-bones” skin for anyone wishing to more or less design a skin from scratch.

10

Hello!



I just tested css hook with my_change, is necessary to copy entire images folder to now css folder to load imgaes for css style. right?

11

[quote name=‘brandonvd’]…



The reason why this works is that the hook is called up from:



skins/basic/customer/common_templates/styles.tpl



It’s called from:


{hook name="index:styles"}{/hook}



…[/QUOTE]



I am trying to figure out the hook and “my_changes” in v. 2.1.2, but I cannot find the above code in the styles.tpl. Did they change how the “hooks” are used and where they “call” from? I’ve tried to follow the generic information from CS at [url]CS-Cart Documentation — CS-Cart 4.15.x documentation and what I can find on the forum, but I haven’t succeeded in changing anything more than the lines around the search box. I did get the background color change, but it was not by using the “hooks” it was by editing the actual “basic” template. I can’t seem to get the “my changes” to work.

12

I see the hook in common_templates/styles.tpl



You will probably have to remove the var/compiled directory (or otherwise clear your cache) after putting the skins//customer/addons/my_changes/hooks/styles.post.tpl file in place.

13

So I did the “your_admin.php?cc” but I still do not see anything.



When you say to…

[quote]

…remove the var/compiled directory…

[/quote]

…can you please explain what to do other than the ?cc thing? Do you really mean to access the files and delete the whole “compiled” folder, what is in the folder or do you mean just to do the “?cc” command?

14

Clips, access your site via FTP, then delete the entire contents within both your /var/compiled/ as well as your /var/cache/ folders. Don’t delete the folders, only the contents.



Do not worry as these files will instantly start to rebuild as pages of your site are visited!



Also, IF you are using Smartoptimizer, then also delete the contents of the cache folder within /smartoptimizer/cache.

15

Not necessary to delete the var/cache directory (or its contents), you only need to get rid of the page cache (compiled). It is okay to remove the directories themselves, they are recreated as needed.



If you have the correct skins//customer/addons/my_changes/hooks/index/styles.post.tpl file in place (you might want to post it here) then you should be able to “view page source” of any of your pages and find the content of your hook file following the “link” for styles.css.

16

[QUOTE]Not necessary to delete the var/cache directory (or its contents),[/QUOTE]



No, it’s most likely not necessary to delete the cache in this case, although it certainly is not going to cause any problems in doing so! I tell people to delete both folder contents simply to help reduce future issues & because of all the mass confusion here on the forum related to cache clearing, why not clear out the garbage and let it rebuild correctly as needed. :wink:

17

@struck - you’re correct. I was trying to be technically correct… It really doesn’t matter as long as the compiled page cache is cleared by whatever means someone is comfortable with.

18

Well, no luck yet. So I must still be doing something wrong. I ended up zapping everything in all the cache folders but still cannot see the color changes or image changes.


[quote name=‘tbirnseth’]

If you have the correct skins//customer/addons/my_changes/hooks/index/styles.post.tpl file in place (you might want to post it here) then you should be able to “view page source” of any of your pages and find the content of your hook file following the “link” for styles.css.[/QUOTE]



Here is what I have on the styles.post.tpl right now…

[quote]


[/quote]
Right now I am just trying to change the top blue search bar that goes across the site on the "basic" skin.
19

And do you see an associated



line in the page source for your home page? Do you see it being loaded by firebug using the NET area and CSS selection?

Too hard to guess from here... If you added a {debug} at the top of your styles.post.tpl file, does the debug window show?
20

I put the {debug} in the .tpl file, but no luck from what I can see. I can’t seem to find it with the Firebug either. So again, I’ve either messed something up or hooks just ain’t up to par yet.



To be honest, I am growing somewhat doubtful of “hooks” idea at this point. In trying to work with the “hooks” idea I have been told by a few different people now that it is a good idea, but it just does not work properly yet. When the pros are making these statements, I believe I’ll just go back to the hard code edit and work from there. Right now I seem to be just spinning my wheels on something that may just not have the bugs worked out yet.



I do thank you for your help!