templates/website/page/hertiage-product.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% set metaParams = {
  3.     'title': product.metaTitle,
  4.     'description': product.metaDescription,
  5.     'keywords': product.metaDescription,
  6.     'ogImage': product.metaImage,
  7. } %}
  8. {% block meta %}
  9.     {% include '@web/parts/meta.html.twig' with metaParams %}
  10. {% endblock meta %}
  11. {% block title %}{{ product.metaTitle }}{% endblock title %}
  12. {% block body %}
  14.     <section class="main-products-section">
  16.         <div class="container-fluid">
  17.             <div class="row">
  18.                 <div class="col-lg-10 m-auto">
  19.                     <ul class="wrapper-navigation">
  20.                         <li>
  21.                             <a href="{{ path('page_index') }}">
  22.                                 {{ 'Home'|trans }}
  23.                             </a>
  24.                         </li>
  25.                         <li>
  26.                             <a href="{{ path('page_heritage_products') }}">
  27.                                 {{ 'Products'|trans }}
  28.                             </a>
  29.                         </li>
  30.                         <li>
  31.                             <span>{{ product.title }}</span>
  32.                         </li>
  33.                     </ul>
  35.                     <div class="section-product-view">
  36.                         <div class="wrapper-product-view-content">
  37.                             <div class="wrapper-image">
  39.                                 {# 1️⃣ Build safe images array (skip null automatically) #}
  40.                                 {% set images = [] %}
  41.                                 {% if product.image %}
  42.                                     {% set images = images|merge([product.image]) %}
  43.                                 {% endif %}
  44.                                 {% if product.minImage %}
  45.                                     {% set images = images|merge([product.minImage]) %}
  46.                                 {% endif %}
  47.                                 {% if product.miniSecondImage %}
  48.                                     {% set images = images|merge([product.miniSecondImage]) %}
  49.                                 {% endif %}
  51.                                 {# 2️⃣ If all images are null → show placeholder #}
  52.                                 {% if images is empty %}
  53.                                     {% set images = ['images/no-image.png'] %}
  54.                                 {% endif %}
  56.                                 {# MAIN SLIDER #}
  57.                                 <div class="swiper product-main-slider">
  58.                                     <div class="swiper-wrapper">
  59.                                         {% for img in images %}
  60.                                             <div class="swiper-slide">
  61.                                                 <img src="{{ asset(img) }}" alt="product image">
  62.                                             </div>
  63.                                         {% endfor %}
  64.                                     </div>
  65.                                 </div>
  67.                                 {# THUMB SLIDER #}
  68.                                 <div class="swiper product-thumb-slider">
  69.                                     <div class="swiper-wrapper">
  70.                                         {% for img in images %}
  71.                                             <div class="swiper-slide">
  72.                                                 <img src="{{ asset(img) }}" alt="product thumbnail">
  73.                                             </div>
  74.                                         {% endfor %}
  75.                                     </div>
  76.                                 </div>
  78.                             </div>
  79.                             <div class="wrapper-description">
  80.                                 <h2>
  81.                                     {{ product.title }}
  82.                                 </h2>
  83.                                 <ul>
  84.                                     <li>
  85.                                         <span>{{ 'Category'|trans }}:</span>
  86.                                         <strong>{{ product.category.title }}</strong>
  87.                                     </li>
  88.                                     <li>
  89.                                         <span>{{ 'Collection'|trans }}:</span>
  90.                                         <strong>{{ product.collection.title }}</strong>
  91.                                     </li>
  92.                                     <li>
  93.                                         <span>{{ 'Weight'|trans }}:</span>
  94.                                         <strong>{{ product.weight }}</strong>
  95.                                     </li>
  96.                                     <li>
  97.                                         <span>{{ 'Material'|trans }}:</span>
  98.                                         <strong>{{ product.type }}</strong>
  99.                                     </li>
  100.                                     {% if product.stone %}
  101.                                     <li>
  102.                                         <span>{{ 'Stones'|trans }}:</span>
  103.                                         <strong> {{ product.stone }}</strong>
  104.                                     </li>
  105.                                     {% endif %}
  106.                                 </ul>
  107.                                 <div class="wrapper-bottom">
  108.                                     <h4>
  109.                                         {{ product.price|number_format ~ 'դրամ'|trans }}
  110.                                     </h4>
  111.                                     <button class="main-shop-btn">
  112.                                         {{ 'ADD TO CARD'|trans }}
  113.                                         <svg width="20" height="17" viewBox="0 0 20 17" fill="none"
  114.                                              xmlns="http://www.w3.org/2000/svg">
  115.                                             <path d="M15.9987 11.8333H5.16536L3.08203 3.5H18.082L15.9987 11.8333Z"
  116.                                                   fill="#0F0F0F"></path>
  117.                                             <path d="M1 1H2.45833L3.08333 3.5M3.08333 3.5L5.16667 11.8333H16L18.0833 3.5H3.08333Z"
  118.                                                   stroke="#0F0F0F" stroke-width="2" stroke-linecap="round"
  119.                                                   stroke-linejoin="round"></path>
  120.                                             <path d="M5.16797 16C5.85832 16 6.41797 15.4404 6.41797 14.75C6.41797 14.0596 5.85832 13.5 5.16797 13.5C4.47761 13.5 3.91797 14.0596 3.91797 14.75C3.91797 15.4404 4.47761 16 5.16797 16Z"
  121.                                                   stroke="#0F0F0F" stroke-width="2" stroke-linecap="round"
  122.                                                   stroke-linejoin="round"></path>
  123.                                             <path d="M16 16C16.6904 16 17.25 15.4404 17.25 14.75C17.25 14.0596 16.6904 13.5 16 13.5C15.3096 13.5 14.75 14.0596 14.75 14.75C14.75 15.4404 15.3096 16 16 16Z"
  124.                                                   stroke="#0F0F0F" stroke-width="2" stroke-linecap="round"
  125.                                                   stroke-linejoin="round"></path>
  126.                                         </svg>
  127.                                     </button>
  128.                                 </div>
  129.                             </div>
  130.                         </div>
  131.                         {% if product.productDescription %}
  132.                         <div class="wrapper-additional-information">
  133.                             <h3>
  134.                                 {{ 'Description'|trans }}
  135.                             </h3>
  136.                             {{ product.productDescription }}
  137.                         </div>
  138.                         {% endif %}
  140.                         <div class="wrapper-additional-information">
  141.                             <h3>
  142.                                 {{ delivery.title }}
  143.                             </h3>
  144.                            {{ delivery.description|raw }}
  146.                             <div class="payment-methods">
  147.                                 <ul>
  148.                                     <li>
  149.                                         <img src="{{ asset('images/visa.png') }}" alt="Visa">
  150.                                     </li>
  151.                                     <li>
  152.                                         <img src="{{ asset('images/mastercard.png') }}" alt="MasterCard">
  153.                                     </li>
  154.                                     <li>
  155.                                         <img src="{{ asset('images/arca.png') }}" alt="ArCa">
  156.                                     </li>
  157.                                 </ul>
  158.                             </div>
  159.                         </div>
  160.                     </div>
  161.                     <div class="wrapper-recent-products">
  162.                         <h5>
  163.                             {{ 'YOU MIGHT ALSO LIKE'|trans }}
  164.                         </h5>
  165.                         <div class="swiper mySwiper">
  166.                             <div class="swiper-wrapper">
  167.                                 {% for item in products %}
  168.                                     <div class="swiper-slide">
  169.                                         <a href="{{ path('page_heritage_product_view',{'id':item.id}) }}"
  170.                                            class="wrapper-item">
  171.                                             <div class="wrapper-image">
  172.                                                 <img src="{{ item.image }}" alt="">
  173.                                             </div>
  174.                                             <span class="wrapper-description">
  175.                                             <strong>
  176.                                                 {{ item.title }}
  177.                                             </strong>
  178.                                             <span>
  179.                                                {{ item.price|number_format ~ 'դրամ'|trans }}
  180.                                             </span>
  181.                                         </span>
  182.                                         </a>
  183.                                     </div>
  184.                                 {% endfor %}
  185.                             </div>
  186.                         </div>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </section>
  195. {% endblock %}