<div class="col xs-12">
<div class="headline text-center">
<h3>{{ 'Related Products' |trans }}</h3>
</div>
</div>
<div class="xs-12">
<div class="flex-col box-align-center panel-container">
<div class="panel-content">
<div class="flex-col panel-slider related-products-container">
{% for relatedProduct in product.getrelatedProducts %}
<div class="col xs-12 m-6 l-4 one-third">
<div class="teaser image-text product">
<div class="teaser-content">
{% set productDetailUrl = pimcore_url({
"name": relatedProduct.getName()|sanitized_url,
"articlenumber": relatedProduct.getArticleNumber() },
"shopHandlerProductDetail"
) %}
<div class="image">
<a href="{{ productDetailUrl }}">
{% set relatedProductImage = relatedProduct.getDetailViewRepresentationNew() |objectFallbackImage %}
{% if relatedProductImage != null %}
<img src="{{ relatedProductImage.getThumbnail({
"width": 420,
"height": 190,
"frame": true,
"positioning": "center"
}) }}" />
{% endif %}
</a>
</div>
<div class="teaser-text-box">
<div class="title-box">
<h3>
<a href="{{ productDetailUrl }}">
{{ relatedProduct.getName() }}
</a>
</h3>
</div>
<div class="content-box product-price-container">
{% if (relatedProduct.getPriceOld() !=0) and (relatedProduct.getPrice() != relatedProduct.getPriceOld()) %}
<p class="product-price old">
{{ relatedProduct.getPriceOld() }}
</p>
{% else %}
{% endif %}
<p class="product-price" style="color:#e2231a">{{ relatedProduct.getPrice() | number_format(2, ',', '.') }} {{ '€' |trans }}</p>
<a class="button btn-default" href="{{ productDetailUrl }}">
{{ 'View Product' |trans }}
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>