app/Resources/views/product/detail.html.twig line 1

Open in your IDE?
  1. {# @var product \AppBundle\Model\Product\Car #}
  2. {% import 'product/macros.html.twig' as macros %}
  3. {% extends 'layouts/layout.html.twig' %}
  4. {% block content %}
  5.     <div id="main-content" class="main-content">
  6.         <div class="d-md-none mt-3">
  7.             {% if(product.manufacturer and product.manufacturer.logo)  %}
  8.                 {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({class: 'img-fluid float-right'})|raw }}
  9.             {%  endif  %}
  10.             <div class="page-header">
  11.                 <h1>{{ product.oSName }}</h1>
  12.             </div>
  13.         </div>
  14.         <div class="bg-white my-3">
  15.             <div class="row">
  16.                 <div class="col-md-6 mb-4">
  17.                     {% if(product.mainImage) %}
  18.                         <div class="p-3">
  19.                             <a href="{{ product.mainImage.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
  20.                                 {{ product.mainImage.thumbnail('product_detail').getHTML({class: 'img-thumbnail1 img-fluid'})|raw }}
  21.                             </a>
  22.                             {% block additionalimages %}
  23.                                 {% set additionalImages = product.additionalImages %}
  24.                                 {%  if(additionalImages) %}
  25.                                     <div class="row">
  26.                                         {% for image in additionalImages %}
  27.                                             <div class="col-4 mt-3">
  28.                                                 <a href="{{ image.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
  29.                                                     {{ image.thumbnail('product_detail_small').getHTML({class: 'img-thumbnail1 img-fluid'})|raw }}
  30.                                                 </a>
  31.                                             </div>
  32.                                         {% endfor %}
  33.                                     </div>
  34.                                 {%  endif %}
  35.                             {% endblock %}
  36.                         </div>
  37.                     {% endif %}
  38.                 </div>
  39.                 <div class="col-md-6 mb-4">
  40.                     <div class="p-3 pt-4">
  41.                         <div class="row d-none d-md-block mb-3">
  42.                             <div class="col-12">
  43.                                 {% if(product.manufacturer and product.manufacturer.logo)  %}
  44.                                     {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({class: 'img-fluid float-right'})|raw }}
  45.                                 {%  endif  %}
  46.                                 <h2 class="">{{ product.oSName }}</h2>
  47.                             </div>
  48.                         </div>
  49.                         <div class="row">
  50.                             {% block colorvariants %}
  51.                                 <dl class="item-property col-12">
  52.                                     <dt>{{ 'general.color' | trans }}</dt>
  53.                                     <dd>
  54.                                         {% for colorVariant in product.colorVariants %}
  55.                                             <a href="{{ app_product_detaillink(colorVariant) }}"
  56.                                                class="btn {{ product.id == colorVariant.id ? 'btn-primary' : 'btn-outline-primary' }}">
  57.                                                 {{ colorVariant.color | colorname }}
  58.                                             </a>
  59.                                         {% endfor %}
  60.                                     </dd>
  61.                                 </dl>
  62.                             {% endblock %}
  63.                             {% block detailinfos %}
  64.                                 {% if(product.bodyStyle) %}
  65.                                     <dl class="item-property col-6">
  66.                                         <dt>{{ 'general.body-style' | trans }}</dt>
  67.                                         <dd>{{ product.bodyStyle.name }}</dd>
  68.                                     </dl>
  69.                                 {% endif %}
  70.                                 <dl class="item-property col-6">
  71.                                     <dt>{{ 'general.car-class' | trans }}</dt>
  72.                                     <dd>{{ ('attribute.' ~ product.carClass) | lower | trans }}</dd>
  73.                                 </dl>
  74.                             {% endblock %}
  75.                             {% block salesinfos %}
  76.                                 {% if product.saleInformation.saleInformation %}
  77.                                     <dl class="item-property col-6 mb-0">
  78.                                         <dt>{{ 'general.condition' | trans }}</dt>
  79.                                         <dd>{{ ('attribute.' ~ product.saleInformation.saleInformation.condition) | lower | trans}}</dd>
  80.                                     </dl>
  81.                                     <dl class="item-property col-6 mb-0">
  82.                                         <dt>{{ 'general.milage' | trans }}</dt>
  83.                                         <dd>{{ product.saleInformation.saleInformation.milage}}</dd>
  84.                                     </dl>
  85.                                 {% endif %}
  86.                             {% endblock %}
  87.                         </div>
  88.                         <hr/>
  89.                         <div class="mt-4 text-center">
  90.                             {% set priceInfo = product.oSPriceInfo %}
  91.                             {% set price = product.oSPrice %}
  92.                             {% if(priceInfo.rules) %}
  93.                                 <div class="alert alert-success mb-4" role="alert">
  94.                                     <p class="small mb-2"><strong>{{ 'general.your-benefits' | trans }}</strong></p>
  95.                                     <ul class="list-unstyled mb-0 small">
  96.                                         {% for rule in priceInfo.rules %}
  97.                                             <li>{{ rule.label }}</li>
  98.                                         {% endfor %}
  99.                                     </ul>
  100.                                 </div>
  101.                             {% endif %}
  102.                             {% if(priceInfo.hasDiscount) %}
  103.                                 <p class="detail-price original mb-3">{{ priceInfo.originalPrice }}</p>
  104.                             {% endif %}
  105.                             <p class="detail-price mb-2">{{ price }}</p>
  106.                             <div class="detail-tax text-muted">
  107.                                 <ul class="list-unstyled">
  108.                                     {% for taxEntry in price.taxEntries %}
  109.                                         <li>{{ taxEntry.entry.name }}: {{ taxEntry.percent }}% ({{ taxEntry.amount.asNumeric | currency(price.currency.shortName) }})</li>
  110.                                     {% endfor %}
  111.                                 </ul>
  112.                             </div>
  113.                             {% if product.saleInformation.saleInformation %}
  114.                                 <p class="small text-muted mt-1">{{ 'general.available-in' | trans }} {{ ('attribute.' ~ product.saleInformation.saleInformation.availabilityType) | lower | trans }}</p>
  115.                             {% endif %}
  116.                         </div>
  117.                         <a href="{{ path('shop-add-to-cart', { id: product.id }) }}" class="btn btn-success btn-block">{{ 'general.add-to-cart' | trans }}</a>
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.             <hr>
  122.             {% block description %}
  123.                 <div class="mt-5 col-12 text-center">
  124.                     <h4 class="text-center">{{ 'general.additional-information' | trans }}</h4>
  125.                     {% if(product.description) %}
  126.                         <p>{{ product.description | raw }}</p>
  127.                     {% endif %}
  128.                 </div>
  129.             {% endblock %}
  130.             {% block attributes %}
  131.                 <div class="col-12">
  132.                 <ul class="nav nav-tabs" id="attributes" role="tablist">
  133.                     <li class="nav-item">
  134.                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">{{ 'general.general' | trans }}</a>
  135.                     </li>
  136.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  137.                         <li class="nav-item">
  138.                             <a class="nav-link" id="dimensions-tab" data-toggle="tab" href="#dimensions" role="tab" aria-controls="dimensions" aria-selected="false">{{ 'general.dimensions' | trans }}</a>
  139.                         </li>
  140.                     {% endif %}
  141.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  142.                         <li class="nav-item">
  143.                             <a class="nav-link" id="engine-tab" data-toggle="tab" href="#engine" role="tab" aria-controls="engine" aria-selected="false">{{ 'general.engine' | trans }}</a>
  144.                         </li>
  145.                     {%  endif %}
  146.                 </ul>
  147.                 <div class="tab-content" id="myTabContent">
  148.                     <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  149.                         <div class="m-3">
  150.                             <div class="row">
  151.                                 {% if(product.manufacturer) %}
  152.                                     <dl class="item-property col-6 col-md-3">
  153.                                         <dt>{{ 'general.manufacturer' | trans }}</dt>
  154.                                         <dd>{{ product.manufacturer.name }}</dd>
  155.                                     </dl>
  156.                                 {% endif %}
  157.                                 {{ macros.attribute(product.productionYear, 'general.productionYear') }}
  158.                                 {% if(product.country) %}
  159.                                     <dl class="item-property col-6 col-md-3">
  160.                                         <dt>{{ 'general.country' | trans }}</dt>
  161.                                         <dd>{{ product.country | country }}</dd>
  162.                                     </dl>
  163.                                 {% endif %}
  164.                             </div>
  165.                         </div>
  166.                     </div>
  167.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  168.                         <div class="tab-pane fade" id="dimensions" role="tabpanel" aria-labelledby="dimensions-tab">
  169.                             <div class="m-3">
  170.                                 <div class="row">
  171.                                     {% if(product.attributes.dimensions) %}
  172.                                         {{ macros.attribute(product.attributes.dimensions.length, 'general.length') }}
  173.                                         {{ macros.attribute(product.attributes.dimensions.width, 'general.width') }}
  174.                                         {{ macros.attribute(product.attributes.dimensions.wheelbase, 'general.wheelbase') }}
  175.                                         {{ macros.attribute(product.attributes.dimensions.weight, 'general.weight') }}
  176.                                     {%  endif %}
  177.                                     {% if(product.attributes.bodywork) %}
  178.                                         {{ macros.attribute(product.attributes.bodywork.numberOfDoors, 'general.numberOfDoors') }}
  179.                                         {{ macros.attribute(product.attributes.bodywork.numberOfSeats, 'general.numberOfSeats') }}
  180.                                     {%  endif %}
  181.                                 </div>
  182.                             </div>
  183.                         </div>
  184.                     {%  endif %}
  185.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  186.                         <div class="tab-pane fade" id="engine" role="tabpanel" aria-labelledby="engine-tab">
  187.                             <div class="m-3">
  188.                                 <div class="row">
  189.                                     {% if(product.attributes.engine) %}
  190.                                         {{ macros.attribute(product.attributes.engine.cylinders, 'general.cylinders') }}
  191.                                         {{ macros.attribute(product.attributes.engine.capacity, 'general.capacity') }}
  192.                                         {{ macros.attribute(product.attributes.engine.power, 'general.power') }}
  193.                                         {{ macros.attribute(product.attributes.engine.engineLocation, 'general.engineLocation') }}
  194.                                     {%  endif %}
  195.                                     {% if(product.attributes.transmission) %}
  196.                                         {{ macros.attribute(product.attributes.transmission.wheelDrive, 'general.wheelDrive', true, 'attribute.') }}
  197.                                     {%  endif %}
  198.                                 </div>
  199.                             </div>
  200.                         </div>
  201.                     {%  endif %}
  202.                 </div>
  203.             </div>
  204.             {% endblock %}
  205.             {% block productrelations %}
  206.                 {% set accessories = product.accessories %}
  207.                 {%  if(accessories.count) %}
  208.                     <hr>
  209.                     <div class="mt-5 col-12">
  210.                         <h4 class="text-center">{{ 'general.accessories' | trans }}</h4>
  211.                         <div class="row">
  212.                             {% for item in accessories %}
  213.                                 <div class="col-md-3 d-flex align-items-stretch">
  214.                                     {% include 'product/product_teaser.html.twig' with {'product': item} %}
  215.                                 </div>
  216.                             {% endfor %}
  217.                         </div>
  218.                     </div>
  219.                 {% endif %}
  220.             {% endblock %}
  221.         </div>
  222.     </div>
  223. {% endblock %}