How to Use Cs-Cart Hooks (Part -2)

This blog is the second part of the How to Use Cs-Cart Hooks. In the first part, we learned how to use PHP hooks in the Cs-Cart. In this blog, We will learn about how to use TPL Hooks.

For view processing, Cs-Cart uses the Smart Template engine. You can learn about Smarty in the given link.

TPL Hooks

In Cs-Cart, Smarty template engine is used for view. The extension of smarty template files is ‘.tpl‘. The Hooks used in TPL files are called TPL hook.

TPL Hooks Format

Format for TPL hook in Cscart {hook name=template name:hook name}

We create folder with the name of template name and then create tpl file with file with suffix of type of hook name want to use.

Admin panel: design/backend/templates/addons/[addon id]/hooks/[template name]/[hook name].[pre|post|override].tpl

Storefront area: design/themes/[theme name]/templates/addons/[addon id]/hooks/[template name]/[hook name].[pre|post|override].tpl

Folder structure of hook use in addon is as follows

-- design 
     -- backend/ themes -- selected_theme
          -- addons
               -- addon_id
                    -- hooks
                         -- template name folder
                              -- [hook name].[pre|post|override].tpl file

{hook name="orders:order_total"}
     --inner code--
{/hook}

If you wish to use the pre hook {hook orders:order_total}, create the folder “orders” and the tpl file “order_total.pre.tpl” (template name.type_of_hook.tpl).

Using the Admin panel or Storefront’s TPL hook, we can add a new element or change the current view. The view or data displayed in that existing templatecomponent of the TPL hook can be changed or extra information can be added. TPL hook are used to show additional data in an existing template.
There are three types of TPL hook:-
1. Pre hook
2. Post hook
3. Override Hook

Pre TPL Hook

With the help of the pre hook, we can insert extra data into an existing template before a certain section. Take this as an example.

Lets use item_list_row hook of orders template {hook name=”orders:items_list_row”} on order detail. This section of template contain, listing of the ordered product.

{hook name="orders:items_list_row"}
    {if !$product.extra.parent}
        <tr class="ty-valign-top">
            <td>
                <div class="clearfix">
                    <div class="ty-float-left ty-orders-detail__table-image">
                        {hook name="orders:product_icon"}
                            {if $product.is_accessible}<a href="{"products.view?product_id=`$product.product_id`"|fn_url}">{/if}
                                {include file="common/image.tpl" obj_id=$key images=$product.main_pair image_width=$settings.Thumbnails.product_cart_thumbnail_width image_height=$settings.Thumbnails.product_cart_thumbnail_height}
                            {if $product.is_accessible}</a>{/if}
                        {/hook}
                    </div>

                    <div class="ty-overflow-hidden ty-orders-detail__table-description-wrapper">
                        <div class="ty-ml-s ty-orders-detail__table-description">
                            {if $product.is_accessible}<a href="{"products.view?product_id=`$product.product_id`"|fn_url}">{/if}
                                {$product.product nofilter}
                            {if $product.is_accessible}</a>{/if}
                            {if $product.extra.is_edp == "Y"}
                                <div class="ty-right">
                                    <a href="{"orders.order_downloads?order_id=`$order_info.order_id`"|fn_url}">[{__("download")}]</a>
                                </div>
                            {/if}
                            {if $product.product_code}
                                <div class="ty-orders-detail__table-code">{__("sku")}:&nbsp;{$product.product_code}</div>
                            {/if}
                            {hook name="orders:product_info"}
                                {if $product.product_options}{include file="common/options_info.tpl" product_options=$product.product_options inline_option=true}{/if}
                            {/hook}
                        </div>
                    </div>
                </div>
            </td>
            <td class="ty-right">
                {if $product.extra.exclude_from_calculate}{__("free")}{else}{include file="common/price.tpl" value=$product.original_price}{/if}
            </td>
            <td class="ty-center">&nbsp;{$product.amount}</td>
            {if $order_info.use_discount}
                <td class="ty-right">
                    {if $product.extra.discount|floatval}{include file="common/price.tpl" value=$product.extra.discount}{else}-{/if}
                </td>
            {/if}
            {if $order_info.taxes && $settings.Checkout.tax_calculation != "subtotal"}
                <td class="ty-center">
                    {if $product.tax_value|floatval}{include file="common/price.tpl" value=$product.tax_value}{else}-{/if}
                </td>
            {/if}
            <td class="ty-right">
                    &nbsp;{if $product.extra.exclude_from_calculate}{__("free")}{else}{include file="common/price.tpl" value=$product.display_subtotal}{/if}
                </td>
        </tr>
    {/if}
{/hook}

Because this template comes from Storefront, we must build the pre hook tpl file in the directory “design/themes/[theme name]/templates/addons/[addon id]/hooks/orders/” in order to utilise the pre hook. The tpl file name will be “items_list_row.pre.tpl“.

Write the below code in the hook file:-

{if !$product.extra.parent}
    <tr class="ty-valign-top>
         <td>
              <p>PREHOOK</p>
         </td>
    </tr>
{/if}

Result of PreHook code:-

Post TPL Hook

With the help of the post hook, we can insert extra data into an existing template after a certain section. Take this as an example.

Lets again use item_list_row hook of orders template {hook name=”orders:items_list_row”} on order detail for understand post TPL.

Same as pre hook, we must build the post hook tpl file in the directory “design/themes/[theme name]/templates/addons/[addon id]/hooks/orders/” in order to utilise the post hook. The tpl file name will be “items_list_row.post.tpl“.

Write the below code in the hook file:-

{if !$product.extra.parent}
    <tr class="ty-valign-top>
         <td>
              <p>POSTHOOK</p>
         </td>
    </tr>
{/if}

Result of PostHook code:-

Override TPL Hook

We may totally alter the template’s hook section with the aid of the override tpl hook.

Lets again use item_list_row hook of orders template {hook name=”orders:items_list_row”} on order detail for understand post TPL.

Same as pre hook and post hook, we must build the override hook tpl file in the directory “design/themes/[theme name]/templates/addons/[addon id]/hooks/orders/” in order to utilise the override hook. The tpl file name will be “items_list_row.override.tpl“.

Write the below code in the hook file:-

{if !$product.extra.parent}
    <tr class="ty-valign-top>
         <td>
              <p>OVERRIDE</p>
         </td>
    </tr>
{/if}

Result of Override Hook code:-

Now that you are familiar with all of the Cs-Cart hooks, have fun coding with it.

For Custom theme in cs-cart documentation:- Refer to this link

If you need custom CS-Cart Development services then feel free to reach us and also explore our exclusive range of CS-Cart Addons.

!!Have a Great Day Ahead!!