Jump to content
thirty bees forum

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


Steve

Recommended Posts

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

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

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

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

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

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

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

@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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...