X-Cart forums - XC5 Homepage layout

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)

- - XC5 Homepage layout (https://forum.x-cart.com/showthread.php?t=68702)

RichieRich

02-21-2014 08:52 AM

XC5 Homepage layout

How would I go about changing the homepage only to make it full width? (ie. no left nav on the homepage)

In XC4 it could be acheived with some if statement in the smarty template, but I am not so familiar with the XC5 structure.

Any advice would be helpful.

tony_sologubov

02-27-2014 06:39 AM

Re: XC5 Homepage layout

Hi Richie!

You can achieve it by installing this tiny mod, I've just written:
https://dl.dropboxusercontent.com/u/23858825/Tony-HomePageWithoutSidebar-v5_0_0.tar

After you install it, you will have to tweak CSS styles in order to expand the central area to the full width.

RichieRich

02-27-2014 06:58 AM

Re: XC5 Homepage layout

Great I will give it a go now! Thank you

RichieRich

02-27-2014 08:07 AM

Re: XC5 Homepage layout

Stuck with 3-grid table products. Is there a setting for the amount of columns or an adjustment?

RichieRich

02-28-2014 02:16 PM

Re: XC5 Homepage layout

The css I can adjust, but the way you edit in the css in look and feel section, means that it will appear the same for the whole website. Therefore the categories I can make 100% width, but then the subcategories will not float to the left with 100% width.

tony_sologubov

03-06-2014 07:28 PM

Re: XC5 Homepage layout

Sorry, but there is no setting of defining how many columns should be displayed, but this appearance option can be altered by the mod.

As for CSS rules for the home page only, you can alter the classes/XLite/Module/Tony/HomePageWithoutSidebar/View/Content.php viewer and define there the following method:

Quote:

public function getJSFiles()
{
$result = parent::getJSFiles();

if ('main' == $this->getTarget()) {
$result[] = 'modules/Tony/HomePageWithoutSidebar/css/css.css';
}

return $result;
}

and X-Cart 5 will load this CSS file only for homepage. Of course, in this case, you will need to create the skins/default/en/modules/Tony/HomePageWithoutSidebar/css/css.css file with needed rules.

btechbilal

03-07-2014 02:59 AM

Re: XC5 Homepage layout

hi thanks tony,
it's really good , may i know what about if i want to show some pages links instead of categories on home main center area?
i want to show some special pages Links on home main center area instead of categories
thanks

RichieRich

03-07-2014 04:35 AM

Re: XC5 Homepage layout

I think you could do that by editing the content in Catalog > frontpage. You could hide the categories with some css. Although its not the ideal solution, hopefully there will be a setting soon to hide categories manually.

RichieRich

03-07-2014 06:26 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by tony_sologubov

As for CSS rules for the home page only, you can alter the classes/XLite/Module/Tony/HomePageWithoutSidebar/View/Content.php viewer and define there the following method:

public function getJSFiles()
{
$result = parent::getJSFiles();

if ('main' == $this->getTarget()) {
$result[] = 'modules/Tony/HomePageWithoutSidebar/css/css.css';
}

return $result;
}

I could not get it to work after updating the cahce the css did not appear in the homepage, do you have the full Content.php file please.

tony_sologubov

03-11-2014 02:33 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by btechbilal

Yes, RichieRich is right, you can achieve it by editing the Front page in admin area.

tony_sologubov

03-11-2014 02:41 AM

Re: XC5 Homepage layout

Quote:

I could not get it to work after updating the cahce the css did not appear in the homepage, do you have the full Content.php file please.

Yes, sure. It will look like this:

Code:

<?php



namespace XLite\Module\Tony\HomePageWithoutSidebar\View;



class Content extends \XLite\View\Content implements \XLite\Base\IDecorator

{

        protected function isSidebarFirstVisible()

        {

                if ('main' == $this->getTarget()) {

                        $return = false;

                } else {

                        $return = parent::isSidebarFirstVisible();

                }



                return $return;

        }



        public function getJSFiles()

        {

                $result = parent::getJSFiles();



                if ('main' == $this->getTarget()) {

                        $result[] = 'modules/Tony/HomePageWithoutSidebar/css/css.css';

                }



                return $result;

        } 



}

Please do not forget to add the following CSS file:
skins/default/en/modules/Tony/HomePageWithoutSidebar/css/css.css

RichieRich

03-11-2014 09:22 AM

Re: XC5 Homepage layout

yes thats how i had the file, the sidebar hides but the css does not show even in the html

RichieRich

03-11-2014 12:42 PM

Re: XC5 Homepage layout

Is some javascript in the sidebar? because when this module is active, the homepage cart drop-down and homepage quick-look popup do not work

mworsnop

03-12-2014 09:31 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by tony_sologubov

Yes, RichieRich is right, you can achieve it by editing the Front page in admin area.

I am not able to make links work on the front page editor. The icon to enter a link is disabled. If I enter the code manually it does not work.

tony_sologubov

03-12-2014 12:41 PM

Re: XC5 Homepage layout

Quote:

Originally Posted by RichieRich

yes thats how i had the file, the sidebar hides but the css does not show even in the html

Do you have your dev installation publicly available? It would be interesting to check your page's HTML code.

Quote:

Is some javascript in the sidebar? because when this module is active, the homepage cart drop-down and homepage quick-look popup do not work

That's odd, because my local installation works just fine with this mod enabled.

tony_sologubov

03-12-2014 12:43 PM

Re: XC5 Homepage layout

Quote:

Originally Posted by mworsnop

I am not able to make links work on the front page editor. The icon to enter a link is disabled. If I enter the code manually it does not work.

You should select some text and then the link icon will be highlighted. Please, try this out.

mworsnop

03-12-2014 01:22 PM

Re: XC5 Homepage layout

OK That works, thank you!

RichieRich

03-14-2014 10:38 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by tony_sologubov

That's odd, because my local installation works just fine with this mod enabled.

Yes correct was my error I must have changed something, re-installed and it worked again

RichieRich

03-20-2014 05:43 AM

Re: XC5 Homepage layout

On the product page, related products will display in 5-columns as there is no left-nav.

How can I acheive the same thing in this case on the homepage where I have the left-nav disabled.

smartaleck

05-06-2014 06:54 PM

Re: XC5 Homepage layout

I'm using CSS to remove my side categories, and installed the module to have a look as well. I'll need to try some of the suggested changes so that it applies to the entire site instead of just the front page, but I'm wondering how to change the number of grid columns/products per row? I know Tony said that this can be changed in his module, but the code to do this is eluding me at the moment since this is my first attempt at some X-Cart 5 mods after switching over from Interspire Shopping Cart.

Can anyone point me in the right direction?

tony_sologubov

05-07-2014 04:58 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by RichieRich

On the product page, related products will display in 5-columns as there is no left-nav.

How can I acheive the same thing in this case on the homepage where I have the left-nav disabled.

In this case, you need to adjust the module that disables the left-nav and implement 5-products-in-a-row design for product table. Registered this improvement in our TO-DO list.

If you want, I can help you with designing this simple mod.

RichieRich

05-07-2014 05:04 AM

Re: XC5 Homepage layout

I would like this also please if you can help.

tony_sologubov

05-07-2014 05:08 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by smartaleck

OK, since there are two of you, I believe, I need to show some code examples % ) Let's clarify a bit, shall I give an example of the mod that simply displays 5 products in a row on home page instead of 3?

If so, I will schedule some time for this task and will publish the mod, once it is ready.

smartaleck

05-07-2014 05:46 PM

Re: XC5 Homepage layout

Hi Tony,

Thanks for the response on this one! I'm looking to do 4 items / columns but it should be easy enough to adapt it if you do 5, etc. I looked at your current module and it's quite simple! Almost too simple because I'm wondering how everything works with so little code. It appears that there is a function for turning on / off the categories or something? Then it looks like you are checking if the page is the main/home page and telling the value to be 'false.'

I started with my own basic layout mod by following some instructions I found in the X-Cart 5 guide and am making some sense of the way things work. Are there anymore tutorials and/or guides that I should be referencing if I want to create some mods? I'll probably make a new thread to explain what I want to do and get some opinions from other users who may also be interested.

Thanks!

tony_sologubov

05-08-2014 03:42 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by smartaleck

Yes, X-Cart 5 code is quite terse and little pieces of code can force quite big changes.

http://kb.x-cart.com is the only source of docs we have. However, now I have a big goal to improve dev docs for X-Cart 5 and I am focusing on it right now, so the docs will be expanding in the near future. You can post suggestions about what you would like to see there, so I could better adjust my plans.

Also, I will be giving updates on forums about work I have done.

Anyway, I scheduled the mod about how to change number of products on home page and I will update this thread once I am done with it.

Tony.

RichieRich

05-23-2014 08:24 AM

Re: XC5 Homepage layout

is this compatible with 5.1x?

tony_sologubov

05-26-2014 04:05 AM

Re: XC5 Homepage layout

Since 5.1 is a new branch, all 3rd party modules must be updated in order to be working.

The update process is quite simple though. You should change the Main.php script of your module and make sure that the getMajorVersion() method returns 5.1 instead of 5.0. After that your module will start working with 5.1.x core.

vimala1965@hotmail.com

06-25-2014 08:51 AM

Re: XC5 Homepage layout

Hi Tony

I too need to change the number of products in categories page to 5. It would be very helpful, if you could complete it.

Thanks
Vimala

tony_sologubov

07-01-2014 03:30 AM

Re: XC5 Homepage layout

Guys! I am going to do this task in 2-3 weeks and then I will post it here.

Tony.

dagdag

10-02-2014 10:10 AM

Re: XC5 Homepage layout

Quote:

Originally Posted by tony_sologubov

Guys! I am going to do this task in 2-3 weeks and then I will post it here.Tony.

Tony, please publish new version of the module for the 5.1 core

very very wait, спасибо заранее! :oops:

tony_sologubov

10-14-2014 05:41 AM

Re: XC5 Homepage layout

Hi guys!

Sorry, it took me so long to publish the code.

This change turned to be really easy one and in order to show 4 products on product lists, you need to specify the following CSS code in the System settings > Look and feel > Custom CSS section in you admin area:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 25%;

}



ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{

clear: none;

}

If you need to show 5 products then you need to replace this piece of code:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 25%;

}

with the next one:

Code:

ul.products-grid.grid-list li.product-cell.box-product {

width: 20%;

}

Obviously, you are just changing the percentage that must belong to the product's box width.

Other lines:

Code:

ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{

clear: none;

}



ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{

clear: none;

}

are needed for disabling hard-coded rules that each 4th, 7th and so on product must start with new line.

If there is any questions, please let me know.

Tony.

RichieRich

10-14-2014 06:34 AM

Re: XC5 Homepage layout

This css is best if you specify for a larger screen size only. Smaller screen sizes will cause a problem in the display if you have the side column or in other screen sizes.

To fix the display issues, you can specify only if the screen size is the largest wrapping the css with 4 columns with ;

Code:

@media only screen and  (min-width: 1200px) {



}

All times are GMT -8. The time now is 01:40 PM.