Using <area> tag with an image in thirty bees?

[Steve]

Edited

[the.rampage.rado]

I have not seen any module for this in PS or TB.... It will require a lot of custom code for sure...

[lesley]

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.

[Steve]

@lesley

Sorry for the dumb question but should I look at GitHub for that?

Thanks!

[lesley]

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

[Steve]

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!

[the.rampage.rado]

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...

[Steve]

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?

[the.rampage.rado]

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...

[the.rampage.rado]

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... :)

[Steve]

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.

[the.rampage.rado]

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! :)

[Steve]

Alright, thanks for your help!

[dosbiner]

There is module something like this, but need some modification https://codecanyon.net/item/prestashop-custom-product-designer/19202018

[Steve]

I don't really need to design anything, that module is mainly for designing right?

Please correct me if I'm wrong.

[arek_karnia]

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

[Steve]

@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?

[Steve]

@arek_karnia

Looks interesting, will keep it in mind, thanks!

[Steve]

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)

[Steve]

Does anyone still have an idea about why it could not be working?

Thanks!

[Steve]

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(); } }); ```