multi column product list with a full width fragment

[mark-r]

Hi,
I have a question about fragments when using multi column product lists.

In one of my sections, I have set the "Column count for products" to 4. This works fine, my products appear in a 4 column table as expected. However, if I add a fragment to the section, the fragment simply replaces one of the products in my 4 column table.

Is it possible to have a multiple column product list, but to have fragments on the page occupying the full width. If the fragment is the first thing in a section, it should appear above the products. Ideally, if the fragment is in the middle of the product list, it should break the table (leaving blank cells if need be), show the fragment full width, and then begin a new table.

Thanks

Mark

[leehack]

If you want a single fragment at either the top or the bottom, it is relatively easy. If you want to mix and match throughtout the page, you will need to switch to a full CSS layout, where layouts are created with specified widths which work within your area. For instance a 4 wide layout would be 1/4 of your overall width, a 2 wide layout would be 1/2 a full width layout would be the full width. The CSS is then told to just float all the items left (in the order you create them) and their size dictates where they go in an automatic kind of way.

Important thing to remember is that actinic treats fragments and products as the same.

[mark-r]

If you want a single fragment at either the top or the bottom, it is relatively easy.

Hmm, having fragments throughout the page is perhaps a bit advanced for now.

Maybe I'm being a bit thick, but I can't even get a single fragment at the top to work. What should I be doing?

Thanks

Mark

[NormanRouxel]

Here's another route. Create 3 Section level variables. TopTitle, TopDescription, TopImage of type text, text, filename. Allow all to be empty. Set Place of Setting to be Section.

Now in your Section List layout / List Layout Settings / Overall Design / Start Of List, add some code to display these variables as required. Put a Condition around them so that nothing is displayed if all 3 are empty.

There's help in the Starter Guide, Advanced Guide, etc regarding creating and using user variables and conditions.

Now your Section Details pane will have fields available for you to enter these values.

[leehack]

You won't get it to work as standard, you have to adjust the coding in the list layout, it's just an easier task than completely recoding to a full CSS layout. You need to understand how a table is laid out codewise and thus how a list layout works. In actinic you can control the top and bottom row of a table and have a global setting for all in between. This is where the 'easier' top and bottom changes are possible, because you set the rows in either the top or bottom sell to 'colspan', so that means whetever you set as the column count, the top row will always join them all up together creating one big area.

pseudo code would be:

<td colspan="product column count variable"></td>

That would then adjust automatically to whatever you set as the product column count, so for example if you changed it to 3, the top row would still span the full width because it used the column count variable to ascertain how many columns to span.