+
+
+
+
+
+
diff --git a/product_360_degree_view_in_website/views/product_product_views.xml b/product_360_degree_view_in_website/views/product_product_views.xml
new file mode 100644
index 000000000..e714649a2
--- /dev/null
+++ b/product_360_degree_view_in_website/views/product_product_views.xml
@@ -0,0 +1,30 @@
+
+
+
+
+
+ product.product.view.form.view.inherit.product.360.degree.view.in.website
+
+ product.product
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/product_360_degree_view_in_website/views/product_template_views.xml b/product_360_degree_view_in_website/views/product_template_views.xml
new file mode 100644
index 000000000..81972f840
--- /dev/null
+++ b/product_360_degree_view_in_website/views/product_template_views.xml
@@ -0,0 +1,30 @@
+
+
+
+
+
+ product.template.view.form.view.inherit.product.360.degree.view.in.website
+
+ product.template
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/product_360_degree_view_in_website/static/src/css/360_view.css b/product_360_degree_view_in_website/static/src/css/360_view.css
new file mode 100644
index 000000000..a4a1d3b9b
--- /dev/null
+++ b/product_360_degree_view_in_website/static/src/css/360_view.css
@@ -0,0 +1,23 @@
+@charset "utf-8";
+body, ul, li {
+margin: 0;
+padding: 0;
+}
+ul, li {
+list-style: none;
+}
+#image_360 {
+width: 400px;
+
+margin: 30px auto 0;
+overflow: hidden;
+}
+#image_360 ul {
+width: 400px;
+height: 280px;
+}
+#image_360 ul li img {
+display: block;
+width: 400px;
+height: 280px;
+}
\ No newline at end of file
diff --git a/product_360_degree_view_in_website/static/src/js/360_view.js b/product_360_degree_view_in_website/static/src/js/360_view.js
new file mode 100644
index 000000000..db9e5856e
--- /dev/null
+++ b/product_360_degree_view_in_website/static/src/js/360_view.js
@@ -0,0 +1,52 @@
+/** @odoo-module **/
+import publicWidget from "@web/legacy/js/public/public_widget";
+ var pic_W = $('.list').width() / 2;
+ var center_X = 0 + pic_W;
+ var movestop = pic_W / 10;
+
+publicWidget.registry.product_view = publicWidget.Widget.extend({
+ selector: '.degree_360_view',
+ events: {
+ 'mousemove.list': 'Move360Image',
+ 'click .360_view': '_360ViewClick',
+ 'click .stop_view': '_stopViewClick',
+ },
+ setup: function () {
+ // Calling the moveImg function
+ this._super.apply(this, arguments);
+ this.moveImg();
+ },
+ // Function for calculating the movements of the picture
+ moveImg: function (m_X, m_Y, dir) {
+ var index = Math.ceil(Math.abs(m_X - center_X) / movestop);
+ if (dir) {
+ this.$el.find('.list li').eq(index).show().siblings().hide();
+ } else {
+ this.$el.find('.list li').eq(18 - index).show().siblings().hide();
+ }
+ },
+ // Mousemove of the image
+ Move360Image: function (ev) {
+ var mouse_X = ev.pageX;
+ var mouse_Y = ev.pageY;
+ if (mouse_X - center_X <= 0) {
+ this.moveImg(mouse_X, mouse_Y, 'left');
+ } else {
+ this.moveImg(mouse_X, mouse_Y);
+ }
+ },
+ // Click function of the image to change the 360 degree
+ _360ViewClick: function (ev) {
+ this.$el.find('.carousel-inner, .product_detail_img').css({ 'display': 'none' });
+ this.$el.find('#image_360').css({ 'display': 'block' });
+ this.$el.find('.360_view').addClass('d-none'); // Hide the 360 view button
+ this.$el.find('.stop_view').removeClass('d-none'); // Show the stop button
+ },
+ // Function for the button stop
+ _stopViewClick: function (ev) {
+ this.$el.find('#image_360').css({ 'display': 'none' });
+ this.$el.find('.product_detail_img').css({ 'display': 'block' });
+ this.$el.find('.stop_view').addClass('d-none'); // Hide the stop button
+ this.$el.find('.360_view').removeClass('d-none'); // Show the 360 view button
+ },
+ });
diff --git a/product_360_degree_view_in_website/views/360_view_templates.xml b/product_360_degree_view_in_website/views/360_view_templates.xml
new file mode 100644
index 000000000..d5c6d147d
--- /dev/null
+++ b/product_360_degree_view_in_website/views/360_view_templates.xml
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Make Your Customers View Products From All Angles in Odoo Website. +
+Product 360 Degree View in Website +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Key + Heighlights
+
+
+
+
+
+ 
+
+
+ Customer can view each Angle of the Product in a + Mouse Move. +
++
+
+
+
+
+
+
+
+
+ Fully Responsive and Mobile Optimized + Module. +
++ +
+
+
+
+
+
+
+
+
+ Enable/Disable the 360 degree view for a + Specific Product. +
++ +
+
+
+
+
+
+
+
+
+ Available in Odoo 18.0 Community, Odoo.sh and + Enterprise. +
++ +
+
+
+
+
+
+
+
+
+
+ Product 360 Degree View in Website
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Enable Display 360 Image + + Checkbox. +
+
+
+ + As seen in the image below, a tab will + appear where you may add various 360-degree + images as soon as the Display 360 Image + Checkbox is selected. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Add images and + + label. +
+
+
+ + For a better view add at least 25 images. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + button 360 degree + + + visible in shop. +
+
+
+ + When comes to website if the product have + the 360 images enabled , a button 360 degree + visible in shop. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + 360 degree move with + + the Mouse. +
+
+
+ + After clicking the button when we move mouse + over the picture the product will be moved + according to the mouse move directiony. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Stop the + + + 360 move. +
+
+
+ + We Can Stop The 360 View of The Product By + Clicking The Stop Button, And It Will Show + The 360 Button. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Available in + Odoo 18.0 Community and Enterprise.
+
+
+
+
+
+
+
+
+
+ + Customer Can + View Each Angle Of The Product In A Mouse Move.
+
+
+
+
+
+
+
+
+
+ + Enable/Disable + the 360 degree view for a Specific Product. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + The Product 360 View + feature allows customers + to see a product from all angles. + It provides a comprehensive view + by rotating the product image, + giving a more interactive + and detailed look at the + product's features and design. +
+
+
+
+
+
+ + For a smooth 360 View + experience, it is recommended + to use at least 24 images, + capturing the product at 15-degree + intervals. More images can create + a smoother rotation but require + more storage and bandwidth. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 31st December, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+ -
+
-
+