custom/plugins/ThemeOkeonline/src/Resources/views/storefront/component/product/card/versions/version-02/box-standard.html.twig line 1

Open in your IDE?
  1. {% extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
  3. {% block component_product_box %}
  4.     {% if product %}
  5.         {% set name = product.translated.name %}
  6.         {% set id = product.id %}
  7.         {% set cover = product.cover.media %}
  8.         {% set variation = product.variation %}
  10.         <div class="card product-box box-{{ theme_config('productListingStylesProductBoxVersion') }} box-layout-{{ layout }}">
  11.             {% block component_product_box_content %}
  12.                 <div class="card-body d-flex flex-column justify-content-start">
  13.                     {% block component_product_box_badges %}
  14.                         {% sw_include '@parent/storefront/component/product/card/badges.html.twig' %}
  15.                     {% endblock %}
  17.                     {% block component_product_box_rich_snippets %}
  18.                         {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' ignore missing %}
  19.                     {% endblock %}
  21.                     {% block component_product_box_image %}
  22.                         <div class="product-image-wrapper flex-grow-0 mb-0">
  23.                             {# fallback if display mode is not set #}
  24.                             {% set displayMode = displayMode ?: 'standard' %}
  26.                             {# set display mode 'cover' for box-image with standard display mode #}
  27.                             {% if layout == 'image' and displayMode == 'standard' %}
  28.                                 {% set displayMode = 'cover' %}
  29.                             {% endif %}
  31.                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  32.                                title="{{ name }}"
  33.                                class="product-image-link is-{{ displayMode }}">
  34.                                 {% if cover.url %}
  35.                                     {% set attributes = {
  36.                                         'class': 'lazyload product-image is-'~displayMode,
  37.                                         'data-sizes': "{
  38.                                             'xs': '315px',
  39.                                             'sm': '315px',
  40.                                             'md': '427px',
  41.                                             'lg': '333px',
  42.                                             'xl': '333px'
  43.                                         }",
  44.                                         'alt': (cover.translated.alt ?: name),
  45.                                         'title': (cover.translated.title ?: name)
  46.                                     } %}
  48.                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  49.                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  50.                                     {% endif %}
  52.                                     {% sw_thumbnails 'product-image-thumbnails' with {
  53.                                         media: cover,
  54.                                         sizes: {
  55.                                             'xs': '315px',
  56.                                             'sm': '315px',
  57.                                             'md': '427px',
  58.                                             'lg': '333px',
  59.                                             'xl': '333px'
  60.                                         },
  61.                                         load: false,
  62.                                         loadOriginalImage: true
  63.                                     } %}
  64.                                 {% else %}
  65.                                     <div class="product-image-placeholder">
  66.                                         {% sw_icon 'placeholder' style {
  67.                                             'size': 'fluid'
  68.                                         } %}
  69.                                     </div>
  70.                                 {% endif %}
  71.                             </a>
  73.                             {% if config('core.cart.wishlistEnabled') %}
  74.                                 {% block component_product_box_wishlist_action %}
  75.                                     {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  76.                                         appearance: 'circle',
  77.                                         productId: id
  78.                                     } %}
  79.                                 {% endblock %}
  80.                             {% endif %}
  82.                             {% block component_product_box_superdeal %}{% endblock %}
  84.                         </div>
  85.                     {% endblock %}
  87.                     {% block component_product_box_info %}
  88.                         <div class="product-info flex-grow-1 d-flex flex-column justify-content-between flex-grow-1">
  89.                             {% block component_product_box_rating %}
  90.                                 {% if theme_config('productListingStylesProductBoxDisplayRating') %}
  91.                                     {% if config('core.listing.showReview') %}
  92.                                         <div class="product-rating">
  93.                                             {% if product.ratingAverage %}
  94.                                                 {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  95.                                                     points: product.ratingAverage,
  96.                                                     style: 'text-primary'
  97.                                                 } %}
  98.                                             {% endif %}
  99.                                         </div>
  100.                                     {% endif %}
  101.                                 {% endif %}
  102.                             {% endblock %}
  104.                             {% block component_product_box_manufacturer %}
  105.                                 {% if theme_config('productListingStylesProductBoxDisplayManufacturer') %}
  106.                                     <div class="product-manufacturer">
  107.                                         {{ product.manufacturer.translated.name }}
  108.                                     </div>
  109.                                 {% endif %}
  110.                             {% endblock %}
  112.                             {% block component_product_box_name %}
  113.                                 <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  114.                                    class="product-name {{ theme_config('productListingStylesProductBoxTitleFontFormat') }}"
  115.                                    title="{{ name }}">
  116.                                     {{ name }}
  117.                                 </a>
  118.                             {% endblock %}
  120.                             {% block component_product_box_variant_characteristics %}
  121.                                 {% if theme_config('productListingStylesProductBoxDisplayCharacteristics') and product.variation %}
  122.                                     <div class="product-variant-characteristics">
  123.                                         <div class="product-variant-characteristics-text">
  124.                                             {% for variation in product.variation %}
  125.                                                 {#{{ variation.group }}:#}
  126.                                                 <span class="product-variant-characteristics-option">
  127.                                                     {{ variation.option }}
  128.                                                 </span>
  130.                                                 {% if product.variation|last != variation %}
  131.                                                     {{ " | " }}
  132.                                                 {% endif %}
  133.                                             {% endfor %}
  134.                                         </div>
  135.                                     </div>
  136.                                 {% endif %}
  137.                             {% endblock %}
  139.                             {% block component_product_box_description %}
  140.                                 {% if theme_config('productListingStylesProductBoxDisplayDescription') %}
  141.                                     <div class="product-description">
  142.                                         {{ product.translated.description|striptags|raw }}
  143.                                     </div>
  144.                                 {% endif %}
  145.                             {% endblock %}
  147.                             {% block component_product_box_price_and_action %}
  148.                                 {% if theme_config('productListingStylesCombinePriceAndAction') %}
  149.                                     <div class="flex-grow-1 d-flex flex-nowrap"><div class="product-price-info-wrapper col-auto d-flex mt-auto align-content-end flex-column pr-0 w-75">
  150.                                 {% endif %}
  152.                                 {% block component_product_box_price %}
  153.                                     {% if theme_config('productListingStylesProductBoxDisplayPrices') and layout == 'standard'%}
  154.                                         {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  155.                                     {% endif %}
  156.                                 {% endblock %}
  158.                                 {% block component_product_box_availabilty %}
  159.                                     {% if theme_config('productListingStylesProductBoxDisplayAvailabilty') %}
  160.                                         {# Preorder #}
  161.                                         {% if product.active and product.releaseDate and product.releaseDate|date('U') > "now"|date('U') %}
  162.                                             {% block box_preorder %}
  163.                                                 <div class="product-availabilty">
  164.                                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': 'fa-check', 'class': 'far'} %}
  165.                                                     <span>{{ "oo.product.availabilty.inStock"|trans }}</span>
  166.                                                 </div>
  167.                                             {% endblock %}
  168.                                         {# In stock #}
  169.                                         {% elseif product.active and product.availableStock >= product.minPurchase and product.deliveryTime %}
  170.                                             {% block box_in_stock %}
  171.                                                 <div class="product-availabilty">
  172.                                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': 'fa-check', 'class': 'far'} %}
  173.                                                     <span>{{ "oo.product.availabilty.inStock"|trans }}</span>
  174.                                                 </div>
  175.                                             {% endblock %}
  176.                                         {# Out of stock #}
  177.                                         {% elseif product.isCloseout and product.availableStock < product.minPurchase %}
  178.                                             {% block box_out_of_stock %}
  179.                                                 <div class="product-availabilty out-of-stock">
  180.                                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': 'fa-truck', 'class': 'fas'} %}
  181.                                                     <span>{{ "oo.product.availability.outOfStock"|trans }}</span>
  182.                                                 </div>
  183.                                             {% endblock %}
  184.                                         {# Restock #}
  185.                                         {% elseif product.availableStock < product.minPurchase and product.deliveryTime and product.restockTime %}
  186.                                             {% block box_restock %}
  187.                                                  <div class="product-availabilty">
  188.                                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': 'fa-check', 'class': 'far'} %}
  189.                                                     <span>{{ "oo.product.availabilty.inStock"|trans }}</span>
  190.                                                 </div>
  191.                                             {% endblock %}
  192.                                         {# Default (looks like in stock). #}
  193.                                         {% else %}
  194.                                             {% block box_default %}
  195.                                                 <div class="product-availabilty">
  196.                                                     {% sw_include "@parent/storefront/utilities/icon.html.twig" ignore missing with { 'name': 'fa-check', 'class': 'far'} %}
  197.                                                     <span>{{ "oo.product.availabilty.inStock"|trans }}</span>
  198.                                                 </div>
  199.                                             {% endblock %}
  200.                                         {% endif %}
  201.                                     {% endif %}
  202.                                 {% endblock %}
  204.                                 {% if theme_config('productListingStylesCombinePriceAndAction') %}
  205.                                     </div><div class="col-auto ml-auto align-self-end pl-0 pr-0">
  206.                                 {% endif %}
  208.                                 {% block component_product_box_action %}
  209.                                     {% if
  210.                                         (theme_config('productListingStylesProductBoxButton') != 'none' and layout != 'image') or
  211.                                         (theme_config('productListingStylesProductBoxImageButton') != 'none' and layout == 'image')
  212.                                     %}
  213.                                             {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  214.                                     {% endif %}
  215.                                 {% endblock %}
  217.                                 {% if theme_config('productListingStylesCombinePriceAndAction') %}
  218.                                     </div></div>
  219.                                 {% endif %}
  220.                             {% endblock %}
  222.                             {% block component_product_box_siblingslider %}
  223.                                 {% if theme_config('productListingStylesProductBoxDisplaySiblingSlider') and layout == 'standard' %}
  224.                                     <div class="product-sibling-slider">
  225.                                         {% sw_include '@Storefront/storefront/component/product/card/sibling-slider.html.twig' %}
  226.                                     </div>
  227.                                 {% endif %}
  228.                             {% endblock %}
  229.                         </div>
  230.                     {% endblock %}
  231.                 </div>
  232.             {% endblock %}
  233.         </div>
  234.     {% endif %}
  235. {% endblock %}