fix: redesign product creation wizard — use Odoo statusbar, clean layout

- Replaced hardcoded badge step indicator with Odoo's native statusbar widget
- Removed all hardcoded Bootstrap colour classes (bg-primary, text-muted, etc.)
- Using oe_highlight and oe_link for buttons (theme-aware)
- Cleaner 2-column layout for basic info and review steps
- Full-width separators and fields for content step
- Images in 2-column grid
- SEO meta fields use proper group layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-01 16:23:07 -04:00
parent b83c9fd318
commit bc2bba14aa

View File

@@ -7,197 +7,163 @@
<field name="arch" type="xml">
<form string="Create Product in WooCommerce">
<sheet>
<!-- Step indicator -->
<div class="o_statusbar_status mb-3">
<span class="badge bg-primary me-1" invisible="step != 'basic'">
1. Basic Info
</span>
<span class="badge bg-secondary me-1" invisible="step == 'basic'">
1. Basic Info &#10003;
</span>
<span class="badge bg-primary me-1" invisible="step != 'images'">
2. Images
</span>
<span class="badge bg-secondary me-1" invisible="step in ('basic', 'images')">
2. Images &#10003;
</span>
<span class="badge bg-light text-muted me-1" invisible="step not in ('basic',)">
2. Images
</span>
<span class="badge bg-primary me-1" invisible="step != 'content'">
3. Content &amp; SEO
</span>
<span class="badge bg-secondary me-1" invisible="step == 'review'">
</span>
<span class="badge bg-light text-muted me-1" invisible="step not in ('basic', 'images')">
3. Content &amp; SEO
</span>
<span class="badge bg-primary me-1" invisible="step != 'review'">
4. Review &amp; Create
</span>
<span class="badge bg-light text-muted me-1" invisible="step == 'review'">
4. Review &amp; Create
</span>
</div>
<!-- Step indicator using Odoo statusbar widget -->
<field name="step" widget="statusbar"
statusbar_visible="basic,images,content,review"/>
<field name="instance_id" invisible="1"/>
<field name="wc_category_id" invisible="1"/>
<!-- ========== STEP 1: Basic Info ========== -->
<group invisible="step != 'basic'">
<group string="Product Selection">
<field name="odoo_product_id"/>
<div invisible="step != 'basic'">
<group>
<group string="Product">
<field name="odoo_product_id"/>
<field name="product_name" placeholder="PRODUCT NAME IN CAPS"/>
<field name="wc_product_name" placeholder="Product Name In Title Case"/>
<field name="sku" string="Internal Reference"/>
</group>
<group string="Pricing &amp; Tax">
<field name="sale_price"/>
<field name="cost_price"/>
<field name="sales_tax_id"/>
<field name="purchase_tax_id"/>
<field name="wc_tax_class" readonly="1"/>
</group>
</group>
<group string="Product Names">
<field name="product_name" placeholder="PRODUCT NAME IN CAPS"/>
<field name="wc_product_name" placeholder="Product Name In Title Case"/>
<group>
<group string="Category">
<field name="odoo_category_id"/>
<field name="wc_category_name" readonly="1"/>
</group>
</group>
<group string="Category">
<field name="odoo_category_id"/>
<field name="wc_category_name"/>
</group>
<group string="Pricing">
<field name="sale_price"/>
<field name="cost_price"/>
</group>
<group string="Identification">
<field name="sku"/>
</group>
<group string="Taxes">
<field name="sales_tax_id"/>
<field name="purchase_tax_id"/>
<field name="wc_tax_class" readonly="1"/>
</group>
<field name="wc_category_id" invisible="1"/>
</group>
</div>
<!-- ========== STEP 2: Images ========== -->
<group invisible="step != 'images'">
<group string="Product Images">
<field name="image_1" filename="image_1_filename" widget="image"/>
<field name="image_1_filename" invisible="1"/>
<field name="image_2" filename="image_2_filename" widget="image"/>
<field name="image_2_filename" invisible="1"/>
<field name="image_3" filename="image_3_filename" widget="image"/>
<field name="image_3_filename" invisible="1"/>
<field name="image_4" filename="image_4_filename" widget="image"/>
<field name="image_4_filename" invisible="1"/>
<field name="image_5" filename="image_5_filename" widget="image"/>
<field name="image_5_filename" invisible="1"/>
<div invisible="step != 'images'">
<div class="mb-3">
<button name="action_ai_tag_images" type="object"
string="AI Tag Images" class="oe_highlight me-2"
icon="fa-magic"/>
<button name="action_geo_tag_images" type="object"
string="Geo-tag Images" class="btn-secondary"
icon="fa-map-marker"/>
<field name="images_geotagged" invisible="1"/>
</div>
<group>
<group>
<field name="image_1" widget="image" string="Featured Image"/>
<field name="image_1_filename" invisible="1"/>
<field name="image_2" widget="image" string="Image 2"/>
<field name="image_2_filename" invisible="1"/>
<field name="image_3" widget="image" string="Image 3"/>
<field name="image_3_filename" invisible="1"/>
</group>
<group>
<field name="image_4" widget="image" string="Image 4"/>
<field name="image_4_filename" invisible="1"/>
<field name="image_5" widget="image" string="Image 5"/>
<field name="image_5_filename" invisible="1"/>
</group>
</group>
<group string="Image Processing">
<div>
<button name="action_ai_tag_images" type="object"
string="AI Tag Images" class="btn btn-primary me-2"
icon="fa-magic"/>
<button name="action_geo_tag_images" type="object"
string="Geo-tag Images" class="btn btn-secondary"
icon="fa-map-marker"/>
</div>
<field name="images_geotagged" readonly="1"/>
<field name="image_metadata" readonly="1" widget="text"
placeholder="AI metadata will appear here after tagging..."/>
</group>
</group>
<field name="image_metadata" invisible="1"/>
</div>
<!-- ========== STEP 3: Content & SEO ========== -->
<group invisible="step != 'content'">
<group string="Product Information for AI" colspan="2">
<field name="raw_product_info" colspan="2"
placeholder="Type everything you know about this product — features, materials, use cases, target audience, dimensions, etc. The AI will use this to generate all descriptions."/>
<field name="ai_keywords"
<div invisible="step != 'content'">
<separator string="Product Information for AI"/>
<field name="raw_product_info" nolabel="1" widget="text"
placeholder="Type everything you know about this product — features, materials, use cases, target audience, dimensions, etc. The AI will use this to generate all descriptions."/>
<group>
<field name="ai_keywords" string="Keywords"
placeholder="mobility, wheelchair, medical equipment, ..."/>
</group>
<div colspan="2" class="mb-3">
<div class="mb-3">
<button name="action_ai_generate_all" type="object"
string="Generate All with AI" class="btn btn-primary"
string="Generate All with AI" class="oe_highlight"
icon="fa-magic"/>
</div>
<group string="Product Title" colspan="2">
<div class="d-flex align-items-start">
<field name="wc_title" class="flex-grow-1"/>
<button name="action_ai_generate_title" type="object"
string="AI" class="btn btn-outline-primary btn-sm ms-2"
icon="fa-magic"/>
</div>
<separator string="Product Title"/>
<group>
<field name="wc_title" string="WC Product Title"/>
<button name="action_ai_generate_title" type="object"
string="AI Generate" class="oe_link"
icon="fa-magic"/>
</group>
<group string="Short Description" colspan="2">
<div>
<button name="action_ai_generate_short_desc" type="object"
string="AI Generate" class="btn btn-outline-primary btn-sm mb-1"
icon="fa-magic"/>
</div>
<field name="short_description" widget="html" nolabel="1" colspan="2"/>
</group>
<group string="Long Description" colspan="2">
<div>
<button name="action_ai_generate_long_desc" type="object"
string="AI Generate" class="btn btn-outline-primary btn-sm mb-1"
icon="fa-magic"/>
</div>
<field name="long_description" widget="html" nolabel="1" colspan="2"/>
</group>
<group string="SEO Meta Data" colspan="2">
<div class="mb-2">
<button name="action_ai_generate_meta" type="object"
string="AI Generate Meta" class="btn btn-outline-primary btn-sm"
icon="fa-magic"/>
<button name="action_ai_generate_keywords" type="object"
string="AI Generate Keywords" class="btn btn-outline-primary btn-sm ms-2"
icon="fa-magic"/>
</div>
<separator string="Short Description"/>
<button name="action_ai_generate_short_desc" type="object"
string="AI Generate" class="oe_link mb-1"
icon="fa-magic"/>
<field name="short_description" widget="html" nolabel="1"/>
<separator string="Long Description"/>
<button name="action_ai_generate_long_desc" type="object"
string="AI Generate" class="oe_link mb-1"
icon="fa-magic"/>
<field name="long_description" widget="html" nolabel="1"/>
<separator string="SEO Meta Data"/>
<div class="mb-2">
<button name="action_ai_generate_meta" type="object"
string="AI Generate Meta" class="oe_link"
icon="fa-magic"/>
<button name="action_ai_generate_keywords" type="object"
string="AI Generate Keywords" class="oe_link ms-3"
icon="fa-magic"/>
</div>
<group>
<field name="meta_title" placeholder="SEO title (under 60 characters)"/>
<field name="meta_description" placeholder="SEO description (under 160 characters)"/>
<field name="meta_description" widget="text"
placeholder="SEO description (under 160 characters)"/>
<field name="seo_keywords" placeholder="keyword1, keyword2, keyword3"/>
</group>
</group>
</div>
<!-- ========== STEP 4: Review & Create ========== -->
<group invisible="step != 'review'">
<group string="Product Names">
<field name="product_name" readonly="1"/>
<field name="wc_product_name" readonly="1"/>
<div invisible="step != 'review'">
<group>
<group string="Product">
<field name="product_name" readonly="1"/>
<field name="wc_title" readonly="1" string="WC Title"/>
<field name="sku" readonly="1"/>
</group>
<group string="Pricing &amp; Tax">
<field name="sale_price" readonly="1"/>
<field name="cost_price" readonly="1"/>
<field name="sales_tax_id" readonly="1"/>
<field name="wc_tax_class" readonly="1"/>
</group>
</group>
<group string="Category &amp; Tax">
<field name="odoo_category_id" readonly="1"/>
<field name="wc_category_name" readonly="1"/>
<field name="wc_tax_class" readonly="1"/>
<group>
<group string="Category">
<field name="odoo_category_id" readonly="1"/>
<field name="wc_category_name" readonly="1"/>
</group>
<group string="SEO">
<field name="meta_title" readonly="1"/>
<field name="meta_description" readonly="1"/>
<field name="seo_keywords" readonly="1"/>
</group>
</group>
<group string="Pricing">
<field name="sale_price" readonly="1"/>
<field name="cost_price" readonly="1"/>
<field name="sku" readonly="1"/>
</group>
<group string="Taxes">
<field name="sales_tax_id" readonly="1"/>
<field name="purchase_tax_id" readonly="1"/>
</group>
<group string="WooCommerce Content" colspan="2">
<field name="wc_title" readonly="1"/>
<field name="meta_title" readonly="1"/>
<field name="meta_description" readonly="1"/>
<field name="seo_keywords" readonly="1"/>
</group>
<group string="Images" colspan="2">
<field name="images_geotagged" readonly="1"/>
</group>
</group>
</div>
</sheet>
<footer>
<button string="&#8592; Back" type="object" name="action_back"
class="btn btn-secondary"
invisible="step == 'basic'"/>
<button string="Next &#8594;" type="object" name="action_next"
class="btn btn-primary"
invisible="step == 'review'"/>
<button string="Back" type="object" name="action_back"
class="btn-secondary"
invisible="step == 'basic'"
icon="fa-arrow-left"/>
<button string="Next" type="object" name="action_next"
class="oe_highlight"
invisible="step == 'review'"
icon="fa-arrow-right"/>
<button string="Create in WooCommerce" type="object" name="action_create_product"
class="btn btn-success"
class="oe_highlight"
invisible="step != 'review'"
icon="fa-cloud-upload"/>
<button string="Cancel" class="btn btn-secondary" special="cancel"/>
<button string="Cancel" class="btn-secondary" special="cancel"/>
</footer>
</form>
</field>