Steve Posted October 16, 2018 Share Posted October 16, 2018 Edited Link to comment Share on other sites More sharing options...
the.rampage.rado Posted October 16, 2018 Share Posted October 16, 2018 I have not seen any module for this in PS or TB.... It will require a lot of custom code for sure... Link to comment Share on other sites More sharing options...
lesley Posted October 16, 2018 Share Posted October 16, 2018 There is an image mapper hidden deep in thirty bees that can be used for this. You would need to find the front end bits to put it together, but it should still work. Link to comment Share on other sites More sharing options...
Steve Posted October 16, 2018 Author Share Posted October 16, 2018 @lesley Sorry for the dumb question but should I look at GitHub for that? Thanks! Link to comment Share on other sites More sharing options...
lesley Posted October 16, 2018 Share Posted October 16, 2018 Follow these instructions, http://doc.prestashop.com/display/PS16/Building+Image+Maps That will enable the scenes from the backend. Then you will need to add the relevant code to your theme. You will need to make your theme has this reference, https://github.com/PrestaShop/PrestaShop/blob/1.6.1.x/themes/default-bootstrap/category.tpl#L33 and this file, https://github.com/PrestaShop/PrestaShop/blob/1.6.1.x/themes/default-bootstrap/scenes.tpl Link to comment Share on other sites More sharing options...
Steve Posted October 17, 2018 Author Share Posted October 17, 2018 That will enable the scenes from the backend. Okay I added the scene like that doc page said. Then you will need to add the relevant code to your theme. You will need to make your theme has this reference, Where can I add code to my theme? Do I need to do this at the 'Custom Code' page? I have the default theme in case that matters. Thanks! Link to comment Share on other sites More sharing options...
the.rampage.rado Posted October 17, 2018 Share Posted October 17, 2018 The feature present in TB and PS is very far from what you need. The core may be there but in order to get the checkout process to understand what does it mean and how to calculate stuff will be nightmare. @lesley was reffering to the code somebody will need to write for you to redo 1/3 of the functionality of the shop - front end, product pages, checkout process, backend - orders controller, stock managment.... lol... I would invest time in the only possible workaround - divide your shop in categories based on brand, model, then part where the sticker should go and making different products for each one... Link to comment Share on other sites More sharing options...
Steve Posted October 17, 2018 Author Share Posted October 17, 2018 I would invest time in the only possible workaround - divide your shop in categories based on brand, model, then part where the sticker should go and making different products for each one... So do you mean that I would have to scrap the idea of using hovering images completely, or categorize all products to make it easier? Link to comment Share on other sites More sharing options...
the.rampage.rado Posted October 17, 2018 Share Posted October 17, 2018 If somebody can write for you a module that have this functionality where you choose the sticker placement and design and probably make few modifications to the design - it will be the best. I have not seen ANY decent quality custom design module for PS and TB (I mean like to make own custom Tshirts, prints, etc)... The other workarround I proposed will be tons of work. If I understand your idea - you need your designs to be with the shape of some car panel, let's say fender, then on top of this shape the customer can add custom design so you can print the foil and send it out? In the case I propose you have to split your catalog in brands, then models, then car parts and for each of them you can add different attributes with dropdown menu which can change the design in the product page (in each combo you can have different color, different design, etc). But imagine you have 250 car models with 5-6 parts per model and then 10-15 designs... A work for whole year to put this in your site.... And after that you will have to manually do the designs for printing/cutting... Link to comment Share on other sites More sharing options...
the.rampage.rado Posted October 17, 2018 Share Posted October 17, 2018 Oh... I forgot it's a homework... :) So if I were you would simply switch to Wordpress+Woocommerce+Fancy product designer.... It has most of what ~~everything~~ you need - the only issue - it's WP... :) Link to comment Share on other sites More sharing options...
Steve Posted October 17, 2018 Author Share Posted October 17, 2018 If I understand your idea - you need your designs to be with the shape of some car panel, let's say fender, then on top of this shape the customer can add custom design so you can print the foil and send it out? In the case I propose you have to split your catalog in brands, then models, then car parts and for each of them you can add different attributes with dropdown menu which can change the design in the product page (in each combo you can have different color, different design, etc). I want this: A client of the company that I work for has damage on their car with their brand sticker(s) on it. They come to my website to order new stickers. I would be very convenient if the user could select the car they drive, select the part of the car where they want that sticker, go to the checkout and done. So no design or anything, just a color that comes up once you hover over the part of the car (to make it clearer). Click on the part of the car, and checkout (or shopping cart). The guys here know what design it has, they just want to know what and where, to make it more automated. Sorry if I didn't explain it well enough earlier! Be sure to ask more if it's still not clear haha. Link to comment Share on other sites More sharing options...
the.rampage.rado Posted October 17, 2018 Share Posted October 17, 2018 I got you now... But I'm afraid that I have not seen anything ready for the last 8 years I'm using PS... :) Probably somebody else can give a hint! :) Link to comment Share on other sites More sharing options...
Steve Posted October 17, 2018 Author Share Posted October 17, 2018 Alright, thanks for your help! Link to comment Share on other sites More sharing options...
dosbiner Posted October 17, 2018 Share Posted October 17, 2018 There is module something like this, but need some modification https://codecanyon.net/item/prestashop-custom-product-designer/19202018 Link to comment Share on other sites More sharing options...
Steve Posted October 17, 2018 Author Share Posted October 17, 2018 I don't really need to design anything, that module is mainly for designing right? Please correct me if I'm wrong. Link to comment Share on other sites More sharing options...
arek_karnia Posted October 18, 2018 Share Posted October 18, 2018 Hi, I use the Product Arrangement module for the sale of spare parts. The store will be launched in about 10 days, but now you can see the demo version of the module. https://addons.prestashop.com/pl/personalizacja-strony/24867-product-arrangement.html It works with TB without problems and has a great interface. For me one of the best solutions I found. Greetings, Arek Link to comment Share on other sites More sharing options...
Steve Posted October 18, 2018 Author Share Posted October 18, 2018 @lesley Alright I've added the code to scenes.tpl and category.tpl. I can see Image Mapper under catalog now. I'm using it now but it doesn't seem to actually save what I want to map, while it says it does save? Did I do something wrong with adding code? Link to comment Share on other sites More sharing options...
Steve Posted October 18, 2018 Author Share Posted October 18, 2018 @arek_karnia Looks interesting, will keep it in mind, thanks! Link to comment Share on other sites More sharing options...
Steve Posted October 19, 2018 Author Share Posted October 19, 2018 I get this error in the console when I'm trying to select a product in the dropdown menu of the image mapper: ``` scenes.js:131 Uncaught TypeError: Cannot read property 'remove' of null at HTMLInputElement.afterTextInserted (scenes.js:131) at HTMLInputElement.dispatch (jquery-1.11.0.min.js:3) at HTMLInputElement.r.handle (jquery-1.11.0.min.js:3) at Object.trigger (jquery-1.11.0.min.js:3) at Object.e.event.trigger (jquery-migrate-1.2.1.min.js:2) at HTMLInputElement. (jquery-1.11.0.min.js:3) at Function.each (jquery-1.11.0.min.js:2) at e.fn.init.each (jquery-1.11.0.min.js:2) at e.fn.init.trigger (jquery-1.11.0.min.js:3) at selectCurrent (jquery.autocomplete.js:219) at HTMLUListElement. (jquery.autocomplete.js:581) at HTMLUListElement.dispatch (jquery-1.11.0.min.js:3) at HTMLUListElement.r.handle (jquery-1.11.0.min.js:3) ``` I have no idea if it matters but I'm posting it just in case. Edit: And I get this error when I'm on the page itself: ```VM11366:1 Uncaught ReferenceError: doUpdate is not defined at _46 (eval at (jquery.imgareaselect.js:1), :1:5924) at dispatch (jquery-1.11.0.min.js:3) at r.handle (jquery-1.11.0.min.js:3) Link to comment Share on other sites More sharing options...
Steve Posted October 22, 2018 Author Share Posted October 22, 2018 Does anyone still have an idea about why it could not be working? Thanks! Link to comment Share on other sites More sharing options...
Steve Posted October 24, 2018 Author Share Posted October 24, 2018 The file 'scenes.js' doesn't have any code in it, how can I get the original code for that file back? Edit: found scenes.js in at 'source' in my browser. Still don't know what causes the error though. ``` zoneCurrent = 0; selectionCurrent = null; valueOfZoneEdited = null; // Last item is used to save the current zone and // allow to replace it if user cancel the editing lastEditedItem = null; /* functions called by cropping events */ function showZone() { $('#largesceneimage').imgAreaSelect({ show: true }); } function hideAutocompleteBox() { $('#ajaxchooseproduct') .fadeOut('fast') .find('#productautocompleteinput').val(''); } function onSelectEnd(img, selection) { selectionCurrent = selection; showAutocompleteBox(selection.x1, selection.y1 + selection.height); } function undoEdit() { hideAutocompleteBox(); $('#largesceneimage').imgAreaSelect({ hide: true }); $(document).unbind('keydown'); } /* ** Pointer function do handle event by key released */ function handlePressedKey(keyNumber, fct) { // KeyDown isn't handled correctly in editing mode $(document).keyup(function (event) { if (event.keyCode === keyNumber) { fct(); } }); } function showAutocompleteBox(x1, y1) { $('#ajaxchooseproduct:hidden') .slideDown('fast'); $('#productautocompleteinput').focus(); handlePressedKey('27', undoEdit); } function editThisZone(aInFixedZoneElement) { var $fixedZoneElement = $(aInFixedZoneElement).parent(); var x1 = $fixedZoneElement.css('margin-left'); x1 = x1.substring(0, x1.indexOf('px')); x1 = parseInt(x1, 10) - parseInt($('#largesceneimage').css('margin-left').replace('px', ''), 10); var y1 = $fixedZoneElement.css('margin-top'); y1 = y1.substring(0, y1.indexOf('px')); y1 = parseInt(y1, 10) - parseInt($('#largesceneimage').css('margin-top').replace('px', ''), 10); var width = $fixedZoneElement.css('width'); width = width.substring(0, width.indexOf('px')); var x2 = x1 + parseInt(width, 10); var height = $fixedZoneElement.css('height'); height = height.substring(0, height.indexOf('px')); var y2 = y1 + parseInt(height, 10); window.valueOfZoneEdited = $fixedZoneElement.find('a').attr('rel'); window.selectionCurrent = []; window.selectionCurrent['x1'] = x1; window.selectionCurrent['y1'] = y1; window.selectionCurrent['width'] = width; window.selectionCurrent['height'] = height; // Save the last zone window.lastEditedItem = $fixedZoneElement; $('#productautocompleteinput').val($fixedZoneElement.find('p').text()); showAutocompleteBox(x1, y1 + parseInt(height, 10)); $('#largesceneimage').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2 }); } /* function called by cropping process (buttons clicks) */ function deleteProduct(indexZone) { $('#visualzone' + indexZone).fadeOut('fast', function () { $(this).remove(); }); return false; } function afterTextInserted(event, data, formatted) { if (typeof data === 'undefined') { return false; } // If the element exist, then the user confirm the editing // The variable need to be reinitialized to null for the next if (typeof window.lastEditedItem !== 'undefined') { window.lastEditedItem.remove(); //line 131 } window.lastEditedItem = null; window.zoneCurrent += 1; var idProduct = data[1]; var nameProduct = data[0]; var x1 = parseInt($('#largesceneimage').css('margin-left').replace('px', ''), 10) + parseInt(window.selectionCurrent.x1); var y1 = parseInt($('#largesceneimage').css('margin-top').replace('px', ''), 10) + parseInt(window.selectionCurrent.y1); var width = window.selectionCurrent.width; var height = window.selectionCurrent.height; addProduct(window.zoneCurrent, x1, y1, width, height, idProduct, nameProduct); } function addProduct(zoneIndex, x1, y1, width, height, idProduct, nameProduct) { $('#largesceneimage') .imgAreaSelect({ hide: true }) .before('\ \ \ \ \ \ \ ' + nameProduct + '\ \ \ \ \ \ \ \ '); $('.fixedzone').css('opacity', '0.8'); $('#savescene').fadeIn('slow'); $('#ajaxchooseproduct:visible') .fadeOut('slow') .find('#productautocompleteinput').val(''); } $(window).load(function () { /* function autocomplete */ $('#product_autocomplete_input') .autocomplete('ajax_products_list.php', { minChars: 1, autoFill: true, max: 20, matchContains: true, mustMatch: true, scroll: false }) .result(afterTextInserted); $('#largesceneimage').imgAreaSelect({ borderWidth: 1, onSelectEnd: onSelectEnd, onSelectStart: showZone, onSelectChange: hideAutocompleteBox, minHeight: 30, minWidth: 30 }); /* load existing products zone */ for (var i = 0; i < window.startingData.length; i += 1) { addProduct(i, window.startingData[i][2] + parseInt($('#large_scene_image').css('margin-left').replace('px', ''), 10), window.startingData[i][3] + parseInt($('#large_scene_image').css('margin-top').replace('px', ''), 10), window.startingData[i][4], window.startingData[i][5], window.startingData[i][1], window.startingData[i][0]); } window.zoneCurrent = window.startingData.length; if (window.startingData.length) { $('#save_scene').show(); } }); ``` Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now