templates/areas/apk-new-product-banner/view.html.twig line 1

Open in your IDE?
  4. {% if editmode %}
  6. <div class="uk-container apk-container-1400">
  7.     <div uk-alert>
  8.         <h1 class="uk-h1">APK product banner</h1>
  9.     </div>
  10.     <ul uk-tab>
  11.         <li><a href="#">Configurations</a></li>
  12.         <li class="uk-active"><a href="#">Content Edit</a></li>
  13.     </ul>
  15.     <ul class="uk-switcher uk-margin">
  16.         <li class="apk-size-20 uk-grid-small" uk-grid>
  17.             {# Colonne 1 #}
  18.             <div class="uk-width-1-2@m" uk-margin>
  20.                 <div>Type de heading pour le titre ?</div>
  21.                 {{ pimcore_select("content-heading", {
  22.                     "store" : [
  23.                         ['span', 'span'],
  24.                         ['h1', 'Heading 1'],
  25.                         ['h2', 'Heading 2'],
  26.                         ['h3', 'Heading 3'],
  27.                         ['h4', 'Heading 4'],
  28.                         ['h5', 'Heading 5'],
  29.                         ['h6', 'Heading 6']
  30.                     ],
  31.                     "defaultValue" : "h2"
  32.                 }) }}
  34.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  35.                 {{ pimcore_select("content-heading-style", {
  36.                     "store" : [
  37.                         ['h1', 'Heading 1'],
  38.                         ['h2', 'Heading 2'],
  39.                         ['h3', 'Heading 3'],
  40.                         ['h4', 'Heading 4'],
  41.                         ['h5', 'Heading 5'],
  42.                         ['h6', 'Heading 6']
  43.                     ],
  44.                     "defaultValue" : "h2"
  45.                 }) }}
  47.                 <div><strong>Alignement</strong> du texte</div>
  48.                 {{ pimcore_select("text-alignment", {
  49.                     "store" : [
  50.                         ['uk-text-left@s uk-text-center', 'Gauche'],
  51.                         ['uk-text-right@s uk-text-center', 'Droite'],
  52.                         ['uk-text-center@s uk-text-center', 'Centré'],
  53.                     ],
  54.                     "defaultValue" : "uk-text-right@s uk-text-center"
  55.                 }) }}
  57.                 <div><strong>Côté</strong> des informations</div>
  58.                 {{ pimcore_select("data-alignment", {
  59.                     "store" : [
  60.                         ['uk-margin-auto-right', 'Gauche'],
  61.                         ['uk-margin-auto-left', 'Droite'],
  62.                         ['uk-margin-auto-left uk-margin-auto-right', 'Centré'],
  63.                     ],
  64.                     "defaultValue" : "uk-margin-auto-left"
  65.                 }) }}
  67.                 <div>Couleur du texte</div>
  68.                 {{ pimcore_select("overlay-color", {
  69.                     "store" : [
  70.                         ['uk-dark', 'Foncé'],
  71.                         ['uk-light', 'Clair']
  72.                     ],
  73.                     "defaultValue" : "uk-light"
  74.                 }) }}
  76.             </div>
  78.             {# Colonne 2 #}
  79.             <div class="uk-width-1-2@m" uk-margin>
  80.     
  81.                 <div>Largeur du container du texte</div>
  82.                 {{ pimcore_select("text-width", {
  83.                     "store" : [
  84.                         ['apk-container-200', '200px'],
  85.                         ['apk-container-300', '300px'],
  86.                         ['apk-container-400', '400px'],
  87.                         ['apk-container-500', '500px'],
  88.                         ['apk-container-600', '600px'],
  89.                         ['apk-container-700', '700px'],
  90.                         ['apk-container-800', '800px'],
  91.                         ['apk-container-900', '900px'],
  92.                         ['apk-container-1000', '1000px'],
  93.                         ['apk-container-1100', '1100px'],
  94.                     ],
  95.                     "defaultValue" : "apk-container-600"
  96.                 }) }}
  98.                 <div>Espacement en haut du block</div>
  99.                 {{ pimcore_select("margin-top", {
  100.                     "store" : [
  101.                         ['', 'Aucun'],
  102.                         ['uk-margin-small-top', 'Petit'],
  103.                         ['uk-margin-medium-top', 'Moyen'],
  104.                         ['uk-margin-large-top', 'Grand'],
  105.                         ['uk-margin-xlarge-top', 'Très grand'],
  106.                     ],
  107.                     "defaultValue" : ""
  108.                 }) }}
  109.     
  110.                 <div>Espacement en bas du block</div>
  111.                 {{ pimcore_select("margin-bottom", {
  112.                     "store" : [
  113.                         ['', 'Aucun'],
  114.                         ['uk-margin-small-top', 'Petit'],
  115.                         ['uk-margin-medium-top', 'Moyen'],
  116.                         ['uk-margin-large-top', 'Grand'],
  117.                         ['uk-margin-xlarge-top', 'Très grand'],
  118.                     ],
  119.                     "defaultValue" : ""
  120.                 }) }}
  122.                 <div>Afficher un scroll ?</div>
  123.                 {{ pimcore_select("scroll", {
  124.                     "store" : [
  125.                         ['', 'Aucun'],
  126.                         ['apk-scroll', 'SCROLL'],
  127.                         ['apk-top', 'TOP']
  128.                     ],
  129.                     "defaultValue" : "apk-scroll"
  130.                 }) }}
  131.                 
  132.             </div>
  134.         </li>
  135.     
  136.         <li class="uk-active">
  137.             <div class="uk-margin-large-bottom">
  138.                 <div class="uk-margin-small-bottom"><strong>Image de background</strong></div>
  139.                 {{ pimcore_image('bg-image') }}
  140.                 <div class="uk-margin-small-bottom"><strong>Image de background (version mobile)</strong></div>
  141.                 {{ pimcore_image('bg-image-mobile') }}
  143.                 <div class="uk-margin"><strong>Catégorie</strong> de la page (à droite)</div>
  144.                 {{ pimcore_textarea('category-title') }}
  146.                 <div class="uk-margin"><strong>Titre de la section</strong></div>
  147.                 <h2 class="uk-h2">
  148.                     {{ pimcore_textarea("content-title",{
  149.                         "nl2br" : true
  150.                     }) }}
  151.                 </h2>
  153.                 <div class="uk-margin"><strong>Objet produit</strong></div>
  154.                 {{ pimcore_relation("myRelation") }}
  156.                 <div class="uk-margin"><strong>Bouton (optionnel)</strong></div>
  157.                 <div class="actions">
  158.                     {{ pimcore_link("content-btn", {
  159.                         "class" : "uk-button"
  160.                     }) }}
  161.                     <hr>
  162.                     <dt>Google Analytics Event: Action</dt>
  163.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-1") }}</dd>
  164.                     <hr>
  165.                     <dt>Google Analytics Event: Category</dt>
  166.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-2") }}</dd>
  167.                     <hr>
  168.                     <dt>Google Analytics Event: Label</dt>
  169.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-3") }}</dd>
  170.                 </div>
  171.             </div>
  172.         </li>
  173.     </ul>
  174. </div>
  176. {% endif %}
  178. {% if not editmode %}
  180. <div id="modal-pharmacies-banner" uk-modal>
  181.     <div class="uk-modal-dialog uk-modal-body uk-text-center uk-position-relative">
  183.         <h2>{{"Où acheter ?"|trans}}</h2>
  185.         <div uk-grid>
  187.             <div class="uk-width-2-5">
  188.                 <div class="apk-container-image apk-image-pharmacie">
  190.                 </div>
  191.                 <div>
  192.                     <h3>{{"En pharmacie :"|trans}}</h2>
  193.                     <p>
  194.                         {{"Vous préférez vous rendre chez votre pharmacien afin de bénéficier de ses conseils avisés ?"|trans}}
  195.                         </br>
  196.                         {{"Trouvez votre pharmacie la plus proche sur"|trans}}
  197.                     </p>
  198.                 </div>
  199.                 {% if document.property('pharmacieLogo') %}
  200.                 <div class="apk-container-image-phramacie">
  201.                     <a href="{{ 'pharmacie-be-lien'|trans }}" target="_blank">
  202.                         <img src="{{ document.property('pharmacieLogo').thumbnail('') }}" alt="{{ "Pharmacie"|trans }}">   
  203.                     </a>
  204.                 </div>
  205.                 {% endif %}
  206.             </div>
  208.             <div class="uk-width-auto apk-width-auto">
  209.                 <div class="apk-border-vertical">
  210.             
  211.                 </div>
  212.             </div>
  214.             <div class="uk-width-2-5">
  215.                 <div class="apk-container-image apk-margin-container-image apk-image-en-ligne">
  217.                 </div>
  218.                 <div>
  219.                     <h3>{{"En ligne :"|trans}}</h2>
  220.                     <p>
  221.                         {{"Vous voulez être livré directement chez vous via des platformes e-shop ouvertes 24h/24"|trans}}
  222.                         </br>
  223.                         {{"Magnecaps est également disponible en ligne !"|trans}}
  224.                     </p>
  225.                 </div>
  226.                 <div class="apk-container-phramacies">
  227.                     <div class="uk-child-width-1-2 uk-child-width-1-3@s" uk-grid>
  228.                         {% if not pimcore_relation("myRelation").isEmpty  %}
  229.                             {% if pimcore_relation("myRelation").element.className == 'Produits' %}
  230.                                 {% for lienPharmacie in pimcore_relation("myRelation").element.lienPharmacies %}
  231.                                     <div>
  232.                                         <a href="{{ lienPharmacie.lien }}" target="_blank">
  233.                                             {{ lienPharmacie.image.thumbnail('').html()|raw }}
  234.                                         </a>
  235.                                     </div>
  236.                                 {% endfor %}
  237.                             {% endif %}
  238.                         {% endif %}
  239.                     </div>
  240.                 </div>
  241.             </div>
  243.         </div>
  245.     </div>
  246. </div>
  248. <div class="apk-areabrick-container {{ pimcore_select("overlay-color").getData() }} {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  249.     <div class="uk-cover-container uk-flex uk-flex-middle">
  250.         {% if pimcore_image('bg-image').src %}
  251.         {#<img src="{{ base_64(app.request.getSchemeAndHttpHost ,pimcore_image('bg-image').thumbnail('full-background'))|raw }}" alt="" uk-cover>#}
  252.             {{ pimcore_image('bg-image').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null}})|raw }}    
  253.         {% endif %}
  254.         {% if pimcore_image('bg-image-mobile').src %}
  255.             {{ pimcore_image('bg-image-mobile').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null, 'class': 'uk-hidden@m'}})|raw }}
  256.         {% endif %}
  259.         <div class="uk-container apk-container-1400">
  260.             <div class="uk-position-relative uk-height-1-1">
  261.                 <div class="{{ pimcore_select('text-width').data }} {{ pimcore_select("data-alignment") }}">
  262.                     
  263.                     <div class="{{ pimcore_select("text-alignment") }}">
  264.                         
  265.                         {% if not pimcore_textarea("content-title").isEmpty %}
  266.                             {% if pimcore_select("content-heading").data == "span" %}
  267.                                 <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  268.                                     {{ pimcore_textarea("content-title", {
  269.                                     "nl2br" : true})|raw }}
  270.                                 </span>
  271.                             {% else %}
  272.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  273.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  274.                                     {{ pimcore_textarea("content-title", {
  275.                                     "nl2br" : true})|raw }}
  276.                                 </{{ content_heading }}>
  277.                             {% endif %}
  278.                         {% endif %}
  279.                 
  280.                         <div class="apk-media">
  281.                             {% if not pimcore_relation("myRelation").isEmpty  %}
  282.                             {% if pimcore_relation("myRelation").element.className == 'Produits' %}
  283.                                 {{ pimcore_relation("myRelation").element.image.thumbnail('big-product-thumb').html()|raw }} 
  284.                             {% endif %}
  285.                             {% endif %}
  286.                         </div>
  288.                         <button class="uk-button apk-btn-univers-banner" type="button" uk-toggle="target: #modal-pharmacies-banner">{{"Acheter"|trans}}</button>
  289.                 
  290.                         {% if not pimcore_link("content-btn").isEmpty() %}
  291.                         <div class="actions">
  292.                             {% if
  293.                                 not pimcore_input("content-btn-secondary-ga-1-1").isEmpty
  294.                                 and not pimcore_input("content-btn-secondary-ga-1-2").isEmpty 
  295.                                 and not pimcore_input("content-btn-secondary-ga-1-3").isEmpty 
  296.                             %}
  298.                                 {{ pimcore_link("content-btn", {
  299.                                     "class" : "uk-button",
  300.                                     "onclick" : "javascript:sendGtagEvent('" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-1")) ~ "',
  301.                                         '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-2")) ~ "',
  302.                                         '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-3")) ~ "');"
  303.                                 }) }}
  305.                             {% else %}
  306.                             
  307.                                 {{ pimcore_link("content-btn", {
  308.                                     "class" : "uk-button"
  309.                                 }) }}
  310.                             
  311.                             {% endif %}
  312.                         </div>
  313.                         {% endif %}
  314.                     </div>
  315.                 </div>
  317.                 <div class="apk-category">
  318.                     {{ pimcore_textarea('category-title', {'nl2br' : true}) }}
  319.                 </div>
  321.             </div>
  322.         </div>
  323.     </div>
  325.     {# Scroll géré dans le main.js #}
  326.     {% if pimcore_select("scroll").data == "apk-scroll" or pimcore_select("scroll").data == "apk-top" %}
  327.     <div class="apk-scroll-container">
  328.         <div class="uk-container apk-container-1400">
  329.             <div class="uk-position-relative">
  330.             {% if pimcore_select("scroll").data == "apk-scroll" %}
  331.                 <div class="apk-scroll">
  332.                     {{ "SCROLL"|trans }}
  333.                 </div>
  334.             {% elseif pimcore_select("scroll").data == "apk-top" %}
  335.                 <div class="apk-scroll apk-top">
  336.                     {{ "TOP"|trans }}
  337.                 </div>
  338.             {% endif %}
  339.             </div>
  340.         </div>
  341.     </div>
  342.     {% endif %}
  343. </div>
  345. {% endif %}