feat(storefront): BCTHEME-304 add pagination for wishlists

bigcommerce · Dec 29, 2020 · baae00e · baae00e
1 parent 29057a2
commit baae00e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@
 - Added styling config for the PayPal SPB on checkout page [#1866](https://github.com/bigcommerce/cornerstone/pull/1866)
 - Moved zoomSize and productSize to the upper level, cause product.js is not availabe on the Quick View [#1884](https://github.com/bigcommerce/cornerstone/pull/1884)
 - Added new region on the cart page [#1901](https://github.com/bigcommerce/cornerstone/pull/1901)
+- Add pagination for Wishlists.[#1906](https://github.com/bigcommerce/cornerstone/pull/1906)
 
 ## 4.12.1 (11-10-2020)
 - Write a Review modal cause TypeError. [#1899](https://github.com/bigcommerce/cornerstone/pull/1899)

diff --git a/assets/js/theme/common/utils/pagination-utils.js b/assets/js/theme/common/utils/pagination-utils.js
@@ -0,0 +1,24 @@
+const changeWishlistPaginationLinks = (wishlistUrl, ...paginationItems) => $.each(paginationItems, (_, $item) => {
+    const paginationLink = $item.children('.pagination-link');
+
+    if ($item.length && !paginationLink.attr('href').includes('page=')) {
+        const pageNumber = paginationLink.attr('href');
+        paginationLink.attr('href', `${wishlistUrl}page=${pageNumber}`);
+    }
+});
+
+/**
+ * helps to withdraw differences in structures around the stencil resource pagination
+ */
+export const wishlistPaginatorHelper = () => {
+    const $paginationList = $('.pagination-list');
+
+    if (!$paginationList.length) return;
+
+    const $nextItem = $('.pagination-item--next', $paginationList);
+    const $prevItem = $('.pagination-item--previous', $paginationList);
+    const currentHref = $('[data-pagination-current-page-link]').attr('href');
+    const partialPaginationUrl = currentHref.split('page=').shift();
+
+    changeWishlistPaginationLinks(partialPaginationUrl, $prevItem, $nextItem);
+};
diff --git a/assets/js/theme/wishlist.js b/assets/js/theme/wishlist.js
@@ -2,6 +2,7 @@ import 'foundation-sites/js/foundation/foundation';
 import 'foundation-sites/js/foundation/foundation.reveal';
 import nod from './common/nod';
 import PageManager from './page-manager';
+import { wishlistPaginatorHelper } from './common/utils/pagination-utils';
 
 export default class WishList extends PageManager {
     constructor(context) {
@@ -60,6 +61,10 @@ export default class WishList extends PageManager {
     onReady() {
         const $addWishListForm = $('.wishlist-form');
 
+        if ($('[data-pagination-wishlist]').length) {
+            wishlistPaginatorHelper();
+        }
+
         if ($addWishListForm.length) {
             this.registerAddWishListValidation($addWishListForm);
         }

diff --git a/templates/components/account/wishlist-item-list.html b/templates/components/account/wishlist-item-list.html
@@ -11,3 +11,4 @@
     </li>
     {{/each}}
 </ul>
+{{> components/common/paginator wishlist.pagination}}
diff --git a/templates/components/common/paginator.html b/templates/components/common/paginator.html
@@ -21,7 +21,10 @@
                 <a class="pagination-link"
                    href="{{this.url}}"
                    {{#unless reload}}data-faceted-search-facet{{/unless}}
-                   {{#if this.number '==' ../current}}aria-current="page"{{/if}}
+                   {{#if this.number '==' ../current}}
+                   aria-current="page"
+                   data-pagination-current-page-link
+                   {{/if}}
                    aria-label="{{lang 'common.paginator.page_of' current=this.number total=../links.length}}"
                 >
                     {{this.number}}

diff --git a/templates/pages/account/wishlist-details.html b/templates/pages/account/wishlist-details.html
@@ -1,5 +1,5 @@
 {{#partial "page"}}
-<div class="account">
+<div class="account" data-pagination-wishlist>
 
     {{#if wishlist.is_editable}}
         {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ @@
         </li>
         {{/each}}
     </ul>
+    {{> components/common/paginator wishlist.pagination}}