+
+
-
- Video Tutorials
-
+
+ Community Forum
+
-
- An introduction to the Magento extension in video
-
-
-
-
diff --git a/view/adminhtml/web/css/common.css b/view/adminhtml/web/css/common.css
index 4b415db79..9f83a4311 100644
--- a/view/adminhtml/web/css/common.css
+++ b/view/adminhtml/web/css/common.css
@@ -418,3 +418,18 @@
.algolia-clearfix {
clear: both;
}
+
+/* Warning blocks on configuration */
+.algolia_dashboard_warning {
+ background-image: url("../images/icon-magento-settings.svg");
+ background-repeat: no-repeat;
+ background-position: 25px 20px;
+ background-color : #FDFAF5;
+ border : 1px solid #F8E5C4;
+ padding : 20px 20px 10px 90px;
+ margin-bottom : 20px;
+}
+
+.algolia_dashboard_warning_page {
+ margin-bottom : 0;
+}
diff --git a/view/adminhtml/web/css/merchandising.css b/view/adminhtml/web/css/merchandising.css
index 0a0fa2559..75af9b543 100644
--- a/view/adminhtml/web/css/merchandising.css
+++ b/view/adminhtml/web/css/merchandising.css
@@ -47,7 +47,7 @@
.algoliasearch-merchandising-options {
max-width: 1400px;
- margin: 70px auto 75px;
+ margin: 40px auto 75px;
}
}
diff --git a/view/adminhtml/web/css/support.css b/view/adminhtml/web/css/support.css
index 7dd20b058..811a894fa 100644
--- a/view/adminhtml/web/css/support.css
+++ b/view/adminhtml/web/css/support.css
@@ -319,3 +319,98 @@ a.footer {
.contact_results .ais-hits__empty {
font-size: 12px;
}
+
+/* Tab display */
+#algolia_support_tab ul {
+ margin: 0;
+ padding: 0;
+}
+
+#algolia_support_tab li {
+ display: inline-block;
+ float: none;
+ background: #e3e3e3;
+ border: 0.1rem solid #adadad;
+ border-bottom-color: #e3e3e3;
+ letter-spacing: .0183em;
+ list-style: none;
+ margin-right: .4rem;
+}
+#algolia_support_tab li.tab-active {
+ background: #ffffff;
+ border-bottom: 0;
+ font-weight: 600;
+ letter-spacing: normal;
+ margin-bottom: -.1rem;
+}
+
+#algolia_support_tab li a {
+ color: #41362f;
+ display: block;
+ padding: 1.5rem 1.8rem 1.3rem;
+ text-decoration: none;
+}
+
+#algolia_support_tab li.tab-active a {
+ border-bottom: 0.2rem solid #ffffff;
+ border-top: 0.4rem solid #eb5202;
+ padding-top: 1.1rem;
+}
+
+#algolia_support_tab_content {
+ border-top: 1px solid #adadad;
+ padding-top: 20px;
+}
+
+#algolia-contact-panel {
+ display: none;
+}
+
+/* access denied */
+.algolia-suggestions-header {
+ width : 100%;
+ background-color : #F5FAFD;
+ border : 1px solid #E2F0FA;
+ padding : 20px;
+ margin : 5px 0 20px;
+ position:relative;
+}
+
+.algolia-suggestions-header .book{
+ float : left;
+ margin-right : 20px;
+ margin-top: 5px;
+}
+
+.algolia-suggestions-header p{
+ margin-left : 70px;
+}
+
+.algolia-denied-page {
+ width : 50%;
+ margin: 50px auto;
+ text-align: center;
+}
+
+.algolia-denied-page img{
+ margin : 40px 0 40px;
+}
+
+.algolia-denied-page .algolia-suggestions-header{
+ text-align: left;
+ padding : 25px;
+}
+
+.algolia-suggestions-header-wbg{
+ background: none;
+ width : auto;
+}
+
+.algolia-suggestions-header-wbg p{
+ font-size : 1.6rem;
+}
+
+.algolia-suggestions-header-wbg .stars{
+ float: left;
+ margin: 0 20px 0 0;
+}
diff --git a/view/adminhtml/web/images/icon-magento-settings.svg b/view/adminhtml/web/images/icon-magento-settings.svg
new file mode 100644
index 000000000..5cdcff287
--- /dev/null
+++ b/view/adminhtml/web/images/icon-magento-settings.svg
@@ -0,0 +1,19 @@
+
+
+
+ Group 3
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/adminhtml/web/images/illu-help.svg b/view/adminhtml/web/images/illu-help.svg
new file mode 100644
index 000000000..e61469439
--- /dev/null
+++ b/view/adminhtml/web/images/illu-help.svg
@@ -0,0 +1,23 @@
+
+
+
+ illu - help
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/adminhtml/web/js/config.js b/view/adminhtml/web/js/config.js
new file mode 100644
index 000000000..2ef66b1b5
--- /dev/null
+++ b/view/adminhtml/web/js/config.js
@@ -0,0 +1,88 @@
+require(
+ [
+ 'jquery',
+ 'mage/translate',
+ ],
+ function ($) {
+
+ addDashboardWarnings();
+
+ function addDashboardWarnings() {
+ // rows
+ var rowIds = [
+ '#row_algoliasearch_instant_instant_facets',
+ '#row_algoliasearch_instant_instant_max_values_per_facet'
+ ];
+
+ var rowWarning = '
';
+ rowWarning += '
This setting is also available in the Algolia Dashboard. We advise you to manage it from this page, because saving Magento settings will override the Algolia settings.
';
+ rowWarning += '
';
+
+ for (var i=0; i < rowIds.length; i++) {
+ var element = $(rowIds[i]);
+ if (element.length > 0) {
+ element.find('.value').prepend(rowWarning);
+ }
+ }
+
+ // pages
+ var pageIds = [
+ '#algoliasearch_products_products',
+ '#algoliasearch_categories_categories',
+ '#algoliasearch_synonyms_synonyms_group',
+ '#algoliasearch_extra_settings_extra_settings'
+ ];
+
+ var pageWarning = '
';
+ pageWarning += '
These settings are also available in the Algolia Dashboard. We advise you to manage it from this page, because saving Magento settings will override the Algolia settings.
';
+ pageWarning += '
';
+
+ for (var i=0; i < pageIds.length; i++) {
+ var element = $(pageIds[i]);
+ if (element.length > 0) {
+ element.find('.comment').append(pageWarning);
+ }
+ }
+ }
+
+ if ($('#algoliasearch_instant_instant_facets').length > 0) {
+ var addButton = $('#algoliasearch_instant_instant_facets tfoot .action-add');
+ addButton.on('click', function(){
+ handleFacetQueryRules();
+ });
+
+ handleFacetQueryRules();
+ }
+
+ function handleFacetQueryRules() {
+ var facets = $('#algoliasearch_instant_instant_facets tbody tr');
+
+ for (var i=0; i < facets.length; i++) {
+ var rowId = $(facets[i]).attr('id');
+ var searchableSelect = $('select[name="groups[instant][fields][facets][value][' + rowId + '][searchable]"]');
+
+ searchableSelect.on('change', function(){
+ configQrFromSearchableSelect($(this));
+ });
+
+ configQrFromSearchableSelect(searchableSelect);
+ }
+ }
+
+ function configQrFromSearchableSelect(searchableSelect) {
+ var rowId = searchableSelect.parent().parent().attr('id');
+ var qrSelect = $('select[name="groups[instant][fields][facets][value][' + rowId + '][create_rule]"]');
+ if (qrSelect.length > 0) {
+ if (searchableSelect.val() == "2") {
+ qrSelect.val('2');
+ qrSelect.attr('disabled','disabled');
+ } else {
+ qrSelect.removeAttr('disabled');
+ }
+ } else {
+ $('#row_algoliasearch_instant_instant_facets .algolia_block').hide();
+ }
+ }
+
+ }
+);
diff --git a/view/adminhtml/web/js/support.js b/view/adminhtml/web/js/support.js
index ec12d2f3c..f002b09cb 100644
--- a/view/adminhtml/web/js/support.js
+++ b/view/adminhtml/web/js/support.js
@@ -10,7 +10,11 @@ requirejs(['algoliaAdminBundle'], function(algoliaBundle) {
if ($('.algolia_contact_form #subject').length > 0) {
initContactDocSearch();
}
-
+
+ if ($('#algolia_support_tab').length > 0) {
+ handleSupportTabs();
+ }
+
function initDocSearch() {
const documentationSearch = algoliaBundle.instantsearch({
appId: 'BH4D9OD16A',
@@ -223,6 +227,30 @@ requirejs(['algoliaAdminBundle'], function(algoliaBundle) {
$results.show();
$landing.hide();
}
+
+ function handleSupportTabs() {
+ const supportTabs = $('#algolia_support_tab li');
+ const supportPanels = $('.algolia_support_panel');
+
+ supportTabs.each(function(index){
+ $(this).on('click', function(){
+ resetTabs(supportTabs, supportPanels);
+ $(this).addClass('tab-active');
+ var divToShow = '#' + $(this).attr('aria-controls');
+ $(divToShow).show();
+ });
+ });
+ }
+
+ function resetTabs(supportTabs, supportPanels) {
+ supportTabs.each(function(index){
+ $(this).removeClass('tab-active');
+ });
+
+ supportPanels.each(function(index){
+ $(this).hide();
+ });
+ }
});
function handleLatestVersion($) {
diff --git a/view/frontend/layout/catalog_category_view_type_layered.xml b/view/frontend/layout/catalog_category_view_type_layered.xml
new file mode 100644
index 000000000..7af68be36
--- /dev/null
+++ b/view/frontend/layout/catalog_category_view_type_layered.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+ Algolia_AlgoliaSearch::layer/view.phtml
+
+
+
+
diff --git a/view/frontend/layout/catalogsearch_result_index.xml b/view/frontend/layout/catalogsearch_result_index.xml
new file mode 100644
index 000000000..4236dd49c
--- /dev/null
+++ b/view/frontend/layout/catalogsearch_result_index.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+ Algolia_AlgoliaSearch::layer/view.phtml
+
+
+
+
diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
index 8efb037bd..aadd5ede6 100644
--- a/view/frontend/requirejs-config.js
+++ b/view/frontend/requirejs-config.js
@@ -1,6 +1,7 @@
var config = {
'paths': {
'algoliaBundle': 'Algolia_AlgoliaSearch/internals/algoliaBundle.min',
- 'algoliaAnalytics': 'Algolia_AlgoliaSearch/internals/search-insights'
+ 'algoliaAnalytics': 'Algolia_AlgoliaSearch/internals/search-insights',
+ 'rangeSlider': 'Algolia_AlgoliaSearch/navigation/range-slider-widget'
}
};
diff --git a/view/frontend/templates/layer/filter/category.phtml b/view/frontend/templates/layer/filter/category.phtml
new file mode 100644
index 000000000..dfc28b3a3
--- /dev/null
+++ b/view/frontend/templates/layer/filter/category.phtml
@@ -0,0 +1,21 @@
+
+
+
+ getCount() > 0): ?>
+
+ getLabel() ?>
+ helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
+ getCount() ?>
+ getCount() == 1):?>
+
+
+
+ getLabel() ?>
+ helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
+ getCount() ?>
+ getCount() == 1):?>
+
+
+
+
+
diff --git a/view/frontend/templates/layer/filter/default.phtml b/view/frontend/templates/layer/filter/default.phtml
new file mode 100644
index 000000000..dfc28b3a3
--- /dev/null
+++ b/view/frontend/templates/layer/filter/default.phtml
@@ -0,0 +1,21 @@
+
+
+
+ getCount() > 0): ?>
+
+ getLabel() ?>
+ helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
+ getCount() ?>
+ getCount() == 1):?>
+
+
+
+ getLabel() ?>
+ helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
+ getCount() ?>
+ getCount() == 1):?>
+
+
+
+
+
diff --git a/view/frontend/templates/layer/filter/js-default.phtml b/view/frontend/templates/layer/filter/js-default.phtml
new file mode 100644
index 000000000..015214517
--- /dev/null
+++ b/view/frontend/templates/layer/filter/js-default.phtml
@@ -0,0 +1,13 @@
+getFilter()->getRequestVar() . 'Filter';
+?>
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/frontend/templates/layer/filter/slider.phtml b/view/frontend/templates/layer/filter/slider.phtml
new file mode 100644
index 000000000..f17f9461e
--- /dev/null
+++ b/view/frontend/templates/layer/filter/slider.phtml
@@ -0,0 +1,16 @@
+
+
+
diff --git a/view/frontend/templates/layer/view.phtml b/view/frontend/templates/layer/view.phtml
new file mode 100644
index 000000000..0649850d0
--- /dev/null
+++ b/view/frontend/templates/layer/view.phtml
@@ -0,0 +1,43 @@
+canShowBlock()) : ?>
+
+ getLayer()->getState()->getFilters()) ?>
+
+
+
+
+
+ getLayer()->getState()->getFilters()) : ?>
+
+
+ getChildHtml('state') ?>
+
+
+ getFilters()))); ?>
+ getFilters() as $filter) : ?>
+ getItemsCount()) : ?>
+
+
+
+
+
+
getName()) ?>
+
getChildBlock('renderer')->render($filter) ?>
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/frontend/web/instantsearch.js b/view/frontend/web/instantsearch.js
index 27d96d00d..98234abe2 100644
--- a/view/frontend/web/instantsearch.js
+++ b/view/frontend/web/instantsearch.js
@@ -70,7 +70,7 @@ requirejs(['algoliaBundle','Magento_Catalog/js/price-utils'], function(algoliaBu
* Docs: https://community.algolia.com/instantsearch.js/
**/
- var ruleContexts = ['']; // Empty context to keep BC for already create rules in dashboard
+ var ruleContexts = ['magento_filters', '']; // Empty context to keep BC for already create rules in dashboard
if (algoliaConfig.request.categoryId.length > 0) {
ruleContexts.push('magento-category-' + algoliaConfig.request.categoryId);
}
@@ -175,7 +175,7 @@ requirejs(['algoliaBundle','Magento_Catalog/js/price-utils'], function(algoliaBu
},
render: function (data) {
if (!algoliaConfig.isSearchPage) {
- if (data.results.query.length === 0) {
+ if (data.results.query.length === 0 && data.results.nbHits === 0) {
$('.algolia-instant-replaced-content').show();
$('.algolia-instant-selector-results').hide();
}
diff --git a/view/frontend/web/internals/algoliasearch.css b/view/frontend/web/internals/algoliasearch.css
index bf5d5b2d7..a1e4673b6 100755
--- a/view/frontend/web/internals/algoliasearch.css
+++ b/view/frontend/web/internals/algoliasearch.css
@@ -1288,4 +1288,162 @@ a.ais-current-refined-values--link:hover {
#algolia-banner img {
padding-top: 15px;
+}
+
+/** BACKEND RENDERING CSS */
+
+.algolia-filter-list .filter-actions {
+ margin-bottom : 0;
+ float: right;
+ margin-top: 8px;
+}
+
+.algolia-filter-list .filter-current {
+ border: solid 1px #efefef;
+ margin-bottom: 15px;
+}
+
+.algolia-filter-list .filter-current .item {
+ display: inline-block;
+ background-color: #f4f4f4;
+ padding: 5px 7px 5px 35px;
+ margin: 5px 0;
+ border: solid 1px #DDDDDD;
+ border-radius: 2px;
+ color: #636363;
+}
+
+.algolia-filter-list .filter-current .block-subtitle {
+ color: #757575;
+ font-weight: 500;
+ text-transform: uppercase;
+ background-color: #f4f4f4;
+}
+
+.algolia-filter-list .filter-current .action.remove {
+ background-color: #DDDDDD;
+}
+
+.algolia-filter-list .filter-current .action.remove:hover {
+ background-color: #DDDDDD;
+}
+
+.algolia-filter-list .filter-current .action.remove::before {
+ font-size: 18px;
+ margin: 8px 5px;
+ font-weight: 600;
+}
+
+.algolia-filter-list .filter-options-content{
+ padding: 5px;
+}
+
+.algolia-filter-list .filter-options-title{
+ background-color: #f4f4f4;
+ color: #757575;
+ font-weight: 500;
+ padding: 4px 40px 4px 10px;
+}
+
+.algolia-filter-list .filter-options-item{
+ border: solid 1px #efefef;
+ margin-bottom: 15px;
+ padding-bottom: 0;
+}
+
+.algolia-filter-list .filter-options-title::after {
+ top: 5px;
+}
+
+.algolia-filter-list .items .item {
+ position: relative;
+}
+
+.algolia-filter-list .items .item .filter-label,
+.algolia-filter-list .items .item .filter-value {
+ color: #006bb4;
+}
+
+.algolia-filter-list .items .item a label {
+ cursor: pointer;
+}
+
+.algolia-filter-list .items .item a:hover {
+ background-color: white;
+}
+
+.algolia-filter-list .items .item a:hover label span:first-child {
+ text-decoration: underline;
+}
+
+.algolia-filter-list .items .item input {
+ top : 0;
+}
+
+.algolia-filter-list .items .item a .count {
+ position : absolute;
+ right: 0;
+ font-weight: 500;
+}
+
+.algolia-filter-list .items .item a .count::before,
+.algolia-filter-list .items .item a .count::after {
+ content : '';
+}
+
+/* SLIDER */
+.algolia-filter-list .algolia-range-slider [data-role=from-label] {
+ display: block;
+ float: left;
+ padding: 5px 0 10px;
+ font-size: .8em;
+ min-width: 20px;
+ font-weight: 400;
+ text-align: center;
+}
+
+.algolia-filter-list .algolia-range-slider [data-role=to-label] {
+ display: block;
+ float: right;
+ padding: 5px 0 10px;
+ font-size: .8em;
+ min-width: 20px;
+ font-weight: 400;
+ text-align: center;
+}
+
+.algolia-filter-list .algolia-range-slider .actions-toolbar {
+ margin: 17px 8px 5px;
+ display: block;
+}
+
+.algolia-filter-list .algolia-range-slider .actions-primary {
+ float: right;
+}
+
+.algolia-filter-list .algolia-range-slider .actions-primary .primary {
+ padding: 5px;
+}
+
+.algolia-filter-list .algolia-range-slider .ui-slider {
+ height: 2px;
+ margin: 10px;
+ clear: both;
+ background-color: #F3F4F7;
+ border: 1px solid #DDD;
+}
+
+.algolia-filter-list .algolia-range-slider .ui-slider-handle {
+ background-color: grey;
+ padding: 0;
+ margin: -8px 0 0 -10px;
+ border-radius: 50%;
+ width: 18px;
+ height: 18px;
+ background-color: #FFFFFF;
+ border: 1px solid #c8c8c8;
+}
+
+.algolia-rendering .sorter-action {
+ display: none;
}
\ No newline at end of file
diff --git a/view/frontend/web/navigation/attribute-filter.js b/view/frontend/web/navigation/attribute-filter.js
new file mode 100644
index 000000000..90b336a2c
--- /dev/null
+++ b/view/frontend/web/navigation/attribute-filter.js
@@ -0,0 +1,138 @@
+define([
+ 'jquery',
+ 'uiComponent',
+ 'underscore',
+ 'mage/translate'
+], function ($, Component, _) {
+ "use strict";
+
+ return Component.extend({
+ defaults: {
+ template: "Algolia_AlgoliaSearch/attribute-filter",
+ noResultLabel : $.mage.__("No results.")
+ },
+
+ /* Initialization */
+ initialize: function () {
+ this._super();
+ this.expanded = false;
+ this.items = this.items.map(this.addItemId.bind(this));
+ this.observe(['fulltextSearch', 'expanded']);
+
+ var lastSelectedIndex = Math.max.apply(null, (this.items.map(
+ function (v, k) {return v['is_selected'] ? k : 0;}))
+ );
+ this.maxSize = Math.max(this.maxSize, lastSelectedIndex + 1);
+
+ this.initPlaceholder();
+ this.onShowLess();
+ this.searchActive = this.items.length > this.maxSize;
+ },
+
+ /* Placeholder initialization */
+ initPlaceholder: function () {
+ this.searchPlaceholder = $('
').html($.mage.__('Search for other ...')).text();
+ },
+
+ /* Behaviour while typing in the search input */
+ onSearchChange: function (component, ev) {
+ var text = ev.target.value;
+ if (text.trim() === "") {
+ component.fulltextSearch(null);
+ component.onShowLess();
+ } else {
+ component.fulltextSearch(text);
+ component.onShowMore();
+ }
+ return true;
+ },
+
+ /* Reset value on focus if search is considered as empty */
+ onSearchFocusOut: function(component, ev) {
+ var text = ev.target.value;
+ if (text.trim() === "") {
+ component.fulltextSearch(null);
+ ev.target.value = "";
+ }
+ },
+
+ /* Get additional results */
+ loadAdditionalItems: function (callback) {
+ $.get(this.ajaxLoadUrl, function (data) {
+ this.items = data.map(this.addItemId.bind(this));
+ this.hasMoreItems = false;
+
+ if (callback) {
+ return callback();
+ }
+ }.bind(this));
+ },
+
+ /* Get items list */
+ getDisplayedItems: function () {
+ var items = this.items;
+
+ if (this.expanded() === false) {
+ items = this.items.slice(0, this.maxSize);
+ }
+
+ if (this.fulltextSearch()) {
+ var searchTokens = this.slugify(this.fulltextSearch()).split('-');
+ var lastSearchToken = searchTokens.splice(-1, 1)[0];
+
+ items = items.filter(function(item) {
+ var isValidItem = true;
+ var itemTokens = this.slugify(item.label).split('-');
+ searchTokens.forEach(function(currentToken) {
+ if (itemTokens.indexOf(currentToken) === -1) {
+ isValidItem = false;
+ }
+ })
+ if (isValidItem && lastSearchToken) {
+ var ngrams = itemTokens.map(function(token) {return token.substring(0, lastSearchToken.length)});
+ isValidItem = ngrams.indexOf(lastSearchToken) !== -1;
+ }
+ return isValidItem;
+ }.bind(this))
+ }
+
+ return items;
+ },
+
+ /* Check if search has results */
+ hasSearchResult: function () {
+ return this.getDisplayedItems().length > 0
+ },
+
+ /* Get No Search result message */
+ getNoResultMessage : function() {
+ return this.noResultLabel;
+ },
+
+ /* Callback when list is being populated */
+ onShowMore: function () {
+ if (this.hasMoreItems) {
+ this.loadAdditionalItems(this.onShowMore.bind(this));
+ } else {
+ this.expanded(true);
+ }
+ },
+
+ /* Callback when list is refined */
+ onShowLess: function () {
+ this.expanded(false);
+ },
+
+ /* Slugify search */
+ slugify: function(text) {
+ return text.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '')
+ },
+
+ /* Add id to item list. */
+ addItemId: function (item) {
+ item.id = _.uniqueId(this.index + "_option_");
+ item.displayProductCount = this.displayProductCount && (item.count >= 1)
+ return item;
+ },
+ });
+});
diff --git a/view/frontend/web/navigation/range-slider-widget.js b/view/frontend/web/navigation/range-slider-widget.js
new file mode 100644
index 000000000..4bbd39340
--- /dev/null
+++ b/view/frontend/web/navigation/range-slider-widget.js
@@ -0,0 +1,84 @@
+define([
+ "jquery",
+ 'Magento_Catalog/js/price-utils',
+ 'mage/template',
+ "jquery/ui"
+], function ($, priceUtil, mageTemplate) {
+
+ "use strict";
+
+ $.widget('algolia.rangeSlider', {
+
+ options: {
+ fromLabel : '[data-role=from-label]',
+ toLabel : '[data-role=to-label]',
+ sliderBar : '[data-role=slider-bar]',
+ applyButton : '[data-role=apply-range]',
+ rate : 1.0000
+ },
+
+ _create: function () {
+ this._initSliderValues();
+ this._createSlider();
+ this._refreshDisplay();
+ this.element.find(this.options.applyButton).bind('click', this._applyRange.bind(this));
+ },
+
+ _initSliderValues: function() {
+ this.rate = parseFloat(this.options.rate);
+ this.from = Math.floor(this.options.currentValue.from * this.rate);
+ this.to = Math.round(this.options.currentValue.to * this.rate);
+ this.minValue = Math.floor(this.options.minValue * this.rate);
+ this.maxValue = Math.round(this.options.maxValue * this.rate);
+ },
+
+ _createSlider: function() {
+ this.element.find(this.options.sliderBar).slider({
+ range: true,
+ min: this.minValue,
+ max: this.maxValue,
+ values: [ this.from, this.to ],
+ slide: this._onSliderChange.bind(this),
+ step: this.options.step
+ });
+ },
+
+ _onSliderChange : function (ev, ui) {
+ this.from = ui.values[0];
+ this.to = ui.values[1];
+ this._refreshDisplay();
+ },
+
+ _refreshDisplay: function() {
+
+ if (this.element.find('[data-role=from-label]')) {
+ this.element.find('[data-role=from-label]').html(this._formatLabel(this.from));
+ }
+
+ if (this.element.find('[data-role=to-label]')) {
+ this.element.find('[data-role=to-label]').html(this._formatLabel(this.to));
+ }
+ },
+
+ _applyRange : function () {
+ var range = {
+ from : this.from * (1 / this.rate),
+ to : this.to * (1 / this.rate)
+ };
+ var url = mageTemplate(this.options.urlTemplate)(range);
+ this.element.find(this.options.applyButton).attr('href', url);
+ },
+
+ _formatLabel : function(value) {
+ var formattedValue = value;
+
+ if (this.options.fieldFormat) {
+ formattedValue = priceUtil.formatPrice(value, this.options.fieldFormat);
+ }
+
+ return formattedValue;
+ }
+ });
+
+ return $.algolia.rangeSlider;
+});
diff --git a/view/frontend/web/template/attribute-filter.html b/view/frontend/web/template/attribute-filter.html
new file mode 100644
index 000000000..931354a96
--- /dev/null
+++ b/view/frontend/web/template/attribute-filter.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+