From dde1eb57c7cb8265278a1d3c438b75cb6dc35b7f Mon Sep 17 00:00:00 2001
From: divy-odoo <divy@odoo.com>
Date: Tue, 26 Sep 2023 12:40:43 +0530
Subject: [PATCH] [IMP] point_of_sale: display image as color attribute value

With this commit, Image options for the colour variant have been added.
now, the user can identify the pattern values by the image.

- It will display the image instead of HEX color if the image is set.

task-3381738

closes odoo/odoo#132685

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 addons/point_of_sale/models/pos_session.py                    | 4 ++--
 .../product_configurator_popup/product_configurator_popup.xml | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/addons/point_of_sale/models/pos_session.py b/addons/point_of_sale/models/pos_session.py
index dfd12be4940..4abfd4fa3d3 100644
--- a/addons/point_of_sale/models/pos_session.py
+++ b/addons/point_of_sale/models/pos_session.py
@@ -1630,14 +1630,14 @@ class PosSession(models.Model):
             [('attribute_id', 'in', product_attributes.ids)],
             ['attribute_id', 'attribute_line_id', 'product_attribute_value_id', 'price_extra'],
         )
-        product_template_attribute_values.product_attribute_value_id.fetch(['name', 'is_custom', 'html_color'])
+        product_template_attribute_values.product_attribute_value_id.fetch(['name', 'is_custom', 'html_color', 'image'])
 
         key1 = lambda ptav: (ptav.attribute_line_id.id, ptav.attribute_id.id)
         key2 = lambda ptav: (ptav.attribute_line_id.id, ptav.attribute_id)
         res = {}
         for key, group in groupby(sorted(product_template_attribute_values, key=key1), key=key2):
             attribute_line_id, attribute = key
-            values = [{**ptav.product_attribute_value_id.read(['name', 'is_custom', 'html_color'])[0],
+            values = [{**ptav.product_attribute_value_id.read(['name', 'is_custom', 'html_color', 'image'])[0],
                        'price_extra': ptav.price_extra} for ptav in list(group)]
             res[attribute_line_id] = {
                 'id': attribute_line_id,
diff --git a/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml b/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
index 885a561ca69..303444f1c36 100644
--- a/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
+++ b/addons/point_of_sale/static/src/app/store/product_configurator_popup/product_configurator_popup.xml
@@ -50,8 +50,10 @@
             <ul class="color_attribute_list d-flex gap-3">
                 <li t-foreach="values" t-as="value" t-key="value.id" class="color_attribute_list_item">
                     <t t-set="is_custom" t-value="is_custom || (value.is_custom &amp;&amp; value.id == state.attribute_value_ids)"/>
+                    <t t-set="img_style" t-value="value.image ? 'background:url(/web/image/product.attribute.value/' + value.id + '/image); background-size:cover;' : ''"/>
+                    <t t-set="color_style" t-value="value.is_custom ? '' : 'background-color: ' + value.html_color" />
                     <label t-attf-class="configurator_color rounded border {{ value.id == state.attribute_value_ids ? 'active border-3 border-primary' : 'border-3 border-secondary' }}"
-                        t-attf-style="background-color: {{ value.html_color }};" t-att-data-color="value.name">
+                        t-attf-style="#{img_style or color_style}" t-att-data-color="value.name">
                         <input class="m-4 opacity-0" type="radio" t-model="state.attribute_value_ids" t-att-value="value.id" t-att-name="attribute.id"/>
                     </label>
                 </li>