Instructions for Template Modifications?

Are there EASY to understand instructions somewhere on how to make a change to a template design in 2.x without have these changes overwritten during the next upgrade?



I know people have mentioned hooks and add-ons, but I haven’t found anything that is simple to implement. Any help would be great! If 2.x is supposed to keep from changing my modifications, then what is the best practice for doing this (in a step 1, step 2, etc. layout)?



Thanks!

Easy will, of course, be relative to one’s skills but I will try to break this down into a step-by-step tutorial.



In the absence of any documentation on the “My changes” add-on, I am going to use tbirnseth’s Local Configuration add-on. You can download the add-on from [url]http://www.ez-ms.com/local_addon_v2.tgz[/url]. Follow the instructions below to install the mod:

[QUOTE]Unzip this on your server or into your ftp environment, change the ownerships and permissions to match your

systems needs and then move the [doc_root]/addons/local AND [doc_root]/var/skins_repository/base/customer/addons/local

path into your cart document root. New skins will automatically get the new addon.



For existing skins already installed, copy /var/skins_repository/base/customer/addons/local from the unzipped file to your

[doc_root]/skins/[active_skin]/customer/addons directory.



Next, go to the Administration/addons page and “install” the “Local Configuration” addon. This will enable the cart to pick up your changes.[/QUOTE]



For this example, we will add the product weight to the product block as shown below:

[url]http://idisk.mac.com/jobosales/Public/product_block_add_weight.png[/url]



Just as usual, you find where you would like to make your changes to the template. In this case, it would normally be added below the quantity (lines 110-127) in /skins/YOURSKIN/customer/views/products/components/buy_now.tpl. You look to see if there is any enclosing hook you can use (search for “hook name=”) . There is a hook at line 107 named “products:options_advanced” which we can use. Take note of the hook name since its structure defines the directory and filename for the substitute file: hook name=“DIRECTORY:FILENAME”. The filename is constructed as FILENAME.ACTION.tpl where ACTION will have one of 3 values:

override = replace the code in the original hook with the code from the hooked file;

pre = process the contents of the hooked file before the processing the code in the hook block;

post = process the contents of the hooked file after the processing the code in the hook block.



For our example, we will override the code in the original file, so our hook will be called options_advanced.override.tpl and will be products directory. When using the Local Configuration add-on, all hook directories will be in /skins/YOURSKIN/customer/addons/local/hooks.



To create this hook, do the following:


  1. Open /skins/YOURSKIN/customer/views/products/components/buy_now.tpl;
  2. Copy the lines between the {hook name=“products:options_advanced”} and the closing {/hook} - lines 108-127.

```php {if $product.is_edp !== “Y” && $settings.General.inventory_tracking == “Y” && $product.tracking != “D”}

{if !$simple}


{$lang.in_stock}:

{if ($product.amount <= 0 || $product.amount < $product.min_qty) && $product.tracking == "B"}
{$lang.text_out_of_stock}
{else}
{$product.amount} {$lang.items}
{/if}


{else}

{if ($product.amount <= 0 || $product.amount < $product.min_qty) && $product.tracking == "B"}
{$lang.text_out_of_stock}
{/if}

{/if}
{/if} ```
3) Paste the copied code into a text editor;
4) Add the part in red before the last {/if} as below:
```php {/if}
[COLOR="Red"]

{$lang.weight} ({$settings.General.weight_symbol}) :
{$product.weight}
[/COLOR]
{/if} ```
5) Save the file as options_advanced.override.tpl;
6) Use your FTP client to create the products directory in /skins/YOURSKIN/customer/addons/local/hooks;
7) Copy options_advanced.override.tpl to /skins/YOURSKIN/customer/addons/local/hooks/products on your server;
8) Make sure permissions are set appropriately for the products directory and options_advanced.override.tpl (usually 755);
9) Clear your template cache ([url]http://www.YOURDOMAIN.com/admin.php?dispatch=categories.manage&cc[/url])

The product weight should now be displayed under the product quantity on your product detail pages as shown at:
[url]http://idisk.mac.com/jobosales/Public/product_block_add_weight.png[/url].

This could use a little more work to display the weight only on the product detail page (it currently displays in the product block on both product detail and the product listing in categories).

Since the file is saved in your local directory, future upgrades will not overwrite any changes you have made and all your hooks should "just work". Also consider that the "pre" and "post" actions allow you add stuff before or after the hook, respectively. You can also use "override", "pre" and "post" actions together for even greater flexibility.

Hopefully this helps some and will get people exploring hooks.

Bob

[quote]

In the absence of any documentation on the “My changes” add-on, I am going to use tbirnseth’s Local Configuration add-on.

[/quote]



Good job! Note that I’ve provided a new PDF document that:

  1. Tries to walk a user through an example similar to the above.
  2. Lists all of the available hooks in the customer view as of version 2.0.6

    Link to the posting is [url]http://forum.cs-cart.com/showthread.php?t=11656[/url]

    The link to the pdf file is [url]http://www.ez-ms.com/docs/customizing_your_store.pdf[/url]

tbirnseth-



Thanks for all the work you have done on this. The PDF is very helpful.



Bob

No problem. Seems like it should have been done out of the box in the original release. I’m guessing they will integrate this type of thing into the template editor to assist people in making changes that don’t cause them headaches later on during upgrades. But some people are just intent on modifying the native source… Cavaet Emptor.

Sorry, this is just over my head. I just want to change colors and images without having them overwritten during the next upgrade (I’m used to Joomla). I didn’t see how to do that in your instructions . . . but I appreciate you trying.

ok, even if I don’t understand what’s going on, can you tell me which css file I would modify to keep it from being overwritten?

You would simply modify the styles in the local_styles.css stylesheet for whatever colors you want to change.



Read this document, it might help you: [url]http://www.ez-ms.com/docs/customizing_your_store.pdf[/url]

[quote name=‘jobosales’]This could use a little more work to display the weight only on the product detail page (it currently displays in the product block on both product detail and the product listing in categories).[/QUOTE]

Thanks to tbirnseth’s help in this post, I can finish this up.



If you want to show the weight on the product detail page but not on the product listing, add the bits in red to /skins/YOURSKIN/customer/addons/local/hooks/products/options_advanced.override.tpl around line 20:

{/if}
[COLOR="Red"]{if $controller == 'products'}[/COLOR]



{$product.weight}

[COLOR="red"]{/if} [/COLOR]
{/if}




Bob

Hi guys I think I need to carry out a similar edit…



I’m using the very latest current version 2.xxxx



I want to remove the “add to cart” button from my product listings but obviously keep it on my product details pages



I don’t want customers to be able to add a product to their cart without having first selected the options, seems odd to me that there isn’t a simple check-box in admin to do this ?, well I’m damned if I can find it





Thanks in advance

[quote name=‘TeeJay’]

I want to remove the “add to cart” button from my product listings but obviously keep it on my product details pages



I don’t want customers to be able to add a product to their cart without having first selected the options, seems odd to me that there isn’t a simple check-box in admin to do this ?, well I’m damned if I can find it[/QUOTE]

The following will remove the “Add to cart” button from the product listings but leave the “Add to wishlist” link (if wishlists are enabled in add-ons). The “Add to cart” button will still appear in the product details page.



In /skins/YOURSKIN/customer/buttons/add_to_cart.tpl, add the parts in red:

{* $Id: add_to_cart.tpl 6967 2009-03-04 09:26:06Z angel $ *}

{assign var="c_url" value=$config.current_url|escape:url}

[COLOR="Red"]{if $controller == 'products'}[/COLOR]
{if $settings.General.allow_anonymous_shopping == "Y" || $auth.user_id}
{include file="buttons/button.tpl" but_id=$but_id but_text=$but_text|default:$lang.add_to_cart but_name=$but_name but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role=$but_role|default:"text"}
{else}

{$lang.text_login_to_add_to_cart}


{include file="buttons/button.tpl" but_id=$but_id but_text=$lang.sign_in_to_buy but_href="$index_script?dispatch=auth.login_form&return_url=$c_url" but_role=$but_role|default:"text" but_name=""}
{/if}
[COLOR="Red"]{/if}[/COLOR]




Note that the “Add to cart” button will also be removed from blocks which have products as their content (e.g., featured products).



Bob

Brilliant jobosales

I would never have found that out by myself, it worked perfectly



Thanks





for forum search…



Remove add to cart button from multicolumn product list



See above posts

What if there are only 2 or 3 hooks in a large tpl file, it means that if I make a change to it (create an addon and a hook), I would have to maintain the whole bunch of code?



e.g.: in the buy_now.tpl, there only 3 hooks, but I only want to change 1 line…

[quote name=‘Arius’]What if there are only 2 or 3 hooks in a large tpl file, it means that if I make a change to it (create an addon and a hook), I would have to maintain the whole bunch of code?



e.g.: in the buy_now.tpl, there only 3 hooks, but I only want to change 1 line…[/QUOTE]



Then you only add the file for the “hook name” that you want to modify.

For instance, if there are three hooks in code like the following:


{hook name="foo:bar1"}
some code
{/hook}

{hook name="foo:bar2"}{/hook}

{hook name="foo:bar3"}
some big block of code
{/hook}




If you only wanted to change code inside “foo:bar1” then you would have a file called:

/customer/addons/local/hooks/foo/bar1.override.tpl



The other hooks would would not see an ‘pre’, ‘post’ or ‘override’ file and hence they would not be invoked.



Hope this explains it further.

We’d like to try pull the total order weight on to the checkout page



The weight is used to calculate the shipping cost, so would like to reflect this on the checkout,



Anyone know what hook or tag needed to display?



But there must be a simple way to call the figure thats already been used in the calculation on the checkout?

It is not availabe as a template variable. You could use a php hook to make it available but you need to call the function fn_get_products_weight() with the approrpriate parameters (mostly the user’s cart) and then set a template variable. You would then modify your template to insert a label/value whever you want it.

Quote:

Unzip this on your server or into your ftp environment, change the ownerships and permissions to match your

systems needs and then move the [doc_root]/addons/[COLOR=“red”]local[/COLOR] AND [doc_root]/var/skins_repository/base/customer/addons/[COLOR=“Red”]local[/COLOR]

path into your cart document root. New skins will automatically get the new addon.



For existing skins already installed, copy /var/skins_repository/base/customer/addons/local from the unzipped file to your

[doc_root]/skins/[active_skin]/customer/addons directory.



Next, go to the Administration/addons page and “install” the “Local Configuration” addon. This will enable the cart to pick up your changes





Hi,

I am using v2.0.14, but i cannot find ‘local’ directory. Would you tell me where I can find it?



Thanks,

You don’t need to use tbirnseth’s local addon, you can just use the My Changes addon already built into the cart.



The addon is already there, but you need to create the folder:



skins/your-skin/customer/addons/my_changes



Once you create the folder than you can add your hooks.



Hope that helps,



Brandon

Oh ok, so it is the created folder. Yes, I found the my_changes folder. Thanks, Brandon.

Oh ok, so it is a created folder. Yes, I found the my_changes folder. Thanks, Brandon.