templates/bundles/ProviderBundle/areas/card/view.html.twig line 1

Open in your IDE?
  1. {% from '@Provider/macros/card.html.twig' import card %}
  2. {% from '@Provider/macros/card.html.twig' import cardGrid %}
  3. {% from '@Provider/macros/card.html.twig' import cardSlider %}
  4. {% from '@Provider/macros/include-svg.html.twig' import includeSvg %}
  6. {# Default block settings #}
  7. {% set class = pimcore_input('class').getData() %}
  8. {% set marginTop = pimcore_select('margin_top').getData() %}
  9. {% set marginBottom = pimcore_select('margin_bottom').getData() %}
  10. {% set containerWidth = pimcore_select('container_width').getData() %}
  11. {% set areaClass = class ~ ' ' ~ marginTop ~ ' ' ~ marginBottom ~ ' ' ~ containerWidth %}
  12. {% set anchorId = pimcore_input('anchor').getData() %}
  14. {# Card block settings #}
  15. {% set layout = pimcore_select('layout').getData() %}
  17. {% if layout == 'slider' %}
  18.     {% set areaClass = areaClass ~ ' ' ~ 'has-slider' %}
  19. {% endif %}
  21. {# Card Variants config #}
  22. {% set cardVariant = document.getProperty('card_variant') ? document.getProperty('card_variant') : 'variant--default' %}
  24. <div class="area area--cards {{ areaClass }}"{% if anchorId %} id="{{ anchorId }}"{% endif %}>
  26.     {% if editmode %}
  27.         {{ pimcore_relations('card_items', {
  28.             "types": ["object"],
  29.             "subtypes": {
  30.                 "object": ["object"]
  31.             },
  32.             "classes": ["Card"],
  33.             "reload": true
  34.         }) }}
  36.         {% if 'variant--btn' in cardVariant %}
  37.             <div class="card--config-edit">
  38.                 <strong>Button Style:</strong>
  39.                 {{ pimcore_select('card_button_style', {
  40.                     'store': [
  41.                         [ 'primary', 'primär' ],
  42.                         [ 'secondary', 'sekundär' ],
  43.                         [ 'outline', 'outline' ]
  44.                     ],
  45.                     'defaultValue': 'primary',
  46.                     'reload': true
  47.                 }) }}
  48.             </div>
  49.         {% endif %}
  50.     {% endif %}
  52.     {% set button = pimcore_select('card_button_style').getData() %}
  54.     {% if layout == 'row' %}
  56.         {% if editmode %}
  57.             <div class="card--config-edit">
  58.                 <strong>Spalten:</strong>
  59.                 {{ pimcore_select('card_row_cols', {
  60.                     'store': [
  61.                         [ 'auto', 'automatisch' ],
  62.                         [ 1, '1 Spalte' ],
  63.                         [ 2, '2 Spalten' ],
  64.                         [ 3, '3 Spalten' ],
  65.                         [ 4, '4 Spalten' ]
  66.                     ],
  67.                     'defaultValue': 'auto',
  68.                     'reload': true
  69.                 }) }}
  70.             </div>
  71.         {% endif %}
  72.         {% set cols = pimcore_select('card_row_cols').getData() %}
  74.         {% if cols == 'auto' %}
  75.             {% set cardElementLength = pimcore_relations('card_items').getElements() | length %}
  76.             {% set cols = cardElementLength < 4 ? cardElementLength : 4 %}
  77.         {% endif %}
  79.         <div class="cols cols--{{ cols }}">
  80.             {% for cardItem in pimcore_relations('card_items') %}
  81.                 {{ card(cardItem, '', button) }}
  82.             {% endfor %}
  83.         </div>
  85.     {% elseif layout == 'grid' %}
  87.         {% if editmode %}
  89.             <div class="card--config-edit">
  90.                 <strong>Zeilen:</strong>
  91.                 {{ pimcore_select('card_grid_rows', {
  92.                     'store': [
  93.                         [ 1, '1 Zeile' ],
  94.                         [ 2, '2 Zeilen' ],
  95.                         [ 3, '3 Zeilen' ],
  96.                         [ 4, '4 Zeilen' ]
  97.                     ],
  98.                     'defaultValue': 3,
  99.                     'reload': true
  100.                 }) }}
  101.             </div>
  102.         {% endif %}
  104.         {% set rows = ( pimcore_select('card_grid_rows').getData() - 1 ) %}
  106.         <div class="grid">
  107.             {{ cardGrid(pimcore_relations('card_items').getElements(), rows, button) }}
  108.         </div>
  109.     {% else %}
  111.         {% if editmode %}
  112.             <div class="card--config-edit">
  113.                 <strong>Zeilenhöhe:</strong>
  114.                 {{ pimcore_select('card_slider_row_height', {
  115.                     'store': [
  116.                         ['height--large', 'hoch'],
  117.                         ['', 'mittel'],
  118.                         ['height--small', 'gering'],
  119.                         ['height--tiny', 'winzig']
  120.                     ],
  121.                     'defaultValue': 'height--large',
  122.                     'reload': true,
  123.                 }) }}
  124.             </div>
  126.             <div class="card--config-edit">
  128.                 {{ pimcore_checkbox('no_pagination', {
  129.                     'label': 'Pagination deaktivieren',
  130.                     'reload': true
  131.                 }) }}
  133.                 {{ pimcore_checkbox('no_arrows', {
  134.                     'label': 'Controls deaktivieren',
  135.                     'reload': true
  136.                 }) }}
  137.             </div>
  138.         {% endif %}
  140.         {% set pagination   = pimcore_checkbox('no_pagination').isChecked() ? 'false' : 'true' %}
  141.         {% set arrows       = pimcore_checkbox('no_arrows').isChecked() ? 'false' : 'true' %}
  142.         {% set rowHeight    = pimcore_select('card_slider_row_height').getData() %}
  144.         {{ cardSlider(pimcore_relations('card_items'), rowHeight, pagination, arrows, button) }}
  145.     {% endif %}
  146. </div>