+
+
+
+
+
+
+
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..6a6ba9bee
--- /dev/null
+++ b/website_product_customization/static/src/js/website_product_custom.js
@@ -0,0 +1,55 @@
+/** @odoo-module **/
+import publicWidget from "@web/legacy/js/public/public_widget";
+
+var count = 0;
+
+document.addEventListener("keydown", function(event){
+ if (event.key === "Delete" && window.canvas) {
+ window.canvas.remove(window.canvas.getActiveObject());
+ }
+});
+
+publicWidget.registry.canvasWidget = publicWidget.Widget.extend({
+ selector: '#product_detail',
+ events: {
+ 'change #product-design': '_onChangeSelect',
+ 'click .design_save': '_onSave',
+ 'click #product_customize_btn': '_addProductDesign',
+ },
+ _onChangeSelect: function() {
+ if (typeof fabric === "undefined") {
+ console.error("Fabric.js is not loaded");
+ return;
+ }
+ 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 () {
+ window.canvas = new fabric.Canvas('tshirt-canvas'); // Assign to window for global access
+ var image = new fabric.Image(design_image);
+ image.scaleToHeight(100);
+ image.scaleToWidth(100);
+ window.canvas.centerObject(image);
+ window.canvas.add(image);
+ window.canvas.renderAll();
+ };
+ },
+ _onSave: function() {
+ var node = document.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 to the cart.');
+ });
+ },
+ _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");
+ }
+ },
+});
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..811d121c3
--- /dev/null
+++ b/website_product_customization/static/src/js/website_sale.js
@@ -0,0 +1,35 @@
+/** @odoo-module **/
+import { WebsiteSale } from '@website_sale/js/website_sale';
+import { patch } from '@web/core/utils/patch';
+
+// Patch the WebsiteSale class with custom modifications
+patch(WebsiteSale.prototype,{
+
+ async _submitForm(){
+// Super the function to update the design image if it has customized
+ 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);
+ };
+ },
+
+
+ _serializeProduct(product) {
+// Updating the design_image value in case of the variant product
+ var result = super._serializeProduct(...arguments);
+ if (document.getElementsByClassName('design_image_doc')[0]) {
+ result.design_image = document.getElementsByClassName('design_image_doc')[0].currentSrc;
+ }
+ return result;
+
+ },
+
+});
diff --git a/website_product_customization/views/product_design_views.xml b/website_product_customization/views/product_design_views.xml
new file mode 100644
index 000000000..cb2b4bff7
--- /dev/null
+++ b/website_product_customization/views/product_design_views.xml
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Customize Product Design From Website. +
+Website Product Customization +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Create customized designs.
+
+
+
+
+
+
+
+
+ + Allows users to customize products by choosing + the designs from front-end. +
+
+
+
+
+
+
+
+
+
+ Website Product Customization
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + 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. +
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Updated product in the back-end. + + + +
+
+
+ + Product with design will appear on the associated + sale order in the back-end. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create customized designs
+
+
+
+
+
+
+
+
+
+ Allows users to customize products by choosing + the designs from front-end
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 27th November, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+ -
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ ![]()
+
+
+
+
+
+
+ To remove a loaded picture, select it and press + the DEL key. +
+ ++ +
+
+
+ +
+
+
+
+ +
+
+