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

Open in your IDE?
  1. {% set spacingSelect %}
  2.     {{ pimcore_checkbox("checkSpacing", {
  3.         "reload": true
  4.     }) }}
  5. {% endset %}
  6. {% set noSpacingTop = '' %}
  7. {% set brickAnchorId = '' %}
  8. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  9.     {% set noSpacingTop = 'no-offset-top' %}
  10. {% endif %}
  11. {% set UID = uniqid() %}
  12. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  13.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  14. {% endif %}
  15. {% set productLink = pimcore_href("selectProduct").getElement() %}
  16. {% set imageAttributes = {
  17. "attributes" : {
  18. "data-speed": "-1"
  19. }
  20. } %}
  22. {% set isProductFood = false %}
  23. {% set ingredientsText = null %}
  25. {% if productLink == true %}
  26.     {% set fitsPerfectlyResult = productLink.getGoesWellWith() %}
  27.     {% if productLink.getClassName() == 'ProductFood' %}
  28.         {% set isProductFood = true %}
  29.         {% set ingredientsText = productLink.getIngredientsText() %}
  30.     {% endif %}
  31. {% endif %}
  32. {% if editmode %}
  33.     <div class="flex-col offset-bottom-single">
  34.         <div class="col xs-12 m-6 l-3">
  35.             <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  36.             {{ pimcore_input("brickAnchorIdInput") }}
  37.         </div>
  38.         <div class="col xs-12 m-6 l-3">
  39.             <div class="select-items">
  40.                 <div class="hint">
  41.                     {{ 'Kein Abstand nach oben?' |trans }}
  42.                 </div>
  43.                 {{ spacingSelect }}
  44.             </div>
  45.         </div>
  46.     </div>
  47.     <div class="flex-col offset-bottom-single">
  48.         <div class="col xs-12 m-6 l-6">
  49.             <span class="hint">
  50.                 {{ 'Bitte wählen Sie ein Produkt'|trans }}</span>
  51.             {{ pimcore_href("selectProduct", {
  52.                 "types": ["object"],
  53.                 "subtypes": {
  54.                     "types": ["object"],
  55.                 },
  56.                 "classes": ["ProductFood"],
  57.                 "reload": true
  58.             }) }}
  59.         </div>
  60.         <div class="col xs-12 m-6 l-6">
  61.            <span class="hint">
  62.                {{ 'Hintergrund-Bild'|trans }}</span>
  63.             {{ pimcore_image("fitsPerfectBackgroundImage", {
  64.                 "width": 500,
  65.                 "height": 100,
  66.                 "title": "Drag your image here",
  67.                 "thumbnail": "fitsPerfectBackgroundImage" ~ bundleName,
  68.                 "reload": true
  69.             }) }}
  70.         </div>
  71.     </div>
  72. {% endif %}
  73. <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  74.     <div id="{{ 'uid' ~ UID |raw }}" class="has-background-image js teaser-interstitial fits-perfect">
  75.         <div class="background-image">
  76.             <div class="image">
  77.                 {% if pimcore_image("fitsPerfectBackgroundImage").getThumbnail("fitsPerfectBackgroundImage" ~ bundleName) is not empty %}
  78.                     {{ pimcore_image("fitsPerfectBackgroundImage").getThumbnail("fitsPerfectBackgroundImage" ~ bundleName).getHTML(imageAttributes) |raw }}
  80.                     {#IE Fix for thumbnails rendering start#}
  81.                     <script type='text/javascript'>
  82.                         var waitForJQuery = setInterval(function () {
  83.                             if (typeof $ != 'undefined') {
  84.                                 $(function() {
  85.                                     if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  87.                                         $(".fits-perfect .background-image .image").css({
  88.                                             position: "absolute",
  89.                                             width: "100%",
  90.                                             height: "100%",
  91.                                             background: "url( {{ pimcore_image("fitsPerfectBackgroundImage").getSrc() }} ) center right 100%/cover no-repeat"
  92.                                         });
  93.                                         $(".fits-perfect .background-image .image img").hide();
  94.                                     }
  95.                                 });
  96.                                 clearInterval(waitForJQuery);
  97.                             }
  98.                         }, 50);
  99.                     </script>
  100.                     {#IE Fix for thumbnails rendering end#}
  102.                 {% endif %}
  103.             </div>
  104.         </div>
  105.         <div class="content-container offset">
  106.             <div class="main-content flex-col">
  107.                 <div class="col xs-12 m-12 l-3 headline-wrapper">
  108.                     <div class="text-only">
  109.                         <div class="headline">
  110.                             <h3> {{ pimcore_input("fitsHeadline", {'placeholder': 'Headline'}) }}</h3>
  111.                         </div>
  112.                     </div>
  113.                 </div>
  114.                 <div class="col xs-12 m-12 l-9 flex-col icon-wrapper box-center">
  115.                     {% if productLink == true %}
  116.                         {% for keyResult in fitsPerfectlyResult %}
  117.                             <div class="text-icon-container">
  118.                                 <div class="text-icon">
  119.                                     <div class="flex-column box-align-center">
  120.                                         <span class="icon {{ keyResult }}"></span>
  121.                                         <p>{{ keyResult |trans }}</p>
  122.                                     </div>
  123.                                 </div>
  124.                             </div>
  125.                         {% endfor %}
  126.                     {% endif %}
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </div>
  131.     {% if isProductFood and ingredientsText is not empty %}
  132.         <div class="section">
  133.             <div class="main-content flex-col">
  134.                 <div class="col xs-12">
  135.                     <div class="bb-flex align-item-start">
  136.                         <div class="bb-flex-2"></div>
  137.                         <div class="product-information-wrapper bb-flex-1">
  138.                             <div class="sales-description-wrapper">
  139.                                 {{ productLink.getSalesDescription() }}
  140.                             </div>
  141.                             <div id="tabber-xyz" class="tabber" data-tab-type="default">
  142.                                 <ul class="tabs resp-tabs-list tab-id">
  143.                                     <li class="resp-tab-item tab-id resp-tab-active" aria-controls="tab-id_tab_item-0" role="tab">{{ 'Nährwerte' | trans }}</li>
  144.                                     <li class="resp-tab-item tab-id" aria-controls="tab-id_tab_item-1" role="tab">{{ 'Zutaten' | trans }}</li>
  145.                                 </ul>
  146.                                 <div class="resp-tabs-container tab-id">
  147.                                     <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">
  148.                                         <div class="food-value-container">
  149.                                             {% include 'Partials/NutritionFactsDefault.html.twig' with {
  150.                                                 'product': productLink
  151.                                             } %}
  152.                                         </div>
  153.                                     </div>
  154.                                     <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">
  155.                                         <div class="product-ingredients-container">
  156.                                             <div class="ingredients-item">
  157.                                                 {{ ingredientsText | raw }}
  158.                                             </div>
  159.                                         </div>
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     {% endif %}
  169. </div>