src/CoreBundle/Resources/views/Areas/TeaserInterstitial/view.html.twig line 1

Open in your IDE?
  1. {% set productLink = pimcore_href("selectProduct").getElement() %}
  2. {% set spacingSelect %}
  3.     {{ pimcore_checkbox("checkSpacing", {
  4.         "reload": true
  5.     }) }}
  6. {% endset %}
  7. {% set noSpacingTop = '' %}
  8. {% set brickAnchorId = '' %}
  9. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  10.     {% set noSpacingTop = 'no-offset-top' %}
  11. {% endif %}
  12. {% set UID = uniqid() %}
  13. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  14.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  15. {% endif %}
  17. {% set showNvi = pimcore_checkbox('showNvi') %}
  18. {% set showNviChecked = pimcore_checkbox('showNvi').isChecked() %}
  20. {% if editmode %}
  21.     <div class="flex-col offset-bottom-single">
  22.         <div class="col xs-12 m-6 l-3">
  23.             <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  24.             {{ pimcore_input("brickAnchorIdInput") }}
  25.         </div>
  26.         <div class="col xs-12 m-6 l-2">
  27.             <div class="select-items">
  28.                 <div class="hint">
  29.                     {{ 'Kein Abstand nach oben?' |trans }}
  30.                 </div>
  31.                 {{ spacingSelect }}
  32.             </div>
  33.         </div>
  34.     </div>
  35.     <div class="flex-col offset-bottom-single">
  36.         <div class="col xs-12 m-6">
  37.             <span class="hint">{{ 'Verlinkung zu bestehendem Produkt?'|trans }}</span>
  38.             {{ pimcore_href("selectProduct", {
  39.                 "types": ["object"],
  40.                 "subtypes": {
  41.                     "types": ["object"],
  42.                 },
  43.                 "width": 300,
  44.                 "reload": true
  45.             }) }}
  46.             <div>
  47.                 <span class="hint">Nährwerte & Zutaten anzeigen?</span>
  48.             </div>
  49.             <div>
  50.                 <div>{{ showNvi | raw }}</div>
  51.                 <small>Nur hier, wenn auch Button angezeigt werden soll.<br/>Sonst über "Teaser Elemente" -&gt; "Nährwerte & Zutaten"</small>
  52.             </div>
  53.         </div>
  54.         <div class="col xs-12 m-6">
  55.             <div class="input-space">
  56.                 <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  57.                 {{ pimcore_image("teaserInterstitialImage", {
  58.                     "title": "Drag your image here",
  59.                     "width": 300,
  60.                     "height": 150,
  61.                     "thumbnail": "teaserInterstitialImage" ~ bundleName,
  62.                     "reload": true
  63.                 }) }}
  64.             </div>
  65.         </div>
  66.     </div>
  67. {% endif %}
  68. {% set imageAttributes = {
  69.     "attributes" : {
  70.         "data-speed": "-1"
  71.     }
  72. } %}
  73. {% if productLink == true %}
  74.     {% set detailViewUri    = pimcore_url(
  75.         {
  76.             "name": productLink.getName()|sanitized_url,
  77.             "articlenumber": productLink.getArticleNumber()
  78.         },
  79.         "shopHandlerProductDetail"
  80.     ) %}
  81. {% endif %}
  82. <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  83.     <div id="{{ 'uid' ~ UID |raw }}"
  84.          class="teaser-interstitial {% if pimcore_image("teaserInterstitialSmallImage") and pimcore_link('productLink') is not empty %}with-image-absolute{% endif %} has-background-image js">
  85.         <div class="background-image">
  86.             {% if pimcore_image("teaserInterstitialImage").getThumbnail("teaserInterstitialImage" ~ bundleName) is not empty %}
  87.                 <div class="image">
  88.                     {{ pimcore_image("teaserInterstitialImage").getThumbnail("teaserInterstitialImage" ~ bundleName).getHTML(imageAttributes) |raw }}
  89.                 </div>
  90.                 {#IE Fix for thumbnails rendering start#}
  91.                 <script type='text/javascript'>
  92.                     var waitForJQuery = setInterval(function () {
  93.                         if (typeof $ != 'undefined') {
  94.                             $(function() {
  95.                                 if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  97.                                     $(".teaser-interstitial .background-image .image").css({
  98.                                         position: "absolute",
  99.                                         width: "100%",
  100.                                         height: "100%",
  101.                                         background: "url( {{ pimcore_image("teaserInterstitialImage").getSrc() }} ) center right 100%/cover no-repeat"
  102.                                     });
  103.                                     $(".teaser-interstitial .background-image img").hide();
  104.                                 }
  105.                             });
  106.                             clearInterval(waitForJQuery);
  107.                         }
  108.                     }, 50);
  109.                 </script>
  110.                 {#IE Fix for thumbnails rendering end#}
  111.             {% endif %}
  112.         </div>
  113.         <div class="content-container flex-col">
  114.             <div class="col teaser-interstitial-content main-content flex-col">
  115.                 <div class="headline-container">
  116.                     <div class="text-only">
  117.                         <div
  118.                             class="headline {% if detailViewUri is not defined and pimcore_link('productLink') is empty %} text-center {% endif %}">
  119.                             {{ pimcore_wysiwyg("teaserInterstitialHeadline", {'placeholder': 'Headline'})|trademark }}
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.                 {% if pimcore_image("teaserInterstitialSmallImage") is not empty %}
  125.                     <div class="image-container">
  126.                         <div class="image-absolute">
  127.                             <div class="flex-column box-align-center">
  128.                                 {{ pimcore_image("teaserInterstitialSmallImage", {
  129.                                     "title": "Drag your image here",
  130.                                     "thumbnail": "teaserInterstitialSmallImage" ~ bundleName,
  131.                                     "reload": true
  132.                                 }) }}
  133.                             </div>
  134.                         </div>
  135.                     </div>
  136.                 {% endif %}
  137.                 {% if productLink == true %}
  138.                     <div class="button-container text-only">
  139.                         <a class="button btn-default" href="{{ detailViewUri }}" target="{{ pimcore_link("productLink").getTarget() }}">{{ 'Zum Produkt' |trans }}</a>
  140.                     </div>
  141.                 {% elseif pimcore_link("productLink") is not empty %}
  142.                     <div class="button-container text-only">
  143.                         {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  144.                     </div>
  145.                 {% endif %}
  146.             </div>
  147.         </div>
  148.     </div>
  149.     {% if showNviChecked and productLink == true and  productLink.getClassName() == 'ProductFood' %}
  150.         <div class="section">
  151.             <div class="main-content flex-col">
  152.                 <div class="col xs-12">
  153.                     <div class="bb-flex align-item-start">
  154.                         <div class="bb-flex-2"></div>
  155.                         <div class="product-information-wrapper bb-flex-1">
  156.                             <div class="sales-description-wrapper">
  157.                                 {{ productLink.getSalesDescription() }}
  158.                             </div>
  159.                             <div id="tabber-xyz" class="tabber" data-tab-type="default">
  160.                                 <ul class="tabs resp-tabs-list tab-id">
  161.                                     <li class="resp-tab-item tab-id resp-tab-active" aria-controls="tab-id_tab_item-0" role="tab">{{ 'Nährwerte' | trans }}</li>
  162.                                     <li class="resp-tab-item tab-id" aria-controls="tab-id_tab_item-1" role="tab">{{ 'Zutaten' | trans }}</li>
  163.                                 </ul>
  164.                                 <div class="resp-tabs-container tab-id">
  165.                                     <h3 class="resp-accordion tab-id resp-tab-active" role="tab" aria-controls="tab-id_tab_item-0">{{ 'Nährwerte' | trans }}</h3><div class="tab-content resp-tab-content tab-id resp-tab-content-active" aria-labelledby="tab-id_tab_item-0" style="display:block">
  166.                                         <div class="food-value-container">
  167.                                             {% include 'Partials/NutritionFactsDefault.html.twig' with {
  168.                                                 'product': productLink
  169.                                             } %}
  170.                                         </div>
  171.                                     </div>
  172.                                     <h3 class="resp-accordion tab-id" role="tab" aria-controls="tab-id_tab_item-1">{{ 'Zutaten' | trans }}</h3><div class="tab-content resp-tab-content tab-id" aria-labelledby="tab-id_tab_item-1">
  173.                                         <div class="product-ingredients-container">
  174.                                             <div class="ingredients-item">
  175.                                                 {{ productLink.getIngredientsText() | raw }}
  176.                                             </div>
  177.                                         </div>
  178.                                     </div>
  179.                                 </div>
  180.                             </div>
  181.                         </div>
  182.                     </div>
  183.                 </div>
  184.             </div>
  185.         </div>
  186.     {% endif %}
  187. </div>