custom/plugins/zenitPlatformStratus/src/Resources/views/storefront/component/product/card/box.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/product/card/box.html.twig' %}
  3. {% block component_product_box_include %}
  4.     {# Includes a custom product-box template defined by the layout variable.
  5.        The standard template is used if no custom layout is set. #}
  7.     {% if layout is empty %}
  8.         {% set layout = 'standard' %}
  9.     {% endif %}
  11.     {# set fallback image size for every viewport #}
  12.     {% set sizes = {
  13.         'xs': '500px',
  14.         'sm': '315px',
  15.         'md': '390px',
  16.         'lg': '350px',
  17.         'xl': '280px'
  18.     } %}
  20.     {% if layout == 'image' %}
  21.         {% set sizes = {
  22.             'xs': '500px',
  23.             'sm': '500px',
  24.             'md': '390px',
  25.             'lg': '350px',
  26.             'xl': '280px'
  27.         } %}
  28.     {% endif %}
  30.     {# set custom image size for every viewport #}
  31.     {% if theme_config('zen-product-listing-card-img-sizes-custom') is same as true %}
  32.         {% set sizes = {
  33.             'xs': "#{theme_config('zen-product-listing-card-img-size-xs')}px",
  34.             'sm': "#{theme_config('zen-product-listing-card-img-size-sm')}px",
  35.             'md': "#{theme_config('zen-product-listing-card-img-size-md')}px",
  36.             'lg': "#{theme_config('zen-product-listing-card-img-size-lg')}px",
  37.             'xl': "#{theme_config('zen-product-listing-card-img-size-xl')}px",
  38.         } %}
  39.     {% elseif element.type is same as ('product-box') %}
  40.         {% set sizes = {
  41.             'xs': '500px',
  42.             'sm': '315px',
  43.             'md': '390px',
  44.             'lg': '350px',
  45.             'xl': '401px'
  46.         } %}
  47.     {% else %}
  48.         {# ... calculating the block margins #}
  49.         {% if block.marginLeft is empty or block.marginLeft is same as ('auto') %}
  50.             {% set blockMarginsMobile = (theme_config('zen-layout-container-spacing-left') * 0.5 + theme_config('zen-layout-container-spacing-right') * 0.5) > 40 ?: 40 %}
  51.             {% set blockMargins = theme_config('zen-layout-container-spacing-left') + theme_config('zen-layout-container-spacing-right') %}
  52.         {% else %}
  53.             {% set blockMarginsMobile = block.marginLeft|number_format + block.MarginRight|number_format %}
  54.             {% set blockMargins = blockMarginsMobile %}
  55.         {% endif %}
  57.         {# ... set the biggest possible container width
  58.             before next breakpoint e.g. 576 - 1 Pixel #}
  59.         {% set breakpointDownXS = (theme_config('breakpoint.sm') - 1) %}
  60.         {% set breakpointDownSM = (theme_config('breakpoint.md') - 1) %}
  61.         {% set breakpointDownMD = (theme_config('breakpoint.lg') - 1) %}
  62.         {% set breakpointDownLG = (theme_config('breakpoint.xl') - 1) %}
  63.         {% set breakpointDownXL = theme_config("zen-layout-container-width") ?: 1400 %}
  65.         {# ... sidebar sections #}
  66.         {% if section.type is same as ('sidebar') %}
  67.             {% set breakpointDownLG = breakpointDownLG * 0.666666666667 %}
  68.             {% set breakpointDownXL = breakpointDownXL * 0.75 %}
  69.         {% endif %}
  71.         {# ... calculate the available content widths from
  72.             breakpointDowns, blockMargins and layout paddings #}
  73.         {% set widthXS = breakpointDownXS - blockMarginsMobile - (theme_config('zen-layout-padding-left-mobile') * 0.25) - (theme_config('zen-layout-padding-right-mobile') * 0.25) %}
  74.         {% set widthSM = breakpointDownSM - blockMarginsMobile - (theme_config('zen-layout-padding-left-mobile') * 0.5) - (theme_config('zen-layout-padding-right-mobile') * 0.5) %}
  75.         {% set widthMD = breakpointDownMD - blockMarginsMobile - theme_config('zen-layout-padding-left-mobile') - theme_config('zen-layout-padding-right-mobile') %}
  76.         {% set widthLG = breakpointDownLG - blockMargins - (theme_config('zen-layout-padding-left') * 0.5) - (theme_config('zen-layout-padding-right') * 0.5) %}
  77.         {% set widthXL = breakpointDownXL - blockMargins %}
  79.         {# ... extra calculation for product sliders,
  80.             calculatings the cols for next calculation #}
  81.         {% if element.type is same as ('product-slider') and sliderConfig.elMinWidth.value %}
  82.             {% set colsXS = widthXS / (sliderConfig.elMinWidth.value|number_format + theme_config('zen-product-listing-card-padding')) %}
  83.             {% set colsSM = widthSM / (sliderConfig.elMinWidth.value|number_format + theme_config('zen-product-listing-card-padding')) %}
  84.             {% set colsMD = widthMD / (sliderConfig.elMinWidth.value|number_format + theme_config('zen-product-listing-card-padding')) %}
  85.             {% set colsLG = widthLG / (sliderConfig.elMinWidth.value|number_format + theme_config('zen-product-listing-card-padding')) %}
  86.             {% set colsXL = widthXL / (sliderConfig.elMinWidth.value|number_format + theme_config('zen-product-listing-card-padding')) %}
  87.         {% endif %}
  89.         {# Calculates sizes by configurated product listing columns or product slider min width.
  90.             Columns are set in cms-element-product-listing.html.twig or calculated above #}
  91.         {% if colsXS and colsSM and colsMD and colsLG and colsXL and theme_config('zen-product-listing-card-padding') %}
  92.             {% set sizeXS = widthXS / colsXS|round(0,'floor') - (theme_config('zen-product-listing-card-padding') * (colsXS - 1) / colsXS) %}
  93.             {% set sizeSM = widthSM / colsSM|round(0,'floor') - (theme_config('zen-product-listing-card-padding') * (colsSM - 1) / colsSM) %}
  94.             {% set sizeMD = widthMD / colsMD|round(0,'floor') - (theme_config('zen-product-listing-card-padding') * (colsMD - 1) / colsMD) %}
  95.             {% set sizeLG = widthLG / colsLG|round(0,'floor') - (theme_config('zen-product-listing-card-padding') * (colsLG - 1) / colsLG) %}
  96.             {% set sizeXL = widthXL / colsXL|round(0,'floor') - (theme_config('zen-product-listing-card-padding') * (colsXL - 1) / colsXL) %}
  98.             {# Consider portrait images, because the width of the thumbnail is less than the
  99.                 calculated thumbnail specification #}
  100.             {% set imageAspectRatio = theme_config('zen-product-listing-card-img-padding') / 100 %}
  101.             {% set imageHeight = theme_config('zen-product-listing-card-img-height')|intval %}
  102.             {% set imageWidth = theme_config('zen-product-listing-card-img-width')|intval %}
  104.             {% if imageHeight > 0 and imageWidth > 0 %}
  105.                 {% set imageAspectRatio = imageHeight / imageWidth %}
  106.             {% endif %}
  108.             {% if imageAspectRatio > 1 %}
  109.                 {% set sizeXS = sizeXS * imageAspectRatio %}
  110.                 {% set sizeSM = sizeSM * imageAspectRatio %}
  111.                 {% set sizeMD = sizeMD * imageAspectRatio %}
  112.                 {% set sizeLG = sizeLG * imageAspectRatio %}
  113.                 {% set sizeXL = sizeXL * imageAspectRatio %}
  114.             {% endif %}
  116.             {% set sizes = {
  117.                 'xs': "#{sizeXS}px",
  118.                 'sm': "#{sizeSM}px",
  119.                 'md': "#{sizeMD}px",
  120.                 'lg': "#{sizeLG}px",
  121.             } %}
  123.             {# ... set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  124.             {% if section.sizingMode is same as ('full_width') %}
  125.                 {% set container = 100 %}
  126.                 {% set sizes = sizes|merge({ 'xl': (container / colsXL)|round(0, 'ceil') ~'vw'}) %}
  127.             {% else %}
  128.                 {% set sizes = sizes|merge({ 'xl': "#{sizeXL}px"}) %}
  129.             {% endif %}
  130.         {% endif %}
  131.     {% endif %}
  133.     {% if layout == 'standard' %}
  134.         {% sw_include "@Storefront/storefront/component/product/card/box-standard.html.twig" %}
  135.     {% elseif layout == 'image' %}
  136.         {% sw_include "@Storefront/storefront/component/product/card/box-image.html.twig" %}
  137.     {% elseif layout == 'minimal' %}
  138.         {% sw_include "@Storefront/storefront/component/product/card/box-minimal.html.twig" %}
  139.     {% elseif layout == 'wishlist' %}
  140.         {% sw_include "@Storefront/storefront/component/product/card/box-wishlist.html.twig" %}
  141.     {% else %}
  142.         {% set template = "@Storefront/storefront/component/product/card/box-" ~ layout ~ ".html.twig" %}
  143.         {% sw_include template ignore missing %}
  144.     {% endif %}
  145. {% endblock %}