wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4

package/src/js/page/utils/helpers.js

@@ -3,7 +3,7 @@ export function highlightCharacter(str, char, charClass) {
         return str;
     }
 
-    const pattern = new RegExp(`\\${char}+`, "g");
+    const pattern = new RegExp(`\\${char}+`, 'g');
     const replacement = `<span class="${charClass}">$&</span>`;
 
     return str.replace(pattern, replacement);
@@ -12,7 +12,7 @@ export function highlightCharacter(str, char, charClass) {
 export function createImageElements(images, alt) {
     return images.map((link) => {
         return $('<img>').attr('src', link).attr('alt', alt);
-    })
+    });
 }
 
 export function countLetters(str) {
@@ -35,15 +35,17 @@ export function isKeyboardOpen() {
     return screenHeight !== screenHeightWithoutKeyboard;
 }
 
-export function isTouchDevice () {
+export function isTouchDevice() {
     return 'ontouchstart' in window;
 }
 
-export function isApp () {
-    return navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android|DIYApp_Guest_Mobile_iOS|DIYApp_Guest_Mobile_Android|AGENT_PLACEHOLDER/i);
+export function isApp() {
+    return navigator.userAgent.match(
+        /TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android|DIYApp_Guest_Mobile_iOS|DIYApp_Guest_Mobile_Android|AGENT_PLACEHOLDER/i
+    );
 }
 
-export function trimFields () {
+export function trimFields() {
     const fields = Wick.AddressBook.getFieldsConfigurations();
     fields.forEach((field) => {
         const trimmedValue = field.input.val().trim();
@@ -55,8 +57,11 @@ export function scrollToElement(element, offset = 20) {
     const targetElement = $(element);
 
     if (targetElement.length > 0) {
-        $('html, body').animate({
-            scrollTop: targetElement.offset().top - offset
-        }, 300);
+        $('html, body').animate(
+            {
+                scrollTop: targetElement.offset().top - offset,
+            },
+            300
+        );
     }
 }

package/src/js/page/utils/show-more-less.js

@@ -0,0 +1,273 @@
+import btn from '../../../elements/btn.hbs';
+
+// ===== HELPERS =====
+
+function normalizeOptions(options) {
+    return {
+        groupSel: '.accordion.filter',
+        panelSel: '.accordion__content-inner',
+        itemSel: '.filter__item',
+
+        ctaAppendToSel: '.accordion__content-inner',
+        ctaClass: 'filter__facet-cta',
+        ctaAction: 'more',
+        ctaActionAttr: 'data-action',
+
+        toggleSel: '.accordion__header',
+
+        stateKey: 'showMoreLessState',
+        stepAttr: 'data-facet-step',
+        defaultStep: 5,
+
+        excludeGroup: null,
+
+        moreText: 'Show more',
+        lessText: 'Show less',
+
+        ...options,
+    };
+}
+
+function makeSelectors(opt) {
+    return {
+        GROUP: opt.groupSel,
+        PANEL: opt.panelSel,
+        ITEM: opt.itemSel,
+        TOGGLE: opt.toggleSel || null,
+
+        CTA: `.${opt.ctaClass}`,
+        CTA_APPEND_TO: opt.ctaAppendToSel,
+    };
+}
+
+function isExcluded($group, excludeFn) {
+    return typeof excludeFn === 'function' ? !!excludeFn($group) : false;
+}
+
+function getPanel($group, sel) {
+    return $group.find(sel.PANEL).first();
+}
+
+function getItems($group, sel) {
+    const $panel = getPanel($group, sel);
+    if (!$panel.length) return $();
+
+    const $direct = $panel.children(sel.ITEM);
+    return $direct.length ? $direct : $panel.find(sel.ITEM);
+}
+
+function getStep($group, stepAttr, defaultStep) {
+    const raw = ($group.attr(stepAttr) || '').trim();
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) && n > 0 ? n : defaultStep;
+}
+
+function getState($group, stateKey, total, step) {
+    let state = $group.data(stateKey);
+
+    if (!state) state = { visible: step, total };
+
+    state.total = total;
+
+    if (!state.visible || state.visible < step) state.visible = step;
+    if (state.visible > total) state.visible = total;
+
+    $group.data(stateKey, state);
+    return state;
+}
+
+function setInitialState($group, stateKey, total, step) {
+    $group.data(stateKey, { visible: step, total });
+}
+
+function getGroups($root, groupSel) {
+    const $scope = $root && $root.length ? $root : $(document);
+    const $self = $scope.is(groupSel) ? $scope : $();
+    const $found = $scope.find(groupSel);
+    return $self.add($found);
+}
+
+// ===== CTA helpers =====
+
+function getCta($group, sel) {
+    return $group.find(sel.CTA).first();
+}
+
+function removeCta($group, sel) {
+    const $cta = getCta($group, sel);
+    if ($cta.length) $cta.remove();
+}
+
+function ensureCta($group, sel, opt) {
+    let $cta = getCta($group, sel);
+    if ($cta.length) return $cta;
+
+    const $appendTo = $group.find(sel.CTA_APPEND_TO).first();
+    if (!$appendTo.length) return $();
+
+    const html = btn({
+        text: opt.moreText,
+        class: opt.ctaClass,
+        action: opt.ctaAction,
+    });
+
+    $appendTo.append(html);
+
+    $cta = getCta($group, sel);
+
+    if ($cta.length && !$cta.attr(opt.ctaActionAttr)) {
+        $cta.attr(opt.ctaActionAttr, opt.ctaAction);
+    }
+
+    return $cta;
+}
+
+function setCtaState($cta, mode, opt) {
+    if (!$cta || !$cta.length) return;
+
+    if (mode === 'less') {
+        $cta.text(opt.lessText).attr(opt.ctaActionAttr, 'less').show();
+    } else {
+        $cta.text(opt.moreText).attr(opt.ctaActionAttr, 'more').show();
+    }
+}
+
+// ===== CORE ACTIONS =====
+
+function applyGroup($group, opt, sel) {
+    if (!$group || !$group.length) return;
+
+    // excluded -> CTA never exists
+    if (isExcluded($group, opt.excludeGroup)) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const $items = getItems($group, sel);
+    const total = $items.length;
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+
+    // 0 items -> no CTA
+    if (total === 0) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const state = getState($group, opt.stateKey, total, step);
+
+    // show/hide items
+    $items.each(function (idx) {
+        $(this).toggle(idx < state.visible);
+    });
+
+    // <= step -> CTA not needed
+    if (total <= step) {
+        removeCta($group, sel);
+        return;
+    }
+
+    // > step -> ensure CTA exists and update it
+    const $cta = ensureCta($group, sel, opt);
+    if (!$cta.length) return;
+
+    if (state.visible >= total) setCtaState($cta, 'less', opt);
+    else setCtaState($cta, 'more', opt);
+}
+
+function expandGroup($group, opt, sel) {
+    if (!$group || !$group.length) return;
+    if (isExcluded($group, opt.excludeGroup)) return;
+
+    const total = getItems($group, sel).length;
+    if (!total) return;
+
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+    const state = getState($group, opt.stateKey, total, step);
+
+    state.visible = Math.min(state.visible + step, total);
+    $group.data(opt.stateKey, state);
+
+    applyGroup($group, opt, sel);
+}
+
+function collapseGroupToInitial($group, opt, sel) {
+    if (!$group || !$group.length) return;
+
+    if (isExcluded($group, opt.excludeGroup)) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const total = getItems($group, sel).length;
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+
+    setInitialState($group, opt.stateKey, total, step);
+    applyGroup($group, opt, sel);
+}
+
+// ===== MAIN FACTORY =====
+
+export function createShowMoreLess(options = {}) {
+    const OPT = normalizeOptions(options);
+    const SEL = makeSelectors(OPT);
+
+    if (!SEL.GROUP || !SEL.PANEL || !SEL.ITEM) {
+        throw new Error('[createShowMoreLess] Missing required selectors');
+    }
+
+    // namespace for delegated events (avoid duplicates if factory created multiple times)
+    const NS = `.sml_${Math.random().toString(16).slice(2)}`;
+
+    function init($root) {
+        getGroups($root, SEL.GROUP).each(function () {
+            const $group = $(this);
+
+            if (isExcluded($group, OPT.excludeGroup)) {
+                removeCta($group, SEL);
+                return;
+            }
+
+            const total = getItems($group, SEL).length;
+            const step = getStep($group, OPT.stepAttr, OPT.defaultStep);
+
+            setInitialState($group, OPT.stateKey, total, step);
+            applyGroup($group, OPT, SEL);
+        });
+    }
+
+    function resetAll($root) {
+        getGroups($root, SEL.GROUP).each(function () {
+            collapseGroupToInitial($(this), OPT, SEL);
+        });
+    }
+
+    // CTA click
+    $(document)
+        .off(`click${NS}`, SEL.CTA)
+        .on(`click${NS}`, SEL.CTA, function (e) {
+            e.preventDefault();
+
+            const $cta = $(this);
+            const $group = $cta.closest(SEL.GROUP);
+
+            if (!$group.length || isExcluded($group, OPT.excludeGroup)) return;
+
+            const action = ($cta.attr(OPT.ctaActionAttr) || 'more').toLowerCase();
+
+            if (action === 'less') collapseGroupToInitial($group, OPT, SEL);
+            else expandGroup($group, OPT, SEL);
+        });
+
+    // Toggle/header click -> collapse to initial
+    if (SEL.TOGGLE) {
+        $(document)
+            .off(`click${NS}`, SEL.TOGGLE)
+            .on(`click${NS}`, SEL.TOGGLE, function () {
+                const $group = $(this).closest(SEL.GROUP);
+                if (!$group.length || isExcluded($group, OPT.excludeGroup)) return;
+                collapseGroupToInitial($group, OPT, SEL);
+            });
+    }
+
+    return { init, resetAll };
+}

package/src/page_empty-shared-project-list-bicester-hub.html

@@ -7,4 +7,7 @@
     {{> shopping-list-bicester-hub emptyShopList="true" }}
 </main>
 {{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/saving-shopping-list.min.js"></script>
+{{/content}}
 {{/extend}}

package/src/page_kitchen-plp.html

@@ -11,8 +11,8 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
-        {{> kitchen/filter-modal }}
-        <script src="./js/page/accordion.js"></script>
+        {{> kitchen/filter-modal isKitchenMode=true modalTitle="Filter by" }}
         <script src="./js/kitchen/kitchen-plp.min.js"></script>
+        <script src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-hide-download.html

@@ -3,7 +3,7 @@
 {{/content}}
 {{#content "body"}}
 <main>
-    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true hideDownload=true}}
+    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true}}
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}

package/src/page_plp-with-paint.html

@@ -15,19 +15,13 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
         {{> shop-colour title="Shop by colour"}}
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-               <span class="btn__text">
-                 <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-               </span>
-            </button>
             {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
           </div>
           <div class="sort-products-list__section sort-products-list__pagination">
@@ -71,5 +65,6 @@
 <script defer src="./js/page/plp.js"></script>
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_plp.html

@@ -15,8 +15,7 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
       </aside>
 
       <div class="content">
@@ -25,11 +24,6 @@
 
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
-            <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-            </button>
             {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
           </div>
           <div class="sort-products-list__section sort-products-list__pagination">
@@ -67,5 +61,6 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_plp_v2-energy-efficiency.html

@@ -17,17 +17,11 @@
         <div class="row">
             <aside class="left-aside">
                 {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-                                   <span class="btn__text">
-                                     <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-                                   </span>
-                        </button>
                         {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                     </div>
                     <div class="sort-products-list__section sort-products-list__pagination">
@@ -78,5 +72,6 @@
 <script defer src="./js/energy-efficiency.min.js"></script>
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_plp_v2-favourite-products.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="page-responsiveThematicProductListPage products-list-page" title="Products list" pagePlp=true}}
     {{#content "head" mode="append" pagePlp=true}}
         <link type="text/css" rel="stylesheet" href="./css/components/plp-favourite-product.css">
     {{/content}}
@@ -16,7 +16,7 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter filterTitle="Filter results" collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                         {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                     </aside>
 
@@ -40,16 +40,13 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#if search-result_v2.product-banner}}
-                                {{>card_product_banner_v2}}
-                            {{/if}}
                             {{#each search-result_v2.products}}
                                 {{>card_product_v2 showFavourite="true"}}
                             {{/each}}
                         </div>
 
                         <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page is-hidden">
+                            <div class="sort-products-list__section sort-products-list__items-per-page">
                                 {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-bottom" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                             </div>
                             <div class="sort-products-list__section sort-products-list__pagination">
@@ -75,5 +72,7 @@
         <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/plp-favourite-product.bundle.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/search-filter.min.js"></script>
     {{/content}}
-{{/extend}}
+{{/extend}}

package/src/page_plp_v2-vat.html

@@ -16,18 +16,12 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
                     <div class="content">
                         <div class="sort-products-list">
                             <div class="sort-products-list__section sort-products-list__items-per-page">
-                                <button class="btn btn-primary open-filters-btn" id="open-overlay">
-                                   <span class="btn__text">
-                                     <span class="icon"><span class="fas fa-filter"></span></span>Filter products
-                                   </span>
-                                </button>
                                 {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                             </div>
                             <div class="sort-products-list__section sort-products-list__pagination">
@@ -74,5 +68,6 @@
         <script defer src="./js/page/plp.js"></script>
         <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
+        <script defer src="./js/search-filter.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -17,20 +17,30 @@
 
                 <div class="row">
                     <aside class="left-aside">
-                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
                     <div class="content">
-                        <div class="sort-products-list">
-                            <input id="numberOfPagesPLP" value="3" type="hidden">
-                            <div class="sort-products-list__total">
-                                <span>{{plp_load-more.pagination.totalNumberOfResults}} products</span>
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__sort-by">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="#sort_form1" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="1,818 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
                             </div>
                         </div>
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
 
                         <div class="products-list products-list-v2">
                             {{#each search-result_v2.products}}
@@ -71,8 +81,11 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
+    {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
         <script defer src="./js/plp.bundle.min.js"></script>
         <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_product_search-vat.html

@@ -17,18 +17,12 @@
 
         <div class="row">
             <aside class="left-aside">
-                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-                        </button>
                         {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                     </div>
                     <div class="sort-products-list__section sort-products-list__pagination">
@@ -69,5 +63,6 @@
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_product_search.html

@@ -17,18 +17,12 @@
 
         <div class="row">
             <aside class="left-aside">
-                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
-                {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+                {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
             </aside>
 
             <div class="content">
                 <div class="sort-products-list">
                     <div class="sort-products-list__section sort-products-list__items-per-page">
-                        <button class="btn btn-primary open-filters-btn" id="open-overlay">
-              <span class="btn__text">
-                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
-              </span>
-                        </button>
                         {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                     </div>
                     <div class="sort-products-list__section sort-products-list__pagination">
@@ -69,5 +63,6 @@
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
+<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup-android.html

@@ -0,0 +1,15 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="page_empty-shared-shopping-list" title="Project list - Bicester Hub" hideBanner="true" shopListEmpty="true"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/bicester-project-list.css">
+{{/content}}
+{{#content "body"}}
+<main>
+  {{> shopping-list-with-share-list-v2 isUserRegister=true isAndroid=true}}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script src="./js/project-list-note.min.js"></script>
+<script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_project-list-with-new-share-popup-ios.html

@@ -0,0 +1,15 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="page_empty-shared-shopping-list tp-ios" title="Project list - Bicester Hub" hideBanner="true" shopListEmpty="true"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/bicester-project-list.css">
+{{/content}}
+{{#content "body"}}
+<main>
+  {{> shopping-list-with-share-list-v2 isUserRegister=true}}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script src="./js/project-list-note.min.js"></script>
+<script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_project-list-with-new-share-popup.html

@@ -10,5 +10,6 @@
 {{#content "foot" mode="append"}}
 <script src="./js/project-list-note.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}