Merge pull request #6674 from julienbourdeau/feat/improve-ajax-for-li…

…sting

Fix ajax refresh for listing pages

classes/controller/ProductListingFrontController.php

@@ -435,16 +435,20 @@ protected function getAjaxProductSearchVariables()
     {
         $search = $this->getProductSearchVariables();
 
+        $rendered_products_top = $this->render('catalog/_partials/products-top', array('listing' => $search));
         $rendered_products = $this->render('catalog/_partials/products', array('listing' => $search));
+        $rendered_products_bottom = $this->render('catalog/_partials/products-bottom', array('listing' => $search));
 
         $data = array(
-            'products' => $search['products'],
+            'rendered_products_top' => $rendered_products_top,
             'rendered_products' => $rendered_products,
-            'rendered_facets' => $search['rendered_facets'],
-            'current_url' => $search['current_url'],
-            'js_enabled' => $search['js_enabled'],
+            'rendered_products_bottom' => $rendered_products_bottom,
         );
 
+        foreach ($search as $key => $value) {
+            $data[$key] = $value;
+        }
+
         return $data;
     }
 

themes/_core/js/facets.js

@@ -2,23 +2,10 @@ import $ from 'jquery';
 
 let pendingQuery = false;
 
-function updateDOM ({rendered_products, rendered_facets}) {
-    $('#products').replaceWith(rendered_products);
-    $('#search_filters').replaceWith(rendered_facets);
-}
-
-const onpopstate = e => {
-    if (e.state && e.state.rendered_products) {
-        updateDOM(e.state);
-    }
-};
-
 function updateResults (data) {
     pendingQuery = false;
-    updateDOM(data);
+    prestashop.emit('updateProductList', data);
     window.history.pushState(data, undefined, data.current_url);
-    window.addEventListener('popstate', onpopstate);
-    prestashop.emit('facetsUpdated');
 }
 
 function handleError () {

themes/classic/_dev/js/listing.js

@@ -86,4 +86,34 @@ $(document).ready(() => {
     $('#content-wrapper').removeClass('hidden-sm-down');
     $('#footer').removeClass('hidden-sm-down');
   });
+
+  $('body').on('change', '#search_filters input[data-search-url]', function (event) {
+    prestashop.emit('updateFacets', event.target.dataset.searchUrl);
+  });
+
+  $('body').on('click', '.js-search-filters-clear-all', function (event) {
+    prestashop.emit('updateFacets', event.target.dataset.searchUrl);
+  });
+
+  $('body').on('click', '.js-search-link', function (event) {
+    event.preventDefault();
+    prestashop.emit('updateFacets',$(event.target).closest('a').get(0).href);
+  });
+
+  $('body').on('change', '#search_filters select', function (event) {
+    const form = $(event.target).closest('form');
+    prestashop.emit('updateFacets', '?' + form.serialize());
+  });
+
+  prestashop.on('updateProductList', (data) => {
+    updateProductListDOM(data);
+  });
 });
+
+function updateProductListDOM (data) {
+  $('#search_filters').replaceWith(data.rendered_facets);
+  $('#js-active-search-filters').replaceWith(data.rendered_active_filters);
+  $('#js-product-list-top').replaceWith(data.rendered_products_top);
+  $('#js-product-list').replaceWith(data.rendered_products);
+  $('#js-product-list-bottom').replaceWith(data.rendered_products_bottom);
+}

themes/classic/_dev/js/product.js

@@ -6,24 +6,6 @@ $(document).ready(function () {
   coverImage();
   imageScrollBox();
 
-  $('body').on('change', '#search_filters input[data-search-url]', function (event) {
-      prestashop.emit('updateFacets', event.target.dataset.searchUrl);
-  });
-
-  $('body').on('click', '.js-search-filters-clear-all', function (event) {
-      prestashop.emit('updateFacets', event.target.dataset.searchUrl);
-  });
-
-  $('body').on('click', '.js-search-link', function (event) {
-      event.preventDefault();
-      prestashop.emit('updateFacets',$(event.target).closest('a').get(0).href);
-  });
-
-  $('body').on('change', '#search_filters select', function (event) {
-      const form = $(event.target).closest('form');
-      prestashop.emit('updateFacets', '?' + form.serialize());
-  });
-
   prestashop.on('updatedProduct', function (event) {
     createInputFile();
     coverImage();

themes/classic/_dev/js/theme.js

@@ -44,7 +44,7 @@ $(document).ready(() => {
   topMenu.init();
   productMinitature.init();
   productSelect.init();
-  $("#search_filters_wrapper").bind("DOMSubtreeModified", function() {
+  $("#products").bind("DOMSubtreeModified", function() {
     productMinitature.init();
   });
 });

themes/classic/assets/js/theme.js

@@ -133,7 +133,7 @@
 	  topMenu.init();
 	  productMinitature.init();
 	  productSelect.init();
-	  (0, _expose$ExposeJQueryJquery2['default'])("#search_filters_wrapper").bind("DOMSubtreeModified", function () {
+	  (0, _expose$ExposeJQueryJquery2['default'])("#products").bind("DOMSubtreeModified", function () {
 	    productMinitature.init();
 	  });
 	});
@@ -12832,8 +12832,38 @@
 	    (0, _jquery2['default'])('#content-wrapper').removeClass('hidden-sm-down');
 	    (0, _jquery2['default'])('#footer').removeClass('hidden-sm-down');
 	  });
+
+	  (0, _jquery2['default'])('body').on('change', '#search_filters input[data-search-url]', function (event) {
+	    _prestashop2['default'].emit('updateFacets', event.target.dataset.searchUrl);
+	  });
+
+	  (0, _jquery2['default'])('body').on('click', '.js-search-filters-clear-all', function (event) {
+	    _prestashop2['default'].emit('updateFacets', event.target.dataset.searchUrl);
+	  });
+
+	  (0, _jquery2['default'])('body').on('click', '.js-search-link', function (event) {
+	    event.preventDefault();
+	    _prestashop2['default'].emit('updateFacets', (0, _jquery2['default'])(event.target).closest('a').get(0).href);
+	  });
+
+	  (0, _jquery2['default'])('body').on('change', '#search_filters select', function (event) {
+	    var form = (0, _jquery2['default'])(event.target).closest('form');
+	    _prestashop2['default'].emit('updateFacets', '?' + form.serialize());
+	  });
+
+	  _prestashop2['default'].on('updateProductList', function (data) {
+	    updateProductListDOM(data);
+	  });
 	});
 
+	function updateProductListDOM(data) {
+	  (0, _jquery2['default'])('#search_filters').replaceWith(data.rendered_facets);
+	  (0, _jquery2['default'])('#js-active-search-filters').replaceWith(data.rendered_active_filters);
+	  (0, _jquery2['default'])('#js-product-list-top').replaceWith(data.rendered_products_top);
+	  (0, _jquery2['default'])('#js-product-list').replaceWith(data.rendered_products);
+	  (0, _jquery2['default'])('#js-product-list-bottom').replaceWith(data.rendered_products_bottom);
+	}
+
 /***/ },
 /* 70 */
 /***/ function(module, exports, __webpack_require__) {
@@ -16743,24 +16773,6 @@
 	  coverImage();
 	  imageScrollBox();
 
-	  (0, _jquery2['default'])('body').on('change', '#search_filters input[data-search-url]', function (event) {
-	    prestashop.emit('updateFacets', event.target.dataset.searchUrl);
-	  });
-
-	  (0, _jquery2['default'])('body').on('click', '.js-search-filters-clear-all', function (event) {
-	    prestashop.emit('updateFacets', event.target.dataset.searchUrl);
-	  });
-
-	  (0, _jquery2['default'])('body').on('click', '.js-search-link', function (event) {
-	    event.preventDefault();
-	    prestashop.emit('updateFacets', (0, _jquery2['default'])(event.target).closest('a').get(0).href);
-	  });
-
-	  (0, _jquery2['default'])('body').on('change', '#search_filters select', function (event) {
-	    var form = (0, _jquery2['default'])(event.target).closest('form');
-	    prestashop.emit('updateFacets', '?' + form.serialize());
-	  });
-
 	  prestashop.on('updatedProduct', function (event) {
 	    createInputFile();
 	    coverImage();

themes/classic/templates/catalog/_partials/active_filters.tpl

@@ -1,6 +1,6 @@
 {if $activeFilters|count}
-  <section class="active_filters">
-  <h1 class="h6 active-filter-title">{l s='Active filters' d='Shop.Theme'}</h1>
+  <section id="js-active-search-filters" class="active_filters">
+    <h1 class="h6 active-filter-title">{l s='Active filters' d='Shop.Theme'}</h1>
     <ul>
       {foreach from=$activeFilters item="filter"}
         <li class="filter-block">{l s='%1$s: ' d='Shop.Theme.Catalog' sprintf=[$filter.facetLabel]} {$filter.label} <a class="js-search-link" href="{$filter.nextEncodedFacetsURL}"><i class="material-icons close">&#xE5CD;</i></a></li>

themes/classic/templates/catalog/_partials/products-bottom.tpl

@@ -0,0 +1,6 @@
+{*
+ * Classic theme doesn't use this subtemplate, feel free to do whatever you need here.
+ * This template is generated at each ajax calls.
+ * See ProductListingFrontController::getAjaxProductSearchVariables()
+ *}
+<div id="js-product-list-bottom"></div>

themes/classic/templates/catalog/_partials/products-top.tpl

@@ -0,0 +1,32 @@
+<div id="js-product-list-top" class="row products-selection">
+  <div class="col-md-6 hidden-sm-down total-products">
+    {if $listing.products|count > 1}
+      <p>{l s='There are %product_count% products.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.products|count]}</p>
+    {else}
+      <p>{l s='There is %product_count% product.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.products|count]}</p>
+    {/if}
+  </div>
+  <div class="col-md-6">
+    <div class="row">
+
+      {block name='sort_by'}
+        {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
+      {/block}
+
+      {if !empty($listing.rendered_facets)}
+        <div class="col-sm-3 col-xs-4 hidden-md-up filter-button">
+          <button id="search_filter_toggler" class="btn btn-secondary">
+            {l s='Filter' d='Shop.Theme.Actions'}
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+  <div class="col-sm-12 hidden-md-up text-xs-center showing">
+    {l s='Showing %from%-%to% of %total% item(s)' d='Shop.Theme.Catalog' sprintf=[
+    '%from%' => $listing.pagination.items_shown_from ,
+    '%to%' => $listing.pagination.items_shown_to,
+    '%total%' => $listing.pagination.total_items
+    ]}
+  </div>
+</div>

themes/classic/templates/catalog/_partials/products.tpl

@@ -1,55 +1,20 @@
-<section id="products">
+<div id="js-product-list">
+  <div class="products row">
+    {foreach from=$listing.products item="product"}
+      {block name='product_miniature'}
+        {include file='catalog/_partials/miniatures/product.tpl' product=$product}
+      {/block}
+    {/foreach}
+  </div>
 
-  {if $listing.products|count}
-      <div class="row products-selection">
-        <div class="col-md-6 hidden-sm-down total-products">
-          {if $listing.products|count > 1}
-            <p>{l s='There are %product_count% products.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.products|count]}</p>
-          {else}
-            <p>{l s='There is %product_count% product.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.products|count]}</p>
-          {/if}
-        </div>
-        <div class="col-md-6">
-          <div class="row">
-            {block name='sort_by'}
-              {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
-            {/block}
-            {if !empty($listing.rendered_facets)}
-            <div class="col-sm-3 col-xs-4 hidden-md-up filter-button">
-              <button id="search_filter_toggler" class="btn btn-secondary">
-                {l s='Filter' d='Shop.Theme.Actions'}
-              </button>
-            </div>
-            {/if}
-          </div>
-        </div>
-        <div class="col-sm-12 hidden-md-up text-xs-center showing">
-          {l s='Showing %from%-%to% of %total% item(s)' d='Shop.Theme.Catalog' sprintf=['%from%' => $listing.pagination.items_shown_from ,'%to%' => $listing.pagination.items_shown_to, '%total%' => $listing.pagination.total_items]}
-        </div>
-      </div>
+  {block name='pagination'}
+    {include file='_partials/pagination.tpl' pagination=$listing.pagination}
+  {/block}
 
-
-    <div class="hidden-sm-down">{$listing.rendered_active_filters nofilter}</div>
-
-    <div class="products row">
-      {foreach from=$listing.products item="product"}
-        {block name='product_miniature'}
-          {include file='catalog/_partials/miniatures/product.tpl' product=$product}
-        {/block}
-      {/foreach}
-    </div>
-
-    {block name='pagination'}
-      {include file='_partials/pagination.tpl' pagination=$listing.pagination}
-    {/block}
-
-    <div class="hidden-md-up text-xs-right up">
-      <a href="#header" class="btn btn-secondary">
-        Back to top
-        <i class="material-icons">&#xE316;</i>
-      </a>
-    </div>
-  {else}
-    {include file='errors/not-found.tpl'}
-  {/if}
-</section>
+  <div class="hidden-md-up text-xs-right up">
+    <a href="#header" class="btn btn-secondary">
+      {l s='Back to top' d='Shop.Actions'}
+      <i class="material-icons">&#xE316;</i>
+    </a>
+  </div>
+</div>

themes/classic/templates/catalog/listing/product-list.tpl

@@ -7,9 +7,39 @@
       <h2 class="h2">{$listing.label}</h2>
     {/block}
 
-    {block name='product_list'}
-      {include file='catalog/_partials/products.tpl' listing=$listing}
-    {/block}
+    <section id="products">
+      {if $listing.products|count}
+
+        <div id="">
+          {block name='product_list_top'}
+            {include file='catalog/_partials/products-top.tpl' listing=$listing}
+          {/block}
+        </div>
+
+        {block name='product_list_active_filters'}
+          <div id="" class="hidden-sm-down">
+            {$listing.rendered_active_filters nofilter}
+          </div>
+        {/block}
+
+        <div id="">
+          {block name='product_list'}
+            {include file='catalog/_partials/products.tpl' listing=$listing}
+          {/block}
+        </div>
+
+        <div id="js-product-list-bottom">
+          {block name='product_list_bottom'}
+            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
+          {/block}
+        </div>
+
+      {else}
+
+        {include file='errors/not-found.tpl'}
+
+      {/if}
+    </section>
 
   </section>
 {/block}