Carousel - full width

[rookers]

Hi
I really like the new v14 carousel feature, but when I have 3 columns for products the carousel is treated like a product and is not full width.

I would really like the carousel full width, with the three columns of products below.

I get this:
CARO PROD PROD
PROD PROD PROD
PROD PROD PROD

I want this:
- -- -C A R O U S E L -- -
PROD PROD PROD
PROD PROD PROD
PROD PROD PROD

Any ideas ?

[David Clarke]

I get the same thing with any fragment. It get treated just like a product.

I would also like to have the same carousel on every page if possible and do an image carousel as part of a product.

I als cannto do an image carousel. Whenever I select image Sellerdeck wants me to link to something like a section or a product.

[rookers]

I can help with the link - just put a # in the link field - it will take it but just create a null link.

[malbro]

Hi

I want this:
- -- -C A R O U S E L -- -
PROD PROD PROD
PROD PROD PROD
PROD PROD PROD

Any ideas ?

This is possible by modifiying the layout 'Responsive Product Layout' to include the first row as a single product on its own. This product will also need to be in a div with a slightly different css to include 'flex: 0 0 96%' so it fills the screen, this is not quite right and needs some extra work to handle the different screen sizes but does produce the effect required..

[rookers]

Hi many thanks for that. I'm looking at the code but I'm not really too sure what to change.

[malbro]

Hi many thanks for that. I'm looking at the code but I'm not really too sure what to change.

You need to open the orange line to get the list code and then switch on the top line of the three by setting the value to 1, copy the code from the middle line to the first set of boxes that are now enabled for the top line, to produce a single product on the first line and then three on each row afterwards. Make sure the carousel is the first in the list.

[rookers]

Hi thanks for that.

I don't have "'Responsive Product Layout' but I do have "'Responsive Product List". I made the change as described to that, but it did not change anything that I can see.

[peblaco]

Fix for Carousel full width

Here is a fix to get Carousel full width.

Solution 1: Section Pages - Fragment Visibility tab
Go to fragment with the Carousel, click Visibility tab, change "Show in Split and Filtered Pages" to "True". If you use pagination or filtering the carousel will stay at the top of the paginated pages in the section. There is a bug SD-5359 for more than 1 column it puts in an empty border, see a fix given by SellerDeck Support below.

Solution 2: Brochure pages - Custom Fragment List
You will need to have the Carousel as the first fragment on the page. Go to Design menu > Library > Layouts tab > Fragment Lists > right click "Responsive Brochure Fragment List" and make a copy with a different name. If you want to use this on a product page instead go to the Layouts tab > Products Lists > and copy "Responsive Product List". Double click your copied list to open it, click the orange underlined link "Click here to edit list layout settings", click "Edit Rows and Columns", "First/Middle/Last" tab, under column heading "No of Items" for "First Row" click in the field and use the drop down arrow to set it to 1, under column heading "First Item" click in the "Before" field and add <div style="width:100%;"> then click in the "After" field to the right and add </div> then click in the "After Row" to the right and add <div style="clear:both;"></div> then Apply > OK, close the list window, click Close on the Design Library window. Go to your Brochure Page or Product page where your Carousel fragment is, click the Layout tab, either under Fragment > Brochure Fragment List Layout, or under Product > Product List Layout, click the layout and change the setting to the copied layout then Apply changes.

Thanks to Dean at SellerDeck Support for assistance.

[feemish]

Hi,

I am having trouble with carousel not being responsive;

http://community.sellerdeck.com/showthread.php?t=56116

I notice the above fix, (which sounds exactly what I need) is for brochure pages or product pages..
how can I do this on the top level section page?

[feemish]

thanks for your advice on the other thread.

I have used the above fix to make a fragment span over a product column count of 2 and it works very nicely.

( I am using it for a standard fragment not a carousel )

However, there is one small issue... the fragment correctly spans the page, however the page is paginated and on the second page the top product now spans two columns. Which is not quite how I'd like it.

I suppose I could add another fragment every 12 products but ideally I only want the fragment once at the start of the first paginated page..

[peblaco]

Further fixes for fragment on the first paginated page only and bug fix for empty borders.

Fragment on first paginated page only
Use solution 1. Then create a custom section fragment list at Design menu > Library > Product Lists > Responsive Section Fragment List > right click, copy, rename it, open copied list, click on "Click here to edit list layout settings" > Edit Rows and Columns > delete all the code in the Middle Rows to deal with the bug mentioned above. Click OK. Still in the copied list, below "Click here to edit list layout settings", after the first blockif add a new row and insert:
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22SectionPaginationCurrentPageIndex%22%20%2f%3e%20%3d%3d%201%29" ><div class="product-details">
Before the last /block add a new row and insert:
</div></actinic:block>
OK > Close. Go to the Content Tree > Section that contains the fragment > Layout tab > Section Fragment List Layout > change to the new list, Apply Changes. Note: The fragment won't show in the SellerDeck preview because paginated pages only work on the live website.

Fragment on all paginated pages - and bug fix for empty borders
If you want to keep the fragment on all paginated pages not just the first paginated page and just fix the bug creating empty fragment borders, then follow the instructions above but for the code changes don't add the custom block, after the first blockif only add <div class="product-details"> and before the last /block only add </div>

Bug fix for empty borders
Bug fix provided by SellerDeck Support: "Open the layout Responsive CSS located in Design | library | Layouts | under Theme Stylesheets Look for
.attribute-list label {float:left; clear:both; width:100%; margin:0 0.5em;}
and in a line above that add
.product-details:empty {display:none;}
Apply and ok the changes."

[feemish]

Spot on as usual Louise!

[graphicz]

Now on v16 and :empty if not working as SD displays a space in the empty divs:

<div class="product-details"> </div>

Any ideas???

[graphicz]

This works!

Copy responsive product list twice and rename one as fragments and one as products. Remove the products from the Fragment list and the fragments from the Product list.

Add this to the css

.product-details:empty {
  display: none!Important;
  width:0;
  margin:0;
  padding:0;
  border:0;
}

and add a little javascript before the layouts:

<!--<actinic:variable name="ProductList" />-->
<script>
$("div.product-details").filter(function(){   
    return $(this).text().trim() == ""
}).remove();
</script>
<actinic:variable name="ProductList" value="Responsive Product List Fragments" />
<actinic:variable name="ProductList" value="Responsive Product List Products" />

NB Because this uses javascript it only works on the live uploaded site, offline preview will still show the gaps.