+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_customization/static/src/css/style.css b/website_product_customization/static/src/css/style.css
new file mode 100644
index 000000000..779fc16b2
--- /dev/null
+++ b/website_product_customization/static/src/css/style.css
@@ -0,0 +1,44 @@
+
+.product_customisation_image{
+ width:350px;
+ height:400px;
+}
+
+.drawing-area {
+ position: absolute;
+ top: 1px;
+ left: 50px;
+ z-index: 10;
+ width: 350px;
+ height: 400px;
+ border: 1px solid #ccc;
+}
+
+.canvas-container {
+ width: 350px !important;
+ height: 400px !important;
+ position: relative;
+ user-select: none;
+}
+
+#tshirt-div {
+ width: 450px;
+ height: 550px;
+ position: relative;
+ background-color: #fff;
+}
+
+#canvas {
+ position: absolute;
+ width: 100px !important;
+ height: 100px !important;
+ left: 0px;
+ top: 0px;
+ user-select: none;
+ cursor: default;
+}
+
+.oe_structure {
+ display: grid;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/website_product_customization/static/src/js/website_product_custom.js b/website_product_customization/static/src/js/website_product_custom.js
new file mode 100644
index 000000000..dff79a909
--- /dev/null
+++ b/website_product_customization/static/src/js/website_product_custom.js
@@ -0,0 +1,61 @@
+/** @odoo-module **/
+
+ // Import required modules
+ import publicWidget from "@web/legacy/js/public/public_widget";
+
+ let canvas = new fabric.Canvas('tshirt-canvas');
+ var count = 0;
+ // Event listener for the "Delete" key
+ document.addEventListener("keydown", function(event){
+ var value = event.key;
+ if (value=="Delete"){
+ canvas.remove(canvas.getActiveObject());
+ }
+ });
+ // Define a custom widget
+ publicWidget.registry.canvasWidget = publicWidget.Widget.extend({
+ selector: '#product_detail',
+ events: {
+ 'change #product-design': '_onChangeSelect',
+ 'click .design_save': '_onSave',
+ 'click #product_customize_btn': '_addProductDesign',
+ },
+ // Event handler for the change event on the product-design element
+ _onChangeSelect: function(){
+ var selectedOption = this.$el.find('#product-design').val().toString();
+ var design_image = new Image();
+ design_image.src = '/web/image/product.design/' + selectedOption + '/product_design'
+ design_image.onload = function () {
+ var image = new fabric.Image(design_image);
+ image.scaleToHeight(100);
+ image.scaleToWidth(100);
+ canvas.centerObject(image);
+ canvas.add(image)
+ canvas.renderAll();
+ };
+ },
+ // Event handl er for the click event on elements with the design_save class
+ _onSave: function(design_image){
+ var node = design_image.delegateTarget.lastElementChild.querySelector('#tshirt-div');
+ domtoimage.toPng(node).then(function (dataUrl) {
+ var img = new Image();
+ img.classList.add("design_image_doc");
+ img.src = dataUrl;
+ document.body.appendChild(img);
+ alert('Saved your customized Image!!!!!!, Now you can Add it in to the cart')
+ })
+ },
+ // Event handler for the click event on the product_customize_btn element
+ _addProductDesign: function(ev){
+ count++;
+ const productDesignBody = document.querySelector('.product_design_body');
+ if (count%2 == 0){
+ productDesignBody.classList.add("d-none");
+ }
+ else{
+ productDesignBody.classList.remove("d-none");
+ }
+ },
+});
+
+
diff --git a/website_product_customization/static/src/js/website_sale.js b/website_product_customization/static/src/js/website_sale.js
new file mode 100644
index 000000000..f384a5046
--- /dev/null
+++ b/website_product_customization/static/src/js/website_sale.js
@@ -0,0 +1,72 @@
+/** @odoo-module **/
+
+import { WebsiteSale } from '@website_sale/js/website_sale';
+//website_sale/static/src/js/website_sale.js
+//import { patch } from '@web/core/utils/patch';
+import { patch } from 'web.utils';
+import { jsonrpc } from "@web/core/network/rpc_service";
+
+// Patch the WebsiteSale class with custom modifications
+patch(WebsiteSale.prototype, "my patch", {
+ // Override the _submitForm method
+
+ async _submitForm(){
+ var image_element = document.getElementsByClassName("design_image_doc")
+ if (parseInt(image_element.length) == parseInt(0)) {
+ return super._submitForm(...arguments);
+ }
+ else {
+ const params = this.rootProduct;
+
+ if (document.getElementsByClassName('design_image_doc')[0]){
+ var design_image = document.getElementsByClassName('design_image_doc')[0].currentSrc;
+ }
+ params.design_image = design_image;
+ return super._submitForm(...arguments);
+ };
+ },
+
+ // Override the _onModalSubmit method
+ _onModalSubmit: function (goToShop) {
+ const mainProduct = this.$('.js_product.in_cart.main_product').children('.product_id');
+ const productTrackingInfo = mainProduct.data('product-tracking-info');
+ if (productTrackingInfo) {
+ const currency = productTrackingInfo['currency'];
+ const productsTrackingInfo = [];
+ this.$('.js_product.in_cart').each((i, el) => {
+ productsTrackingInfo.push({
+ 'item_id': el.getElementsByClassName('product_id')[0].value,
+ 'item_name': el.getElementsByClassName('product_display_name')[0].textContent,
+ 'quantity': el.getElementsByClassName('js_quantity')[0].value,
+ 'currency': currency,
+ 'price': el.getElementsByClassName('oe_price')[0].getElementsByClassName('oe_currency_value')[0].textContent,
+ });
+ });
+ if (productsTrackingInfo) {
+ this.$el.trigger('add_to_cart_event', productsTrackingInfo);
+ }
+ }
+ const callService = this.call.bind(this)
+ this.optionalProductsModal.getAndCreateSelectedProducts()
+ .then((products) => {
+ var product_id = products[0].product_id
+ if (document.getElementsByClassName('design_image_doc')[0]){
+ products[0].design_image = document.getElementsByClassName('design_image_doc')[0].currentSrc;
+ }
+ const productAndOptions = JSON.stringify(products);
+ this.rpc('/shop/cart/update_option', {
+ product_and_options: productAndOptions,
+ ...this._getOptionalCombinationInfoParam(),
+ }).then(function (values) {
+ if (goToShop) {
+ window.location.pathname = "/shop/cart";
+ } else {
+ wSaleUtils.updateCartNavBar(values);
+ wSaleUtils.showCartNotification(callService, values.notification_info);
+ }
+ }).then(() => {
+ this._getCombinationInfo($.Event('click', {target: $("#add_to_cart")}));
+ });
+ });
+ }
+})
\ No newline at end of file
diff --git a/website_product_customization/static/src/js/website_sale_patch.js b/website_product_customization/static/src/js/website_sale_patch.js
new file mode 100644
index 000000000..eefdd9126
--- /dev/null
+++ b/website_product_customization/static/src/js/website_sale_patch.js
@@ -0,0 +1,87 @@
+odoo.define('website_sale.product_customization', function (require) {
+'use strict';
+
+var core = require('web.core');
+var ajax = require('web.ajax');
+var publicWidget = require('web.public.widget');
+require('website_sale.website_sale');
+
+publicWidget.registry.WebsiteSale.include({
+
+ /**
+ * Overridden to resolve _opened promise on modal
+ * when stayOnPageOption is activated.
+ *
+ * @override
+ */
+ _submitForm() {
+ var image_element = document.getElementsByClassName("design_image_doc")
+ if (parseInt(image_element.length) == parseInt(0)) {
+ return this._super.apply(this, arguments);
+ }
+ else {
+ if (image_element[0]){
+ var design_image = image_element[0].currentSrc
+ }
+ this.rootProduct.design_image = design_image;
+ return this._super.apply(this, arguments);
+ };
+ },
+
+
+ /**
+ * Submits the form with additional parameters
+ * - lang
+ * - product_custom_attribute_values: The products custom variant values
+ *
+ * @private
+ * @param {Boolean} goToShop Triggers a page refresh to the url "shop/cart"
+ */
+ _onModalSubmit: function (goToShop) {
+ const $product = $('#product_detail');
+ let currency;
+ if ($product.length) {
+ currency = $product.data('product-tracking-info')['currency'];
+ } else {
+ // Add to cart from /shop page
+ currency = this.$('[itemprop="priceCurrency"]').first().text();
+ }
+ const productsTrackingInfo = [];
+ this.$('.js_product.in_cart').each((i, el) => {
+ productsTrackingInfo.push({
+ 'item_id': parseInt(el.getElementsByClassName('product_id')[0].value),
+ 'item_name': el.getElementsByClassName('product_display_name')[0].textContent,
+ 'quantity': parseFloat(el.getElementsByClassName('js_quantity')[0].value),
+ 'currency': currency,
+ 'price': parseFloat(el.getElementsByClassName('oe_price')[0].getElementsByClassName('oe_currency_value')[0].textContent),
+ });
+ });
+ if (productsTrackingInfo.length) {
+ this.$el.trigger('add_to_cart_event', productsTrackingInfo);
+ }
+
+ this.optionalProductsModal.getAndCreateSelectedProducts()
+ .then((products) => {
+ var product_id = products[0].product_id
+ if (document.getElementsByClassName('design_image_doc')[0]){
+ products[0].design_image = document.getElementsByClassName('design_image_doc')[0].currentSrc;
+ }
+ const productAndOptions = JSON.stringify(products);
+ ajax.post('/shop/cart/update_option', {product_and_options: productAndOptions})
+ .then(function (quantity) {
+ if (goToShop) {
+ window.location.pathname = "/shop/cart";
+ }
+ const $quantity = $(".my_cart_quantity");
+ $quantity.parent().parent().removeClass('d-none');
+ $quantity.text(quantity).hide().fadeIn(600);
+ }).then(()=>{
+ this._getCombinationInfo($.Event('click', {target: $("#add_to_cart")}));
+ });
+ });
+ },
+
+});
+
+return publicWidget.registry.ProductCustomization;
+});
\ No newline at end of file
diff --git a/website_product_customization/static/src/lib/js/Fabric/fabric.js b/website_product_customization/static/src/lib/js/Fabric/fabric.js
new file mode 100644
index 000000000..f679affaa
--- /dev/null
+++ b/website_product_customization/static/src/lib/js/Fabric/fabric.js
@@ -0,0 +1 @@
+var fabric=fabric||{version:"5.3.0"};if("undefined"!=typeof exports?exports.fabric=fabric:"function"==typeof define&&define.amd&&define([],function(){return fabric}),"undefined"!=typeof document&&"undefined"!=typeof window)document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?fabric.document=document:fabric.document=document.implementation.createHTMLDocument(""),fabric.window=window;else{var jsdom=require("jsdom"),virtualWindow=new jsdom.JSDOM(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window;fabric.document=virtualWindow.document,fabric.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,fabric.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,fabric.window=virtualWindow,DOMParser=fabric.window.DOMParser}function resizeCanvasIfNeeded(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;i===n&&r===s||(e.width=n,e.height=s)}function copyGLTo2DDrawImage(t,e){var i=t.canvas,r=e.targetCanvas,n=r.getContext("2d");n.translate(0,r.height),n.scale(1,-1);var s=i.height-r.height;n.drawImage(i,0,s,r.width,r.height,0,0,r.width,r.height)}function copyGLTo2DPutImageData(t,e){var i=e.targetCanvas.getContext("2d"),r=e.destinationWidth,n=e.destinationHeight,s=r*n*4,o=new Uint8Array(this.imageBuffer,0,s),a=new Uint8ClampedArray(this.imageBuffer,0,s);t.readPixels(0,0,r,n,t.RGBA,t.UNSIGNED_BYTE,o);var c=new ImageData(a,r,n);i.putImageData(c,0,0)}fabric.isTouchSupported="ontouchstart"in fabric.window||"ontouchstart"in fabric.document||fabric.window&&fabric.window.navigator&&0
+
+
+
+ 
+
+ + Website Product Customization
++ Customize Product Design From Website.
+
+
+
+
+
+
+
+ + Explore this module +
+ +
+
+
+
+
+
+
+ + Overview +
+
+
+
+
+ + This module allows to customize the product image from website.
+
+
+
+
+
+
+ + Features +
+
+
+
+
+ 
+
+
+
+
+ + Create customized designs.
+
+
+
+
+
+
+
+
+
+ + Allows users to customize products by choosing the designs from front-end
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+
+ + Create designs in the back-end
++ Go to Product Design --> Product Design view and create a new design. This design will then be available for customers on the front end. +
+
+
+ 
+
+
+ + Click on the 'CUSTOMIZE PRODUCT' button.
++ Click on the 'CUSTOMIZE PRODUCT' button to customize the design of the product. +
+
+
+ 
+
+
+ + Choose preferred design.
++ Select the preferred design from the available options. +
+
+
+ 
+
+
+ + Design appears on the product
++ After choosing appropriate design, the design will automatically appear on the product. +
+
+
+ 
+
+
+ + Save the design
++ After customizing the design by moving the design, resizing the design, or rotating the design etc., save the changes by clicking on the 'Save' button. +
+
+
+ 
+
+
+ + Updated product in the back-end
++ Product with design will appear on the associated sale order in the back-end +
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+
+
+ +91 86068 27707
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +