templates/site/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}WINITUX|{{ 'ourProductsSite'|trans }}{% endblock %}
  5. {% block body %}
  6.     {{ app.request.getLocale() }}
  7.     <div class="container">
  8.         {#        <p>{{ session_id }}</p> #}
  9.         <input type="text" id="searchInput" class="form-control mb-3" placeholder="Nach einem Produkt suchen.." onkeyup="filterProducts()">
  10.         <div class="row">
  11.             {% for product in products %}
  12.                 <div class="col-md-6">
  13.                     <div class="card h-100">
  14.                         <div class="card-header">
  15.                             <h1 class="text-center">{{ product.productName }}</h1>
  16.                         </div>
  17.                         <div class="card-body card-btn-same-height">
  18.                             <p>{{ product.productDescriptionShort }}</p>
  19.                             {% if product.productImage is not empty %}
  20.                                 <p><img src="/images/{{ product.productImage }}" alt="{{ product.productName }}"
  21.                                         class="img-fluid"></p>
  22.                             {% endif %}
  23.                             <p>{{ product.productDescriptionLong }}</p>
  24.                             <form name="shopping{{ loop.index }}" method="post" action="{{ path('app_cart_new') }}">
  25.                                 <input type="hidden" name="product_id" id="product_id_{{ loop.index }}"
  26.                                        value="{{ product.id }}">
  27.                                 {% set amountPlans = product.id|getAmountSubscriptionPlans %}
  28.                                 <input type="hidden" id="amount_plans_{{ loop.index }}" value="{{ amountPlans }}">
  29.                                 <div id="subscription_area_{{ loop.index }}">
  30.                                     <label for="plan_{{ loop.index }}">{{ 'txtChooseSubscriptionPlan'|trans }}</label>
  31.                                     <select name="plan" id="plan_{{ loop.index }}" class="form-select mb-2"
  32.                                             onchange="calcPrice('{{ loop.index }}')">
  33.                                         {% for plan in product.subscriptionPlan %}
  34.                                             <option value="{{ plan.id }}">{{ plan.subscriptionPlanName }}</option>
  35.                                         {% endfor %}
  36.                                     </select>
  37.                                 </div>
  39.                                 <div id="output_prices{{ loop.index }}"></div>
  40.                                 <button type="submit" name="intoCard"
  41.                                         class="mt-auto btn btn-success w-100">{{ 'lang.gotoOffer'|trans }}</button>
  42.                             </form>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.             {% endfor %}
  47.         </div>
  48.     </div>
  49. {% endblock %}
  51. {% block javascripts %}
  52.     <script>
  53.         $(document).ready(function () {
  54.             for (i = 1; i <= {{ amount }}; i++) {
  55.                 calcPrice(i);
  56.             }
  57.         });
  60.         function calcPrice(index) {
  61.             let amountPlans = parseInt($('#amount_plans_' + index).val())
  62.             let product = $('#product_id_' + index).val()
  63.             let plan = $('#plan_' + index).val()
  67.             $('#output_prices' + index).load('{{ path('app_calc_price') }}?product=' + product + '&plan=' + plan, function () {
  68.                 if (amountPlans == 1) {
  69.                     $('#subscription_area_' + index).hide()
  70.                 } else {
  71.                     $('#subscription_area_' + index).show()
  72.                 }
  73.             })
  74.         }
  76.         function filterProducts() {
  77.             let input = document.getElementById("searchInput").value.toLowerCase();
  78.             let products = document.querySelectorAll(".col-md-6");
  80.             products.forEach(product => {
  81.                 let productName = product.querySelector("h1").textContent.toLowerCase();
  82.                 if (productName.includes(input)) {
  83.                     product.style.display = "block";
  84.                 } else {
  85.                     product.style.display = "none";
  86.                 }
  87.             });
  88.         }
  89.     </script>
  90. {% endblock %}