Experiencing some problems with PrestaShop's image mapper

[Steve]

Hey,

To add the image mapper to TB I followed these instructions from @lesley

@lesley said in Using <area> tag with an image in thirty bees?:

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

When I did that and added an image map, it wouldn't save the image map.

I got this error in the console:

```

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 fixed that by changing line 131 from: window.lastEditedItem.remove(); //line 131 ``` To:

if (!!window.lastEditedItem)

Now it saves the image map like it should, but it doesn't select the part that I chose but it chooses a random place.

Example:

This is what I want to map: https://imgur.com/a/1g4lcCv

However, when I hover over the images, nothing happens: https://imgur.com/a/Xt5Y4Xh

I only get the candle linked once I hover in-between the vehicles: https://imgur.com/a/LKRh0hz

Does anyone have a clue why it doesn't work correctly?

I've got another question: 1. Why does the picture that I want to map duplicate itself and gets posted twice above my category?: https://imgur.com/a/TYs7X8Z (The image map doesn't work when I hover inside the product itself, so when I go to the candle page for example, it doesn't work. Could that be because of the next and previous picture feature of TB?)

P.S: This is an error that I get on the image mapper page in the console: https://imgur.com/a/oeTtxqS (here I get the same error 24 times)

Uncaught ReferenceError: doUpdate is not defined at _46 (eval at <anonymous> (jquery.imgareaselect.js:1), <anonymous>:1:5924) at dispatch (jquery-1.11.0.min.js:3) at r.handle (jquery-1.11.0.min.js:3)

The weird thing is, I get the same error rapidly once I make the console bigger or smaller with my mouse. https://imgur.com/a/i2jRoW9 (here is the same error 57 times, because I changed the size of the console)

Could that be the problem?

Thanks!