Sylius shop - how to render product image in popup cart in header?

Question

in template themes/xxx/templates/bundles/SyliusShopBundle/Cart/Widget/_popup.html.twig are rendered items in shopping cart. There are variables item.product, item.quantity

Is there some way how to render product image, something like item.image?

I dumped variable {{dump(item.product)}} and see images collection

Answer 1

First you need to retrieve from the product one image you want to display you can do it e.g. by image.type in twig to filter the image by type you can use product.imagesByType('type') then you can use imagine_filter to retrieve the image path in appropriate resolutions e.g. product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_tiny_thumbnail')).

You can find all image types defined in sylius in https://docs.sylius.com/en/latest/cookbook/images/images.html

An example how to do it you will find in sylius code, for example here -> https://github.com/Sylius/Sylius/blob/f0ea6668bde5163d7e5a5b0f1ae28301ce6a9b14/src/Sylius/Bundle/ShopBundle/Resources/views/Product/_mainImage.html.twig

{% if product.imagesByType('thumbnail') is not empty %}
    {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
{% elseif product.images.first %}
    {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
{% else %}
    {% set path = asset('assets/shop/img/200x200.png') %}
{% endif %}

<img src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" class="ui bordered image" />