templates/AtechNetCoreBundle/Product/compare.html.twig line 1

Open in your IDE?
  1. {% extends 'AtechNetCoreBundle/base.html.twig' %}
  3. {% block content %}
  4.     <div class="main-content">
  5.         <div class="container">
  6.             <div class="mt-5 mb-4 d-flex align-items-center justify-content-between">
  7.                 <h1 class="mb-0">{{ 'Comparison' |trans }}</h1>
  8.                 <a class="text-decoration-underline text-secondary small" href="javascript:history.back()">{{ 'Back to shopping' |trans }}</a>
  9.             </div>
  11.             <div class="table-responsive mb-5">
  12.                 <table class="table table-bordered small">
  13.                     <tbody>
  14.                         <tr>
  15.                             <th class="border-start-0"></th>
  17.                             {% for product in products %}
  18.                                 {% if loop.first and loop.last %}
  19.                                     <th class="text-center border-start-0 border-end-0" style="height: 0">
  20.                                 {% elseif loop.first %}
  21.                                     <th class="text-center border-start-0" style="height: 0">
  22.                                 {% elseif loop.last %}
  23.                                     <th class="text-center border-end-0" style="height: 0">
  24.                                 {% else %}
  25.                                     <th class="text-center" style="height: 0">
  26.                                 {% endif %}
  27.                                     <div class="d-flex flex-column align-items-center h-100">
  28.                                         <img decoding="async" src="{{ product.image }}" alt="{{ product.name }}" width="120">
  29.                                         <strong>{{ product.name }}</strong>
  30.                                         <small class="text-muted fw-normal">{{ 'Product code' |trans }}: {{ product.code }}</small>
  31.                                         <strong class="mb-3">{{ product.price |price(currency, precision) }}</strong>
  32.                                         <a href="{{ product.href }}" class="btn btn-primary btn-sm mt-auto px-0 py-2 w-50">
  33.                                             <small class="lh-lg d-md-block d-none">{{ 'View' |trans }}</small>
  34.                                             <span class="d-md-none">
  35.                                                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512" style="margin-top: -2px;" fill="#ffffff"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>
  36.                                             </span>
  37.                                         </a>
  38.                                     </div>
  39.                                 </th>
  40.                             {% endfor %}
  41.                         </tr>
  43.                         {% for key, label in { brand: 'Brand', model: 'Model', code: 'Product code', available: 'Availability', quality: 'Quality grading' } %}
  44.                             <tr>
  45.                                 <th class="border-start-0 text-start">{{ label |trans }}:</th>
  47.                                 {% for product in products %}
  48.                                     {% if loop.last %}
  49.                                         <td class="text-start border-end-0">
  50.                                     {% else %}
  51.                                         <td class="text-start">
  52.                                     {% endif %}
  53.                                         {% if key == 'available' and product[key] is defined %}
  54.                                             {% if product[key] > 10 %}
  55.                                                 <span class="in-stock text-success">{{ '10+ in stock' | trans }}</span>
  56.                                             {% elseif product[key] >= 5 %}
  57.                                                 <span class="in-stock text-success">{{ '5-10 in stock' | trans }}</span>
  58.                                             {% elseif product[key] > 1 %}
  59.                                                 <span class="in-stock text-success">{{ '2-4 in stock'|trans }}</span>
  60.                                             {% elseif product[key] == 1 %}
  61.                                                 <span class="in-stock text-danger">{{ 'Only one left'|trans }}!</span>
  62.                                             {% elseif product.orderWaitingDays is defined and product.orderWaitingDays > 0 %}
  63.                                                 <span class="in-stock text-grey">{{ 'On order within %d working days' |trans |format(product.orderWaitingDays) }}</span>
  64.                                             {% else %}
  65.                                                 <span class="in-stock text-grey">{{ 'Out of stock'|trans }}</span>
  66.                                             {% endif %}
  67.                                         {% elseif product[key] is defined %}
  68.                                             {{ product[key] }}
  69.                                         {% endif %}
  70.                                     </td>
  71.                                 {% endfor %}
  72.                             </tr>
  73.                         {% endfor %}
  75.                         {% for attribute in attributes %}
  76.                             <tr class="compare" data-attribute-id="{{ attribute.id }}">
  77.                                 <th class="border-start-0 text-start">{{ attribute.title |trans }}:</th>
  79.                                 {% for product in products %}
  80.                                     {% if loop.last %}
  81.                                         <td class="text-start border-end-0">
  82.                                     {% else %}
  83.                                         <td class="text-start">
  84.                                     {% endif %}
  85.                                         {% if product.specification[attribute.id] is defined %}
  86.                                             {% if product.specification[attribute.id] |length > 1 %}
  87.                                                 {% for option in product.specification[attribute.id] %}
  88.                                                     <span class="d-block" data-option-id="{{ option.attributeOptionId }}">{{- ( option.multiplier > 0 ? option.multiplier ~ ' x ' : '' ) ~ option.title -}}</span>
  89.                                                 {% endfor %}
  90.                                             {% else %}
  91.                                                 {% for option in product.specification[attribute.id] %}
  92.                                                     {{- option.title -}}
  93.                                                 {% endfor %}
  94.                                             {% endif %}
  95.                                         {% else %}
  96.                                             -
  97.                                         {% endif %}
  98.                                     </td>
  99.                                 {% endfor %}
  100.                             </tr>
  101.                         {% endfor %}
  103.                         {% for key, label in { weight: 'Weight', dimensions: 'Dimensions' } %}
  104.                             <tr class="compare">
  105.                                 <th class="border-start-0 text-start">{{ label |trans }}:</th>
  107.                                 {% for product in products %}
  108.                                     {% if loop.last %}
  109.                                         <td class="text-start border-end-0">
  110.                                     {% else %}
  111.                                         <td class="text-start">
  112.                                     {% endif %}
  113.                                         {% if product[key] is defined %}
  114.                                             {{ product[key] }}
  115.                                         {% else %}
  116.                                             -
  117.                                         {% endif %}
  118.                                     </td>
  119.                                 {% endfor %}
  120.                             </tr>
  121.                         {% endfor %}
  122.                     </tbody>
  123.                 </table>
  124.             </div>
  125.         </div>
  126.     </div>
  127. {% endblock %}
  129. {% block javascripts %}
  130.     {{ parent() }}
  132.     <script type="text/javascript">
  133.         let rows = document.querySelectorAll('table tr.compare');
  135.         if ( rows.length > 0 ) {
  136.             rows.forEach(( row ) => {
  137.                 let columns = row.querySelectorAll('td');
  138.                 let options = [];
  139.                 let similar = true;
  140.                 let value = null;
  142.                 for ( let i = 0; i < columns.length; i++ ) {
  143.                     if ( columns[i].querySelectorAll('span').length > 0 ) {
  144.                         options[i] = columns[i].querySelectorAll('span');
  145.                         continue;
  146.                     }
  148.                     if ( value == null ) {
  149.                         value = columns[i].innerHTML;
  150.                     }
  152.                     if ( value != columns[i].innerHTML ) {
  153.                         similar = false;
  154.                     }
  155.                 }
  157.                 if ( similar == true ) {
  158.                     columns.forEach(( column ) => {
  159.                         if ( column.querySelectorAll('span').length == 0 ) {
  160.                             column.classList.add('text-muted');
  161.                         }
  162.                     });
  163.                 } else {
  164.                     columns.forEach(( column ) => {
  165.                         if ( column.querySelectorAll('span').length == 0 ) {
  166.                             column.classList.add('fw-bold');
  167.                         }
  168.                     });
  169.                 }
  171.                 if ( options.length > 0 ) {
  172.                     let checked = [];
  174.                     for ( let i = 0; i < options.length; i++ ) {
  175.                         let column = options[i];
  177.                         for ( let j = 0; j < column.length; j++ ) {
  178.                             let option = column[j];
  180.                             if ( option.dataset.optionId in checked ) {
  181.                                 continue;
  182.                             }
  184.                             let similar = true;
  185.                             let hit = 0;
  186.                             let value = null;
  188.                             for ( let k = 0; k < options.length; k++ ) {
  189.                                 for ( let l = 0; l < options[k].length; l++ ) {
  190.                                     if ( option.dataset.optionId == options[k][l].dataset.optionId ) {
  191.                                         if ( value == null ) {
  192.                                             value = options[k][l].innerHTML;
  193.                                         }
  195.                                         if ( value != options[k][l].innerHTML ) {
  196.                                             similar = false;
  197.                                         }
  199.                                         hit++;
  200.                                     }
  201.                                 }
  202.                             }
  204.                             if ( hit != options.length ) {
  205.                                 similar = false;
  206.                             }
  208.                             if ( similar == true ) {
  209.                                 for ( let k = 0; k < options.length; k++ ) {
  210.                                     for ( let l = 0; l < options[k].length; l++ ) {
  211.                                         if ( option.dataset.optionId == options[k][l].dataset.optionId ) {
  212.                                             options[k][l].classList.add('text-muted');
  213.                                         }
  214.                                     }
  215.                                 }
  216.                             } else {
  217.                                 for ( let k = 0; k < options.length; k++ ) {
  218.                                     for ( let l = 0; l < options[k].length; l++ ) {
  219.                                         if ( option.dataset.optionId == options[k][l].dataset.optionId ) {
  220.                                             options[k][l].classList.add('fw-bold');
  221.                                         }
  222.                                     }
  223.                                 }
  224.                             }
  226.                             checked.push(option.dataset.optionId);
  227.                         }
  228.                     }
  229.                 }
  230.             });
  231.         }
  232.     </script>
  233. {% endblock %}    
  235. {% block title %}{{ 'Product comparison' |trans }} | {{ parent() }}{% endblock %}
  237. {% block header %}
  238.     {{ include(template_from_string(header)) }}
  239. {% endblock %}
  241. {% block footer %}
  242.     {{ include(template_from_string(footer)) }}
  243. {% endblock %}