Magento Custom module - Drawing elements on custom canvas
Budget: $750 – $1,500 USD
The goal of this module is **to let user to customize a shirt by select of course a size, and also custom number and text behind the shirt**, something like similar to this one from bayer munchen website.
(https://fcbayern.com/shop/en/?adword=google/IT/00_IT_Brand/Bayern_Munich/bayern%20munich&gclid=Cj0KCQjwm9yJBhDTARIsABKIcGZrHA3ivkUwl9fVppriPMP25VpWHKQnQc3dUwRhb-KHv9svVGpA-sAaAuRgEALw_wcB)
https://share.getcloudapp.com/eDuRj06Q
---
We must create this module and show it as a "widget" directly on **homepage**, and also show it in **single product page.**
https://fcbayern.com/shop/en/fc-bayern-shirt-champions-league-authentic-21-22/28310/
As you can see if you click on "Individual" button under "Flocking" section, will be showed the back of the shirt and two input fields that let you to choose Name and Number.
**Important:**
*This customized product cannot be paid via COD, or refunded . So we should at least disable COD payment option IF in cart exist a customized product.*
As I can see from fcbayern.com when user add custom product then he can't re-edit from cart, we will use the same approach (see attached picture)
---
We should use this configurator as a widget in homepage, and also in single product page.
The module should permit admit to:
1. Go in backend product page and flag a checkbox to enable product to be customizable
2. After that, always in that page we should be able to specify font-color, and let admin upload/select suitable picture. In our case will be a soccer shirt viewed from back.
3. Optionally admin can insert fixed price for additional fee due to special customization service
---
###Input Data Validation
We should limit input Name to only 14 char (from A to Z (normal alphabet) including char (just . and - ) excluding other remaining chars or special.
About numbers is permitted to use range from 1 to 99 (step 1).
It would be nice if we could add an EventListener on those two input fields and show immediately an error if user will insert bad char just in same way it happen on Bayern Munich website.
---
###How should work from customer side?
1\. Landing on Product page
Customer lands on our product page, as you can see from attached images the page layout is exactly the same as our main default template bought from ThemeForest, so it will include Product Name, His main picture plus his galleries, description etc.. **but with small difference, our custom module template will include a checkbox with a label (Do you want to customize shirt?)**
2\. Trigger our Module
If checkbox is flagged than will appear our two input boxes and confirm button. Also the Main product picture will change showing just the previously one selected from backend (back shirt). User can eventually select some values from a default list (EXAMPLE: 10 JOHN DOE, 11 JANE DOE, 9 RONALDHINO , 2 ROBERTO CARLOS , 7 ZIDANE , we can define it together).
At this point customer can click on Confirm button to display image preview.
3\. Buy custom Product
Customer now can add product to cart , continue his shopping or go to checkout. From Cart Page customer can see added products including info about custom data. Same data will be showed also in order email template and clearly must be accessible by admin from backend. It would be nice if we could add customized image to order email attachment.
---
###Which is differences between Widget mode (configurator accessible by homepage) and Product mode?
It's basically the same, just one little difference. Due to configurator position located in homepage we must permit customer to select which product he want to customize through a simple html select tag . We can perform query and select only products that has been previously flagged in backend with our checkbox.
(https://fcbayern.com/shop/en/?adword=google/IT/00_IT_Brand/Bayern_Munich/bayern%20munich&gclid=Cj0KCQjwm9yJBhDTARIsABKIcGZrHA3ivkUwl9fVppriPMP25VpWHKQnQc3dUwRhb-KHv9svVGpA-sAaAuRgEALw_wcB)
https://share.getcloudapp.com/eDuRj06Q
---
We must create this module and show it as a "widget" directly on **homepage**, and also show it in **single product page.**
https://fcbayern.com/shop/en/fc-bayern-shirt-champions-league-authentic-21-22/28310/
As you can see if you click on "Individual" button under "Flocking" section, will be showed the back of the shirt and two input fields that let you to choose Name and Number.
**Important:**
*This customized product cannot be paid via COD, or refunded . So we should at least disable COD payment option IF in cart exist a customized product.*
As I can see from fcbayern.com when user add custom product then he can't re-edit from cart, we will use the same approach (see attached picture)
---
We should use this configurator as a widget in homepage, and also in single product page.
The module should permit admit to:
1. Go in backend product page and flag a checkbox to enable product to be customizable
2. After that, always in that page we should be able to specify font-color, and let admin upload/select suitable picture. In our case will be a soccer shirt viewed from back.
3. Optionally admin can insert fixed price for additional fee due to special customization service
---
###Input Data Validation
We should limit input Name to only 14 char (from A to Z (normal alphabet) including char (just . and - ) excluding other remaining chars or special.
About numbers is permitted to use range from 1 to 99 (step 1).
It would be nice if we could add an EventListener on those two input fields and show immediately an error if user will insert bad char just in same way it happen on Bayern Munich website.
---
###How should work from customer side?
1\. Landing on Product page
Customer lands on our product page, as you can see from attached images the page layout is exactly the same as our main default template bought from ThemeForest, so it will include Product Name, His main picture plus his galleries, description etc.. **but with small difference, our custom module template will include a checkbox with a label (Do you want to customize shirt?)**
2\. Trigger our Module
If checkbox is flagged than will appear our two input boxes and confirm button. Also the Main product picture will change showing just the previously one selected from backend (back shirt). User can eventually select some values from a default list (EXAMPLE: 10 JOHN DOE, 11 JANE DOE, 9 RONALDHINO , 2 ROBERTO CARLOS , 7 ZIDANE , we can define it together).
At this point customer can click on Confirm button to display image preview.
3\. Buy custom Product
Customer now can add product to cart , continue his shopping or go to checkout. From Cart Page customer can see added products including info about custom data. Same data will be showed also in order email template and clearly must be accessible by admin from backend. It would be nice if we could add customized image to order email attachment.
---
###Which is differences between Widget mode (configurator accessible by homepage) and Product mode?
It's basically the same, just one little difference. Due to configurator position located in homepage we must permit customer to select which product he want to customize through a simple html select tag . We can perform query and select only products that has been previously flagged in backend with our checkbox.