{% set spacingSelect %} {{ pimcore_checkbox("checkSpacing", { "reload": true }) }}{% endset %}{% set noSpacingTop = '' %}{% set brickAnchorId = '' %}{% if pimcore_checkbox('checkSpacing').isChecked() %} {% set noSpacingTop = 'no-offset-top' %}{% endif %}{% set UID = uniqid() %}{% if pimcore_input("brickAnchorIdInput") is not empty %} {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}{% endif %}{% set hasSliderSelect %} {{ pimcore_select("hasSlider", { "store": [ ["has-slider", "Slider"], ["no-slider", "Listenansicht"] ], "width": 300, "reload": true }) }}{% endset %}{% set colSelect %} {{ pimcore_select("cols", { "store": [ ["xs-12 full", "1"], ["xs-12 m-6 half", "2"], ["xs-12 m-6 l-6 xl-4 one-third", "3"] ], "width": 300, "reload": true }) }}{% endset %}{% set colsSelectResult = pimcore_select("cols").getData() %}{% set hasSliderResult = (pimcore_select("hasSlider").getData() == 'has-slider') %}{% if editmode %} <div class="flex-col offset-bottom-single"> <div class="col xs-12 m-6 l-3"> <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span> {{ pimcore_input("brickAnchorIdInput") }} </div> <div class="col xs-12 m-6 l-3"> <div class="select-items"> <div class="hint"> {{ 'Kein Abstand nach oben?' |trans }} </div> {{ spacingSelect }} </div> </div> <div class="col xs-12 m-6 l-3"> <span class="hint">{{ 'Teaser Content Breite:' |trans }}</span> {{ colSelect }} </div> <div class="col xs-12 m-6 l-3"> <span class="hint">{{ ' Darstellungsart:' |trans }}</span> {{ hasSliderSelect }} </div> </div>{% endif %} {% if editmode %}<div class="admin teaser-panel-row teaser-product-story"> {% endif %} <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}"> <div class="panel {% if editmode %} {% else %}{{ pimcore_select("hasSlider").getData() }} {% endif %}{% if colsSelectResult == 'xs-12 m-6 half' %}half{% elseif colsSelectResult == 'xs-12 full' %}full{% else %}one-third{% endif %}"> <div class="main-content"> <div class="panel-container"> <div class="panel-content"> <div class="flex-col panel-slider"> {% if pimcore_block('contentblock').isEmpty() and editmode %} <span class="hint">{{ 'Bitte wählen Sie die Anzahl der Teaser'|trans }}</span> {% endif %} {% for i in pimcore_iterate_block(pimcore_block('contentblock')) %} {% set productLink = pimcore_href("selectProduct").getElement() %} <div class="col {{ colsSelectResult }}"> {% if editmode %} <div class="flex-col offset-bottom-single config-row-{{ colsSelectResult == 'xs-12 full' ? 'full' : 'half' }}"> <div class="col"> <div class="offset-top-single"> <span class="hint">{{ 'Schärfegrad angeben?' |trans }}</span> {{ 'Ja' |trans }}{{ pimcore_checkbox("heatCheckbox", { "reload" : true }) }} </div> <div class="offset-top-single"> <span class="hint">{{ 'Verlinkung zu bestehendem Produkt?'|trans }}</span> {{ pimcore_href("selectProduct", { "types": ["object"], "subtypes": { "types": ["object"], }, "classes": ["ProductFood", "ProductClothing", "Product"], "width": 300, "reload": true }) }} </div> </div> <div class="col"> <div class="offset-top-single"> <span class="hint">{{ 'Hintergrundbild festlegen'|trans }}</span> {{ pimcore_image("TeaserProductStoryImage", { "title": "Drag your image here", "thumbnail": "TeaserProductStoryImageFull" ~ bundleName, "reload" : true }) }} </div> </div> </div> {% endif %} {% if pimcore_href("selectProduct").isEmpty() != true %} {% set detailViewUri = pimcore_url( { "name": productLink.getName()|sanitized_url, "articlenumber": productLink.getArticleNumber() }, "shopHandlerProductDetail" ) %} {% endif %} <div class="teaser story-item"> <div class="teaser-content"> {# background image #} <div class="teaser-image"> {# product link #} <a href="{{ pimcore_href("selectProduct").isEmpty() != true ? detailViewUri : pimcore_link("productLink").getHref() }}" target="{{ pimcore_link("productLink").getTarget() }}" aria-label="Open Details"> <div class="image"> {% if pimcore_image("TeaserProductStoryImage").isEmpty() != true %} {# thumbnail #} {% if colsSelectResult == 'xs-12 full' %} {{ pimcore_image("TeaserProductStoryImage").getThumbnail("TeaserProductStoryImageFull" ~ bundleName).getHTML() |raw }} {% else %} {{ pimcore_image("TeaserProductStoryImage").getThumbnail("TeaserProductStoryImage" ~ bundleName).getHTML() |raw }} {% endif %} {# heat select #} {% if pimcore_checkbox('heatCheckbox').isChecked() %} <div class="heat-select flex-col"> {% for i in pimcore_iterate_block(pimcore_block('heatSelect')) %} <span class="icon flame-red"></span> {% endfor %} </div> {% endif %} {% endif %} </div> </a> </div> {# teaser box #} <div class="teaser-text-box {% if pimcore_image("TeaserProductStoryBottle") is not empty or pimcore_href("selectProduct").isEmpty() != true %}with-front-img{% endif %}"> {# product image object #} {% if pimcore_href("selectProduct").isEmpty() != true %} <div class="teaser-image-front"> {{ productLink.getProductImage().getThumbnail("TeaserProductStoryBottle" ~ bundleName).getHTML() |raw }} </div> {# product image assets #} {% elseif pimcore_image("TeaserProductStoryBottle") %} <div class="teaser-image-front"> {% if pimcore_image("TeaserProductStoryBottle").isEmpty() and editmode %} <span class="hint">{{ 'Produktbild' |trans }}</span> {% endif %} {{ pimcore_image("TeaserProductStoryBottle", { "title": "Drag your image here", "thumbnail": "TeaserProductStoryBottle" ~ bundleName, }) }} </div> {% endif %} <div class="teaser-text-container"> {# text box #} <div class="title-box"> <h4>{{ pimcore_input("TeaserProductStoryHeadline", { "placeholder": 'Teaser Headline' })|trademark }} </h4> {{ pimcore_wysiwyg("TeaserProductStoryContent", { "placeholder": 'Teaser Content', "customConfig": '/bundles/core/js/ckeditor_config.js' })|trademark }} </div> {# teaser link #} <div class="{{ editmode != true ? 'teaser-link'}}"> {% if pimcore_href("selectProduct").isEmpty() != true %} <a class="button" href="{{ detailViewUri }}" aria-label="{{ 'Zum Produkt'|trans }}"> <span> {{ 'Zum Produkt'|trans }} </span> </a> {% else %} {% if editmode %} <div style="padding-top: 15px;"> {{ pimcore_link('productStoryLink', {'class': "button"}) }} </div> {% else %} <a class="button" href="{{ pimcore_link('productStoryLink').getHref() }}" target="{{ pimcore_link("productStoryLink").getTarget() }}" aria-label="{{ pimcore_link('productStoryLink').getText() }}"> <span>{{ pimcore_link('productStoryLink').getText() }}</span> </a> {% endif %} {% endif %} </div> </div> </div> </div> </div> </div> {% endfor %} </div> </div> </div> </div> </div> </div> {% if editmode %}</div>{% endif %}