+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Dynamic Image Hotspot
++ It's Allows Users To Add Hotspot For Snippet Images To Redirect The Product
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ The app allows users to add a hotspot for snippet images. A product link
+ can be further added to the hotspot so that
+ whenever a user clicks on the hotspot they are directed to the product
+ page in website shop.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+ 
+ Allows users to create hotspot for snippet images
+
+
+ Allows users to create hotspot for snippet images
+
+
+
+
+
+
+
+
+
+ Allows users to add the link for website-shop product page to
+ the image hotspot
+
+
+ Allows users to add the link for website-shop product page to
+ the image hotspot
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + 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 Products
++ 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 directed to the + product page
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
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..de97c3489
--- /dev/null
+++ b/dynamic_image_hotspot/static/src/js/snippet_options.js
@@ -0,0 +1,50 @@
+odoo.define('dynamic_image_hotspot.snippets.options', function (require) {
+'use strict';
+
+ var options = require('web_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 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+