英文:
Sylius shop - how to render product image in popup cart in header?
问题
在模板 themes/xxx/templates/bundles/SyliusShopBundle/Cart/Widget/_popup.html.twig 中呈现购物车中的商品。有变量 item.product、item.quantity。
是否有一种方法可以呈现产品图片,类似于 item.image?
我倾倒了变量 {{dump(item.product)}} 并看到了图片集合。
英文:
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
答案1
得分: 0
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" />
英文:
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" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论