+
+
F
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo sh
+
+
+
+
+
+
+
+ 
+
+ + Website WebAR Product Viewer
++ Realistic View Of The Product In Website
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module enables users to view website products in 3D. Customers can
+ enjoy an interactive Augmented Reality commerce experience using WebAR
+ Technology. This provides customers with a realistic representation of
+ the product and demonstrates how it will appear in real-life
+ environments.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Show AR product images in the Website.
+
+
+ Show AR product images in the Website.
+
+
+
+
+ View AR image on the latest android smartphones and tablets.
+
+
+ View AR image on the latest android smartphones and tablets.
+
+
+
+
+ Allow customers to view products from all angles, including top, bottom, front, back, and sides.
+
+
+ Allow customers to view products from all angles, including top, bottom, front, back, and sides.
+
+
+
+
+ Tracking the mobile device's position as it moves and developing its own view of the real environment.
+
+
+ Tracking the mobile device's position as it moves and developing its own view of the real environment.
+
+
+
+
+ Allow customer to zoom the product image.
+
+
+ Allow customer to zoom the product image.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+ + Go to the Product form - > You will see a new page called 'AR + Image.'. Enable the 'Enable AR Images' field to show AR images + on the Website. You can provide a URL for the image or upload an + image in GLB/GLTF format.
+
+
+ 
+
+ + Enable 'Auto Rotate' to rotate the AR model on the website. Set + the AR scale of the model. Upload a poster image to view the + image in the product indicator on the Website Product Page.
+
+
+ 
+
+ + Go to the Product page on the Website and click on the Product + indicator.
+
+
+ 
+
+ + You can see the 3-D image of the Product.
+
+
+ 
+
+ + In the mobile view - Click the button "View in AR".
+
+
+ 
+
+ + It will open the camera on the device, giving customers a + realistic view of the Product and showing how it will look in + real-life environments. +
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + 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 +
+
+
+
diff --git a/website_webar_product/static/src/css/website_product_view.css b/website_webar_product/static/src/css/website_product_view.css
new file mode 100755
index 000000000..3534b4dec
--- /dev/null
+++ b/website_webar_product/static/src/css/website_product_view.css
@@ -0,0 +1,8 @@
+#model-viewer {
+ width:100%;
+ height:400px;
+}
+#custom-ar-button{
+ position: absolute;
+ bottom: 0px;
+}
diff --git a/website_webar_product/static/src/img/Chair.glb b/website_webar_product/static/src/img/Chair.glb
new file mode 100755
index 000000000..d1a9bb0ac
Binary files /dev/null and b/website_webar_product/static/src/img/Chair.glb differ
diff --git a/website_webar_product/static/src/img/Chair.png b/website_webar_product/static/src/img/Chair.png
new file mode 100755
index 000000000..8d2f620fb
Binary files /dev/null and b/website_webar_product/static/src/img/Chair.png differ
diff --git a/website_webar_product/static/src/img/augmented-reality.png b/website_webar_product/static/src/img/augmented-reality.png
new file mode 100755
index 000000000..f25c4195b
Binary files /dev/null and b/website_webar_product/static/src/img/augmented-reality.png differ
diff --git a/website_webar_product/static/src/img/hand.png b/website_webar_product/static/src/img/hand.png
new file mode 100755
index 000000000..6e56ad167
Binary files /dev/null and b/website_webar_product/static/src/img/hand.png differ
diff --git a/website_webar_product/static/src/js/website_product_view.js b/website_webar_product/static/src/js/website_product_view.js
new file mode 100755
index 000000000..cdf2c93dd
--- /dev/null
+++ b/website_webar_product/static/src/js/website_product_view.js
@@ -0,0 +1,43 @@
+odoo.define('website_webar_product.product_ar_view', function (require) {
+'use strict';
+ /* Extend Public widget for AR Model on website.*/
+ var publicWidget = require('web.public.widget');
+ var rpc = require('web.rpc');
+ publicWidget.registry.product_detail_view_3d = publicWidget.Widget.extend({
+ selector: '.o_wsale_product_page',
+ events: {
+ 'click .product_images':'_arViewBtn',
+ },
+ /* View AR Model On Product Page. */
+ _arViewBtn:function (ev){
+ var self = this;
+ ev.preventDefault();
+ if (this.$(ev.currentTarget).data('type') == "3d"){
+ $(this.el.querySelector('.o_carousel_product_outer')).hide()
+ this.$('.o_carousel_product_outer').hide()
+ this.$('#product_main').show()
+ self._rpc({
+ route: '/product/ar_image',
+ params: {
+ product_id: parseInt(ev.currentTarget.id)
+ },
+ }).then(function(data) {
+ self.data = data
+ var ar_image = data['type'] === 'url' ? data['ar_url'] : data['local_url'];
+ const autoRotateAttribute = data['auto_rotate'] ? 'auto-rotate = ""' : '';
+ const placementAttribute = data['ar_placement']
+ const scaleAttribute = data['ar_scale'] ;
+
+ self.$('#product_main').html(`
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + + + +
-
+
+ + ++ +
+
+
-
+
-
+
+ + ++ +
+
+
+
+