|

Add Dynamic Body Class or ID?
Posted 17 April 2013 - 08:34 PM #1
I find this cart incredibly limiting in the fact that you can't use different page templates and the cart doesn't assign dynamic classes or ID to anything aside from products.
Posted 18 April 2013 - 09:13 PM #2
This isn't exactly what I wanted but it's enough to do the trick for now. This will add a class to the html element based on the first word of the page name. So if your page is called "about-our-company.html" It will add "about" as a class to the html element.
Add this to your head.
{literal} <script type="text/javascript"> var loc = window.location.pathname.match(/^\/?(\w+)\b/); // document.documentElement is the html element, this adds the class if(loc) document.documentElement.className += " " + loc[1].toLowerCase(); </script> {/literal}
Posted 18 April 2013 - 09:19 PM #3
You can edit skins/[SKIN_NAME]/customer/index.tpl
replace:
<body>
1. with:
<body id="{$controller}" class="{$mode}">ex: <body id="categories" class="view">
2. or even more advanced:
<body id="{$controller}" class="{$mode}{if $controller=='categories'} category{$smarty.request.category_id}{/if}{if $controller=='pages'} page{$smarty.request.page_id}{/if}">ex: <body id="categories" class="view category12">
ex: <body id="pages" class="view page3">
PS: in case of update you need to edit again
I hope that helps,
---
Valentin
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
Posted 19 April 2013 - 04:27 PM #4
This is what I get on a page now.
<body id="pages" class="view page">
But it does work on categories pages now

Thanks for your help.
Posted 19 April 2013 - 06:03 PM #5
2. or even more advanced:
please try now
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
Posted 18 June 2013 - 01:10 PM #6
<body id="{$runtime.controller}" class="{$runtime.mode}{if $runtime.controller=='categories'} category{$smarty.request.category_id}{/if}{if $runtime.controller=='pages'} page{$smarty.request.page_id}{/if}">
[ Tested on CS-Cart: version 4.0.1 ULTIMATE (rc) ]
I hope that helps,
---
Valentin
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
Posted 07 March 2014 - 08:22 AM #7
After adding code you can add css styles to any page from the website

#homepage
body#index.index{}#all categories
body#categories{}#specific category (ex:for category_id=1)
body#categories.category1{}#all pages
body#pages{}#specific page(ex:for page_id=1)
body#pages.page1{}
I hope that helps,
---
Valentin
part of hungryweb.net
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
Posted 21 December 2014 - 08:18 PM #8
Anybody from CS-Cart team would like to lobby it to include into next version?
Boutique digital agency, marketing automation: bergdigital.ch
Posted 22 December 2014 - 09:40 AM #9
Vali, thanks a lot! I wonder why this little but very useful improvement is not yet suggested as default markup.
Anybody from CS-Cart team would like to lobby it to include into next version?
It will be better if you post this to the bug tracker as a feature request. I am afraid they do not monitor all themes on this forum
GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart USD 1210 Multi-Vendor USD 1250 Multi-Vendor PLUS USD 3100 (2775)
CS-Cart Ultimate USD 4025 CS-Cart + YOUPI USD 1459 Multi-Vendor Ultimate USD 7500 (6000)
Posted 22 December 2014 - 11:32 AM #10
#add file
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.pre.tpl
#with content
<div id="{$runtime.controller}" class="{$runtime.mode}{if $runtime.controller=='categories'} category{$smarty.request.category_id}{/if}{if $runtime.controller=='pages'} page{$smarty.request.page_id}{/if}{if $runtime.controller=='products'} product{$smarty.request.product_id}{/if}">
#add file
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.post.tpl
#with content
<!--{$runtime.controller}--></div>
The only difference now is that you don't need to use body selector, the new css selectors are:
#homepage
div#index.index{}#all categories
div#categories{}#specific category by category_id
div#categories.category1{}#all products
div#products{}#specific products by product_id
div#products.product1{}#all pages
div#pages{}#specific page by page_id
div#pages.page1{}
PS: You will need to have My Changes add-on active.
I hope that helps,
---
Valentin
part of hungryweb.net
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
Posted 23 April 2019 - 08:57 AM #11
Is it also possible to show the category class when you are on a product page?
Example
Category: Books > Aladin
Body class on product page = Aladin
Posted 23 April 2019 - 01:17 PM #12
Use the following code
<div class="{if $runtime.controller == 'products' && $runtime.mode == 'view' && $product}{$product.main_category|lower}{/if}"></div>
GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart USD 1210 Multi-Vendor USD 1250 Multi-Vendor PLUS USD 3100 (2775)
CS-Cart Ultimate USD 4025 CS-Cart + YOUPI USD 1459 Multi-Vendor Ultimate USD 7500 (6000)