How to get an image of an Opencart product in js?

  • 0
    I remade the mini cart in the header on the default Opencart 3 template and instead of the image put a stub on hovering over which the main product image pops up, but I can't get the path to the product image in the script. Since this is a basket, there can be several products and, accordingly, when you hover over your stub, your product image should pop up, below added a part of the code

    <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();
    }
    JavaScript Jude Chavez, May 3, 2019

  • 1 Answers
  • 0
    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();
    }
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!