Как в js получить изображение товара Opencart?

Question

[daff002]

переделал мини корзину в хедере на дефолтном шаблоне Opencart 3 и вместо изображения поставил заглушку при наведении на которую всплывает основное изображение товара, но получить путь к изображению товара в скрипте не могу. Так как это корзина, то товаров может быть несколько и соответственно при наведении на свою заглушку должно всплывать свое изображение товара, ниже добавил часть кода

<div class="small-img" style="border-radius:10px;padding-top:5px;background:white;position:absolute;display:none;z-index:10005;box-shadow:0 0 10px rgba(0,0,0,0.5);width:120px;height:110px;max-width:120px;max-height:110px;text-align:center;overflow:hidden;left: 50px;"></div>
<td class="text-center">
      {% if product.thumb %} 
      <a href="{{ product.thumb }}" title="{{ product.name }}" target="blank" onmouseover="show_small_img(event, '{{ product.thumb }}');" onmouseout="$('.small-img').hide();"><img src="image/image_product.png" width="16"></a>
      {% endif %}
</td>

function show_small_img(image){
$('.small-img').html('<img src="тут путь до изображения" style="height:100px;width: 100px;">');
$('.small-img').css({"width": "120px", "text-align":"center"});
$('.small-img').show();
}

Answer 1

[Виталий Першин]

onmouseover="show_small_img('{{ product.thumb }}');"

function show_small_img(image){
$('.small-img').html('<img src="'+image+'" style="height:100px;width: 100px;">');
$('.small-img').css({"width": "120px", "text-align":"center"});
$('.small-img').show();
}

Comments

[daff002]

благодарю

[daff002]

а не подскажите как сделать чтобы всплывающее изображение товара было напротив соответствующего товара

<td class="text-center">
      {% if product.thumb %} 
      <a href="{{ product.thumb }}" title="{{ product.name }}" target="blank" onmouseover="show_small_img(event, '{{ product.thumb }}');" onmouseout="$('.small-img').hide();"><img src="image/image_product.png" width="16"></a>
      {% endif %}
</td>

а то всплывающее изображение расположено в одном и том же месте

[Виталий Першин]

daff002, это уже совсем другой вопрос, там нужно с координатами работать

[Алексей Николаев]

<div class="small-img {{ product.product_id}}" style="..."></div>

onmouseover="show_small_img('{{ product.thumb }}, {{ product.product_id}}');"

function show_small_img(image, product_id){
var smal_img = $('.small-img.' + product_id);
$(smal_img).html('<img src="'+image+'" style="height:100px;width: 100px;">');
$(smal_img).css({"width": "120px", "text-align":"center"});
$(smal_img).show();
}