From 2b095b8b1ed83d2e8e165d654a5415d16ec48a5e Mon Sep 17 00:00:00 2001 From: stcc-odoo Date: Mon, 26 Jun 2023 11:11:17 +0000 Subject: [PATCH] [FIX] sale, *: fix pill variant styling *: sale_product_configurator Enterprise PR: odoo/enterprise#42551 Steps to reproduce: 1. Install website_sale 2. Create product P - Go to Attributes & Variants tab - Add a line - Create and edit attribute "PILL" - Display Type = Pills - Add some attribute values - Save & Close - Add the attribute values in the list view - Save the product 3. Go to website product page Issue: The pills have a visible radio button inside, requiring users to click on the radio button to change the variant. In V15, there was no radio button, and users could click anywhere on the variant container to change the variant. The change in behaviour happened because the jquery code for handling button clicks has changed. In V15 jquery, clicking a button would trigger a change event, which would then be captured by the owl event selector `change [data-attribute_exclusions]`, and the `onChangeVariant` method was called. In version 16, jQuery no longer triggers a change event when clicking a button. Solution: Hide the radio input visually, then convert the variant text to a label. When clicking on the label, the corresponding radio input is checked. This means that the whole button is not clickable anymore, only the text. opw-3185147 closes odoo/odoo#130615 X-original-commit: dc7af6a4c555740b2c2b13efe57cd971e14dc67f Related: odoo/enterprise#45103 Signed-off-by: Stefan-Calin Crainiciuc (stcc) Signed-off-by: Valentin Chevalier --- .../product_template_attribute_line.scss | 1 + .../static/src/js/sale_variant_mixin.js | 9 ++++ .../static/src/scss/product_configurator.scss | 7 +++ ...ebsite_sale_shop_archived_variant_multi.js | 54 +++++++++++++++++++ addons/website_sale/tests/test_customize.py | 43 +++++++++++++++ .../website_sale/views/variant_templates.xml | 5 +- 6 files changed, 117 insertions(+), 2 deletions(-) diff --git a/addons/sale_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss b/addons/sale_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss index 8c75f7fcb5e..b17003cb654 100644 --- a/addons/sale_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss +++ b/addons/sale_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss @@ -73,6 +73,7 @@ cursor: default !important; &.btn.active { + color: $white; background-color: map-get($theme-colors, 'primary'); } &:not(.active) { diff --git a/addons/website_sale/static/src/js/sale_variant_mixin.js b/addons/website_sale/static/src/js/sale_variant_mixin.js index 341d1f014f9..4bb28364101 100644 --- a/addons/website_sale/static/src/js/sale_variant_mixin.js +++ b/addons/website_sale/static/src/js/sale_variant_mixin.js @@ -13,6 +13,7 @@ var _t = core._t; var VariantMixin = { events: { 'change .css_attribute_color input': '_onChangeColorAttribute', + 'change .o_variant_pills input' :'_onChangePillsAttribute', 'change .main_product:not(.in_cart) input.js_quantity': 'onChangeAddQuantity', 'change [data-attribute_exclusions]': 'onChangeVariant' }, @@ -717,6 +718,14 @@ var VariantMixin = { .addClass("active"); }, + _onChangePillsAttribute: function (ev) { + var $parent = $(ev.target).closest('.js_product'); + $parent.find('.o_variant_pills') + .removeClass("active") + .filter(':has(input:checked)') + .addClass("active"); + }, + /** * Extension point for website_sale * diff --git a/addons/website_sale/static/src/scss/product_configurator.scss b/addons/website_sale/static/src/scss/product_configurator.scss index 2044539eb6f..bd55cbbcecc 100644 --- a/addons/website_sale/static/src/scss/product_configurator.scss +++ b/addons/website_sale/static/src/scss/product_configurator.scss @@ -196,6 +196,13 @@ label.css_attribute_color.css_not_available { color: map-get($grays, '600'); background-color: map-get($grays, '200'); } + + input { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + opacity: 0; + } } } diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_archived_variant_multi.js b/addons/website_sale/static/tests/tours/website_sale_shop_archived_variant_multi.js index 99d9f5087e5..57169ed3853 100644 --- a/addons/website_sale/static/tests/tours/website_sale_shop_archived_variant_multi.js +++ b/addons/website_sale/static/tests/tours/website_sale_shop_archived_variant_multi.js @@ -2,6 +2,17 @@ import { registry } from "@web/core/registry"; +function fail(errorMessage) { + const tour = registry.get("tourManager"); + tour._consume_tour(tour.running_tour, errorMessage); +} + +function assert(current, expected, info) { + if (current !== expected) { + fail(info + ': "' + current + '" instead of "' + expected + '".'); + } +} + registry.category("web_tour.tours").add('tour_shop_archived_variant_multi', { test: true, url: '/shop?search=Test Product 2', @@ -41,3 +52,46 @@ registry.category("web_tour.tours").add('tour_shop_archived_variant_multi', { run: function () {}, }, ]}); + +registry.category("web_tour.tours").add('test_09_pills_variant', { + test: true, + url: '/shop?search=Test Product 2', + steps: () => [ + { + content: "select Test Product", + trigger: '.oe_product_cart a:containsExact("Test Product 2")', + }, + { + content: "check there are two radio boxes, both hidden", + trigger: '.js_main_product', + run: function() { + var buttons = $('input.js_variant_change'); + + function isVisuallyHidden(elem) { + const style = window.getComputedStyle(elem); + return style.display === "none" || + style.visibility === "hidden" || + style.opacity === "0" || + (style.width === "0px" && style.height === "0px") + } + + assert(buttons.length, 2, "there should be two radio inputs") + assert(isVisuallyHidden(buttons[0]), true, "first radio input is not hidden") + assert(isVisuallyHidden(buttons[1]), true, "second radio input is not hidden") + assert(buttons[0].checked, true, "first radio input should be checked") + }, + }, + { + content: "click on the second variant label", + trigger: 'label:contains("Small")', + }, + { + content: 'check second variant is selected', + trigger: 'li.o_variant_pills.active:contains("Small")', + run: function () { + var button = $('input.js_variant_change[data-attribute_name="Size"][data-value_name="Small"]'); + assert(button.length, 1, "there should be one radio input") + assert(button[0].checked, true, "the radio input should be checked") + } + }, +]}); diff --git a/addons/website_sale/tests/test_customize.py b/addons/website_sale/tests/test_customize.py index fcd6a242ed6..a475d142a01 100644 --- a/addons/website_sale/tests/test_customize.py +++ b/addons/website_sale/tests/test_customize.py @@ -402,3 +402,46 @@ class TestUi(HttpCaseWithUserDemo, HttpCaseWithUserPortal): product_template.product_variant_ids[-1].active = False self.start_tour("/", 'tour_shop_archived_variant_multi', login="portal") + + def test_09_pills_variant(self): + """The goal of this test is to make sure that you can click anywhere on a pill + and still trigger a variant change. The radio input be visually hidden. + + Using "portal" to have various users in the tests. + """ + + attribute_1 = self.env['product.attribute'].create([ + { + 'name': 'Size', + 'create_variant': 'always', + 'display_type': 'pills', + }, + ]) + + attribute_values = self.env['product.attribute.value'].create([ + { + 'name': 'Large', + 'attribute_id': attribute_1.id, + 'sequence': 1, + }, + { + 'name': 'Small', + 'attribute_id': attribute_1.id, + 'sequence': 2, + }, + ]) + + product_template = self.env['product.template'].create({ + 'name': 'Test Product 2', + 'is_published': True, + }) + + self.env['product.template.attribute.line'].create([ + { + 'attribute_id': attribute_1.id, + 'product_tmpl_id': product_template.id, + 'value_ids': [(6, 0, attribute_values.ids)], + }, + ]) + + self.start_tour("/", 'test_09_pills_variant', login="portal") diff --git a/addons/website_sale/views/variant_templates.xml b/addons/website_sale/views/variant_templates.xml index b20d6449d3d..0feea14ec23 100644 --- a/addons/website_sale/views/variant_templates.xml +++ b/addons/website_sale/views/variant_templates.xml @@ -82,10 +82,11 @@ t-att-data-is_custom="ptav.is_custom" t-att-data-is_single_and_custom="single_and_custom" t-att-autocomplete="off"/> -
+
+