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"/> -
+
+