Add multimedia URL field and website audio iframe embeds

product_library/models/product_template.py

@@ -18,3 +18,22 @@ class ProductTemplate(models.Model):
     fecha_entrada = fields.Char('Fecha de entrada')
     fecha_edicion = fields.Char('Fecha de edición')
     genero = fields.Char('Genero')
+    multimedia_url = fields.Char('URL multimedia')
+    multimedia_embed_url = fields.Char(
+        string='URL multimedia embebida',
+        compute='_compute_multimedia_embed_url',
+    )
+
+    @api.depends('multimedia_url')
+    def _compute_multimedia_embed_url(self):
+        for record in self:
+            url = (record.multimedia_url or '').strip()
+            if not url:
+                record.multimedia_embed_url = False
+                continue
+
+            base_url = url.rstrip('/')
+            if base_url.endswith('/embed/all'):
+                record.multimedia_embed_url = f"{base_url}/"
+            else:
+                record.multimedia_embed_url = f"{base_url}/embed/all/"

product_library/views/product.xml

@@ -18,6 +18,7 @@
                 <field name="coleccion"/>    
                 <field name="subcoleccion"/>    
                 <field name="idioma"/>
+                <field name="multimedia_url" widget="url" placeholder="https://camp.ddtbanaketak.com/arakil/arakil-2022/"/>
             </field>
         </field>
     </record>

website_sale_product_library/models/product_template.py

@@ -1,4 +1,6 @@
-from odoo import api, models, fields
+from odoo import api, models
+
+
 
 class ProductTemplate(models.Model):
     _inherit = 'product.template'
@@ -12,6 +14,8 @@ class ProductTemplate(models.Model):
         search_details['fetch_fields'].append('editorial')
         search_details['search_fields'].append('subtitle')
         search_details['fetch_fields'].append('subtitle')
+        search_details['fetch_fields'].append('multimedia_url')
+        search_details['fetch_fields'].append('multimedia_embed_url')
         search_details['search_fields'].remove('description')
         search_details['search_fields'].remove('description_sale')
-        return search_details
+        return search_details

website_sale_product_library/static/src/scss/custom.scss

@@ -7,3 +7,37 @@
     border: 1px solid #99d;
     border-radius: 6px;
 }
+
+.oe_product_cart {
+    position: relative;
+}
+
+.o_multimedia_hover_player {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0.75rem;
+    z-index: 4;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in-out;
+    padding: 0 0.5rem;
+}
+
+.oe_product_cart .o_wsale_product_grid_wrapper:hover + .o_multimedia_hover_player,
+.oe_product_cart .o_multimedia_hover_player:hover {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.o_multimedia_hover_player iframe,
+.o_multimedia_product_player iframe {
+    width: 100%;
+    min-width: 0;
+}
+
+@media (max-width: 991.98px) {
+    .o_multimedia_hover_player {
+        display: none !important;
+    }
+}

website_sale_product_library/views/website_sale_views.xml

@@ -13,6 +13,16 @@
 		        <span t-if="product.autor"><b><t t-out="product.autor" /></b></span>
 	        </a>
         </xpath>
+        <xpath expr="//a[contains(@class, 'o_wsale_product_grid_wrapper')]" position="after">
+            <div t-if="product.multimedia_embed_url" class="o_multimedia_hover_player">
+                <iframe
+                    loading="lazy"
+                    t-att-src="product.multimedia_embed_url"
+                    style="border: none; height: 49.6px; width: 100%;"
+                    t-att-title="'Widget de reproductor de audio para %s' % product.name"
+                />
+            </div>
+        </xpath>
     </template>
     <template
         id="products_item_description"
@@ -42,6 +52,14 @@
 			<t t-out="product.subtitle" />
 		</div>
 		<div t-if="product.autor"><b><t t-out="product.autor" /></b></div>
+        <div t-if="product.multimedia_embed_url" class="o_multimedia_product_player mt-3">
+            <iframe
+                loading="lazy"
+                t-att-src="product.multimedia_embed_url"
+                style="border: none; height: 49.6px; width: 100%;"
+                t-att-title="'Widget de reproductor de audio para %s' % product.name"
+            />
+        </div>
 	    </div>	
         </xpath>
     </template>