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

Open in your IDE?
  5. {% do pimcore_head_script().appendFile('https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js') %}
  6. {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/vue-carousel-3d@0.2.0/dist/vue-carousel-3d.min.js') %}
  8. {% if editmode %}
  10. <div class="uk-container apk-container-1400">
  11.     <div uk-alert>
  12.         <h1 class="uk-h1">APK product detail</h1>
  13.     </div>
  14.     <ul uk-tab>
  15.         <li><a href="#">Configurations</a></li>
  16.         <li class="uk-active"><a href="#">Content Edit</a></li>
  17.     </ul>
  19.     <ul class="uk-switcher uk-margin">
  20.         <li class="apk-size-20 uk-grid-small" uk-grid>
  21.             {# Colonne 1 #}
  22.             <div class="uk-width-1-2@m" uk-margin>
  24.                 <div>Type de heading pour le titre ?</div>
  25.                 {{ pimcore_select("content-heading", {
  26.                     "store" : [
  27.                         ['span', 'span'],
  28.                         ['h1', 'Heading 1'],
  29.                         ['h2', 'Heading 2'],
  30.                         ['h3', 'Heading 3'],
  31.                         ['h4', 'Heading 4'],
  32.                         ['h5', 'Heading 5'],
  33.                         ['h6', 'Heading 6']
  34.                     ],
  35.                     "defaultValue" : "h2"
  36.                 }) }}
  38.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  39.                 {{ pimcore_select("content-heading-style", {
  40.                     "store" : [
  41.                         ['h1', 'Heading 1'],
  42.                         ['h2', 'Heading 2'],
  43.                         ['h3', 'Heading 3'],
  44.                         ['h4', 'Heading 4'],
  45.                         ['h5', 'Heading 5'],
  46.                         ['h6', 'Heading 6']
  47.                     ],
  48.                     "defaultValue" : "h2"
  49.                 }) }}
  50.             </div>
  52.             {# Colonne 2 #}
  53.             <div class="uk-width-1-2@m" uk-margin>
  55.                 <div>Espacement en haut du block</div>
  56.                 {{ pimcore_select("margin-top", {
  57.                     "store" : [
  58.                         ['', 'Aucun'],
  59.                         ['uk-margin-small-top', 'Petit'],
  60.                         ['uk-margin-medium-top', 'Moyen'],
  61.                         ['uk-margin-large-top', 'Grand'],
  62.                         ['uk-margin-xlarge-top', 'Très grand'],
  63.                     ],
  64.                     "defaultValue" : ""
  65.                 }) }}
  66.     
  67.                 <div>Espacement en bas du block</div>
  68.                 {{ pimcore_select("margin-bottom", {
  69.                     "store" : [
  70.                         ['', 'Aucun'],
  71.                         ['uk-margin-small-top', 'Petit'],
  72.                         ['uk-margin-medium-top', 'Moyen'],
  73.                         ['uk-margin-large-top', 'Grand'],
  74.                         ['uk-margin-xlarge-top', 'Très grand'],
  75.                     ],
  76.                     "defaultValue" : ""
  77.                 }) }}
  79.                 <div>Afficher un scroll ?</div>
  80.                 {{ pimcore_select("scroll", {
  81.                     "store" : [
  82.                         ['', 'Aucun'],
  83.                         ['apk-scroll', 'SCROLL'],
  84.                         ['apk-top', 'TOP']
  85.                     ],
  86.                     "defaultValue" : "apk-scroll"
  87.                 }) }}
  88.                 
  89.             </div>
  91.         </li>
  92.     
  93.         <li class="uk-active">
  94.             <div class="uk-margin-large-bottom">
  96.                 <div class="uk-child-width-1-2@m" uk-grid>
  97.                     <div>
  98.                         <div class="uk-margin"><strong>Titre à gauche</strong></div>
  99.                         <h2 class="uk-h2">
  100.                             {{ pimcore_textarea("content-title",{
  101.                                 "nl2br" : true
  102.                             }) }}
  103.                         </h2>
  105.                         <div class="uk-margin"><strong>Objet produit</strong></div>
  106.                         {{ pimcore_relation("myRelation") }}
  107.                         
  108.                         <div class="uk-alert-danger" uk-alert>
  109.                             <div class="uk-margin"><strong>Autres produits correspondants</strong></div>
  110.                             {% for row in pimcore_block('otherProcuts').iterator %}
  111.                                 {{ pimcore_relation("myOtherRelation") }}
  112.                                     <div class="uk-margin"><strong>Condition de prise (ex : 1/J)</strong></div>
  113.                                     {{ pimcore_textarea('product-image-prise-other') }}
  114.                                     <div class="uk-margin"><strong>Type (ex: comprimés / gélules)</strong></div>
  115.                                     {{ pimcore_input('product-type-other') }}
  116.                                     <div class="uk-margin"><strong>Lien vers la notice</strong></div>
  117.                                     {{ pimcore_link("content-btn-product-other", {
  118.                                         "class" : "uk-button"
  119.                                     }) }}
  120.                             {% endfor %}
  121.                         </div>
  123.                         <div class="uk-margin"><strong>Condition de prise (ex : 1/J)</strong></div>
  124.                         {{ pimcore_textarea('product-image-prise') }}
  126.                         <div class="uk-margin"><strong>Type (ex: comprimés / gélules)</strong></div>
  127.                         {{ pimcore_input('product-type') }}
  129.                         <div class="uk-margin"><strong>Lien vers la notice</strong></div>
  130.                         {{ pimcore_link("content-btn", {
  131.                             "class" : "uk-button"
  132.                         }) }}
  133.                         <hr>
  134.                         <dt>Google Analytics Event: Action</dt>
  135.                         <dd>{{ pimcore_input("content-btn-secondary-ga-1-1") }}</dd>
  136.                         <hr>
  137.                         <dt>Google Analytics Event: Category</dt>
  138.                         <dd>{{ pimcore_input("content-btn-secondary-ga-1-2") }}</dd>
  139.                         <hr>
  140.                         <dt>Google Analytics Event: Label</dt>
  141.                         <dd>{{ pimcore_input("content-btn-secondary-ga-1-3") }}</dd>
  142.                     
  143.                     </div>
  144.                     <div>
  146.                         <div class="uk-margin"><strong>Titre à droite</strong></div>
  147.                         <h2 class="uk-h2">
  148.                             {{ pimcore_textarea("content-right-title",{
  149.                                 "nl2br" : true
  150.                             }) }}
  151.                         </h2>
  152.                         <div class="uk-margin"><strong>Sous-titre à droite</strong></div>
  153.                         <h2 class="uk-h2">
  154.                             {{ pimcore_textarea("content-right-title-lower",{
  155.                                 "nl2br" : true
  156.                             }) }}
  157.                         </h2>
  159.                         <div class="uk-margin"><strong>Contenu descriptif</strong></div>
  160.                         {{ pimcore_wysiwyg('product-content') }}
  162.                         <div class="uk-margin"><strong>images est descriptions</strong></div>
  163.                         {% for row in pimcore_block('productDescriptionImages').iterator %}
  164.                         <div uk-alert>
  165.                             <div class="uk-margin"><strong>Image</strong></div>
  166.                             {{ pimcore_image('product-description-image') }}    
  168.                             <div class="uk-margin"><strong>Description de l'image</strong></div>
  169.                             {{ pimcore_textarea('product-description-text', {'nl2br' : true}) }}    
  170.                         </div>
  171.                         {% endfor %}
  173.                         <div class="uk-margin"><strong>Annotations</strong></div>
  174.                         {{ pimcore_wysiwyg('product-annotaiton') }}
  176.                     </div>
  177.                 </div>
  178.                 
  179.             </div>
  180.         </li>
  181.     </ul>
  182. </div>
  184. {% endif %}
  186. {% if not editmode %}
  188. <!-- This is the modal -->
  189. <div id="modal-pharmacies" uk-modal>
  190.     <div class="uk-modal-dialog uk-modal-body uk-text-center uk-position-relative">
  192.         <h2>{{"Où acheter ?"|trans}}</h2>
  194.         <div uk-grid>
  196.             <div class="uk-width-2-5">
  197.                 <div class="apk-container-image apk-image-pharmacie">
  199.                 </div>
  200.                 <div>
  201.                     <h3>{{"En pharmacie :"|trans}}</h2>
  202.                     <p>
  203.                         {{"Vous préférez vous rendre chez votre pharmacien afin de bénéficier de ses conseils avisés ?"|trans}}
  204.                         </br>
  205.                         {{"Trouvez votre pharmacie la plus proche sur"|trans}}
  206.                     </p>
  207.                 </div>
  209.                 {% if document.property('pharmacieLogo') %}
  210.                 <div class="apk-container-image-phramacie">
  211.                     <a href="{{ 'pharmacie-be-lien'|trans }}" target="_blank">
  212.                         <img src="{{ document.property('pharmacieLogo').thumbnail('') }}" alt="{{ "Pharmacie"|trans }}">   
  213.                     </a>
  214.                 </div>
  215.                 {% endif %}
  217.             </div>
  219.             <div class="uk-width-auto apk-width-auto">
  220.                 <div class="apk-border-vertical">
  221.             
  222.                 </div>
  223.             </div>
  225.             <div class="uk-width-2-5">
  226.                 <div class="apk-container-image apk-margin-container-image apk-image-en-ligne">
  228.                 </div>
  229.                 <div>
  230.                     <h3>{{"En ligne :"|trans}}</h2>
  231.                     <p>
  232.                         {{"Vous voulez être livré directement chez vous via des platformes e-shop ouvertes 24h/24"|trans}}
  233.                         </br>
  234.                         {{"Magnecaps est également disponible en ligne !"|trans}}
  235.                     </p>
  236.                 </div>
  237.                 <div class="apk-container-phramacies">
  238.                     <div class="uk-child-width-1-2 uk-child-width-1-3@s" uk-grid>
  239.                         {% set i = 0 %}
  240.                         {% if not pimcore_relation("myRelation").isEmpty  %}
  241.                             {% if pimcore_relation("myRelation").element.className == 'Produits' %}
  242.                                 {% for lienPharmacie in pimcore_relation("myRelation").element.lienPharmacies %}
  243.                                     <div apk-type="{{i}}">
  244.                                         <a href="{{ lienPharmacie.lien }}" target="_blank">
  245.                                             {{ lienPharmacie.image.thumbnail('').html()|raw }}
  246.                                         </a>
  247.                                     </div>
  248.                                 {% endfor %}
  249.                             {% endif %}
  250.                         {% endif %}
  252.                         {% for row in pimcore_block('otherProcuts').iterator %}
  253.                             {% set i = i + 1 %}
  254.                             {% if not pimcore_relation("myOtherRelation").isEmpty  %}
  255.                                 {% if pimcore_relation("myOtherRelation").element.className == 'Produits' %}
  256.                                     {% for lienPharmacie in pimcore_relation("myOtherRelation").element.lienPharmacies %}
  257.                                         <div apk-type="{{i}}" style="display:none">
  258.                                             <a href="{{ lienPharmacie.lien }}" target="_blank">
  259.                                                 {{ lienPharmacie.image.thumbnail('').html()|raw }}
  260.                                             </a>
  261.                                         </div>
  262.                                     {% endfor %}
  263.                                 {% endif %}
  264.                             {% endif %}
  265.                         {% endfor %}
  267.                     </div>
  268.                 </div>
  269.             </div>
  271.         </div>
  273.     </div>
  274. </div>
  276. <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  278.     <div class="apk-container-custom">
  279.         <div class="uk-child-width-1-2@m uk-grid-collapse" uk-grid uk-height-match="target: [apk-height-match]">
  281.             <div class="apk-container-custom-left uk-flex uk-flex-middle">
  282.                 <div class="uk-width-1-1" apk-height-match>
  283.                         
  284.                     <div class="uk-container apk-container-700">
  285.                         {% if not pimcore_textarea("content-title").isEmpty %}
  286.                             {% if pimcore_select("content-heading").data == "span" %}
  287.                                 <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  288.                                     {{ pimcore_textarea("content-title", {
  289.                                     "nl2br" : true})|raw }}
  290.                                 </span>
  291.                             {% else %}
  292.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  293.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  294.                                     {{ pimcore_textarea("content-title", {
  295.                                     "nl2br" : true})|raw }}
  296.                                 </{{ content_heading }}>
  297.                             {% endif %}
  298.                         {% endif %}
  299.                     </div>
  301.                     {% if not pimcore_block('otherProcuts').getCount > 0 %}
  302.                         
  303.                     <div class="uk-container apk-container-700">
  304.                         <div class="apk-media">
  305.                             <div class="apk-media-container">
  306.                                 {% if not pimcore_relation("myRelation").isEmpty  %}
  307.                                 {% if pimcore_relation("myRelation").element.className == 'Produits' %}
  308.                                     {{ pimcore_relation("myRelation").element.image.thumbnail('big-product-thumb').html()|raw }} 
  309.                                 {% endif %}
  310.                                 {% endif %}
  311.                                 <span class="apk-gomette uk-flex uk-flex-middle uk-flex-center uk-text-center">
  312.                                     <span>{{ pimcore_textarea('product-image-prise', {'nl2br' : true, 'htmlspecialchars' : false}) }}</span>
  313.                                 </span>
  314.                                 
  315.                             </div>
  316.                         </div>
  317.                     </div>
  319.                     {% else %}
  321.                     <!-- Carousel -->
  322.                     <div id="product-carousel">
  323.                         {% set i = 0 %}
  324.                         <carousel-3d :border="0" :startIndex="0" :controls-visible="true" :controls-prev-html="'&#10092; '"
  325.                             :controls-next-html="'&#10093;'" :height="400" :space="300" :perspective="0"
  326.                             :controls-width="30" :controls-height="60" :clickable="true"
  327.                             @before-slide-change="onBeforeSlideChange">
  328.                             <slide :index="{{i}}" apk-index="{{i}}">
  329.                                 <div apk-height-carousel>
  330.                                     <div class="apk-media">
  331.                                         <div class="apk-media-container uk-text-center">
  332.                                             <div>
  333.                                                 {% if not pimcore_relation("myRelation").isEmpty  %}
  334.                                                 {% if pimcore_relation("myRelation").element.className == 'Produits' %}
  335.                                                     {{ pimcore_relation("myRelation").element.image.thumbnail('big-product-thumb').html()|raw }} 
  336.                                                 {% endif %}
  337.                                                 {% endif %}
  338.                                                 <span class="apk-gomette uk-flex uk-flex-middle uk-flex-center uk-text-center">
  339.                                                     <span>{{ pimcore_textarea('product-image-prise', {'nl2br' : true, 'htmlspecialchars' : false}) }}</span>
  340.                                                 </span>
  341.                                             </div>
  342.                                         </div>
  343.                                     </div>
  344.                                 </div>
  345.                             </slide>
  347.                             {% for row in pimcore_block('otherProcuts').iterator %}
  348.                             {% set i = i + 1 %}
  349.                             <slide :index="{{i}}">
  350.                                 <div apk-height-carousel>
  351.                                     <div class="apk-media">
  352.                                         <div class="apk-media-container uk-text-center">
  353.                                             <div>
  354.                                                 {% if not pimcore_relation("myOtherRelation").isEmpty  %}
  355.                                                 {% if pimcore_relation("myOtherRelation").element.className == 'Produits' %}
  356.                                                     {{ pimcore_relation("myOtherRelation").element.image.thumbnail('big-product-thumb').html()|raw }} 
  357.                                                 {% endif %}
  358.                                                 {% endif %}
  359.                                                 <span class="apk-gomette uk-flex uk-flex-middle uk-flex-center uk-text-center">
  360.                                                     <span>{{ pimcore_textarea('product-image-prise-other', {'nl2br' : true, 'htmlspecialchars' : false}) }}</span>
  361.                                                 </span>
  362.                                             </div>
  363.                                         </div>
  364.                                     </div>
  365.                                 </div>
  366.                             </slide>
  367.                             {% endfor %}
  368.                         </carousel-3d>
  369.                     </div>
  371.                     {% endif %}
  373.                     <div class="uk-container apk-container-900">
  374.                         <div class="apk-type {{ pimcore_block('otherProcuts').getCount > 0 ? 'apk-type-multiple' : '' }}">
  375.                             
  376.                             <div>
  377.                                 {% set i = 0 %}
  378.                                 <div apk-type="{{i}}">
  379.                                     <span>{{ pimcore_input('product-type') }}</span>
  380.                                     <div class="uk-child-width-auto uk-grid-small" uk-grid>
  381.                                         <div>
  382.                                         {% if not pimcore_link("content-btn").isEmpty() %}
  383.                                             <div class="apk-action">
  384.                                                 {% if
  385.                                                     not pimcore_input("content-btn-secondary-ga-1-1").isEmpty
  386.                                                     and not pimcore_input("content-btn-secondary-ga-1-2").isEmpty
  387.                                                     and not pimcore_input("content-btn-secondary-ga-1-3").isEmpty
  388.                                                 %}
  390.                                                     {{ pimcore_link("content-btn", {
  391.                                                         "class" : "uk-button uk-button-large",
  392.                                                         "onclick" : "javascript:sendGtagEvent('" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-1")) ~ "',
  393.                                                 '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-2")) ~ "',
  394.                                                 '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-3")) ~ "');"
  395.                                                     }) }}
  397.                                                 {% else %}
  399.                                                     {{ pimcore_link("content-btn", {
  400.                                                         "class" : "uk-button"
  401.                                                     }) }}
  403.                                                 {% endif %}
  404.                                             </div>
  405.                                         {% endif %}
  406.                                         </div>
  408.                                         <div>
  409.                                             <button class="uk-button apk-btn-univers" type="button" uk-toggle="target: #modal-pharmacies">{{"Acheter"|trans}}</button>
  410.                                         </div>
  411.                                     </div>
  412.                                 </div>
  413.                                 {% for row in pimcore_block('otherProcuts').iterator %}
  414.                                     {% set i = i + 1 %}
  415.                                     <div apk-type="{{i}}" style="display:none">
  416.                                         <span>{{ pimcore_input('product-type-other') }}</span>
  417.                                         <div class="uk-child-width-auto uk-grid-small" uk-grid>
  418.                                             <div class="apk-action">
  419.                                                 {{ pimcore_link("content-btn-product-other", {"class" : "uk-button"}) }}
  420.                                             </div>
  421.                                             <div>
  422.                                                 <button class="uk-button apk-btn-univers" type="button" uk-toggle="target: #modal-pharmacies">{{"Acheter"|trans}}</button>
  423.                                             </div>
  424.                                         </div>
  425.                                     </div>
  426.                                 {% endfor %}
  427.                             </div>
  429.                         </div>
  430.                         {#{% if not pimcore_link("content-btn").isEmpty() %}
  431.                             <div class="apk-action">
  432.                                 {% if
  433.                                     not pimcore_input("content-btn-secondary-ga-1-1").isEmpty
  434.                                     and not pimcore_input("content-btn-secondary-ga-1-2").isEmpty
  435.                                     and not pimcore_input("content-btn-secondary-ga-1-3").isEmpty
  436.                                 %}
  438.                                     {{ pimcore_link("content-btn", {
  439.                                         "class" : "uk-button uk-button-large",
  440.                                         "onclick" : "javascript:sendGtagEvent('" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-1")) ~ "',
  441.                                         '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-2")) ~ "',
  442.                                         '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-3")) ~ "');"
  443.                                     }) }}
  445.                                 {% else %}
  447.                                     {{ pimcore_link("content-btn", {
  448.                                         "class" : "uk-button"
  449.                                     }) }}
  451.                                 {% endif %}
  452.                             </div>
  453.                         {% endif %}#}
  454.                     </div>
  455.                 </div>
  456.             </div>
  458.             <div class="apk-container-custom-right uk-flex uk-flex-middle">
  459.                 <div class="uk-container apk-container-700 uk-height-1-1 uk-flex uk-flex-column" apk-height-match>
  460.                     <div>
  461.                         <div class="apk-right-title">
  462.                             <span class="uk-h1">
  463.                                 {{ pimcore_textarea("content-right-title") }}
  464.                                 <span>{{ pimcore_textarea("content-right-title-lower") }}</span>
  465.                             </span>
  466.                         </div>
  467.                         
  468.                         <div class="apk-content">
  469.                             {{ pimcore_wysiwyg('product-content') }}
  470.                         </div>
  471.                         
  472.                         <div class="apk-product-medias">
  473.                             <div class="uk-grid-medium uk-child-width-expand@s" uk-grid uk-height-match="target: apk-product-medias-box">
  474.                                 {% for row in pimcore_block('productDescriptionImages').iterator %}
  475.                                 <div class="uk-text-center">
  476.                                     <div class="apk-product-medias-box">
  477.                                         {% if pimcore_image('product-description-image').src %}
  478.                                             <img height="150" src="{{ pimcore_image('product-description-image').src }}" alt="pimcore_image('product-description-image').alt">    
  479.                                         {% endif %}
  480.                                         <div class="apk-product-medias-description">
  481.                                             {{ pimcore_textarea('product-description-text', {'nl2br' : true}) }}    
  482.                                         </div>
  483.                                     </div>
  484.                                 </div>
  485.                             {% endfor %}    
  486.                             </div>
  487.                         </div>
  488.                     </div>
  489.         
  490.                     <div class="apk-product-annotation uk-flex uk-flex-bottom">
  491.                         <div class="uk-grid-medium" uk-grid>
  492.                             <div class="uk-width-expand@m">
  493.                                 {{ pimcore_wysiwyg('product-annotaiton') }}
  494.                             </div>
  495.                             <div class="uk-width-auto@m uk-flex uk-flex-right uk-flex-middle">
  496.                                 <div>
  497.                                     {# Scroll géré dans le main.js #}
  498.                                     {% if pimcore_select("scroll").data == "apk-scroll" or pimcore_select("scroll").data == "apk-top" %}
  499.                                         {% if pimcore_select("scroll").data == "apk-scroll" %}
  500.                                             <div class="apk-scroll">
  501.                                                 {{ "SCROLL"|trans }}
  502.                                             </div>
  503.                                         {% elseif pimcore_select("scroll").data == "apk-top" %}
  504.                                             <div class="apk-scroll apk-top">
  505.                                                 {{ "TOP"|trans }}
  506.                                             </div>
  507.                                         {% endif %}
  508.                                     {% endif %}
  509.                                 </div>
  510.                             </div>
  511.                         </div>
  512.                     </div>
  513.                     
  514.     
  515.                 </div>
  516.                 
  517.             </div>
  518.         </div>
  519.     </div>
  520. </div>
  522. {% endif %}