vendor/store.shopware.com/flinkcmsgridbuilder/src/Resources/views/storefront/block/cms-block-flink-cms-grid.html.twig line 1

Open in your IDE?
  1. {% block block_flink_cms_grid %}
  3.     {% set breakpoints = {
  4.         "xs": theme_config('breakpoint.xs') | default(0),
  5.         "sm": theme_config('breakpoint.sm') | default(576),
  6.         "md": theme_config('breakpoint.md') | default(768),
  7.         "lg": theme_config('breakpoint.lg') | default(992),
  8.         "xl": theme_config('breakpoint.xl') | default(1200),
  9.         "xxl": theme_config('breakpoint.xxl') | default(1400)
  10.     } %}
  12.     {% set gridSettings = block.customFields.flinkCmsGrid.gridSettings %}
  13.     {% set gridElements = block.customFields.flinkCmsGrid.elements %}
  15.     {% set style %}
  16.         {% set prevBreakpoint = "" %}
  17.         {% for breakpoint, minWidth in breakpoints %}
  18.             {% if gridSettings[breakpoint] and gridElements[breakpoint] %}
  19.                 {% set breakpointStyle %}
  20.                     {% set addColPx = gridSettings[breakpoint].columngap matches '/^\\d+$/' %}
  21.                     {% set addRowPx = gridSettings[breakpoint].rowgap matches '/^\\d+$/' %}
  22.                     {% set gridStyle %}
  23.                         {% if not prevBreakpoint or gridSettings[breakpoint].columns != gridSettings[prevBreakpoint].columns %}
  24.                             grid-template-columns: repeat({{ gridSettings[breakpoint].columns }}, minmax(0,1fr));
  25.                         {% endif %}
  26.                         {% if not prevBreakpoint or gridSettings[breakpoint].columngap != gridSettings[prevBreakpoint].columngap %}
  27.                             grid-column-gap: {{ gridSettings[breakpoint].columngap }}{% if addColPx %}px{% endif %};
  28.                         {% endif %}
  29.                         {% if not prevBreakpoint or gridSettings[breakpoint].rowgap != gridSettings[prevBreakpoint].rowgap %}
  30.                             grid-row-gap: {{ gridSettings[breakpoint].rowgap }}{% if addRowPx %}px{% endif %};
  31.                         {% endif %}
  32.                     {% endset %}
  33.                     {% if gridStyle | trim %}
  34.                         .flink-cms-grid--{{ block.id }} {
  35.                             {{ gridStyle }}
  36.                         }
  37.                     {% endif %}
  38.                     {% for slot, gridArea in gridElements[breakpoint] %}
  39.                         {% if not prevBreakpoint or gridArea != gridElements[prevBreakpoint][slot] %}
  40.                             .flink-cms-grid--{{ block.id }} .flink-cms-grid-slot--slot_{{ slot }} {
  41.                                 grid-area: {{ gridArea }};
  42.                             }
  43.                         {% endif %}
  44.                     {% endfor %}
  45.                 {% endset %}
  46.                 {% if breakpointStyle | trim %}
  47.                     {% if minWidth %}@media (min-width: {{ minWidth }}px) { {% endif %}
  48.                         {{ breakpointStyle }}
  49.                     {% if minWidth %} } {% endif %}
  50.                 {% endif %}
  51.                 {% set prevBreakpoint = breakpoint %}
  52.             {% endif %}
  53.         {% endfor %}
  54.     {% endset %}
  55.     {% set style = style | trim | split('  ') | filter(v => v | trim is not empty) | join('') %}
  56.     <style>{{ "\n" }}{{ style }}{{ "\n" }}</style>
  58.     <div class="col-12">
  59.         <div class="flink-cms-grid flink-cms-grid--{{ block.id }}">
  60.             {% for element in block.slots.getElements() %}
  61.                 {% block block_flink_cms_grid_slot %}
  62.                     <div class="flink-cms-grid-slot flink-cms-grid-slot--{{ element.slot }}">
  63.                         {% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
  64.                     </div>
  65.                 {% endblock %}
  66.             {% endfor %}
  67.         </div>
  68.     </div>
  70. {% endblock %}