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 product-path">
  14. <p class="m-0">
  15. {% for crumb in breadcrumbs %}
  16. {% if crumb.url is defined %}
  17. <a href="{{ crumb.url }}">{{ crumb.label|trans }}</a> <span>/</span>
  18. {% else %}<span>{{ crumb.label }}</span>{% endif %}
  19. {% endfor %}
  20. </p>
  21. </div>
  22. <div class="row grid-1-3">
  24. <div class="product-photo w-100 h-100">
  25. {%- set photo = product.photos|first -%}
  26. {%- if photo is not empty and photo.url is not empty -%}
  27. <img src="{{ asset(photo.url)|imagine_filter('product_thumbnail') }}"
  28. class="img-fluid mx-auto d-block w-100 h-100"
  29. alt="{{ product.title }}" data-lity
  30. data-lity-target="{{ asset(photo.url)|imagine_filter('product_small') }}">
  31. {%- else -%}
  32. <img src="{{ preload(asset('/assets/static/no-photo.jpg')) }}" class="img-fluid mx-auto d-block"
  33. alt="{{ product.title }}">
  34. {%- endif -%}
  35. </div>
  37. {%- set firstDepot = product.quantities|first -%}
  38. {%- set restDepots = product.quantities[1:] -%}
  40. {% set hasActiveDepot = false %}
  41. {% for depot in product.quantities %}
  42. {% if depot.quantity > 0 %}
  43. {% set hasActiveDepot = true %}
  44. {% endif %}
  45. {% endfor %}
  46. <div class="product-info d-flex flex-column">
  47. <h2 class="text-left line-height-95 font-weight-bold font-45">{{ product.title }}</h2>
  48. <p class="line-height-95 font-weight-medium font-28 mb-40">{{ product.manufacturer }}</p>
  50. <div class="dimensions-wrapper">
  51. <div class="dimensions d-inline-flex align-items-center">
  52. <img src="{{ preload(asset('assets/static/inner-diameter.svg')) }}" alt="Inner Diameter">
  53. <p class="m-0 font-26 ml-3">{{ product.innerDiameter|number_format(2) }} mm</p>
  54. </div>
  56. <div class="dimensions d-inline-flex align-items-center">
  57. <img src="{{ preload(asset('assets/static/outer-diameter.svg')) }}" alt="Outer Diameter">
  58. <p class="m-0 font-26 ml-3">{{ product.outerDiameter|number_format(2) }} mm</p>
  59. </div>
  61. <div class="dimensions d-inline-flex align-items-center last mb-4">
  62. <img src="{{ preload(asset('assets/static/width.svg')) }}" alt="Width">
  63. <p class="m-0 font-26 ml-3">{{ product.width|number_format(2) }} mm</p>
  64. </div>
  65. </div>
  67. <div class="price d-inline-flex align-items-center mt-5">
  68. <p class="line-height-95 m-0 font-weight-medium font-28 text-uppercase">{{ 'product.price'|trans }}</p>
  69. <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>
  70. </div>
  72. {# <div class="price d-inline-flex align-items-end">#}
  73. {# <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>#}
  74. {# {% if is_granted('ROLE_CLIENT') %}#}
  75. {# <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>#}
  76. {# {% else %}#}
  77. {# <p class="line-height-95 mb-0 ml-auto font-weight-medium font-28 color-blue">{{ 'product.log-in'|trans }}</p>#}
  78. {# {% endif %}#}
  79. {# </div>#}
  80. </div>
  82. <div class="border-rounded w-100 h-100 d-flex flex-column text-center">
  83. <h4 class="m-0">{{ 'availability'|trans }}</h4>
  84. <div class="col-depot-info{{ hasActiveDepot ? ' has-active-depot' : '' }} w-100 text-left">
  85. {% if firstDepot %}
  86. {% if not hasActiveDepot or firstDepot.quantity > 0 %}
  87. {% set depotProduct = firstDepot %}
  88. {% include 'ECommerce/App/Product/partials/product_amount.html.twig' %}
  89. {% endif %}
  90. {% endif %}
  92. {% for depot in restDepots %}
  93. {% if not hasActiveDepot or depot.quantity > 0 %}
  94. {% set depotProduct = depot %}
  95. {% include 'ECommerce/App/Product/partials/product_amount.html.twig' %}
  96. {% endif %}
  97. {% endfor %}
  98. </div>
  99. </div>
  100. </div>
  102. <div class="row single-product-description">
  103. <a class="mt-3" href="{{ product.link }}" target="_blank" rel="nofollow">
  104. <h3 class="text-uppercase line-height-95 font-weight-normal font-28">{{ 'product.more_info'|trans }}</h3>
  105. </a>
  106. {% if product.infoCodes is not empty %}
  107. <h4 class="font-21 line-height-95 font-weight-normal text-uppercase mt-3">{{ 'product.description'|trans }}</h4>
  108. <p class="line-height-113 text-color-grey mt-4 font-weight-normal font-26">{{ product.infoCodes.first.translate.description }}</p>
  109. {% endif %}
  110. </div>
  112. <div class="row justify-content-center">
  113. <div class="synonym-products">
  114. <div id="interchange-wrapper" class="mt-3 mb-5">
  115. <div class="row justify-content-center">
  116. <div class="col-12 mb-5 text-center">
  117. <h1>{{ 'general.interchange_button_title'|trans }}</h1>
  118. <a class="btn btn-primary mt-4"
  119. href="{{ path('mdl_app_synonym_product_find', { 'title': (product.title|trim('*', 'left')) }) }}"
  120. data-intro="{{ ('intro.interchange'|trans) }}"
  121. data-toggle="replace"
  122. data-trigger="#interchange-wrapper">
  123. <span class="text-capitalize font-21 font-weight-normal">{{ 'general.interchange_button_search'|trans }}</span>
  124. <img src="{{ asset('assets/static/arrows-both-way.svg') }}" class="img-fluid ml-5"
  125. alt="found in interchange catalogue">
  126. </a>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  133. <div class="row catalog">
  134. {% set routeParams = {'slug': 'media'} %}
  135. {% if product.manufacturer is not null %}
  136. {% set routeParams = routeParams|merge({'category': product.manufacturer.name}) %}
  137. {% endif %}
  139. <a class="w-100" href="{{ path('mdl_public_page_show', routeParams) }}">
  140. <img class="w-100" src="{{ asset('assets/static/catalog-background.png') }}" aria-label="Catalog background" alt="Catalog background"/>
  141. <h1 class="font-72 text-capitalize text-decoration-none text-white">{{ 'look-catalogue'|trans }}</h1>
  142. <p class="font-26 text-white pb-3">{{ 'find-out-more'|trans }}<img src="{{ asset('assets/static/arrow-button.svg') }}" alt="Arrow button"/></p>
  143. </a>
  144. </div>
  146. </div>
  147. </div>
  148. </div>
  149. {% endblock %}