{% block component_product_box %}
{% if product %}
{% set name = product.translated.name %}
{% set id = product.id %}
{% set cover = product.cover.media %}
{% set variation = product.variation %}
{% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
{% set displayParent = true %}
{% set sizeoption = variation[0].option %}
{% set coloroption = variation[1].option %}
{% set blank = " " %}
{% set gloveoption = " " ~ variation[2].option %}
{% set size = " " ~ sizeoption %}
{% set ProductLink = "" %}
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}">
{% set imageurl = "" %}
{% set Element = "" %}
{% for Item in product.cover.media.thumbnails.elements %}
{% if Item.width == 800 %}
{% set imageurl = Item.url %}
{% set Element = Item %}
{% endif %}
{% endfor %}
<div class="card product-box box-{{ layout }}">
{% block component_product_box_content %}
<div class="card-body">
{% block component_product_box_badges %}
{% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
{% endblock %}
{% block component_product_box_rich_snippets %}
{# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
{% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %}
{% endblock %}
{% block component_product_box_image %}
<div class="product-image-wrapper">
{# fallback if display mode is not set #}
{% set displayMode = displayMode ?: 'standard' %}
{# set display mode 'cover' for box-image with standard display mode #}
{% if layout == 'image' and displayMode == 'standard' %}
{% set displayMode = 'cover' %}
{% endif %}
{% block component_product_box_image_link %}
{% block component_product_box_image_link_inner %}
{% if cover.url %}
{% set attributes = {
'class': 'product-image is-'~displayMode,
'alt': (cover.translated.alt ?: name),
'title': (cover.translated.title ?: name)
} %}
{% if displayMode == 'cover' or displayMode == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
{% endif %}
{% block component_product_box_image_thumbnail %}
{% if imageurl is empty %}
{% set imageurl = cover.url %}
{% endif %}
<img src="{{ imageurl }}" class="product-image is-standard">
<!--
{% sw_thumbnails 'product-image-thumbnails' with {
media: cover,
sizes: sizes
} %} -->
{% endblock %}
{% else %}
{% block component_product_box_image_placeholder %}
<div class="product-image-placeholder">
<!-- {% sw_icon 'placeholder' style {
'size': 'fluid'
} %} -->
</div>
{% endblock %}
{% endif %}
{% endblock %}
{% endblock %}
{% if config('core.cart.wishlistEnabled') %}
{% block component_product_box_wishlist_action %}
{% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
appearance: 'circle',
productId: id
} %}
{% endblock %}
{% endif %}
</div>
{% endblock %}
{% block component_product_box_info %}
<div class="product-info">
{% block component_product_box_rating %}
{% if config('core.listing.showReview') %}
<div class="product-rating">
{% if product.ratingAverage %}
{% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
points: product.ratingAverage,
style: 'text-primary'
} %}
{% endif %}
</div>
{% endif %}
{% endblock %}
{% block component_product_box_variant_characteristics %}
<div class="product-variant-characteristics">
<div class="product-variant-characteristics-text">
{% if not displayParent %}
{% for variation in product.variation %}
{{ variation.group }}:
<span class="product-variant-characteristics-option">
{{ variation.option }}
</span>
{% if product.variation|last != variation %}
{{ " | " }}
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
{% endblock %}
<!--
{% block component_product_box_description %}
<div class="product-description">
{{ product.translated.description|striptags|raw }}
</div>
{% endblock %}
-->
<div class="VariantData-{{ product.productNumber }}">
<div class='wappenbox'>
{% for propertyId in product.propertyIds %}
{% if propertyId == "e755c9070e7d41469f9a1dad62db875a" %} <div class='variantwappen EN11491'></div> {% endif %}
{% if propertyId == "a581943fd430489598f209896e7bbb56" %} <div class='variantwappen EN11495'></div> {% endif %}
{% if propertyId == "b1fc6928266347428bd6b74c0268dad4" %} <div class='variantwappen EN14126'></div> {% endif %}
{% if propertyId == "fa76425d7f2a400099d925d591e3be9f" %} <div class='variantwappen EN10732'></div> {% endif %}
{% if propertyId == "3842201e22984368bcc0d3125cf2827c" %} <div class='variantwappen Typ1'></div> {% endif %}
{% if propertyId == "fce6da51bcce4345a2fa0a44d88f249b" %} <div class='variantwappen Typ3'></div> {% endif %}
{% if propertyId == "f0f15d19683a4fa0a16901a8f6e9f1af" %} <div class='variantwappen Typ4'></div> {% endif %}
{% if propertyId == "778dfd9f51044a54a60cbd945b5b2762" %} <div class='variantwappen Typ5'></div> {% endif %}
{% if propertyId == "ca28fcc57c924b8e925c2bef5893fafa" %} <div class='variantwappen Typ6'></div> {% endif %}
{% if propertyId == "0be6549f03d142c785c97b05ba9f1faa" %} <div class='variantwappen KatIII'></div> {% endif %}
{% endfor %}
</div>
<div class='clearingItem'></div>
<div class='colorbox'>
{% if product.translated.customFields.custom_colors_ != "" %}
{% set colors = product.translated.customFields.custom_colors_ | split(',') %}
{% for color in colors %}
{% if color == "grün" %}
<div class='variantcolor gruen'></div>
{% elseif color == "weiß/blau" %}
<div class='variantcolor' style="background: linear-gradient(to bottom left, #ffffff 50%, #395f98 50%);"></div>
{% else %}
<div class='variantcolor {{ color }}'></div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
{% block component_product_box_action %}
{% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
{% endblock %}
{% block component_product_box_price %}
{% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
{% endblock %}
{% block component_product_box_name %}
{% set newname = name %}
{% if size != "" %}
{% set newname = newname|replace({(size): blank}) %}
{% endif %}
{% if coloroption != "" %}
{% set newname = newname|replace({(coloroption): blank}) %}
{% endif %}
{% if gloveoption != "" %}
{% set newname = newname|replace({(gloveoption): blank}) %}
{% endif %}
<div class="BoxCardName">
{% if newname|length > 0 %}
{% if newname|length >= 71 %}
{{ newname|u.truncate(70, '…') }}
{% else %}
{{ newname }}
{% endif %}
{% endif %}
</div>
{#
{{ name|replace({(sizeoption): blank, (coloroption): blank}) }}
{{ name }}
#}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
</a>
{% endif %}
{% endblock %}