1

How can display category in block or page and add custom css for this block.

2

By display category, I am going to assume that you mean display a categories' list of products. I am also going to assume you mean Magento v1, perhaps the latest CE version.

You have half a dozen different methods to do this.

I'll illustrate two different methods using layout updates. You can apply these layout updates through local.xml or in the backend admin section labeled "Layout Update XML"

If you notice there is a block wrapping the product_list in the examples below. The block type is page/html_wrapper. This simply allows for you to set an element class for a wrapper div. When you go to style your custom product list block's CSS, simply prepend the .custom-category-class to the selectors you intend to modify.

OPTION 1

You can add a layout update within your theme's local.xml, if you've already created one.

For example if you want to display category with ID 6 on the 404 no-route page:

<cms_index_noroute>
    <reference name="content">
        <block type="page/html_wrapper" name="special.category.wrapper" as="specialCategoryWrapper">
            <action method="setElementClass"><value>custom-category-class</value></action>
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                <action method="setData"><name>category_id</name><value>6</value></action>
            </block>
        </block>
    </reference>
</cms_index_noroute>

OPTION 2

In the backend, you can go to the page you want to add the category product list to, and apply a layout update xml:

<reference name="content">
    <block type="page/html_wrapper" name="special.category.wrapper" as="specialCategoryWrapper">
        <action method="setElementClass"><value>custom-category-class</value></action>
        <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
            <action method="setData"><name>category_id</name><value>6</value></action>
        </block>
    </block>
</reference>

If you want to provide further details about what you are attempting to accomplish, you will get a better detailed solution set.

Update:

Here is a local.xml that I created that might help explain things:

<?xml version="1.0"?>
<!--
/**
 * Layout Update Example
 *
 * @category    rwd
 * @package     rwd/default
 * @copyright   Copyright (c) 2016 Chris Snedaker.
 * @author      Chris Snedaker
 */
-->
<layout version="0.1.0">

    <!-- This is your layout update handle -->
    <cms_index_noroute>

        <reference name="content">

            <!-- This block has methods to get some html data.  You can set the following values:
                    element_tag_name    (default is div)
                    element_id          (setting this would add id="whatever-value-you-set")
                    element_class       (below we set this one to custom-category-class)
                    other_params        (look it up, not sure offhand)
             -->
            <block type="page/html_wrapper" name="special.category.wrapper" as="specialCategoryWrapper">

                <!-- This is going to be the select class name that you will use in the CSS for customization -->
                <!-- In the example below: it would be .custom-category-class -->
                <action method="setElementClass">
                    <value>custom-category-class</value>
                </action>

                <!-- This is going to create a product list block with the standard catalog/product/list.phtml template file -->
                <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">

                    <!-- Setting the value of the category_id variable will apply this category id -->
                    <!-- The reason this is necessary is because within the category/product_list block file, there is functionality
                         that attempts to get the category_id value ($this->getCategoryId() or $this->getData('category_id'))  I am fairly sure
                         that the default category id is used if no category id is specified.  This would most likely be a category_id of 2.
                     -->
                    <action method="setData">
                        <name>category_id</name>
                        <value>6</value>
                    </action>

                </block>
            </block>
        </reference>
    </cms_index_noroute>

</layout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.