templates/ECommerce/App/Product/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% trans_default_domain 'ECommerceBundle' %}
  5. {% block title %}{{ product.originalTitle }} {{ product.origin }}{% endblock %}
  7. {%- import 'ECommerce/App/Product/macros.html.twig' as macros -%}
  9. {% block content %}
  10. <div class="container-fluid">
  11. <div class="container">
  12. <div class="content">
  13. <div class="row grid-1-3">
  15. <div class="product-photo w-100 h-100">
  16. {%- set photo = product.photos|first -%}
  17. {%- if photo is not empty and photo.url is not empty -%}
  18. <img src="{{ asset(photo.url)|imagine_filter('product_thumbnail') }}"
  19. class="img-fluid mx-auto d-block w-100 h-100"
  20. alt="{{ product.title }}" data-lity
  21. data-lity-target="{{ asset(photo.url)|imagine_filter('product_small') }}">
  22. {%- else -%}
  23. <img src="{{ preload(asset('/assets/static/no-photo.jpg')) }}" class="img-fluid mx-auto d-block"
  24. alt="{{ product.title }}">
  25. {%- endif -%}
  26. </div>
  28. {%- set firstDepot = product.quantities|first -%}
  29. {%- set restDepots = product.quantities[1:] -%}
  31. {% set hasActiveDepot = false %}
  32. {% for depot in product.quantities %}
  33. {% if depot.quantity > 0 %}
  34. {% set hasActiveDepot = true %}
  35. {% endif %}
  36. {% endfor %}
  37. <div class="product-info d-flex flex-column">
  38. <h1 class="text-left line-height-95 font-weight-bold font-45">{{ product.title }}</h1>
  39. <p class="line-height-95 font-weight-medium font-28 mb-40">{{ product.manufacturer }}</p>
  40. <div class="dimensions d-inline-flex align-items-center">
  41. <img src="{{ preload(asset('assets/static/outer-diameter.svg')) }}" alt="Outer Diameter">
  42. <p class="m-0 font-26 ml-3">{{ product.outerDiameter|number_format(2) }} mm</p>
  43. </div>
  44. <div class="dimensions d-inline-flex align-items-center">
  45. <img src="{{ preload(asset('assets/static/inner-diameter.svg')) }}" alt="Inner Diameter">
  46. <p class="m-0 font-26 ml-3">{{ product.innerDiameter|number_format(2) }} mm</p>
  47. </div>
  48. <div class="dimensions d-inline-flex align-items-center last mb-4">
  49. <img src="{{ preload(asset('assets/static/width.svg')) }}" alt="Width">
  50. <p class="m-0 font-26 ml-3">{{ product.width|number_format(2) }} mm</p>
  51. </div>
  52. <div class="price d-inline-flex align-items-center">
  53. <p class="line-height-95 m-0 font-weight-medium font-28 text-uppercase">{{ 'product.price'|trans }}</p>
  54. <p class="line-height-95 mb-0 ml-auto font-weight-medium font-28">{{ firstDepot|depot_product_price(app.user)|number_format(2) }} {{ currency_code(app.user) }}</p>
  55. </div>
  56. <div class="price d-inline-flex align-items-end">
  57. <p class="line-height-95 m-0 mt-3 font-weight-medium font-28 color-blue text-uppercase mw-10">{{ 'product.label_discount_price'|trans }}</p>
  58. {% if is_granted('ROLE_CLIENT') %}
  59. <p class="line-height-95 mb-0 ml-auto font-weight-medium font-28 color-blue">{{ firstDepot|depot_product_price(app.user, true)|number_format(2) }} {{ currency_code(app.user) }}</p>
  60. {% else %}
  61. <p class="line-height-95 mb-0 ml-auto font-weight-medium font-28 color-blue">{{ 'product.log-in'|trans }}</p>
  62. {% endif %}
  63. </div>
  64. </div>
  66. <div class="border-rounded w-100 h-100 d-flex">
  67. <div class="col-depot-info{{ hasActiveDepot ? ' has-active-depot' : '' }} w-100">
  68. {% if firstDepot %}
  69. {% if not hasActiveDepot or firstDepot.quantity > 0 %}
  70. {% set depotProduct = firstDepot %}
  71. {% include 'ECommerce/App/Product/partials/product_amount.html.twig' %}
  72. {% endif %}
  73. {% endif %}
  75. {% for depot in restDepots %}
  76. {% if not hasActiveDepot or depot.quantity > 0 %}
  77. {% set depotProduct = depot %}
  78. {% include 'ECommerce/App/Product/partials/product_amount.html.twig' %}
  79. {% endif %}
  80. {% endfor %}
  81. </div>
  82. </div>
  83. </div>
  85. <div class="row single-product-description">
  86. <a class="mt-3" href="{{ product.link }}" target="_blank" rel="nofollow">
  87. <h3 class="text-uppercase line-height-95 font-weight-normal font-28">{{ 'product.more_info'|trans }}</h3>
  88. </a>
  89. </div>
  91. <div class="row justify-content-center">
  92. <div class="synonym-products">
  93. <div id="interchange-wrapper" class="mt-3 mb-5">
  94. <div class="row justify-content-center">
  95. <div class="col-12 mb-5 text-center">
  96. <h1>{{ 'general.interchange_button_title'|trans }}</h1>
  97. <a class="btn btn-primary mt-4"
  98. href="{{ path('mdl_app_synonym_product_find', { 'title': (product.title|trim('*', 'left')) }) }}"
  99. data-intro="{{ ('intro.interchange'|trans) }}"
  100. data-toggle="replace"
  101. data-trigger="#interchange-wrapper">
  102. <span class="text-capitalize font-21 font-weight-normal">{{ 'general.interchange_button_search'|trans }}</span>
  103. <img src="{{ asset('assets/static/arrows-both-way.svg') }}" class="img-fluid ml-5"
  104. alt="found in interchange catalogue">
  105. </a>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  112. <div class="row catalog">
  113. <a class="w-100" href="{{ path('mdl_public_page_show', {'slug': 'media', 'category': product.manufacturer.name}) }}">
  114. <img class="w-100" src="{{ asset('assets/static/catalog-background.png') }}" aria-label="Catalog background" alt="Catalog background"/>
  115. <h1 class="font-72 text-capitalize text-decoration-none text-white">Pogledaj katalog</h1>
  116. <p class="font-26 text-white pb-3">Otkrij vise<img src="{{ asset('assets/static/arrow-button.svg') }}" alt="Arrow button"/></p>
  117. </a>
  118. </div>
  120. </div>
  121. </div>
  122. </div>
  123. {% endblock %}