Jump to content

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

Add Dynamic Body Class or ID? Rate Topic   - - - - -

 
  • pablo631
  • Member
  • Members
  • Join Date: 07-Dec 11
  • 35 posts

Posted 17 April 2013 - 08:34 PM #1

Is there any way to add a dynamic class or ID to the body tag? Or any other tag for that matter?

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.
 
  • pablo631
  • Member
  • Members
  • Join Date: 07-Dec 11
  • 35 posts

Posted 18 April 2013 - 09:13 PM #2

I guess I'll answer my own question.

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}

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 18 April 2013 - 09:19 PM #3

Hi @Pablo
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
"ALWAYS DELIVER MORE THAN EXPECTED" - HUNGRYWEB
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
 
  • pablo631
  • Member
  • Members
  • Join Date: 07-Dec 11
  • 35 posts

Posted 19 April 2013 - 04:27 PM #4

Thanks. That doesn't actually add the name of the specific page or even the ID.

This is what I get on a page now.

<body id="pages" class="view page">


But it does work on categories pages now :) So if I use both I can now target pretty much any page I want now with CSS.

Thanks for your help.
 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 19 April 2013 - 06:03 PM #5

I change
2. or even more advanced:
please try now
"ALWAYS DELIVER MORE THAN EXPECTED" - HUNGRYWEB
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 18 June 2013 - 01:10 PM #6

Updated for cd-cart v4.x
<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
"ALWAYS DELIVER MORE THAN EXPECTED" - HUNGRYWEB
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 07 March 2014 - 08:22 AM #7

Works perfect on cs-cart 4.0.x and 4.1.x

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
"ALWAYS DELIVER MORE THAN EXPECTED" - HUNGRYWEB
CS-Cart Development Services, Custom Design & Authorized Reseller
GET A FREE QUOTE
 
  • Zahhar
  • Junior Member
  • Members
  • Join Date: 01-Nov 08
  • 33 posts

Posted 21 December 2014 - 08:18 PM #8

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?

Boutique digital agency, marketing automation: bergdigital.ch

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 22892 posts

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)

 
  • Hungryweb
  • Senior Member
  • Authorized Reseller
  • Join Date: 10-Feb 12
  • 1278 posts

Posted 22 December 2014 - 11:32 AM #10

Right now is a better solution and upgrade ready, using of hook index:content for you please follow:

#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
"ALWAYS DELIVER MORE THAN EXPECTED" - HUNGRYWEB
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


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 22892 posts

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)

Back to Hints & Modifications
  1. CS-Cart Community Forums
  2. > CS-Cart in detail
  3. > Hints & Modifications