+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+ 
+
+ + Website Product Customization
++ Customize Product Design From Website
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module allows users to customize products from website by
+ selecting their preferred product design.
+
+
+
+
+ 
+
+
+ + Configuration +
+
+
+
+
+
+
+
+ In order to choose designs from the website, the designs must be
+ configured in the backend first. That is, the designs must be stored
+ in backend model 'product.design'.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Create customized designs
+
+
+ Create customized designs
+ + Allows users to customize products by choosing the + designs from front-end and styling them according to their + needs. +
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Create designs in the back-end
++ For the design to be available to the front-end customer, + create the designs in the backend first. +
+
+
+ 
+
+
+ + 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
+
+
+ 
+
+
+ + Click on the 'ADD TO CART' button
++ Click on the 'ADD TO CART' button after saving
+
+
+ 
+
+ + Updated product in the back-end
++ Product with design will appear on the associated sale order in + the back-end
+
+
+
+
+ 
+
+
+ + 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/website_product_customization/static/src/css/style.css b/website_product_customization/static/src/css/style.css
new file mode 100644
index 000000000..25f6980a1
--- /dev/null
+++ b/website_product_customization/static/src/css/style.css
@@ -0,0 +1,44 @@
+
+.product_customisation_image{
+ width:450px;
+ height:500px;
+}
+
+.drawing-area {
+ position: absolute;
+ top: 50px;
+ 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..724a92393
--- /dev/null
+++ b/website_product_customization/static/src/js/website_product_custom.js
@@ -0,0 +1,58 @@
+odoo.define('website_product_customization.website_product_custom', function(require) {
+ "use strict";
+ // Import required modules
+ var publicWidget = require('web.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 handler 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++
+ if (count%2 == 0){
+ ev.target.offsetParent.nextElementSibling.classList.add("d-none");
+ }
+ else{
+ ev.target.offsetParent.nextElementSibling.classList.remove("d-none");
+ }
+ },
+ });
+});
\ No newline at end of file
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..56ff245e7
--- /dev/null
+++ b/website_product_customization/static/src/js/website_sale.js
@@ -0,0 +1,72 @@
+/** @odoo-module **/
+import { WebsiteSale } from 'website_sale.website_sale';
+import { patch } from '@web/core/utils/patch';
+import { useRef, useState } from "@odoo/owl";
+
+var ajax = require('web.ajax');
+// Patch the WebsiteSale class with custom modifications
+patch(WebsiteSale.prototype, 'custom/website_product_customization/static/src/js/website_sale.js.WebsiteSale',{
+ // Override the _submitForm method
+
+ _submitForm(){
+ var image_element = document.getElementsByClassName("design_image_doc")
+ if (parseInt(image_element.length) == parseInt(0)) {
+ return this._super(...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 this._super(...arguments);
+ };
+ },
+
+ // Override the _onModalSubmit method
+ _onModalSubmit(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': 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);
+ }
+ 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);
+ // Send a POST request to update the cart options
+ ajax.post('/shop/cart/update_option', {
+ product_and_options: productAndOptions,
+ ...this._getOptionalCombinationInfoParam()
+ }).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);
+ sessionStorage.setItem('website_sale_cart_quantity', quantity);
+ });
+ });
+ }
+})
\ 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
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+