3

How to target CSS for different product types

 2 years ago
source link: https://markshust.com/2012/03/12/how-target-css-different-product-types/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to target CSS for different product types

March 12, 2012   ·   2 min read  ·   Edit on GitHub

To normally target a certain CSS specificity of a page in Magento, you would reference a class in the <body> tag (.cms-index-index, .catalog-product-view, etc.). However, there isn’t a way to target the specificity of a certain product type.

There is almost always more than one way to do something in Magento. One option would be to create a custom extension, which taps into Magento’s process of creating a custom class name and outputting it onto the <body> html’s class attribute. This option, however, would involve an experienced Magento programmer to create this extension.

Another option is to target the product type layout handle, and add a separate CSS file for that product type. To do this, add a PRODUCT_TYPE_handle to your layout file:

app/design/frontend/yourpackage/default/layout/local.xml
<?xml version="1.0"?>
<layout version="0.1.0">
    ...
    <PRODUCT_TYPE_handle>
        <reference name="head">
            <action method="addCss"><stylesheet>css/PRODUCT_TYPE_handle.css</stylesheet></action>        </reference>
    </PRODUCT_TYPE_handle>
    ...
</layout>

Then, create a file at skin/frontend/yourpackage/default/css/PRODUCT_TYPE_handle.css, and add in your appropriate CSS which you want specific to this product type. Replace PRODUCTTYPEhandle with the product type you would like to override.

Since this update involves updating XML, be sure to clear the cache in order to rebuild the XML layer and see your changes.

Magento Product Types and Layout Handles

Product Type: Layout Handle

  • Simple: PRODUCT_TYPE_simple
  • Configurable: PRODUCT_TYPE_configurable
  • Grouped: PRODUCT_TYPE_grouped
  • Virtual: PRODUCT_TYPE_virtual
  • Downloadable: PRODUCT_TYPE_downloadable
  • Bundle: PRODUCT_TYPE_bundle

Are you a Magento geek?

Signup for my newsletter and I'll let you know about Magento-related blogs, courses & more.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK