Remove right sidebar in Swift Product page.

[graphicz]

If you are not using the right sidebar on the product page in Swift there is a gap.

In settings site options product page you can set the product page sidebar list to none but the gap remains.

There is a class "side-bar-exist" in the containing 'row' which if removed makes the product page content area 100% wide.
With this class it is 100% less 270px wide.

Setting the 'product page sidebar list' to none does not remove the effect of this class.

How can it be done? Or must it be hard coded taking flexibility away from the end user?

Thank you

[Buzby]

This is also something I wish to do.

On some filtered pages I wish to remove the filter options as the selection of products needs no further user filtering, but without leaving a blank column.

i would like these pages to be toggled in and off per page so I have a choice of 3 columns with user input for filter selection. Or 4 columns with no user input.

[graphicz]

I tried adding this to the UXHeadCodeSwift but it doesn't work properly.

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22SideBarList%22%20%2f%3e%20%3d%3d%20None" >
<style>
.right-bar.side-bar-exist .content-body {
min-width: 100%!Important;
max-width: 100%!Important;
width: 100%;
}
</style>
</actinic:block>
</actinic:block>

It should work without the '!Importants' as style in the head should supercede style in the stylesheet, but it didn't!
Then I found that this code was applied even if 'SideBarList' was set to another value.
Take the !Importants out and it doesn't work at all remaining greyed out in inspect element.

Jason: If we can crack this we can do the same sort of thing for your issue with the variables switchable at product/section level?

[graphicz]

The reason the above didn't work is because 'None' had been hard selected in the product I was testing
It is worth unticking Site and product in the variable SideBarList, closing, opening and ticking site and product again then OK.

So this code will make the product page 100% when 'None' is selected in Site Options, Product Page, Side Bar List:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22SideBarList%22%20%2f%3e%20%3d%3d%20%22None%22" >
<style>
.product-page.left-bar.side-bar-exist .content-body, .product-page.right-bar.side-bar-exist .content-body
{
min-width: 100%;
max-width: 100%;
width: 100%;
}
</style>
</actinic:block>
</actinic:block>

[graphicz]

Jason...

This is also something I wish to do.
On some filtered pages I wish to remove the filter options as the selection of products needs no further user filtering, but without leaving a blank column.
i would like these pages to be toggled in and off per page so I have a choice of 3 columns with user input for filter selection. Or 4 columns with no user input.

In Design, Library, Variables create a new variable 'RemoveFilterOptions'



Place the following right at the bottom of the UXHeadCodeSwift

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
<actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveFilterOptions%22%20%2f%3e">
<style type="text/css">
.side-bar.left-side-bar,.side-bar-inner {display:none;}
.left-bar.side-bar-exist .content-body {
min-width: 100%;
max-width: 100%;
}
#FilterResultElements .std-product-details {width:25%;}
</style>
</actinic:block>
</actinic:block>

And there you go!

https://www.graphiczdev.uk/removefil...Necklaces.html == Filteriing - three columns - 'RemoveFilterOptions' == false

https://www.graphiczdev.uk/removefil...Jewellery.html == No Filteriing - four columns- 'RemoveFilterOptions' == true

[Buzby]

Many thanks Jonathan, much appreciated.

Yourself and Norman should start up support to rival Sellerdeck

[Buzby]

I have implemented this and it works well on desktop, but not so well on mobile. Any ideas?

[graphicz]

View source in Firefox emulator on the necklaces and see what styles to implement in mobile on the wedding jewellery

[graphicz]

If you have not been able to work it out yet here is what you change the code at the bottom of the UXHeadCodeSwift to:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
<actinic:block if="%3cactinic%3avariable%20name%3d%22RemoveFilterOptions%22%20%2f%3e">
<style type="text/css">
.side-bar.left-side-bar,.side-bar-inner {display:none;}
.left-bar.side-bar-exist .content-body {
min-width: 100%;
max-width: 100%;
}
@media (min-width:992px) {
#FilterResultElements .std-product-details {width:25%;}
}
@media (min-width:768px) and (max-width:991px) {
#FilterResultElements .std-product-details {width:50%;}
}
@media (max-width:767px) {
#FilterResultElements .std-product-details {width:100%;}
}
</style>
</actinic:block>
</actinic:block>

[Buzby]

Many thanks Jonathan,

I spent a few hours on this today, but have to say wasn't even close to fixing. So once again many thanks.