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"> <field name="arch" type="xml">
<form string="Create Product in WooCommerce"> <form string="Create Product in WooCommerce">
<sheet> <sheet>
<!-- Step indicator --> <!-- Step indicator using Odoo statusbar widget -->
<div class="o_statusbar_status mb-3"> <field name="step" widget="statusbar"
<span class="badge bg-primary me-1" invisible="step != 'basic'"> statusbar_visible="basic,images,content,review"/>
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>
<field name="instance_id" invisible="1"/> <field name="instance_id" invisible="1"/>
<field name="wc_category_id" invisible="1"/>
<!-- ========== STEP 1: Basic Info ========== --> <!-- ========== STEP 1: Basic Info ========== -->
<group invisible="step != 'basic'"> <div invisible="step != 'basic'">
<group string="Product Selection"> <group>
<field name="odoo_product_id"/> <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>
<group string="Product Names"> <group>
<field name="product_name" placeholder="PRODUCT NAME IN CAPS"/> <group string="Category">
<field name="wc_product_name" placeholder="Product Name In Title Case"/> <field name="odoo_category_id"/>
<field name="wc_category_name" readonly="1"/>
</group>
</group> </group>
<group string="Category"> </div>
<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>
<!-- ========== STEP 2: Images ========== --> <!-- ========== STEP 2: Images ========== -->
<group invisible="step != 'images'"> <div invisible="step != 'images'">
<group string="Product Images"> <div class="mb-3">
<field name="image_1" filename="image_1_filename" widget="image"/> <button name="action_ai_tag_images" type="object"
<field name="image_1_filename" invisible="1"/> string="AI Tag Images" class="oe_highlight me-2"
<field name="image_2" filename="image_2_filename" widget="image"/> icon="fa-magic"/>
<field name="image_2_filename" invisible="1"/> <button name="action_geo_tag_images" type="object"
<field name="image_3" filename="image_3_filename" widget="image"/> string="Geo-tag Images" class="btn-secondary"
<field name="image_3_filename" invisible="1"/> icon="fa-map-marker"/>
<field name="image_4" filename="image_4_filename" widget="image"/> <field name="images_geotagged" invisible="1"/>
<field name="image_4_filename" invisible="1"/> </div>
<field name="image_5" filename="image_5_filename" widget="image"/> <group>
<field name="image_5_filename" invisible="1"/> <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>
<group string="Image Processing"> <field name="image_metadata" invisible="1"/>
<div> </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>
<!-- ========== STEP 3: Content & SEO ========== --> <!-- ========== STEP 3: Content & SEO ========== -->
<group invisible="step != 'content'"> <div invisible="step != 'content'">
<group string="Product Information for AI" colspan="2"> <separator string="Product Information for AI"/>
<field name="raw_product_info" colspan="2" <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."/> 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" <group>
<field name="ai_keywords" string="Keywords"
placeholder="mobility, wheelchair, medical equipment, ..."/> placeholder="mobility, wheelchair, medical equipment, ..."/>
</group> </group>
<div colspan="2" class="mb-3"> <div class="mb-3">
<button name="action_ai_generate_all" type="object" <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"/> icon="fa-magic"/>
</div> </div>
<group string="Product Title" colspan="2">
<div class="d-flex align-items-start"> <separator string="Product Title"/>
<field name="wc_title" class="flex-grow-1"/> <group>
<button name="action_ai_generate_title" type="object" <field name="wc_title" string="WC Product Title"/>
string="AI" class="btn btn-outline-primary btn-sm ms-2" <button name="action_ai_generate_title" type="object"
icon="fa-magic"/> string="AI Generate" class="oe_link"
</div> icon="fa-magic"/>
</group> </group>
<group string="Short Description" colspan="2">
<div> <separator string="Short Description"/>
<button name="action_ai_generate_short_desc" type="object" <button name="action_ai_generate_short_desc" type="object"
string="AI Generate" class="btn btn-outline-primary btn-sm mb-1" string="AI Generate" class="oe_link mb-1"
icon="fa-magic"/> icon="fa-magic"/>
</div> <field name="short_description" widget="html" nolabel="1"/>
<field name="short_description" widget="html" nolabel="1" colspan="2"/>
</group> <separator string="Long Description"/>
<group string="Long Description" colspan="2"> <button name="action_ai_generate_long_desc" type="object"
<div> string="AI Generate" class="oe_link mb-1"
<button name="action_ai_generate_long_desc" type="object" icon="fa-magic"/>
string="AI Generate" class="btn btn-outline-primary btn-sm mb-1" <field name="long_description" widget="html" nolabel="1"/>
icon="fa-magic"/>
</div> <separator string="SEO Meta Data"/>
<field name="long_description" widget="html" nolabel="1" colspan="2"/> <div class="mb-2">
</group> <button name="action_ai_generate_meta" type="object"
<group string="SEO Meta Data" colspan="2"> string="AI Generate Meta" class="oe_link"
<div class="mb-2"> icon="fa-magic"/>
<button name="action_ai_generate_meta" type="object" <button name="action_ai_generate_keywords" type="object"
string="AI Generate Meta" class="btn btn-outline-primary btn-sm" string="AI Generate Keywords" class="oe_link ms-3"
icon="fa-magic"/> icon="fa-magic"/>
<button name="action_ai_generate_keywords" type="object" </div>
string="AI Generate Keywords" class="btn btn-outline-primary btn-sm ms-2" <group>
icon="fa-magic"/>
</div>
<field name="meta_title" placeholder="SEO title (under 60 characters)"/> <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"/> <field name="seo_keywords" placeholder="keyword1, keyword2, keyword3"/>
</group> </group>
</group> </div>
<!-- ========== STEP 4: Review & Create ========== --> <!-- ========== STEP 4: Review & Create ========== -->
<group invisible="step != 'review'"> <div invisible="step != 'review'">
<group string="Product Names"> <group>
<field name="product_name" readonly="1"/> <group string="Product">
<field name="wc_product_name" readonly="1"/> <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>
<group string="Category &amp; Tax"> <group>
<field name="odoo_category_id" readonly="1"/> <group string="Category">
<field name="wc_category_name" readonly="1"/> <field name="odoo_category_id" readonly="1"/>
<field name="wc_tax_class" 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>
<group string="Pricing"> </div>
<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>
</sheet> </sheet>
<footer> <footer>
<button string="&#8592; Back" type="object" name="action_back" <button string="Back" type="object" name="action_back"
class="btn btn-secondary" class="btn-secondary"
invisible="step == 'basic'"/> invisible="step == 'basic'"
<button string="Next &#8594;" type="object" name="action_next" icon="fa-arrow-left"/>
class="btn btn-primary" <button string="Next" type="object" name="action_next"
invisible="step == 'review'"/> class="oe_highlight"
invisible="step == 'review'"
icon="fa-arrow-right"/>
<button string="Create in WooCommerce" type="object" name="action_create_product" <button string="Create in WooCommerce" type="object" name="action_create_product"
class="btn btn-success" class="oe_highlight"
invisible="step != 'review'" invisible="step != 'review'"
icon="fa-cloud-upload"/> icon="fa-cloud-upload"/>
<button string="Cancel" class="btn btn-secondary" special="cancel"/> <button string="Cancel" class="btn-secondary" special="cancel"/>
</footer> </footer>
</form> </form>
</field> </field>