Skip to content
Permalink
Browse files

[REF] website_sale, *: review layouts and options

* website_sale_comparison, website_sale_wishlist

- Use cards to match event and forum recent design refactoring
- Make the shop use responsive and perfect-squared product grid items
- Make the shop product list view option a CSS-only option, which
  visitors can toggle to/out.
- Allows visitors to choose the number of product to display.
- Use better XML and JS for existing options.

Part of odoo#31147
task-1925327
  • Loading branch information...
qsm-odoo committed Feb 20, 2019
1 parent 573851d commit deef968a22d2faa4b930f50c1662c6d388e5b430
@@ -1036,7 +1036,7 @@ def add_product(self, name=None, category=0, **post):
})
return "/shop/product/%s?enable_editor=1" % slug(product.product_tmpl_id)

@http.route(['/shop/change_styles'], type='json', auth="public")
@http.route(['/shop/change_styles'], type='json', auth='user')
def change_styles(self, id, style_id):
product = request.env['product.template'].browse(id)

@@ -1058,7 +1058,7 @@ def change_styles(self, id, style_id):

return not active

@http.route(['/shop/change_sequence'], type='json', auth="public")
@http.route(['/shop/change_sequence'], type='json', auth='user')
def change_sequence(self, id, sequence):
product_tmpl = request.env['product.template'].browse(id)
if sequence == "top":
@@ -1070,7 +1070,7 @@ def change_sequence(self, id, sequence):
elif sequence == "down":
product_tmpl.set_sequence_down()

@http.route(['/shop/change_size'], type='json', auth="public")
@http.route(['/shop/change_size'], type='json', auth='user')
def change_size(self, id, x, y):
product = request.env['product.template'].browse(id)
return product.write({'website_size_x': x, 'website_size_y': y})
@@ -79,102 +79,151 @@ publicWidget.registry.websiteSaleCurrency = publicWidget.Widget.extend({
},
});

options.registry.website_sale = options.Class.extend({
function reload() {
if (window.location.href.match(/\?enable_editor/)) {
window.location.reload();
} else {
window.location.href = window.location.href.replace(/\?(enable_editor=1&)?|#.*|$/, '?enable_editor=1&');
}
}

options.registry.WebsiteSaleProductsItem = options.Class.extend({
events: _.extend({}, options.Class.prototype.events || {}, {
'mouseenter .o_wsale_soptions_menu_sizes table': '_onTableMouseEnter',
'mouseleave .o_wsale_soptions_menu_sizes table': '_onTableMouseLeave',
'mouseover .o_wsale_soptions_menu_sizes td': '_onTableItemMouseEnter',
'click .o_wsale_soptions_menu_sizes td': '_onTableItemClick',
}),

/**
* @override
*/
start: function () {
var self = this;
this.product_tmpl_id = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));

var size_x = parseInt(this.$target.attr("colspan") || 1);
var size_y = parseInt(this.$target.attr("rowspan") || 1);
this.productTemplateID = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));

var $size = this.$el.find('div[name="size"]');
var $select = $size.find('tr:eq(0) td:lt('+size_x+')');
if (size_y >= 2) $select = $select.add($size.find('tr:eq(1) td:lt('+size_x+')'));
if (size_y >= 3) $select = $select.add($size.find('tr:eq(2) td:lt('+size_x+')'));
if (size_y >= 4) $select = $select.add($size.find('tr:eq(3) td:lt('+size_x+')'));
$select.addClass("selected");
var defs = [this._super.apply(this, arguments)];

this._rpc({
defs.push(this._rpc({
model: 'product.style',
method: 'search_read',
}).then(function (data) {
var $ul = self.$el.find('div[name="style"]');
for (var k in data) {
$ul.append(
$('<a class="dropdown-item" role="menuitem" data-style="'+data[k]['id']+'" data-toggle-class="'+data[k]['html_class']+'" data-no-preview="true"/>')
.append(data[k]['name']));
$('<a class="dropdown-item" role="menuitem" data-style="' + data[k]['id'] + '" data-toggle-class="' + data[k]['html_class'] + '"/>')
.append(data[k]['name'])
);
}
self._setActive();
});
}));

this.bind_resize();
},
reload: function () {
if (window.location.href.match(/\?enable_editor/)) {
window.location.reload();
} else {
window.location.href = window.location.href.replace(/\?(enable_editor=1&)?|#.*|$/, '?enable_editor=1&');
}
return $.when.apply($, defs);
},
bind_resize: function () {
var self = this;
this.$el.on('mouseenter', 'div[name="size"] table', function (event) {
$(event.currentTarget).addClass("oe_hover");
});
this.$el.on('mouseleave', 'div[name="size"] table', function (event) {
$(event.currentTarget).removeClass("oe_hover");
});
this.$el.on('mouseover', 'div[name="size"] td', function (event) {
var $td = $(event.currentTarget);
var $table = $td.closest("table");
var x = $td.index()+1;
var y = $td.parent().index()+1;

var tr = [];
for (var yi=0; yi<y; yi++) tr.push("tr:eq("+yi+")");
var $select_tr = $table.find(tr.join(","));
var td = [];
for (var xi=0; xi<x; xi++) td.push("td:eq("+xi+")");
var $select_td = $select_tr.find(td.join(","));

$table.find("td").removeClass("select");
$select_td.addClass("select");
});
this.$el.on('click', 'div[name="size"] td', function (event) {
var $td = $(event.currentTarget);
var x = $td.index()+1;
var y = $td.parent().index()+1;
self._rpc({
route: '/shop/change_size',
params: {
id: self.product_tmpl_id,
x: x,
y: y,
},
}).then(self.reload);
});
},
style: function (previewMode, value, $li) {

//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------

/**
* @see this.selectClass for params
*/
style: function (previewMode, value, $opt) {
this._rpc({
route: '/shop/change_styles',
params: {
id: this.product_tmpl_id,
style_id: value,
'id': this.productTemplateID,
'style_id': value,
},
});
},
go_to: function (previewMode, value) {
/**
* @see this.selectClass for params
*/
changeSequence: function (previewMode, value, $opt) {
this._rpc({
route: '/shop/change_sequence',
params: {
id: this.product_tmpl_id,
id: this.productTemplateID,
sequence: value,
},
}).then(this.reload);
}
}).then(reload);
},

//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------

/**
* @override
*/
_setActive: function () {
var sizeX = parseInt(this.$target.attr('colspan') || 1);
var sizeY = parseInt(this.$target.attr('rowspan') || 1);

var $size = this.$el.find('.o_wsale_soptions_menu_sizes');
$size.find('tr:nth-child(-n + ' + sizeY + ') td:nth-child(-n + ' + sizeX + ')')
.addClass('selected');

return this._super.apply(this, arguments);
},

//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------

/**
* @private
*/
_onTableMouseEnter: function (ev) {
$(ev.currentTarget).addClass('oe_hover');
},
/**
* @private
*/
_onTableMouseLeave: function (ev) {
$(ev.currentTarget).removeClass('oe_hover');
},
/**
* @private
*/
_onTableItemMouseEnter: function (ev) {
var $td = $(ev.currentTarget);
var $table = $td.closest("table");
var x = $td.index()+1;
var y = $td.parent().index()+1;

var tr = [];
for (var yi = 0; yi < y; yi++) {
tr.push("tr:eq(" + yi + ")");
}
var $selectTr = $table.find(tr.join(","));
var td = [];
for (var xi = 0; xi < x; xi++) {
td.push("td:eq(" + xi + ")");
}
var $selectTd = $selectTr.find(td.join(","));

$table.find("td").removeClass("select");
$selectTd.addClass("select");
},
/**
* @private
*/
_onTableItemClick: function (ev) {
var $td = $(ev.currentTarget);
var x = $td.index() + 1;
var y = $td.parent().index() + 1;
this._rpc({
route: '/shop/change_size',
params: {
id: this.productTemplateID,
x: x,
y: y,
},
}).then(reload);
},
});

/**
@@ -149,6 +149,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
'click input.js_product_change': 'onChangeVariant',
// dirty fix: prevent options modal events to be triggered and bubbled
'change oe_optional_products_modal [data-attribute_exclusions]': 'onChangeVariant',
'change .o_wsale_apply_layout': '_onApplyShopLayoutChange',
}),

/**
@@ -187,6 +188,15 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat

this._startZoom();

var $active = null;
if (this.$('#products_grid').hasClass('o_wsale_layout_list')) {
$active = this.$('.o_wsale_apply_list');
} else {
$active = this.$('.o_wsale_apply_grid');
}
$active.find('input').prop('checked', true);
$active.button('toggle').blur();

return def;
},
/**
@@ -442,6 +452,14 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(ProductConfigurat
// Handlers
//--------------------------------------------------------------------------

/**
* @private
* @param {Event} ev
*/
_onApplyShopLayoutChange: function (ev) {
var switchToList = $(ev.currentTarget).find('.o_wsale_apply_list input').is(':checked');
this.$('#products_grid').toggleClass('o_wsale_layout_list', switchToList);
},
/**
* @private
* @param {MouseEvent} ev
@@ -1,28 +1,25 @@
.oe_overlay_options {
.dropdown {
div[name="size"] {
table {
margin-left: 20px;
}
.o_wsale_soptions_menu_sizes {
table {
margin-left: 20px;

td {
margin: 0;
padding: 0;
width: 20px;
height: 20px;
border: 1px #dddddd solid;
cursor: pointer;
td {
margin: 0;
padding: 0;
width: 20px;
height: 20px;
border: 1px #dddddd solid;
cursor: pointer;

&.selected {
background-color: #B1D4F1;
}
&.selected {
background-color: #B1D4F1;
}
}

table.oe_hover td.selected {
&.oe_hover td {
&.selected {
background-color: transparent;
}

table.oe_hover td.select {
&.select {
background-color: #B1D4F1;
}
}
Oops, something went wrong.

0 comments on commit deef968

Please sign in to comment.
You can’t perform that action at this time.