Different background color for each category

pgailinas · #1 07-20-2014, 05:21 PM

I would like to have a different background color for each category page. I need a bit of help though. I thought about two different methods as follows:

Method 1 -- Modify the file classes/XLite/View/controlled.php (function defineBodyClasses) to place a new class into the body declaration (such as cat_12_bg and cat_15_bg) and then define those classes to have the appropriate background colors in the custom css section.

Method 2 -- Create a substitute copy of skins/default/en/main.tpl and place it into skins/custom_skin/default/en/main.tpl. Again, here, the classes would be specified in a <div> and defined in the custom css as previosly described.

I think Method 2 is preferred. In either case, I need to have code to recognize the current category. Method 1 requires php code while Method 2 requires Smarty code.

Now, the problem I have is I don't know how to find what global variable or method to call to identify the category. I have seen some similar code for this in the forums but it appears to apply to versions of X-Cart prior to version 5.

So, anyone got some guidance for this please? Thanks!

tony_sologubov · #2 07-21-2014, 05:03 AM

Hi!

Thank you for the question. I will dedicate this week to cover certain design changes in our KB and I will explain how to do this change there.

I will get you posted once I am done!

Tony.

pgailinas · #3 07-21-2014, 06:46 AM

Tony, thank you for the reply. I have set up a demo for my client and they are upset that I can't show categories with different colors. Any quick info you can provide will be much appreciated.

tony_sologubov · #4 07-23-2014, 06:23 AM

Can you wait couple of days? Once we are done with 5.1.4 release, I will be able to give you samples (by Friday).

pgailinas · #5 07-23-2014, 07:45 AM

Outstanding! I look forward to Friday.
Thank you.

tony_sologubov · #6 07-29-2014, 06:28 AM

Hi pgailinas!

Sorry for not being able to send the code during Friday. Had personal issues and did not work.
I will prepare code today and will send it to forums tomorrow.

Tony.

pgailinas · #7 07-29-2014, 06:45 AM

I appreciate any help you can provide.
Thanks Tony!

tony_sologubov · #8 07-30-2014, 05:10 AM

Hi!

So, here is what you need to do:
1) Create an empty module as described here: http://kb.x-cart.com/display/XDD/How+to+create+a+module

Don't forget to adjust namespace according to your developer and module ID!

2) Put the Controller/Category.php file inside your module with the following content:

PHP Code:


		
			
<?php

namespace XLite\Module\XC\CustomSkin\Controller;

class Category extends \XLite\Controller\Customer\Category implements \XLite\Base\IDecorator
{
    public function defineBodyClasses(array $classes) {
        $classes = parent::defineBodyClasses($classes);

        if ($this->getCategory()->getId() == 2) {
            $classes[] = 'category-number-2';
        }

        return $classes;
    }
}

Again, do not forget to change the namespace!

This code will add category-number-2 class to body element if category ID is 2.

3) Add CSS file that will apply your own style to the <body> elements according to your preference. It is described here: http://kb.x-cart.com/display/XDD/Adding+new+CSS+file

Please, let me know this helps.

Tony.

pgailinas · #9 07-30-2014, 12:43 PM

Thanks Tony!

Created the module, installed, enabled, all went well.

Created the Category.php file with the conditionals for the different categories (used a switch statement for that). Also created a Product.php file to show the same background for the Product Details page.

I set the background values I wanted to use for each category in the Custom CSS area because (for some undiscovered reason) I could not get the last.css file to work for me.

Thanks again!

tony_sologubov · #10 08-01-2014, 02:04 AM

Anyway, happy to hear the module works as you need now.

To rectify the problem with CSS file, could you please pack your module (with the non-working last.css file) and then send it to me?

You should set up developer_mode option as On in the etc/config.php file and then you will see 'Pack it' link near each module in the 'Installed modules' section in admin area.