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

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Cornerstone - Body text size above 14px is cut off on cart shipping dropdowns. [#1881](https://github.com/bigcommerce/cornerstone/pull/1881)
 - Move Tax Field under Grand Total on Cart when Tax inclusive. [#1903](https://github.com/bigcommerce/cornerstone/pull/1903)
 - Added styling config for the PayPal SPB on checkout page [#1866](https://github.com/bigcommerce/cornerstone/pull/1866)
+- 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('a');
+
+    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 = $('.pagination-item--current', $paginationList).children('a').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 (window.location.href.includes('viewwishlistitems')) {
+            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}}