src/UI/WebBundle/Resources/views/Product/public_product_show.html.twig line 1

Open in your IDE?
  1. {% extends 'Common/base.html.twig' %}
  2. {% import 'Common/parts/functions.html.twig' as function %}
  4. {% block title %}{{ product.productLabel }} | {{ parent() }}{% endblock %}
  5. {% block classBody %}product_show {{ parent() }}{% endblock %}
  7. {% block stylesheets %}
  8. <link href="/build/theme/phoenix/assets/vendors/swiper/swiper-bundle.min.css" rel="stylesheet">
  9. {{ parent() }}
  10. {{ encore_entry_link_tags('datatables_styles') }}
  11. {% endblock stylesheets %}
  13. {% block javascripts %}
  14. {{ parent() }}
  15. <script type="text/javascript" src="/build/theme/phoenix/assets/vendors/swiper/swiper-bundle.min.js"></script>
  16. {{ encore_entry_script_tags('public_product_show') }}
  17. {% endblock javascripts %}
  19. {% block contents %}
  21. <div id="whater_public_product_show_page"
  22. class="container pt-5 pb-9"
  23. data-product-id="{{ product.id }}"
  24. data-minimun-price="{{ product.productPrice }}"
  25. ng-controller="publicProductShowCtrl">
  26. <section class="py-0">
  27. <div class="container-small">
  28. <nav class="mb-3" aria-label="breadcrumb">
  29. <ol class="breadcrumb mb-0">
  30. <li class="breadcrumb-item"><a href="{{path('web_homepage')}}">Inicio</a></li>
  31. <li class="breadcrumb-item"><a href="{{path('web_public_product_list')}}">Productos</a></li>
  32. <li class="breadcrumb-item active" aria-current="page">{{ product.productLabel }}</li>
  33. </ol>
  34. </nav>
  35. <div class="row g-5 mb-5 mb-lg-8" >
  36. <div class="col-12 col-lg-6">
  37. <div class="row g-3 mb-3">
  38. <div class="col-12 col-md-2 col-lg-12 col-xl-2" ng-init="swiperInit()">
  39. <div class="swiper-products-thumb swiper swiper-container theme-slider" id="swiper-products-thumb" >
  40. <div class="swiper-wrapper" >
  41. {% set hasImage = false %}
  42. {% for productImage in product.images %}
  43. {% set hasImage = true %}
  44. <div class="swiper-slide">
  45. <div class="product-thumb-container p-2 p-sm-3 p-xl-2">
  46. <img src="{{ vich_uploader_asset( productImage, 'fileProductImage') | imagine_filter('product_image_thumbnail_65_65') }}" alt="">
  47. </div>
  48. </div>
  49. {% endfor %}
  50. {% if not hasImage %}
  51. <div class="swiper-slide">
  52. <div class="product-thumb-container p-2 p-sm-3 p-xl-2">
  53. <img src="{{ asset('/assets/images/logo_v3.png') | imagine_filter('product_image_thumbnail_65_65') }}" alt="">
  54. </div>
  55. </div>
  56. {% endif %}
  57. </div>
  58. <!-- Agregar el contenedor del scrollbar -->
  59. <div class="swiper-scrollbar"></div>
  60. </div>
  61. </div>
  62. <div class="col-12 col-md-10 col-lg-12 col-xl-10">
  63. <div class="d-flex align-items-center border rounded-3 text-center p-5 h-100">
  64. <div class="swiper swiper-container theme-slider" id="swiper-images">
  65. <div class='swiper-wrapper' >
  66. {% for productImage in product.images %}
  67. <div class='swiper-slide '>
  68. <img class='w-100' src="{{ vich_uploader_asset( productImage, 'fileProductImage') | imagine_filter('product_image_thumbnail_480_480') }}" alt="">
  69. </div>
  70. {% endfor %}
  71. {% if not hasImage %}
  72. <div class='swiper-slide '>
  73. <img class='w-100' src="{{ asset('/assets/images/logo_v3.png') | imagine_filter('product_image_thumbnail_480_480') }}" alt="">
  74. </div>
  75. {% endif %}
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  82. </div>
  83. <div class="col-12 col-lg-6">
  84. <div class="d-flex flex-column justify-content-between h-100">
  85. <div>
  86. {{ function.showFlashes() }}
  88. {% if product.averageValorations is not none %}
  89. <div ng-init="initProductsRaters()" class="d-flex">
  90. <div data-valoration="{{product.averageValorations}}" class="wp-star product-rater me-2 mt-1" ></div>
  91. <div class="text-primary fw-semi-bold mb-2">{{product.valorations | length }} usuarios valoraron este producto</div>
  92. </div>
  93. {% endif %}
  94. <h3 class="mb-2 lh-sm">{{ product.productLabel}}</h3>
  95. <div class="d-flex flex-wrap align-items-start mb-3">
  96. {%for tag in product.tags%}
  97. <div class="badge bg-primary rounded-pill mx-1">{{ tag }}</div>
  98. {% endfor %}
  99. </div>
  100. <div class="d-flex flex-wrap align-items-start mb-3">
  101. {% if product.productCategory is not none %}
  102. <div class="mx-1">{{ product.productCategory.categoryPath }}</div>
  103. {%endif %}
  104. </div>
  106. <div class="d-flex flex-wrap align-items-start mb-3">
  107. <span class="me-2 fw-semi-bold">{{ product.whaterOrganization.country.name }}</span>
  108. </div>
  109. <div class="d-flex flex-wrap align-items-center">
  110. <h1 class="me-3" id="price" data-product-price="{{ product.productPrice }}">{{ product.productPrice | number_format(2, ',', '.')}} €</h1>
  111. <p class="text-body-quaternary text-decoration-line-through fs-3 mb-0 me-3 d-none" id="price-strike">{{ product.productPrice | number_format(2, ',', '.')}} €</p>
  112. <p class="text-warning fw-bolder fs-3 mb-0 d-none" id="price-discount"></p>
  113. </div>
  114. <p class="text-success fw-semi-bold fs-1 mb-2">Disponible</p>
  116. {% if product.maxDiscountPercentageAllowed > 0 and product.acceptWhatercoins %}
  117. <div class="mb-2" ng-init="initProductSelectDiscount()" >
  118. <div class="text-warning fw-bolder fs-0 mb-0">¡¡Obten un descuento usando whatercoins!!</div>
  119. <select class="form-select w-100" id="product-discount-select">
  120. <option value="">-</option>
  121. {% for discount, whc in whatercoins_discounts %}
  122. {% if discount <= product.maxDiscountPercentageAllowed %}
  123. <option value="{{discount}}" id="option-discount-{{discount}}" data-product-discount-in-whatercoins="{{ whc }}"> Por {{ whc | number_format(2, ',', '.')}} wc tendrás un descuento del {{ discount | number_format(2, ',', '.') }}%</option>
  124. {% endif %}
  125. {% endfor %}
  126. </select>
  127. </div>
  128. {% endif %}
  130. <p class="mb-2 text-800" id="short-description">
  131. {{ product.productShortDescription | raw }}
  132. </p>
  133. </div>
  135. {% if product.productVariations | length > 0 %}
  136. {% set productVariationsAttributesString = '' %}
  137. {% for variation in product.productVariations %}
  138. {% set variationAttributes = variation.productVariationAttributes %}
  139. {% set productVariationsAttributesString = productVariationsAttributesString ~ variationAttributes|json_encode %}
  140. {% endfor %}
  142. {% set productVariationsAttributesStringWellWritten = productVariationsAttributesString|replace({'\\u00f1': 'ñ', '\\u00f3': 'ó', '\\u00e1': 'á', '\\u00e9': 'é', '\\u00ed': 'í', '\\u00fa': 'ú', '\\u00c1': 'Á', '\\u00c9': 'É', '\\u00cd': 'Í', '\\u00d3': 'Ó', '\\u00da': 'Ú', '\\u00dc': 'Ü', '\\u00fc': 'ü', '\\u00f1': 'ñ'}) %}
  143. <div class="row mb-4" ng-init="initProductVariations({{productVariationsSerialized}})">
  144. {% for attribute in attributes %}
  146. {% if attribute in product.productAttributes and attribute.productAttributeTerms | length > 0 %}
  147. <div class="col-12 text-start attribute_{{attribute.productAttributeSlug}}" >
  148. <label class="form-label" for="product_variation_attribute_select_{{attribute.productAttributeSlug}}" >{{attribute.productAttributeName}}</label>
  149. <select id="product_variation_attribute_select_{{attribute.productAttributeSlug}}" class="form-select attribute-select">
  150. <option value="" data-attribute-slug="{{attribute.productAttributeSlug}}"></option>
  151. {% for term in attribute.productAttributeTerms%}
  152. {% if term in productVariationsAttributesStringWellWritten %}
  153. <option value="{{term}}" data-attribute-slug="{{attribute.productAttributeSlug}}">{{term}}</option>
  154. {% endif %}
  155. {% endfor %}
  156. </select>
  157. </div>
  158. {% endif %}
  159. {% endfor %}
  160. <div id="attributes-message" class="mt-3 text-danger fs--1"></div>
  161. </div>
  162. {% endif %}
  164. <button type="button" ng-click="buyProduct('{{ product.id }}')"
  165. class="btn btn-lg btn-primary rounded-pill w-100 fs--1 fs-sm-0" id="buy-product-button">
  166. Compra desde {{ product.productPrice | number_format(2, ',', '.') }} euros!
  167. </button>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. </section>
  174. <section class="py-0">
  175. <div class="container-small">
  176. <ul class="nav nav-underline mb-4" id="productTab" role="tablist">
  177. <li class="nav-item active">
  178. <a class="nav-link active" id="description-tab" data-bs-toggle="tab"
  179. href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">
  180. Descripción
  181. </a>
  182. </li>
  183. </ul>
  184. <div class="row gx-3 gy-7">
  185. <div class="col-12">
  186. <div class="tab-content" id="productTabContent">
  187. <div class="tab-pane pe-lg-6 pe-xl-12 fade text-1100 active show" id="tab-description"
  188. role="tabpanel" aria-labelledby="description-tab">
  189. {{ product.productDescription | raw | nl2br }}
  190. </div>
  191. </div>
  192. </div>
  194. </div>
  195. </div>
  196. <!-- end of .container-->
  197. </section>
  199. </div>
  201. {% endblock contents %}