+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Product 360 Degree View in Website
++ Make Your Customers View Products From All Angles in Odoo + Website
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+
++ This Module Allows To View Each Angle of a Product like the 360 + Degree View in + Odoo Shop
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+
+
+
+ 
+ Customer Can View Each Angle Of The Product In A Mouse Move
+
+
+ Customer Can View Each Angle Of The Product In A Mouse Move
+
+
+
+ Fully Responsive and Mobile Optimized Module.
+
+
+
+ Fully Responsive and Mobile Optimized Module.
+
+
+
+ Enable/Disable the 360 degree view for a Specific Product
+
+
+
+ Enable/Disable the 360 degree view for a Specific Product
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+ 
+
+
+ + 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. +
+
+
+
+ 
+
+
+
+
+ 
+
+ + For a better view add at least 25 images
+
+
+ 
+
+ + When comes to website if the product have the 360 images + enabled , + a button 360 degree visible in shop
+
+
+
+ + After clicking the button when we move mouse over the + picture the + product will be moved according to the mouse move direction +
+
+ 
+ 
+
+
+
+
+ 
+
+ + We Can Stop The 360 View of The Product By Clicking The + Stop Button, And It Will Show The 360 Button +
+
+
+
+
+ 
+
+
+ + 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/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..96a1f3103
--- /dev/null
+++ b/product_360_degree_view_in_website/static/src/js/360_view.js
@@ -0,0 +1,56 @@
+odoo.define('product_360_degree_view_in_website.product_360_degree_view', function (require) {
+ 'use strict';
+ var publicWidget = require('web.public.widget');
+ var rpc = require('web.rpc');
+ 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: '.360_degree_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..a56f9151d
--- /dev/null
+++ b/product_360_degree_view_in_website/views/360_view_templates.xml
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+