[IMP] website_sale: move the product input options
This commit moves the product search input snippet options from a modal to the option side panel. Part of #45176 task-2189645 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Thanh Dodeur
@@ -1,65 +0,0 @@
|
||||
odoo.define('website_sale.s_products_searchbar_options', function (require) {
|
||||
'use strict';
|
||||
|
||||
const Dialog = require('web.Dialog');
|
||||
const options = require('web_editor.snippets.options');
|
||||
|
||||
const { qweb, _t } = require('web.core');
|
||||
|
||||
options.registry.ProductsSearchBar = options.Class.extend({
|
||||
xmlDependencies: ['/website_sale/static/src/xml/website_sale.editor.xml'],
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this.$searchProductsInput = this.$('.search-query');
|
||||
this.$searchOrderField = this.$('.o_wsale_search_order_by');
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
openSearchbarSettings: function (previewMode, widgetValue, params) {
|
||||
var self = this;
|
||||
new Dialog(this, {
|
||||
title: _t("Products Search Bar"),
|
||||
$content: $(qweb.render('website_sale.dialog.productsSearchBar', {
|
||||
currentOrderBy: this.$searchOrderField.val(),
|
||||
currentLimit: parseInt(this.$searchProductsInput.attr('data-limit')),
|
||||
currentDisplayDescription: this.$searchProductsInput.attr('data-display-description') === 'true',
|
||||
currentDisplayPrice: this.$searchProductsInput.attr('data-display-price') === 'true',
|
||||
currentDisplayImage: this.$searchProductsInput.attr('data-display-image') === 'true',
|
||||
})),
|
||||
buttons: [
|
||||
{
|
||||
text: _t("Save"),
|
||||
classes: 'btn-primary',
|
||||
click: function () {
|
||||
self.$searchOrderField.attr({
|
||||
'value': this.$('#order_by').val(),
|
||||
});
|
||||
self.$searchProductsInput.attr({
|
||||
'data-limit': this.$('#use_autocomplete').is(':checked') ? this.$('#limit').val() : 0,
|
||||
'data-display-description': this.$('#display_description').is(':checked'),
|
||||
'data-display-price': this.$('#display_price').is(':checked'),
|
||||
'data-display-image': this.$('#display_image').is(':checked'),
|
||||
});
|
||||
self.$target.trigger('content_changed');
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: _t("Discard"),
|
||||
close: true,
|
||||
},
|
||||
],
|
||||
}).open();
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<!-- Products Search Bar settings dialog -->
|
||||
<div t-name="website_sale.dialog.productsSearchBar">
|
||||
<div class="form-group">
|
||||
<label for="order_by">Search filter to use <b>by default</b></label>
|
||||
<select class="custom-select" id="order_by">
|
||||
<option value="" t-att-selected="!currentOrderBy ? 'selected' : undefined">Default order</option>
|
||||
<option value="name asc" t-att-selected="currentOrderBy == 'name asc' ? 'selected' : undefined">Order by name (A-Z)</option>
|
||||
<option value="name desc" t-att-selected="currentOrderBy == 'name desc' ? 'selected' : undefined">Order by name (Z-A)</option>
|
||||
<option value="list_price asc" t-att-selected="currentOrderBy == 'list_price asc' ? 'selected' : undefined">Order by price: low to high</option>
|
||||
<option value="list_price desc" t-att-selected="currentOrderBy == 'list_price desc' ? 'selected' : undefined">Order by price: high to low</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch" data-toggle="collapse" data-target="#use_autocomplete_options">
|
||||
<input type="checkbox" class="custom-control-input" id="use_autocomplete" t-att-checked="currentLimit > 0 ? 'checked' : undefined"/>
|
||||
<label class="custom-control-label" for="use_autocomplete">Add product suggestions</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="use_autocomplete_options" t-attf-class="collapse #{currentLimit > 0 ? 'show' : ''}">
|
||||
<div class="form-group">
|
||||
<label for="limit">Maximum number of products to display</label>
|
||||
<select class="custom-select" id="limit">
|
||||
<option t-foreach="20" t-as="limit"
|
||||
t-esc="limit + 1" t-att-value="limit + 1"
|
||||
t-att-selected="currentLimit == (limit + 1) ? 'selected' : undefined"/>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="display_description" t-att-checked="currentDisplayDescription ? 'checked' : undefined"/>
|
||||
<label class="custom-control-label" for="display_description">Display product <b>description</b> and allow to search in</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="display_price" t-att-checked="currentDisplayPrice ? 'checked' : undefined"/>
|
||||
<label class="custom-control-label" for="display_price">Display product <b>price</b></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="display_image" t-att-checked="currentDisplayImage ? 'checked' : undefined"/>
|
||||
<label class="custom-control-label" for="display_image">Display product <b>image</b></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</templates>
|
||||
@@ -26,9 +26,23 @@
|
||||
|
||||
<template id="searchbar_input_snippet_options" inherit_id="website_sale.snippet_options" name="search bar snippet options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-js="ProductsSearchBar"
|
||||
data-selector=".s_wsale_products_searchbar_input">
|
||||
<we-button data-no-preview="true" data-open-searchbar-settings="">Products Search Bar</we-button>
|
||||
<div data-selector=".s_wsale_products_searchbar_input">
|
||||
<we-select string="Order by" id="order_by" data-attribute-name="value" data-apply-to=".o_wsale_search_order_by">
|
||||
<we-button data-select-attribute="">default</we-button>
|
||||
<we-button data-select-attribute="name asc">name (A-Z)</we-button>
|
||||
<we-button data-select-attribute="name desc">name (Z-A)</we-button>
|
||||
<we-button data-select-attribute="list_price asc">price (low to high)</we-button>
|
||||
<we-button data-select-attribute="list_price desc">price (high to low)</we-button>
|
||||
</we-select>
|
||||
<t t-set="unit">products</t>
|
||||
<we-input string="Suggestions" data-name="product_limit_opt" data-attribute-name="limit"
|
||||
data-apply-to=".search-query" data-select-data-attribute="" t-att-data-unit="unit"/>
|
||||
<we-checkbox string="Description" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayDescription"
|
||||
data-apply-to=".search-query"/>
|
||||
<we-checkbox string="Price" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayPrice"
|
||||
data-apply-to=".search-query"/>
|
||||
<we-checkbox string="Image" data-dependencies="product_limit_opt" data-select-data-attribute="true" data-attribute-name="displayImage"
|
||||
data-apply-to=".search-query"/>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .s_wsale_products_searchbar_input</xpath>
|
||||
|
||||
@@ -47,7 +47,6 @@
|
||||
<script type="text/javascript" src="/website_sale/static/src/js/website_sale.editor.js"></script>
|
||||
<script type="text/javascript" src="/website_sale/static/src/js/website_sale_form_editor.js"></script>
|
||||
<script type="text/javascript" src="/website_sale/static/src/js/tours/website_sale_shop_frontend.js"></script>
|
||||
<script type="text/javascript" src="/website_sale/static/src/snippets/s_products_searchbar/options.js"></script>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user