<script>
$(function () {
$('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
});
</script>
<div id="RelatedProduct-product_area">
<div class="ec-relatedRole">
<div class="ec-relatedRole__title">
<div class="ec-relatedItemRole__listTitle">
<div class="ec-relatedItemRole__listItemHeading ec-secHeading--tandem">
<span class="ec-secHeading__en">Recommended</span>
<span class="ec-secHeading__ja">{{ 'おすすめの商品'|trans }}</span>
</div>
</div>
</div>
<div class="ec-relatedRole__frame">
<div class="ec-blockHSpliter__top"></div>
<div class="ec-blockHSpliter__bottom"></div>
</div>
</div>
<div class="ec-relatedRole__wrapper">
<ul class="ec-relatedRole__list">
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
<li class="ec-relatedRole__listItem">
<a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
<div class="ec-relatedRole__image">
<img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
</div>
<div class="ec-relatedRole__tagWrapper">
{# タグ #}
<ul class="ec-relatedRole__tags">
{% for Tag in RelatedProduct.ChildProduct.Tags %}
<li class="ec-relatedRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
{% endfor %}
</ul>
</div>
<div class="ec-relatedRole__detail">
{# <p>{{ RecommendProduct.comment|raw|purify|nl2br }}</p>#}
<dl>
<dt class="item_name">{{ RelatedProduct.ChildProduct.name }}</dt>
<dd class="item_price">
{% if RelatedProduct.ChildProduct.hasProductClass %}
{% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
{% else %}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ~ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
{% endif %}
{% else %}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
{% endif %}(税込)
</dd>
<span>{{ RelatedProduct.content|raw|purify }}</span>
</dl>
</div>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>