[IMP] (website_)sale: improve product configurator layout
Targets commit d3530eb07e
Purpose
=======
- Improved the layout of the product configurator window in both sale order and web shop
- Added some other minor improvements such as editable="bottom" instead of "top", fields reordering, ...
closes odoo/odoo#27567
This commit is contained in:
Aurélien Warnon
@@ -21,6 +21,7 @@
|
||||
<group name="main_fields">
|
||||
<label for="name" string="Attribute Name"/>
|
||||
<field name="name" nolabel="1"/>
|
||||
<field name="create_variant" widget="radio"/>
|
||||
</group>
|
||||
</group>
|
||||
<group name="values_ids">
|
||||
@@ -31,7 +32,6 @@
|
||||
<field name="name"/>
|
||||
</tree>
|
||||
</field>
|
||||
<field name="create_variant" widget="radio"/>
|
||||
</group>
|
||||
</form>
|
||||
</field>
|
||||
@@ -111,7 +111,7 @@
|
||||
<field name="name" />
|
||||
<field name="price_extra" />
|
||||
<field name="exclude_for" widget="one2many_list" mode="tree">
|
||||
<tree editable="top">
|
||||
<tree editable="bottom">
|
||||
<field name="product_tmpl_id" />
|
||||
<field name="value_ids" widget="many2many_tags" options="{'no_create': true}" />
|
||||
</tree>
|
||||
|
||||
@@ -108,18 +108,26 @@ var ProductConfiguratorMixin = {
|
||||
$variantContainer.find('.variant_custom_value_label').remove();
|
||||
$variantContainer.find('.variant_custom_value').remove();
|
||||
|
||||
var $label = $('<label>', {
|
||||
html: attributeValueName + ': ',
|
||||
class: 'variant_custom_value_label'
|
||||
});
|
||||
|
||||
var $input = $('<input>', {
|
||||
type: 'text',
|
||||
'data-attribute_value_id': attributeValueId,
|
||||
'data-attribute_value_name': attributeValueName,
|
||||
class: 'variant_custom_value form-control'
|
||||
});
|
||||
$variantContainer.append($label).append($input);
|
||||
|
||||
var isRadioInput = $target.is('input[type=radio]') &&
|
||||
$target.closest('label.css_attribute_color').length === 0;
|
||||
|
||||
if (isRadioInput) {
|
||||
$input.addClass('custom_value_radio');
|
||||
$target.closest('div').after($input);
|
||||
} else {
|
||||
var $label = $('<label>', {
|
||||
html: attributeValueName + ': ',
|
||||
class: 'variant_custom_value_label'
|
||||
});
|
||||
$variantContainer.append($label).append($input);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$variantContainer.find('.variant_custom_value_label').remove();
|
||||
|
||||
@@ -63,23 +63,47 @@ label.css_attribute_color.css_not_available {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.variant_attribute {
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
.attribute_name {
|
||||
padding-bottom: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio_input {
|
||||
margin-right: 0.7rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.radio_input_value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.variant_custom_value {
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.custom_value_radio {
|
||||
margin: 0.3rem 0rem 0.3rem 1.6rem;
|
||||
}
|
||||
|
||||
.variant_custom_value_label {
|
||||
margin: 0.3rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.o_product_configurator {
|
||||
.product_detail_img {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.variant_custom_value {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.variant_custom_value_label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.configurator_container {
|
||||
ul ul {
|
||||
margin-left: 1.5rem;
|
||||
.variant_attribute {
|
||||
.custom_value_radio {
|
||||
margin: 0.3rem 0rem 0.3rem 2.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,7 +157,7 @@ label.css_attribute_color.css_not_available {
|
||||
}
|
||||
|
||||
.td-qty {
|
||||
width: 130px;
|
||||
width: 200px;
|
||||
a.input-group-addon {
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="td-qty">
|
||||
<div class="float-right">
|
||||
<div class="float-left">
|
||||
<t t-call="sale.variants"/>
|
||||
</div>
|
||||
</td>
|
||||
@@ -177,9 +177,9 @@
|
||||
<t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
|
||||
<ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
|
||||
<t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
|
||||
<li t-att-data-attribute_id="variant_id.attribute_id.id" t-att-data-attribute_name="variant_id.attribute_id.name">
|
||||
<li t-att-data-attribute_id="variant_id.attribute_id.id" t-att-data-attribute_name="variant_id.attribute_id.name" class="variant_attribute">
|
||||
|
||||
<strong t-field="variant_id.attribute_id.name"/>
|
||||
<strong t-field="variant_id.attribute_id.name" class="attribute_name" />
|
||||
|
||||
<t t-if="variant_id.attribute_id.type == 'select'">
|
||||
<select
|
||||
@@ -210,25 +210,28 @@
|
||||
<t t-set="inc" t-value="0"/>
|
||||
<t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
|
||||
<li class="form-group js_attribute_value" style="margin: 0;">
|
||||
<label class="col-form-label" style="margin: 0 20px;">
|
||||
<input type="radio"
|
||||
t-attf-class="js_variant_change #{variant_id.attribute_id.create_variant}"
|
||||
t-att-checked="'checked' if not inc else None"
|
||||
t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
|
||||
t-att-value="value_id.id"
|
||||
t-att-data-value_id="value_id.product_attribute_value_id.id"
|
||||
t-att-data-value_name="value_id.name"
|
||||
t-att-data-attribute_name="value_id.attribute_id.name"
|
||||
t-att-data-is_custom="value_id.is_custom"
|
||||
style="vertical-align: top; margin-right: 10px;"/>
|
||||
<span t-field="value_id.name"/>
|
||||
<span class="badge badge-pill" t-if="value_id.price_extra">
|
||||
<t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
|
||||
"widget": "monetary",
|
||||
"from_currency": product.currency_id,
|
||||
"display_currency": to_currency or website.currency_id
|
||||
}'/>
|
||||
</span>
|
||||
<label class="col-form-label">
|
||||
<div>
|
||||
<input type="radio"
|
||||
t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
|
||||
t-att-checked="'checked' if not inc else None"
|
||||
t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
|
||||
t-att-value="value_id.id"
|
||||
t-att-data-value_id="value_id.product_attribute_value_id.id"
|
||||
t-att-data-value_name="value_id.name"
|
||||
t-att-data-attribute_name="value_id.attribute_id.name"
|
||||
t-att-data-is_custom="value_id.is_custom" />
|
||||
<div class="radio_input_value">
|
||||
<span t-field="value_id.name"/>
|
||||
<span class="badge badge-pill" t-if="value_id.price_extra">
|
||||
<t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
|
||||
"widget": "monetary",
|
||||
"from_currency": product.currency_id,
|
||||
"display_currency": to_currency or website.currency_id
|
||||
}'/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<t t-set="inc" t-value="inc+1"/>
|
||||
|
||||
@@ -25,10 +25,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
ul ul {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
h1[itemprop="name"],
|
||||
.oe_product_cart form h5 {
|
||||
word-wrap: break-word;
|
||||
|
||||
Reference in New Issue
Block a user