Disable wishlist infinite scroll to fix jank when deleting items

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased](https://github.com/shift72/core-template/compare/1.9.20...HEAD)
 
+### Fixed
+ - Turn off infinite scroll on the wishlist/continue watching sliders. This
+   caused some funkiness if items were removed after scrolling the slider.
+
 ## [1.9.20](https://github.com/shift72/core-template/compare/1.9.19...1.9.20)
 
 ### Fixed

site/static/js/main.js

@@ -473,7 +473,7 @@ function documentReady(app) {
   let swipers = document.getElementsByClassName('swiper-container');
   for (let i = 0; i < swipers.length; i++) {
     let el = swipers[i];
-    if (el.getAttribute('is-wishlist') == undefined) {
+    if (el.getAttribute('is-dynamic-slider') == undefined) {
       let swiper = initializeSwiper(el, false);
       init(swiper);
 

site/templates/collection/continue_watching.jet

@@ -16,7 +16,7 @@
       class="user-continue-watching s72-slider s72-hide">
     <section class="page-collection" aria-label="{{i18n("wcag_aria_label_continue_watching")}}">
       <div class="collection-wrapper-container swiper-wrapper-container">
-        <div class="collection-container swiper-container" data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
+        <div class="collection-container swiper-container" is-dynamic-slider disable-infinite-scroll data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
           {{if i18n("continue_watching_slider_header") != ""}}
             <div class="swiper-title">
               <h3>{{i18n("continue_watching_slider_header")}}</h3>

site/templates/collection/wishlist.jet

@@ -1,47 +1,34 @@
 {{import "./page_collection_item.jet"}}
 {{import "../common/slider.jet"}}
 {{import "./slider-buttons.jet"}}
-{{block wishlistCollection()}}
 
-{{if config("default_image_type") == "portrait"}}
-  <s72-userwishlist
-      render-as-slider="false"
-      hide-if-empty="true"
-      partials-base-path="/partials"
-      partials-classes="swiper-slide"
-      partials-insert-point-selector=".swiper-wrapper"
-      force-login="false"
-      data-items-per-page="6" data-item-layout="portrait" class="user-wishlist s72-slider s72-hide">
-
-{{else}}
+{{block wishlistCollection()}}
+  {{layout := config("default_image_type")}}
+  {{itemsPerRow := layout == "portrait" ? 6 : 4}}
   <s72-userwishlist
       render-as-slider="false"
       hide-if-empty="true"
       partials-base-path="/partials"
       partials-classes="swiper-slide"
       partials-insert-point-selector=".swiper-wrapper"
       force-login="false"
-      data-items-per-page="4" data-item-layout="landscape" class="user-wishlist s72-slider s72-hide">
-
-{{end}}
-  <section class="page-collection" aria-label="{{i18n("wcag_aria_label_wishlist")}}">
-    <div class="collection-wrapper-container swiper-wrapper-container">
-      {{if config("default_image_type") == "portrait"}}
-        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="6" data-layout="portrait">
-      {{else}}
-        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="4" data-layout="landscape">
-      {{end}}
-            {{if i18n("userwishlist_slider_header") != ""}}
+      data-item-layout="{{layout}}"
+      data-items-per-page="{{itemsPerRow}}"
+      class="user-wishlist s72-slider s72-hide">
+    <section class="page-collection" aria-label="{{i18n("wcag_aria_label_wishlist")}}">
+      <div class="collection-wrapper-container swiper-wrapper-container">
+        <div class="collection-container swiper-container" is-dynamic-slider disable-infinite-scroll data-items-per-row="{{itemsPerRow}}" data-layout="{{layout}}">
+          {{if i18n("userwishlist_slider_header") != ""}}
             <div class="swiper-title">
-                <h3>{{i18n("userwishlist_slider_header")}}</h3>
-            </div>
-            {{end}}
-            <div class="swiper-wrapper">
-              {{yield content}}
+              <h3>{{i18n("userwishlist_slider_header")}}</h3>
             </div>
+          {{end}}
+          <div class="swiper-wrapper">
+            {{yield content}}
+          </div>
         </div>
-        {{ yield sliderButtons() }}
-    </div>
-  </section>
-</s72-userwishlist>
+        {{yield sliderButtons()}}
+      </div>
+    </section>
+  </s72-userwishlist>
 {{end}}