feat(storefront): BCTHEME-304 add pagination for Wish Lists

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)

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);
+};

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);
         }

templates/components/account/wishlist-item-list.html

@@ -11,3 +11,4 @@
     </li>
     {{/each}}
 </ul>
+{{> components/common/paginator wishlist.pagination}}

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}}

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}}