+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+ 
+
+ + Ecommerce Sequential Variant Selector + +
++ +
+ +
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+
+ This module enables customers to select product attribute values from the website in an ordered manner. It allows customers to choose attribute values one by one
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+
+ 
+ A specific order for selecting variant attributes.
+
+
+ A specific order for selecting variant attributes.
+
+
+ Easily integrates with the existing eCommerce setup.
+
+
+ Easily integrates with the existing eCommerce setup.
+
+
+
+ 
+
+
+ Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Shop Product Page +
+
+
+ 
+
+
+ Select the first attribute +
+
+
+ 
+
+
+ Then the next attribute +
+
+
+ 
+
+
+ When all the attributes selected +
+
+
+
+
+ 
+
+
+ Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
\ No newline at end of file
diff --git a/website_sale_variant_selection/static/src/js/variant_mixin.js b/website_sale_variant_selection/static/src/js/variant_mixin.js
new file mode 100644
index 000000000..293fd53ad
--- /dev/null
+++ b/website_sale_variant_selection/static/src/js/variant_mixin.js
@@ -0,0 +1,80 @@
+odoo.define('website_sale_variant_selection.VariantMixinExtend', function (require) {
+ 'use strict';
+ var publicWidget = require('web.public.widget');
+
+ publicWidget.registry.AttributeSelection = publicWidget.Widget.extend({
+ selector: '.attr_container',
+ events: {
+ 'click .variant_attribute': '_onClickAttribute'
+ },
+
+ /**
+ * Initializes the widget and enables the first visible attribute.
+ */
+ willStart: function () {
+ this.enableFirstVisibleAttribute();
+ return this._super.apply(this, arguments);
+ },
+ /**
+ * Enables the first visible attribute and selects the only value of each hidden attribute.
+ */
+ enableFirstVisibleAttribute: function () {
+ const variantAttributes = document.querySelectorAll('.attr_container ul li.variant_attribute');
+ var firstVisibleAttribute;
+ variantAttributes.forEach(function (varAttr) {
+ if (!(firstVisibleAttribute) && !varAttr.classList.contains('d-none')) {
+ firstVisibleAttribute = varAttr;
+ }
+ if (firstVisibleAttribute) {
+ firstVisibleAttribute.classList.remove('disabled');
+ }
+ // "checking/selecting" the only value of each of the hidden attributes
+ if (varAttr.classList.contains('d-none')) {
+ varAttr.querySelectorAll('input[type="radio"], option').forEach(function (child) {
+
+ if (child.tagName === 'OPTION') {
+ child.setAttribute('selected', true);
+ } else if (child.tagName === 'INPUT') {
+ child.checked = true;
+ }
+ });
+ }
+ });
+ },
+
+ /**
+ * Handles the click event on a variant attribute.
+ *
+ * @param {Event} ev - The click event.
+ */
+ _onClickAttribute: function (ev) {
+ var clickedElement = ev.target;
+ if (clickedElement.classList.contains('js_variant_change')) {
+ var variantAttribute = clickedElement.closest('.variant_attribute');
+ var nxtSibling = variantAttribute.nextElementSibling;
+ var nxtVisibleSibling = this._getNxtVisibleSibling(nxtSibling);
+ if (nxtVisibleSibling) {
+ nxtVisibleSibling.classList.remove('disabled');
+ }
+ }
+ },
+
+ /**
+ * Gets the next visible sibling of a given element.
+ *
+ * @param {Element} nextSibling - The next sibling element.
+ * @returns {Element|boolean} - The next visible sibling or false if none found.
+ */
+ _getNxtVisibleSibling: function (nextSibling) {
+ if (nextSibling && nextSibling.classList.contains('d-none')) {
+ let nxtSib = nextSibling.nextElementSibling;
+ if (nxtSib) {
+ return this._getNxtVisibleSibling(nxtSib);
+ } else {
+ return false;
+ }
+ }
+ return nextSibling;
+ }
+ });
+});
\ No newline at end of file
diff --git a/website_sale_variant_selection/static/src/scss/website_sale_attribute_selection.scss b/website_sale_variant_selection/static/src/scss/website_sale_attribute_selection.scss
new file mode 100644
index 000000000..ed17c8e60
--- /dev/null
+++ b/website_sale_variant_selection/static/src/scss/website_sale_attribute_selection.scss
@@ -0,0 +1,5 @@
+.disabled {
+ opacity: 0.36;
+ z-index: 100;
+ pointer-events: none;
+}
diff --git a/website_sale_variant_selection/views/variant_templates.xml b/website_sale_variant_selection/views/variant_templates.xml
new file mode 100644
index 000000000..75d6cfb03
--- /dev/null
+++ b/website_sale_variant_selection/views/variant_templates.xml
@@ -0,0 +1,141 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ -
+
-
+
+
+ + + + + ++ +-
+
- + + +
+ ++ +-
+
-
+
+ + ++
+
+
+ ++ +-
+
- + + +
+