custom/plugins/theme/src/Resources/views/storefront/component/product/listing.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}
  3. {% block element_product_listing_row %}
  4.     {# Default to ONE column on mobile, 3 columns on desktop #}
  5.     {% set listingColumns = "col-12 col-md-4 col-lg-4" %}
  7.     <div class="listing-column-toggle-wrapper" data-listing-column-toggle>
  8.         {% block listing_column_toggle %}
  9.             <div class="listing-column-toggle d-sm-none">
  10.                 <button type="button"
  11.                         class="listing-column-toggle__btn listing-column-toggle__btn--one-col active"
  12.                         data-columns="one"
  13.                         id="listing-toggle-one"
  14.                         title="{{ "listing.columnToggle.oneColumn"|trans|sw_sanitize }}">
  15.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  16.                         <rect x="4" y="4" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
  17.                     </svg>
  18.                 </button>
  19.                 <button type="button"
  20.                         class="listing-column-toggle__btn listing-column-toggle__btn--two-col"
  21.                         data-columns="two"
  22.                         id="listing-toggle-two"
  23.                         title="{{ "listing.columnToggle.twoColumns"|trans|sw_sanitize }}">
  24.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  25.                         <rect x="4" y="4" width="7" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
  26.                         <rect x="13" y="4" width="7" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
  27.                     </svg>
  28.                 </button>
  29.             </div>
  30.         {% endblock %}
  32.         <div class="listing-products-wrapper listing-view--one-column" data-listing-view="one">
  33.             {{ parent() }}
  34.         </div>
  35.     </div>
  37.     <script>
  38.     (function() {
  39.         function isMobile() {
  40.             return window.innerWidth < 576;
  41.         }
  43.         function init() {
  44.             if (!isMobile()) return;
  46.             const btnOne = document.getElementById('listing-toggle-one');
  47.             const btnTwo = document.getElementById('listing-toggle-two');
  48.             const wrapper = document.querySelector('.listing-products-wrapper');
  49.             const cols = document.querySelectorAll('.cms-listing-col');
  51.             if (!btnOne || !btnTwo || !wrapper) return;
  53.             // Load saved preference
  54.             let savedView = 'one';
  55.             try {
  56.                 savedView = localStorage.getItem('donCarne_listingColumnView') || 'one';
  57.             } catch (e) {}
  59.             // Apply saved view
  60.             applyView(savedView);
  62.             // Button click handlers
  63.             btnOne.addEventListener('click', function() {
  64.                 applyView('one');
  65.                 saveView('one');
  66.             });
  68.             btnTwo.addEventListener('click', function() {
  69.                 applyView('two');
  70.                 saveView('two');
  71.             });
  72.         }
  74.         function applyView(type) {
  75.             const wrapper = document.querySelector('.listing-products-wrapper');
  76.             const cols = document.querySelectorAll('.cms-listing-col');
  77.             const btnOne = document.getElementById('listing-toggle-one');
  78.             const btnTwo = document.getElementById('listing-toggle-two');
  80.             if (!wrapper) return;
  82.             // Update wrapper classes
  83.             wrapper.classList.remove('listing-view--one-column', 'listing-view--two-column');
  84.             wrapper.classList.add('listing-view--' + type + '-column');
  85.             wrapper.setAttribute('data-listing-view', type);
  87.             // Update HTML class
  88.             document.documentElement.classList.remove('mobile-one-column-view', 'mobile-two-column-view');
  89.             document.documentElement.classList.add('mobile-' + type + '-column-view');
  91.             // Update column classes
  92.             cols.forEach(function(col) {
  93.                 col.classList.remove('col-6', 'col-12');
  94.                 col.classList.add(type === 'one' ? 'col-12' : 'col-6');
  95.             });
  97.             // Update button states
  98.             btnOne.classList.toggle('active', type === 'one');
  99.             btnTwo.classList.toggle('active', type === 'two');
  100.         }
  102.         function saveView(type) {
  103.             try {
  104.                 localStorage.setItem('donCarne_listingColumnView', type);
  105.             } catch (e) {}
  106.         }
  108.         // Initialize on DOM ready
  109.         if (document.readyState === 'loading') {
  110.             document.addEventListener('DOMContentLoaded', init);
  111.         } else {
  112.             init();
  113.         }
  114.     })();
  115.     </script>
  117. {% endblock %}
  120. {% block element_product_listing_pagination_nav_actions %}
  121.     {% block element_product_listing_pagination_nav_top %}
  122.         {# pagination will only appear at bottom (if at all) #}
  123.     {% endblock %}
  125.     {# uncomment for now in case client wants it back at some point SD-5951 #}
  126.     {# <div class="col-sorting">
  127.         {% block element_product_listing_sorting %}
  128.             {{ parent() }}
  129.         {% endblock %}
  130.     </div> #}
  132.     <div class="cms-element-product-listing__total">
  133.         {{ searchResult.total }} 
  134.         {% sw_include '@Storefront/solution360/utilities/pluralise-snippets.twig' with {
  135.             integer: searchResult.total,
  136.             plural: "listing.products"|trans|sw_sanitize,
  137.             singular: "listing.product"|trans|sw_sanitize
  138.         }%}
  139.     </div>
  140.     
  141. {% endblock %}