Adding priceRanges widget compatibility inside the Landing page builder facet configuration (#779)

Author: damcou

view/adminhtml/templates/landingpage/search-configuration.phtml

@@ -16,6 +16,7 @@ $isConfig = [
     'indexDataByStoreIds' => $block->getCoreHelper()->getIndexDataByStoreIds(),
     'routing' => false,
     'facets' => $configHelper->getFacets(),
+    'currencyCode' => $configHelper->getCurrencyCode(),
     'maxValuesPerFacet' => (int) $configHelper->getMaxValuesPerFacet(),
     'landingPageConfig' => json_decode($landingPage->getConfiguration()),
     'searchParameters' => [
@@ -31,7 +32,6 @@ $isConfig = [
 
 ?>
 
-
 <input type="hidden" name="algolia_merchandising_positions" value="" data-form-part="algolia_algoliasearch_landingpage_form" />
 <input type="hidden" name="algolia_query" value="<?php echo htmlentities($landingPage->getQuery()) ?>" data-form-part="algolia_algoliasearch_landingpage_form" />
 <input type="hidden" name="algolia_configuration" value="<?php echo htmlentities($landingPage->getConfiguration()) ?>" data-form-part="algolia_algoliasearch_landingpage_form" />
@@ -530,6 +530,24 @@ $isConfig = [
 
       window.getFacetWidget = function (facet, templates) {
 
+        if (facet.type === 'priceRanges') {
+          delete templates.item;
+
+          return ['priceRanges', {
+            container: facet.wrapper.appendChild(createISWidgetContainer(facet.attribute)),
+            attributeName: facet.attribute,
+            labels: {
+              currency: config.currencyCode,
+              separator: 'to',
+              button: 'go'
+            },
+            templates: templates,
+            cssClasses: {
+              root: 'facet conjunctive'
+            }
+          }];
+        }
+
         if (facet.type === 'conjunctive') {
           var refinementListOptions = {
             container: facet.wrapper.appendChild(createISWidgetContainer(facet.attribute)),

view/adminhtml/web/css/landing-page.css

@@ -503,6 +503,10 @@ input::-ms-clear {
     font-size: inherit;
 }
 
+.ais-price-ranges--list .ais-price-ranges--link {
+    display: block;
+}
+
 .ais-hierarchical-menu--item__active > div > .ais-hierearchical-link-wrapper > .ais-hierarchical-menu--link,
 .ais-refinement-list--item__active > div > .ais-hierarchical-list--link,
 .ais-refinement-list--item__active > div > .ais-refinement-list--label,