Risvana Cybro
3 weeks ago
@ -0,0 +1,53 @@ |
|||||
|
.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg |
||||
|
:target: https://www.gnu.org/licenses/agpl-3.0-standalone.html |
||||
|
:alt: License: AGPL-3 |
||||
|
|
||||
|
Ecommerce Sequential Variant Selector |
||||
|
================================= |
||||
|
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. |
||||
|
|
||||
|
Configuration |
||||
|
============= |
||||
|
* No additional configurations needed |
||||
|
|
||||
|
Company |
||||
|
------- |
||||
|
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
||||
|
|
||||
|
License |
||||
|
------- |
||||
|
GNU AFFERO GENERAL PUBLIC LICENSE, Version 3 (AGPLv3) |
||||
|
(https://www.gnu.org/licenses/agpl.html) |
||||
|
|
||||
|
Credits |
||||
|
------- |
||||
|
* Developers: (V16) Abhijith PG, |
||||
|
(V17) Farook Al Ameen, |
||||
|
(V18) Henna Mehjabin |
||||
|
Contact: odoo@cybrosys.com |
||||
|
|
||||
|
|
||||
|
Contacts |
||||
|
-------- |
||||
|
* Mail Contact : odoo@cybrosys.com |
||||
|
* Website : https://cybrosys.com |
||||
|
|
||||
|
Bug Tracker |
||||
|
----------- |
||||
|
Bugs are tracked on GitHub Issues. In case of trouble, please check there if |
||||
|
your issue has already been reported. |
||||
|
|
||||
|
Maintainer |
||||
|
========== |
||||
|
.. image:: https://cybrosys.com/images/logo.png |
||||
|
:target: https://cybrosys.com |
||||
|
|
||||
|
This module is maintained by Cybrosys Technologies. |
||||
|
|
||||
|
For support and more information, please visit `Our Website <https://cybrosys.com/>`__ |
||||
|
|
||||
|
Further information |
||||
|
=================== |
||||
|
HTML Description: `<static/description/index.html>`__ |
||||
@ -0,0 +1,21 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
||||
|
# Author: Henna Mehjabin (odoo@cybrosys.com) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
@ -0,0 +1,49 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
||||
|
# Author: Henna Mehjabin (odoo@cybrosys.com) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
{ |
||||
|
'name': "Ecommerce Sequential Variant Selector", |
||||
|
'version': '18.0.1.0.0', |
||||
|
'category': 'Website', |
||||
|
'summary': """Sequential attribute selection in odoo eCommerce""", |
||||
|
'description': "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.", |
||||
|
'author': "Cybrosys Techno Solutions", |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'website': "https://www.cybrosys.com", |
||||
|
'depends': ['base', 'website_sale'], |
||||
|
'data': [ |
||||
|
'views/variant_templates.xml', |
||||
|
], |
||||
|
'assets': { |
||||
|
'web.assets_frontend': [ |
||||
|
'website_sale_variant_selection/static/src/js/variant_mixin.js', |
||||
|
'website_sale_variant_selection/static/src/scss/website_sale_attribute_selection.scss', |
||||
|
], |
||||
|
}, |
||||
|
'images': ['static/description/banner.jpg'], |
||||
|
'license': 'AGPL-3', |
||||
|
'installable': True, |
||||
|
'application': True, |
||||
|
'auto_install': False, |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
## Module <website_sale_variant_selection> |
||||
|
|
||||
|
#### 28.07.2025 |
||||
|
#### Version 18.0.1.0.0 |
||||
|
#### ADD |
||||
|
- Initial Commit for Ecommerce Sequential Variant Selector |
||||
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 600 B |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 926 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 875 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 565 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 912 KiB |
|
After Width: | Height: | Size: 767 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 760 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 697 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 815 KiB |
|
After Width: | Height: | Size: 45 KiB |
@ -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; |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,5 @@ |
|||||
|
.disabled { |
||||
|
opacity: 0.36; |
||||
|
z-index: 100; |
||||
|
pointer-events: none; |
||||
|
} |
||||
@ -0,0 +1,131 @@ |
|||||
|
<?xml version="1.0" encoding="utf-8"?> |
||||
|
<odoo> |
||||
|
<!-- Custom Template to Extend the Base Variants Template --> |
||||
|
<template id="website_sale.variants"> |
||||
|
<div class="attr_container"> |
||||
|
<t t-set="attribute_exclusions" |
||||
|
t-value="product._get_attribute_exclusions(parent_combination, parent_name)"/> |
||||
|
<ul t-attf-class="list-unstyled js_add_cart_variants mb-0 #{ul_class}" |
||||
|
t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"> |
||||
|
<t t-foreach="product.valid_product_template_attribute_line_ids" t-as="ptal"> |
||||
|
<!-- Attributes selection is hidden if there is only one value available and it's not a custom value --> |
||||
|
<li t-att-data-attribute_id="ptal.attribute_id.id" |
||||
|
t-att-data-ptal_index="ptal_index" |
||||
|
t-att-data-attribute_name="ptal.attribute_id.name" |
||||
|
t-att-data-attribute_display_type="ptal.attribute_id.display_type" |
||||
|
t-attf-class="variant_attribute disabled #{'d-none' if len(ptal.product_template_value_ids._only_active()) == 1 and not ptal.product_template_value_ids._only_active()[0].is_custom else ''}"> |
||||
|
<!-- Used to customize layout if the only available attribute value is custom --> |
||||
|
<t t-set="single" t-value="len(ptal.product_template_value_ids._only_active()) == 1"/> |
||||
|
<t t-set="single_and_custom" |
||||
|
t-value="single and ptal.product_template_value_ids._only_active()[0].is_custom"/> |
||||
|
<strong t-field="ptal.attribute_id.name" class="attribute_name"/> |
||||
|
<t t-if="ptal.attribute_id.display_type == 'select'"> |
||||
|
<select |
||||
|
t-att-data-attribute_id="ptal.attribute_id.id" |
||||
|
t-attf-class="form-select css_attribute_select o_wsale_product_attribute js_variant_change #{ptal.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}" |
||||
|
t-att-name="'ptal-%s' % ptal.id"> |
||||
|
<t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav"> |
||||
|
<option t-att-value="ptav.id" |
||||
|
t-att-data-value_id="ptav.id" |
||||
|
t-att-data-value_name="ptav.name" |
||||
|
t-att-data-attribute_name="ptav.attribute_id.name" |
||||
|
t-att-data-is_custom="ptav.is_custom" |
||||
|
t-att-data-is_single="single" |
||||
|
t-att-data-is_single_and_custom="single_and_custom"> |
||||
|
<span t-field="ptav.name"/> |
||||
|
<t t-call="website_sale.badge_extra_price"/> |
||||
|
</option> |
||||
|
</t> |
||||
|
</select> |
||||
|
</t> |
||||
|
<t t-if="ptal.attribute_id.display_type == 'radio'"> |
||||
|
<ul t-att-data-attribute_id="ptal.attribute_id.id" |
||||
|
t-attf-class="list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}"> |
||||
|
<t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav"> |
||||
|
<li class="list-inline-item mb-3 js_attribute_value" style="margin: 0;"> |
||||
|
<label class="col-form-label"> |
||||
|
<div class="form-check"> |
||||
|
<input type="radio" |
||||
|
t-attf-class="form-check-input js_variant_change #{ptal.attribute_id.create_variant}" |
||||
|
t-att-name="'ptal-%s' % ptal.id" |
||||
|
t-att-value="ptav.id" |
||||
|
t-att-data-value_id="ptav.id" |
||||
|
t-att-data-value_name="ptav.name" |
||||
|
t-att-data-attribute_name="ptav.attribute_id.name" |
||||
|
t-att-data-is_custom="ptav.is_custom" |
||||
|
t-att-data-is_single="single" |
||||
|
t-att-data-is_single_and_custom="single_and_custom" |
||||
|
t-att-data-checked="ptav in combination"/> |
||||
|
<div class="radio_input_value form-check-label"> |
||||
|
<span t-field="ptav.name"/> |
||||
|
<t t-call="website_sale.badge_extra_price"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</label> |
||||
|
</li> |
||||
|
</t> |
||||
|
</ul> |
||||
|
</t> |
||||
|
<t t-if="ptal.attribute_id.display_type == 'pills'"> |
||||
|
<ul t-att-data-attribute_id="ptal.attribute_id.id" |
||||
|
t-attf-class="btn-group-toggle list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}" |
||||
|
data-bs-toggle="buttons"> |
||||
|
<t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav"> |
||||
|
<li t-attf-class="o_variant_pills btn btn-primary mb-1 list-inline-item js_attribute_value"> |
||||
|
<input type="radio" |
||||
|
t-attf-class="js_variant_change #{ptal.attribute_id.create_variant}" |
||||
|
t-att-name="'ptal-%s' % ptal.id" |
||||
|
t-att-value="ptav.id" |
||||
|
t-att-data-value_id="ptav.id" |
||||
|
t-att-id="ptav.id" |
||||
|
t-att-data-value_name="ptav.name" |
||||
|
t-att-data-attribute_name="ptav.attribute_id.name" |
||||
|
t-att-data-is_custom="ptav.is_custom" |
||||
|
t-att-data-is_single_and_custom="single_and_custom" |
||||
|
t-att-autocomplete="off"/> |
||||
|
<div class="radio_input_value o_variant_pills_input_value"> |
||||
|
<span t-field="ptav.name"/> |
||||
|
<t t-call="website_sale.badge_extra_price"/> |
||||
|
</div> |
||||
|
</li> |
||||
|
</t> |
||||
|
</ul> |
||||
|
</t> |
||||
|
<t t-if="ptal.attribute_id.display_type == 'color'"> |
||||
|
<ul t-att-data-attribute_id="ptal.attribute_id.id" |
||||
|
t-attf-class="list-inline o_wsale_product_attribute #{'d-none' if single_and_custom else ''}"> |
||||
|
<t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav"> |
||||
|
<li class="list-inline-item me-1"> |
||||
|
<label t-attf-style="background-color:#{ptav.html_color or ptav.product_attribute_value_id.name if not ptav.is_custom else ''}" |
||||
|
t-attf-class="css_attribute_color #{'custom_value' if ptav.is_custom else ''} #{'transparent' if (not ptav.is_custom and not ptav.html_color) else ''}"> |
||||
|
<input type="radio" |
||||
|
t-attf-class="js_variant_change #{ptal.attribute_id.create_variant}" |
||||
|
t-att-name="'ptal-%s' % ptal.id" |
||||
|
t-att-value="ptav.id" |
||||
|
t-att-title="ptav.name" |
||||
|
t-att-data-value_id="ptav.id" |
||||
|
t-att-data-value_name="ptav.name" |
||||
|
t-att-data-attribute_name="ptav.attribute_id.name" |
||||
|
t-att-data-is_custom="ptav.is_custom" |
||||
|
t-att-data-is_single="single" |
||||
|
t-att-data-is_single_and_custom="single_and_custom"/> |
||||
|
</label> |
||||
|
</li> |
||||
|
</t> |
||||
|
</ul> |
||||
|
</t> |
||||
|
</li> |
||||
|
</t> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template id="badge_extra_price" name="Badge Extra Price"> |
||||
|
<t t-set="combination_info_variant" t-value="product._get_combination_info(ptav, pricelist=pricelist)"/> |
||||
|
<span class="badge rounded-pill text-bg-light border" t-if="combination_info_variant['price_extra']"> |
||||
|
<span class="sign_badge_price_extra" t-out="combination_info_variant['price_extra'] > 0 and '+' or '-'"/> |
||||
|
<span t-out="abs(combination_info_variant['price_extra'])" class="variant_price_extra text-muted fst-italic" |
||||
|
style="white-space: nowrap;" |
||||
|
t-options='{"widget": "monetary", "display_currency": (pricelist or product).currency_id}'/> |
||||
|
</span> |
||||
|
</template> |
||||
|
</odoo> |
||||