+
+
+
+
+
+
+
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..902d4bc7a
--- /dev/null
+++ b/website_sale_variant_selection/static/src/js/variant_mixin.js
@@ -0,0 +1,135 @@
+/** @odoo-module */
+import publicWidget from '@web/legacy/js/public/public_widget';
+
+publicWidget.registry.AttributeSelection = publicWidget.Widget.extend({
+ selector: '.attr_container',
+ events: {
+ 'change .js_variant_change': '_onVariantChange',
+ 'click .js_variant_change': '_onVariantChange'
+ },
+
+ start() {
+ this._setupInitialState();
+ return this._super(...arguments);
+ },
+
+ /**
+ * Sets up initial state and handles hidden attributes
+ * @private
+ */
+ _setupInitialState() {
+ const variants = Array.from(this.el.querySelectorAll('li.variant_attribute'));
+
+ // Handle hidden attributes first
+ variants.filter(variant => variant.classList.contains('d-none'))
+ .forEach(hiddenVariant => {
+ // Auto-select values for hidden attributes
+ hiddenVariant.querySelectorAll('input[type="radio"], select option').forEach(input => {
+ if (input.tagName === 'OPTION') {
+ input.selected = true;
+ } else {
+ input.checked = true;
+ }
+ });
+ });
+
+ // Handle visible variants
+ const visibleVariants = variants.filter(v => !v.classList.contains('d-none'));
+
+ // Disable all visible variants except the first one
+ visibleVariants.forEach((variant, index) => {
+ index === 0 ? this._enableVariant(variant) : this._disableVariant(variant);
+ });
+ },
+
+ /**
+ * Handles variant selection changes
+ * @private
+ * @param {Event} ev
+ */
+ _onVariantChange(ev) {
+ const input = ev.target;
+ if (!input.classList.contains('js_variant_change')) {
+ return;
+ }
+
+ const currentVariant = input.closest('li.variant_attribute');
+ if (!currentVariant) {
+ return;
+ }
+
+ this._updateHighlight(input);
+
+ // Find and enable next visible variant
+ const nextVariant = this._getNextVisibleVariant(currentVariant);
+ if (nextVariant) {
+ this._enableVariant(nextVariant);
+ } else {
+ // If last variant, enable all for editing
+ this.el.querySelectorAll('li.variant_attribute:not(.d-none)')
+ .forEach(variant => this._enableVariant(variant));
+ }
+
+ ev.stopPropagation();
+ },
+
+ /**
+ * Finds the next visible variant
+ * @private
+ * @param {Element} currentVariant
+ * @returns {Element|null}
+ */
+ _getNextVisibleVariant(currentVariant) {
+ let next = currentVariant.nextElementSibling;
+ while (next && next.classList.contains('d-none')) {
+ next = next.nextElementSibling;
+ }
+ return next;
+ },
+
+ /**
+ * Updates highlight state for selected variant
+ * @private
+ * @param {Element} input
+ */
+ _updateHighlight(input) {
+ const container = input.closest('li.variant_attribute');
+
+ if (input.closest('.css_attribute_color')) {
+ container.querySelectorAll('.css_attribute_color').forEach(el => {
+ el.classList.toggle('active', el === input.closest('.css_attribute_color'));
+ });
+ } else if (input.type === 'radio') {
+ container.querySelectorAll('label').forEach(label => {
+ label.classList.toggle('active', label === input.closest('label'));
+ });
+ }
+ },
+
+ /**
+ * Enables a variant
+ * @private
+ * @param {Element} variant
+ */
+ _enableVariant(variant) {
+ variant.classList.remove('disabled');
+ variant.querySelectorAll('input, select').forEach(input => {
+ input.disabled = false;
+ if (input.checked || input.selected) {
+ this._updateHighlight(input);
+ }
+ });
+ },
+
+ /**
+ * Disables a variant
+ * @private
+ * @param {Element} variant
+ */
+ _disableVariant(variant) {
+ variant.classList.add('disabled');
+ variant.querySelectorAll('input, select').forEach(input => {
+ input.disabled = true;
+ });
+ }
+});
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..25ce54a11
--- /dev/null
+++ b/website_sale_variant_selection/views/variant_templates.xml
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Supports:
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+ Availability:
+
+
+ On Premise
+
+
+ Odoo.sh
+
+
+ Odoo Online
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 +
+Ecommerce Sequential Variant Selector +
+
+ 
+
+
+
+
+
+
+ 
+ 
+ 
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + A specific order for selecting variant attributes. +
++
+
+
+
+
+
+
+
+
+ + Easily integrates with the existing eCommerce setup. +
++
+
+
+
+
+
+
+
+
+ + Prevents invalid variant selections. +
++
+
+
+
+
+
+
+
+
+
+ Ecommerce Sequential Variant Selector
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ +
+
+
+ + Open the Website Shop Product Page +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ + Select the first attribute of the product . +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+ + Then next attribute of the product +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + When all the attributes of the product are selected. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Guided Variant Selection on Product Page. +
+
+
+ + Customers select product attributes (like color, size, material) one at + a time in a fixed sequence, reducing confusion and making the buying + process smoother. +
+
+
+
+
+
+
+
+
+
+ + Dynamic Option Filtering Based on Selections.
+
+
+ + After each attribute is selected, the next attribute options are + automatically filtered to show only valid combinations, preventing "No + variant found" errors. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + It makes users select product attributes step-by-step—each + next option unlocks only after the previous one is selected. +
+
+
+
+
+
+
+ + Yes, the sequence follows the order set in the product’s + attribute configuration. +
+
+
+
+
+
+ + Yes, it works with all standard variant combinations defined + in Odoo. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 30th October, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+ -
+
-
+
+
+ + + + + ++ +-
+
- + + +
+ ++ +-
+
-
+
+ + ++
+
+
+ ++ +-
+
- + + +
+ +
+