Mixing number of products per row on a page

[Goz]

I have created a page (very long... but customer requirements...) with a single product per row.

http://www.aquasculpturespa.co.uk/ac...e_For_Men.html

Right at the very end is a set of waxing treatments which I'd like to put into 4 products per row - the same as :

http://www.aquasculpturespa.co.uk/acatalog/Waxing.html


I realise that I can't change the "Column Count For Products" variable midway through a page but can I do something like putting those products into a fragment? Or perhaps having a new "Main Product Area Layout" and having a flag against those waxing products to say "put these in 4 products per row".

All thoughts welcome. I'm struggling with this... perhaps it'll be clearer in the morning!

[TraceyHand]

Couldn't you use 2 ProductList layouts?
One with single product rows and one with 4 products per row.
Both present in the Section layout and using a UDV to define which product list you want each product to appear in, making sure that empty lists don't display, of course.

I'm sure it's possible

[leehack]

Two choices I see.

1. Convert to full css product list and product layouts, and have a layout for full width and one for 1/4 width. Float them all left, select the last 4 products to use the 1/4 width layout.

2. Add a new variable for last row product column count and adjust the product list layout to use that variable as the column count.

[Goz]

Thanks for the answers.

Lee - I chose "Clean CSS Layout" in the vain hope that it would be a CSS based layout....... unless I've been messing around with it!!

It's also the last 12 products (3 rows of 4) so I'm not sure your option 2 would work.

Option 1 seems a bit daunting..... may be a job for another day.


I've started looking at your suggestion Tracey.... soon got my self into coding errors.... thank goodness for snap shots.


I think I'm going to park this. The products are there and there's plenty of other stuff to be doing. I'll come back to it when they're done.

thanks


Andy

[leehack]

If you need more than one row of 4, then full CSS is only option because list layouts work on a top, middle and bottom basis. I'm not sure on the clean css layouts as i've never looked at them, but i can guess with quite a bit of certainty that the list layout settings will be tables not CSS. All you need to do is strip the table from the list layout and have a custom 1/4 width product layout, nowhere near as bad as it sounds.

[NormanRouxel]

Not at an Actinic system so thinking out loud.

Make these 4 products Related Products of your last product. Use a custom Related Products List and Related Product Layout (based on a normal product layout) that includes the add to cart button.

UPDATE

The above works but you also have to use a custom layout for that last product. And in that product layout, delete the usual Related Products list and append the new one right at the end (after the closing </form> code).

Finally, in your custom related products list, in Edit List Layout Settings / Edit Rows and Columns / First/Middle/Last, set Middle Rows to 4.

UPDATE

You could also create a dummy product to hold these related products. And that product uses a new dummy layout that is completely empty except for the Custom Related Products List. This way you don't have to worry about the prior product going out of stock and taking the list with it.

DOWNDATE

Dammit! While the above works, the Add to Cart uses the SID from the parent product section. This requires that you keep these related products in the same page as the other products above (you can hide them by using an empty product layout). As this is pretty much what you wanted anyway, I guess you could live with it. You'd just have to remember not to use any related products that aren't on the same page.

[jont]

If you need more than one row of 4, then full CSS is only option because list layouts work on a top, middle and bottom basis. I'm not sure on the clean css layouts as i've never looked at them, but i can guess with quite a bit of certainty that the list layout settings will be tables not CSS. All you need to do is strip the table from the list layout and have a custom 1/4 width product layout, nowhere near as bad as it sounds.

Yep - even the clean CSS layouts use <tables> to layout the main products / fragments which is fair enough as a nightmare to maintain if not CSS savvy.

I always strip out the table tags from the layout list and then float via CSS. As Lee points out all you need then are 2 layouts one at full width and the others are 1/4 width and everything is peachy.

Jontys Top Tip of the Day : wrap the list in a <div> and after the closing </div> for end of list add in a empty div set with a class to clear:both to ensure any breadcrumbs etc do not get floated alongside your 1/4 width boxes

[Darren B]

If you get this working i would be interested to see it, i tried to create a new layout similar to this using fragments, by have x amount in the 1st row and y amount in the second row.

I created a complete new set of layouts in the hope i could select the type of fragment it would be, either a standard brochure fragment or a special brochure fragment. Also with the ability to specify how many across the page they could be under the site options. But alas i just could not pull it off. The <actinic:variable name="BrochureFragmentList" /> always controlled the custom layouts. I dont doubt someone probably could do it.

[leehack]

The thing to remember Darren is that if you use the standard list layouts and just amend them, you are constrained to a top, middle and bottom design. For example you'd have one frag at the top, however many wide you want in the middle and then one wide again at the bottom. The only way to get out of that limitation is to have full CSS and fixed width layouts. You then choose the layout to use according to the space you want it to fill.

There is nothing you cannot do with these, but with inexperienced clients and it pretty hard to explain at times, I think the list layout table is the better of 2 evils or safest should I say. You can use that fine as long as you accept and work with the top, middle and bottom limits.

[Darren B]

Now thats the bit i get a little stuck with But i cheated and and added the parts to the layouts i wanted and created new inner layouts for the home page and brochure pages and used different ones for each

[TraceyHand]

it'd be nice if this could be really looked at in future versions, actually
to make it easier for 'Jo Bloggs' (rather than just designers or more advanced peeps) to control variable column counts across a whole page rather than being 'fixed' what whatever your ProductColumnCount is set to or the 'top, middle, bottom' setup

Something more intuitive like a grid you can set up, at site and section level, to select the layout desired..with single columns mixed with multiples etc on a page

ahh...a girl can dream!

[jont]

it'd be nice if this could be really looked at in future versions.... ahh...a girl can dream!

This is very simple to implement ... set up everything with CSS and then a simple blockif with a UDV scoped at product level to introduce a specific .class accordingly.

I currently do something similar to test if a product or fragment has a declared image... rather than introduce the default (or inherit) the test uses a different .class to layout the block of code accordingly ... everything works on the fly

[TraceyHand]

This is very simple to implement ... set up everything with CSS and then a simple blockif with a UDV scoped at product level to introduce a specific .class accordingly.

I know.
So no excuse for it not being a feature of a future version then!
It wasn't a 'wish' for me...it was a wish for the software itself.

[jont]

DARREN BEAUMONT!!!!!

How dare you add a <table> onto the homepage of RawAir I spent chuffing hours stripping the <table> from that site and you come along and kill the zen. May your PR rot in shame

[TraceyHand]

hahahahahaha
Darren, hang your head in shame!