From f8910e4855c262462f21d9f09cbfeec987cc1fc9 Mon Sep 17 00:00:00 2001
From: bc-vlad-dlogush <83779098+bc-vlad-dlogush@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:49:27 +0200
Subject: [PATCH] fix(storefront): BCTHEME-1765 With Product Filtering enabled
 widgets on category page disappear after navigating using pagination (#2425)

---
 CHANGELOG.md                        |  1 +
 assets/scss/layouts/body/_body.scss | 10 ++++++++++
 templates/pages/category.html       |  3 +++
 3 files changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 204c70a2bf..52e42b4671 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- With Product Filtering enabled widgets on category page disappear after navigating using pagination [#2425](https://github.com/bigcommerce/cornerstone/pull/2425)
 - Update layout with correct usage of main tag [#2421](https://github.com/bigcommerce/cornerstone/pull/2421)
 - Anchor links on category pages are not working when product filtering is enabled [#2415](https://github.com/bigcommerce/cornerstone/pull/2415)
 - Dispatch an event on productOptionsChanged [#2400](https://github.com/bigcommerce/cornerstone/pull/2400)
diff --git a/assets/scss/layouts/body/_body.scss b/assets/scss/layouts/body/_body.scss
index 00e1314224..4b0aaa8b79 100644
--- a/assets/scss/layouts/body/_body.scss
+++ b/assets/scss/layouts/body/_body.scss
@@ -29,6 +29,16 @@
     @include grid-column(12);
 }
 
+.page-region {
+    @include grid-column(12);
+    float: right;
+    width: 100%;
+
+    @include breakpoint("medium") {
+        width: 75%;
+    }
+}
+
 .page-content--centered {
 
     @include breakpoint("medium") {
diff --git a/templates/pages/category.html b/templates/pages/category.html
index aa1e085493..4e6a673a0b 100644
--- a/templates/pages/category.html
+++ b/templates/pages/category.html
@@ -49,6 +49,9 @@ <h1 class="page-heading">{{category.name}}</h1>
 
     <main class="page-content" id="product-listing-container">
         {{> components/category/product-listing}}
+    </div>
+
+    <div class="page-region">
         {{{region name="category_below_content"}}}
     </main>
 </div>