One Fragment Column in Swift Section Page

Call 01323 872296


One Fragment Column in Swift Section Page

Sellerdeck Swift is an excellent design template. One drawback is that the number of columns for product summaries is fixed, you can no longer specify it. This means that with four columns across of product summaries if you have a single fragment, perhaps an introductory or explanatory fragment at the top of the section it will be squashed into the first quarter column when you would like it to be displayed across the top.

Here is how to fix that:

In Design Library go to Product Lists and right click and copy ‘Responsive Product List’ twice.

Rename one ‘Responsive Product List Products’ and one ‘Responsive Product List Fragments’

Open each in turn, in the product one remove all the fragment stuff and in the fragment one remove all the product stuff:

In the Fragment one open ‘Click Here to Edit List Layout Settings’,

Click the ‘Edit Rows and Columns’ tab

Under No Of Items, Middle rows delete ‘dynamic’ and replace it with 1.

Click Overal Design, change <div class=”product-list”> to <div class=”product-listx”>

Add to stylesheet:

@media (min-width: 768px) {
.product-listx > div, .product-listx > .product-details {
padding-left: 15px !important;
padding-right: 0 !important;
padding-top: 15px;
margin-bottom: 30px;
width:100%
}
.product-listx {
width:100%
}
}

In Section Page Body, comment out ‘Product List’
And add your two new layouts Fragment one first:

 <!--<actinic:variable name="ProductList" />-->
<actinic:variable name="ProductList" value="Responsive Product List Fragments" />
<actinic:variable name="ProductList" value="Responsive Product List Products" />

The problem now is that you will get empty divs in the fragment list where products should be and empty divs in the product list where fragments should be!

This is solved thus:

Add this above the two layouts in the Section Page Body:

<script>
$("div.product-details").filter(function(){
return $(this).text().trim() == ""
}).remove();
</script>

Add to stylesheet:

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

NB. This only works in the live site, you will see the empty divs in preview.

See it here: https://www.graphicz.solutions/onefr…log/Rings.html

The other thing to mention is that in Swift the Section Description now appears at the top of the section page which will sometimes remove the need for a separate fragment – maybe?

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz