In my store, exactly like you default setup process, there is a page including LSF module which shows a category/Manufacturer's products in a col-9 column, and a refinedby widget in col-3 sidebar.
when in category/manufacturer page displayng both of these modules is rational because refinedby filters products based on user selections. but when clicking on a product and while in product details page, refined by can't find any filter to show so there is no reason to have a blank space in col-3 sidebar.
While in product details page, I want to hide the refinedby widget and make the col-9 product details, expand into column col-12 in order to fill the entire width. I have tried showing/hiding col-3 and expanding col-9 with JQuery in cshtml views, when Model changes, like this:
@ if ( Model.RefineByWidget.Count > 0 )
{
< JavaScript Block in Razor page >
$ ( "#products-column" ).removeClass("col-md-12").addClass("col-md-9");
$ ( "#refinedby-column" ).removeClass("d-none").addClass("d-block");
</ JavaScript Block in Razor page>
}
else
{
< JavaScript Block in Razor page >
$ ( "#products-column" ).removeClass("col-md-9").addClass("col-md-12");
$ ( "#refinedby-column" ).removeClass("d-block").addClass("d-none");
</ JavaScript Block in Razor page>
}
however it was partially successful as changes in page occur asynchronously by angular and cshtml views will not be loaded on any page navigation.
I think this is a common problem for any user of LSF. Could you please tell me how can I remove the refined by widget and make main LSF module dynamic so that fill entire width of the page? if there is no way to do this in a single page, can I show product details LSF module in a separate page other than category/refinedby page?
Thanks.