+
+
+
+
+
+
+
diff --git a/dynamic_image_hotspot/static/src/css/style.css b/dynamic_image_hotspot/static/src/css/style.css
new file mode 100644
index 000000000..4af2a2f82
--- /dev/null
+++ b/dynamic_image_hotspot/static/src/css/style.css
@@ -0,0 +1,32 @@
+/**
+ * 1. keyframes for the image hotspot element class "popup-product".
+ * 2. Defines the style of class "popup-product".
+ */
+@keyframes popup-product{
+ 0%{
+ transform: scale(70%);
+ opacity: 1;
+ }
+ 100%{
+ transform: scale(100%);
+ opacity: 0;
+ }
+}
+.popup-product{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ z-index=10;
+ width: 80px;
+ height: 80px;
+ max-width: 80px;
+ max-height: 80px;
+ border-radius: 50%;
+ background: #dbb544;
+ animation: popup-product 0.9s ease-in-out infinite;
+}
+.popup-product:hover {
+ width: 80px;
+ height: 80px;
+ background: #25c462;
+}
diff --git a/dynamic_image_hotspot/static/src/js/snippet_options.js b/dynamic_image_hotspot/static/src/js/snippet_options.js
new file mode 100644
index 000000000..c6fcb1ac6
--- /dev/null
+++ b/dynamic_image_hotspot/static/src/js/snippet_options.js
@@ -0,0 +1,48 @@
+/** @odoo-module **/
+import options from "@web_editor/js/editor/snippets.options";
+/**
+* JavaScript file defining a registry of options for the image hotspot feature in the web editor snippets.
+* The registry includes methods for toggling the image hotspot feature, setting the vertical and horizontal position
+of the hotspot, and setting the product template for the hotspot link.
+*/
+options.registry.ImageHotspot = options.Class.extend({
+ init: function () {
+ this._super(...arguments);
+ this.imageHotspot()
+ },
+ imageHotspot: function (previewMode, widgetValue) {
+ if (widgetValue == 'on' && previewMode === false) {
+ this.$target[0].parentElement.style.position = "relative";
+ const target = this.$target[0].parentElement;
+ var document = this.ownerDocument;
+ const newA = document.createElement('a');
+ newA.className = 'popup-product';
+ this.$target[0].after(newA);
+ }
+ if (widgetValue == 'off' && previewMode === false) {
+ const target = this.$target[0]
+ if (target.nextElementSibling) {
+ if (target.nextElementSibling.className == 'popup-product') {
+ target.nextElementSibling.remove();
+ }
+ }
+ }
+ },
+ async setVertical(previewMode, widgetValue) {
+ let target = this.$target[0].nextElementSibling;
+ let value = parseFloat(widgetValue);
+ target.style.top = `${value}%`;
+ },
+ async setHorizontal(previewMode, widgetValue) {
+ let target = this.$target[0].nextElementSibling;
+ let value = parseFloat(widgetValue);
+ target.style.left = `${value}%`;
+ },
+ async setProductTemplate(previewMode, widgetValue) {
+ let target = this.$target[0].nextElementSibling;
+ let value = `/shop/${widgetValue}`
+ target.setAttribute("href", value);
+ }
+
+});
+
diff --git a/dynamic_image_hotspot/views/snippets/snippets.xml b/dynamic_image_hotspot/views/snippets/snippets.xml
new file mode 100644
index 000000000..68f4d16f3
--- /dev/null
+++ b/dynamic_image_hotspot/views/snippets/snippets.xml
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + It's Allows Users To Add Hotspot For Snippet Images To Redirect The Product. + +
+Dynamic Image Hotspot +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + The app allows users to add a hotspot for snippet images. +
++
+
+
+
+
+
+
+
+
+
+ + + User can be re-directed to the product page in website shop by clicking on the Hotspot. + +
++
+
+
+
+
+
+
+
+
+
+ Dynamic Image Hotspot
+
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Enable Image Hotspot For Snippet Images + +
+
+
+ + Select snippet images and enable Image Hotspot option from snippet options. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Horizontal and Vertical Positioning of Image Hotspot + +
+
+
+ + Adjust the horizontal and vertical positioning of image hotspot to place it in desired position using the "Move Horizontal" and "Move Vertical" snippet options. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Add Product + +
+
+
+ + Select the desired product to be redirected when the user clicks on the image hotspot. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Clicking on Image Hotspot + +
+
+
+ + Click on the image hotspot to redirect to the shop product page that was configured in the snippet options. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Product Page + +
+
+
+ + After clicking on the image hotspot, the user is redirected to the product page. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Allows users to create hotspot for snippet images.
+
+
+
+
+
+
+
+
+
+ + Allows users to add the link for website-shop product page to the image hotspot.
+
+
+
+
+
+
+
+
+
+
+
+
+ Question 1
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 29th October, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+