+
+
+
+
+ 
+
+
+
+
+
+
+ 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 +
+
+
+
+
+
+
+
+
+ 
+
+ AR Image. +
+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. +
+
+
+ 
+
+ 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. +
+
+
+
+
+ 
+
+
+ + 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 +
+
+
+
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 100644
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 100644
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 100644
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 100644
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 100644
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 100644
index 000000000..bb53f59bc
--- /dev/null
+++ b/website_webar_product/static/src/js/website_product_view.js
@@ -0,0 +1,41 @@
+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.$('.o_carousel_product_outer').hide()
+ this.$('#product_main').show()
+ rpc.query({
+ 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(`
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+ -
+
- + + + +
-
+
+ + ++ +
+
+