0

I have created a custom template layout and it works fine, My page is named 2-col-custom.phtml I have written the following code in my layout page but it won't load.

 <page_two_col_custom>
         <reference name="head">
            <action method="addItem"><type>skin_css</type><stylesheet>css/col-custom.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><stylesheet>css/test.css</stylesheet></action>
        </reference>
    </page_two_col_custom>

How can I make catalog_category_default load a particular css with a custom template 2-col-custom.phtml and a copy of list.phtml with different layout ?

  • for loading css try reference name ="head" – Shrikant Sep 19 '16 at 11:13
  • @Shrikant yes, i updated but still not working. – localhost Sep 19 '16 at 11:14
  • You want to use diffrent phtml for category page? – Murtuza Zabuawala Sep 21 '16 at 15:49
  • @MurtuzaZabuawala yes and a different css, so i can style the list.phtml li in that css – localhost Sep 21 '16 at 15:57
  • @Nofel have you checked my answer? – Murtuza Zabuawala Sep 22 '16 at 3:30
2
+25

I'm not entirely sure what you're trying to do but I'm gonna try to enlight you as much as I can.

Step 1: Declaring a new page layout

To declare a new page layout like 1-column, 2columns-left etc... you need to create a small module:

app/etc/modules/Vendor_Module.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Vendor_Module>
      <active>true</active>
      <codePool>local</codePool>
    </Vendor_Module>
  </modules>
</config>

app/code/local/Vendor/Module/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Vendor_Module>
            <version>0.0.1</version>
        </Vendor_Module>
    </modules>
    <global>
        <page>
            <layouts>
                <page_two_col_custom module="page" translate="label">
                    <label>Page Two Columns Custom</label>
                    <template>vendor/module/2-col-custom.phtml</template>
                    <layout_handle>page_two_col_custom</layout_handle>
                </page_two_col_custom >
            </layouts>
        </page>
    </global>
</config>

Then you can create app/design/frontend/<your_package>/<your_theme>/template/vendor/module/2-col-custom.phtml

According to what you pasted I assume that's what you did

Step 2: Changing the category page template

If you want to assign your new page layout to your category page you can add the following to your app/design/frontend/<your_package>/<your_theme>/layout/local.xml :

<catalog_category_default>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</catalog_category_default>

Step 3: Adding CSS to the category page

To add some CSS to the category page you can update the code I just pasted with the following:

<catalog_category_default>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</catalog_category_default>

You need to ensure that the CSS files are located in the following locations:

  • skin/frontend/<your_package>/<your_theme>/css/custom.css
  • skin/frontend/<your_package>/<your_theme>/css/test.css

Step 4: Create and use a page layout handle

If you want to create a layout handle for your new page layout and assign it to the catalog category page you can add the following to your local.xml:

<page_two_col_custom>
     <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</page_two_col_custom>

Then do:

<catalog_category_default>
    <update handle="page_two_col_custom" />
</catalog_category_default>

Please note that the result you will get from this will be exactly the same as the procedure explained in Adding CSS to the category page .

Step 5: Changing the template of product list

If you want to change the template using your custom handle (previous step) you can update the handle like this:

<page_two_col_custom>
     <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
    <reference name="product_list">
        <action method="setTemplate">
            <template>path/to/list/template.phtml</template>
        </action>
    </reference>
</page_two_col_custom>

You need to ensure that your new list template is located under app/design/frontend/<your_package>/<your_theme>/template/path/to/list/template.phtml

Side note

The code I provided only works for non layered category. If you wanted to do it for layered category instead, you'll have to replace catalog_category_default with catalog_category_layered. If you want to do it for both, just create the node twice.

| improve this answer | |
  • @Rapael Great explanation, my question would be now, will declaring this new layout and new list.phtml , will it affect other` category_category_*` pages? As per my need is change li for new template, so i can load my custom styles i.e 2 products each page. If that template is not selected, category_catalog_* should load normally. – localhost Sep 22 '16 at 9:45
  • @Nofel I don't understand what you're saying. Do you want that to work only for one category that's what you say ? – Raphael at Digital Pianism Sep 22 '16 at 9:55
  • I want that template(custom-list.phtml) and that css (my-custom.css) to kick in only when that layout is selected from admin dropdown. I think your code is good. – localhost Sep 22 '16 at 10:01
  • @Nofel yes in that case don't add the layout handle to catalog_category_default in Step 4 – Raphael at Digital Pianism Sep 22 '16 at 10:03
  • with <template> what if it based under template\page\template.phtml How can we use that path – localhost Sep 22 '16 at 11:20
1

Check if BLOCK_HTML cache enabled.

There is a cache problem when you update a certain page with custom layout.

Magento caches the layout from other pages and loses your update.

If this is your problem you have to set an action with empty cache lifetime.

| improve this answer | |
0

Which version of Magento do you use? If you check 'View page source' - is the link to the css there? Is the path correct? Did you create col-custom.css file?

Check the syntax - it should be like that:

<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
| improve this answer | |
  • no, i don't see any line code in source. – localhost Sep 19 '16 at 12:09
0

You need to define that custom layout in page.xml Please check below code:

<page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
            <action method="setLayoutCode"><name>one_column</name></action>
        </reference>
    </page_one_column>

Please let me knw still its not working from your end.

| improve this answer | |
  • it didn't. I have updated my question code also. – localhost Sep 20 '16 at 10:25
  • did you check that your custom layout working via template layout .phtml file? – Nits Sep 20 '16 at 10:58
  • @Nita . yes it does and so does css if i take it out the <page> block but i don't need it on every page. – localhost Sep 20 '16 at 11:00
  • Its Nits not nita, Did you check that css display in page view source? and plz try below code: <action method="addCss”><type>skin_css</type><file>css/javcustom.css</file></action> – Nits Sep 20 '16 at 13:36
  • i updated my question with new code. Have a look. Your last comment code work but not under the handles of my new layout. – localhost Sep 21 '16 at 8:43
0

copy default list.phtml file and create new phtml with new name and youy path and follow below steps.

As far as I know what you have to do is following, put below code in your local.xml or any custom layout xml file. try and let me know

<catalog_category_default>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><stylesheet>css/col-custom.css</stylesheet></action>
        <action method="addItem"><type>skin_css</type><stylesheet>css/test.css</stylesheet></action>
    </reference>
    <reference name="catalog/product_list">
        <action method="setTemplate"><template>yourTemplatePath/yourTemplateList.phtml</template></action>
    </reference>
</catalog_category_default>
| improve this answer | |

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.