product image option plugin

Author: duau-odoo

addons/html_builder/static/src/plugins/image/replace_media_option.js

@@ -12,33 +12,34 @@ export class ReplaceMediaOption extends BaseOptionComponent {
     }
     canSetLink(editingElement) {
         return (
-            this.isImageSupportedForStyle(editingElement) &&
+            isImageSupportedForStyle(editingElement) &&
             !searchSupportedParentLinkEl(editingElement).matches("a[data-oe-xpath]")
         );
     }
     hasHref(editingElement) {
         const parentEl = searchSupportedParentLinkEl(editingElement);
         return parentEl.tagName === "A" && parentEl.hasAttribute("href");
     }
-    isImageSupportedForStyle(img) {
-        if (!img.parentElement) {
-            return false;
-        }
+}
+
+export function isImageSupportedForStyle(img) {
+    if (!img.parentElement) {
+        return false;
+    }
 
-        // See also `[data-oe-type='image'] > img` added as data-exclude of some
-        // snippet options.
-        const isTFieldImg = "oeType" in img.parentElement.dataset;
+    // See also `[data-oe-type='image'] > img` added as data-exclude of some
+    // snippet options.
+    const isTFieldImg = "oeType" in img.parentElement.dataset;
 
-        // Editable root elements are technically *potentially* supported here (if
-        // the edited attributes are not computed inside the related view, they
-        // could technically be saved... but as we cannot tell the computed ones
-        // apart from the "static" ones, we choose to not support edition at all in
-        // those "root" cases).
-        // See also `[data-oe-xpath]` added as data-exclude of some snippet options.
-        const isEditableRootElement = "oeXpath" in img.dataset;
+    // Editable root elements are technically *potentially* supported here (if
+    // the edited attributes are not computed inside the related view, they
+    // could technically be saved... but as we cannot tell the computed ones
+    // apart from the "static" ones, we choose to not support edition at all in
+    // those "root" cases).
+    // See also `[data-oe-xpath]` added as data-exclude of some snippet options.
+    const isEditableRootElement = "oeXpath" in img.dataset;
 
-        return !isTFieldImg && !isEditableRootElement;
-    }
+    return !isTFieldImg && !isEditableRootElement;
 }
 
 export function searchSupportedParentLinkEl(editingElement) {

addons/html_builder/static/src/plugins/image/replace_media_option.xml

@@ -6,7 +6,8 @@
         <BuilderButton
             action="'replaceMedia'"
             title.translate="Replace image"
-            className="'o_we_bg_success'"
+            className="'flex-grow-1'"
+            type="'success'"
             preview="false"
             label.translate="Replace" />
         <BuilderButton icon="'fa-link'"

addons/html_builder/static/src/website_builder/plugins/options/animate_option.js

@@ -1,5 +1,6 @@
 import { KeepLast } from "@web/core/utils/concurrency";
 import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+import { isImageSupportedForStyle } from "@html_builder/plugins/image/replace_media_option";
 
 export class AnimateOption extends BaseOptionComponent {
     static template = "html_builder.AnimateOption";
@@ -75,27 +76,3 @@ export class AnimateOption extends BaseOptionComponent {
         return hasDirection;
     }
 }
-
-/**
- * @param {HTMLImageElement} img
- * @returns {Boolean}
- */
-export function isImageSupportedForStyle(img) {
-    if (!img.parentElement) {
-        return false;
-    }
-
-    // See also `[data-oe-type='image'] > img` added as data-exclude of some
-    // snippet options.
-    const isTFieldImg = "oeType" in img.parentElement.dataset;
-
-    // Editable root elements are technically *potentially* supported here (if
-    // the edited attributes are not computed inside the related view, they
-    // could technically be saved... but as we cannot tell the computed ones
-    // apart from the "static" ones, we choose to not support edition at all in
-    // those "root" cases).
-    // See also `[data-oe-xpath]` added as data-exclude of some snippet options.
-    const isEditableRootElement = "oeXpath" in img.dataset;
-
-    return !isTFieldImg && !isEditableRootElement;
-}

addons/html_builder/static/src/website_sale/product_image_option.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+
+<t t-inherit="html_builder.ReplaceMediaOption" t-inherit-mode="extension">
+    <xpath expr="//BuilderRow[BuilderButton[@action=&quot;'replaceMedia'&quot;]]" position="after">
+        <BuilderRow label.translate="Re-order">
+            <BuilderButtonGroup preview="false" action="'setPosition'">
+                <BuilderButton icon="'fa-angle-double-left'" title.translate="Move to first"  actionValue="'first'"/>
+                <BuilderButton icon="'fa-angle-left'" title.translate="Move to previous" actionValue="'left'"/>
+                <BuilderButton icon="'fa-angle-right'" title.translate="Move to next" actionValue="'right'"/>
+                <BuilderButton icon="'fa-angle-double-right'" title.translate="Move to last" actionValue="'last'"/>
+            </BuilderButtonGroup>
+        </BuilderRow>
+    </xpath>
+
+    <xpath expr="//BuilderRow[BuilderButton[@action=&quot;'replaceMedia'&quot;]]" position="inside">
+        <BuilderButton
+        action="'removeMedia'"
+        preview="false"
+        type="'danger'"
+        className="'flex-grow-1'"        
+        label.translate="Remove" />
+    </xpath>
+</t>
+
+</templates>

addons/html_builder/static/src/website_sale/product_image_option_plugin.js

@@ -0,0 +1,46 @@
+import { Plugin } from "@html_editor/plugin";
+import { rpc } from "@web/core/network/rpc";
+import { registry } from "@web/core/registry";
+
+export class ProductImageOptionPlugin extends Plugin {
+    static id = "ProductImageOption";
+    resources = {
+        builder_options: {
+            editableOnly: false,
+        },
+        builder_actions: {
+            /*
+             * Change sequence of product page images
+             */
+            setPosition: {
+                reload: {},
+                apply: async ({ editingElement: el, value }) => {
+                    const params = {
+                        image_res_model: el.parentElement.dataset.oeModel,
+                        image_res_id: el.parentElement.dataset.oeId,
+                        move: value,
+                    };
+
+                    await rpc("/shop/product/resequence-image", params);
+                },
+            },
+            /*
+             * Removes the image in the back-end
+             */
+            removeMedia: {
+                reload: {},
+                apply: async ({ editingElement: el }) => {
+                    if (el.parentElement.dataset.oeModel === "product.image") {
+                        // Unlink the "product.image" record as it is not the main product image.
+                        await this.services.orm.unlink("product.image", [
+                            parseInt(el.parentElement.dataset.oeId),
+                        ]);
+                    }
+                    el.remove();
+                },
+            },
+        },
+    };
+}
+
+registry.category("website-plugins").add(ProductImageOptionPlugin.id, ProductImageOptionPlugin);

addons/website/static/tests/tours/media_dialog.js

@@ -156,7 +156,7 @@ registerWebsitePreviewTour("website_media_dialog_image_shape", {
     },
     {
         content: "Open MediaDialog from an image",
-        trigger: ".o_we_bg_success[data-action-id='replaceMedia']",
+        trigger: ".btn-success[data-action-id='replaceMedia']",
         run: "click",
     },
     {