templates/product/detail.html.twig line 1

Open in your IDE?
  1. {# @var product \App\Model\Product\Car #}
  3. {% import 'product/macros.html.twig' as macros %}
  5. {% extends 'layouts/layout.html.twig' %}
  7. {% block content %}
  9.     <div id="main-content" class="main-content">
  11.         <div class="d-md-none mt-3">
  12.             {% if(product.manufacturer and product.manufacturer.logo)  %}
  13.                 {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({imgAttributes: {class: 'img-fluid float-right'}})|raw }}
  14.             {%  endif  %}
  15.             <div class="page-header">
  16.                 <h1>{{ product.oSName }}</h1>
  17.             </div>
  18.         </div>
  20.         <div class="bg-white my-3">
  21.             <div class="row">
  23.                 <div class="col-md-6 mb-4">
  24.                     {% if(product.mainImage) %}
  26.                         <div class="p-3">
  27.                             <a href="{{ product.mainImage.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
  28.                                 {{ product.mainImage.thumbnail('product_detail').getHTML({imgAttributes: {class: 'img-thumbnail1 img-fluid'}})|raw }}
  29.                             </a>
  31.                             {% block additionalimages %}
  32.                                 {% set additionalImages = product.additionalImages %}
  33.                                 {%  if(additionalImages) %}
  35.                                     <div class="row">
  37.                                         {% for image in additionalImages %}
  39.                                             <div class="col-4 mt-3">
  41.                                                 <a href="{{ image.getThumbnail('galleryLightbox')|raw }}" class="thumbnail">
  42.                                                     {{ image.thumbnail('product_detail_small').getHTML({imgAttributes: {class: 'img-thumbnail1 img-fluid'}})|raw }}
  43.                                                 </a>
  45.                                             </div>
  47.                                         {% endfor %}
  49.                                     </div>
  51.                                 {%  endif %}
  52.                             {% endblock %}
  53.                         </div>
  54.                     {% endif %}
  55.                 </div>
  57.                 <div class="col-md-6 mb-4">
  59.                     <div class="p-3 pt-4">
  61.                         <div class="row d-none d-md-block mb-3">
  62.                             <div class="col-12">
  63.                                 {% if(product.manufacturer and product.manufacturer.logo)  %}
  64.                                     {{ product.manufacturer.logo.thumbnail('product_detail_manufacturer').getHTML({imgAttributes: {class: 'img-fluid float-right'}})|raw }}
  65.                                 {%  endif  %}
  67.                                 <h2 class="">{{ product.oSName }}</h2>
  68.                             </div>
  69.                         </div>
  70.                         <div class="row">
  72.                             {% block colorvariants %}
  73.                                 <dl class="item-property col-12">
  74.                                     <dt>{{ 'general.color' | trans }}</dt>
  75.                                     <dd>
  76.                                         {% for colorVariant in product.colorVariants %}
  77.                                             <a href="{{ app_product_detaillink(colorVariant) }}"
  78.                                                class="btn {{ product.id == colorVariant.id ? 'btn-primary' : 'btn-outline-primary' }}">
  79.                                                 {{ colorVariant.color | colorname }}
  80.                                             </a>
  81.                                         {% endfor %}
  82.                                     </dd>
  84.                                 </dl>
  85.                             {% endblock %}
  87.                             {% block detailinfos %}
  88.                                 {% if(product.bodyStyle) %}
  89.                                     <dl class="item-property col-6">
  90.                                         <dt>{{ 'general.body-style' | trans }}</dt>
  91.                                         <dd>{{ product.bodyStyle.name }}</dd>
  92.                                     </dl>
  93.                                 {% endif %}
  95.                                 <dl class="item-property col-6">
  96.                                     <dt>{{ 'general.car-class' | trans }}</dt>
  97.                                     <dd>{{ ('attribute.' ~ product.carClass) | lower | trans }}</dd>
  98.                                 </dl>
  99.                             {% endblock %}
  101.                             {% block salesinfos %}
  103.                                 {% if product.saleInformation.saleInformation %}
  105.                                     <dl class="item-property col-6 mb-0">
  106.                                         <dt>{{ 'general.condition' | trans }}</dt>
  107.                                         <dd>{{ ('attribute.' ~ product.saleInformation.saleInformation.condition) | lower | trans}}</dd>
  108.                                     </dl>
  110.                                     <dl class="item-property col-6 mb-0">
  111.                                         <dt>{{ 'general.milage' | trans }}</dt>
  112.                                         <dd>{{ product.saleInformation.saleInformation.milage}}</dd>
  113.                                     </dl>
  115.                                 {% endif %}
  116.                             {% endblock %}
  118.                         </div>
  120.                         <hr/>
  121.                         <div class="mt-4 text-center">
  122.                             {% set priceInfo = product.oSPriceInfo %}
  123.                             {% set price = product.oSPrice %}
  125.                             {% if(priceInfo.rules) %}
  127.                                 <div class="alert alert-success mb-4" role="alert">
  129.                                     <p class="small mb-2"><strong>{{ 'general.your-benefits' | trans }}</strong></p>
  131.                                     <ul class="list-unstyled mb-0 small">
  132.                                         {% for rule in priceInfo.rules %}
  133.                                             <li>{{ rule.label }}</li>
  134.                                         {% endfor %}
  135.                                     </ul>
  137.                                 </div>
  139.                             {% endif %}
  141.                             {% if(priceInfo.hasDiscount) %}
  142.                                 <p class="detail-price original mb-3">{{ priceInfo.originalPrice }}</p>
  143.                             {% endif %}
  145.                             <p class="detail-price mb-2">{{ price }}</p>
  147.                             <div class="detail-tax text-muted">
  148.                                 <ul class="list-unstyled">
  149.                                     {% for taxEntry in price.taxEntries %}
  150.                                         <li>{{ taxEntry.entry.name }}: {{ taxEntry.percent }}% ({{ taxEntry.amount.asNumeric | currency(price.currency.shortName) }})</li>
  151.                                     {% endfor %}
  152.                                 </ul>
  153.                             </div>
  155.                             {% if product.saleInformation.saleInformation %}
  156.                                 <p class="small text-muted mt-1">{{ 'general.available-in' | trans }} {{ ('attribute.' ~ product.saleInformation.saleInformation.availabilityType) | lower | trans }}</p>
  157.                             {% endif %}
  158.                         </div>
  160.                         <a href="{{ path('shop-add-to-cart', { id: product.id }) }}" class="btn btn-success btn-block">{{ 'general.add-to-cart' | trans }}</a>
  162.                     </div>
  164.                 </div>
  166.             </div>
  168.             <hr>
  170.             {% block description %}
  171.                 <div class="mt-5 col-12 text-center">
  172.                     <h4 class="text-center">{{ 'general.additional-information' | trans }}</h4>
  174.                     {% if(product.description) %}
  175.                         <p>{{ product.description | raw }}</p>
  176.                     {% endif %}
  178.                 </div>
  179.             {% endblock %}
  181.             {% block attributes %}
  182.                 <div class="col-12">
  184.                 <ul class="nav nav-tabs" id="attributes" role="tablist">
  185.                     <li class="nav-item">
  186.                         <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>
  187.                     </li>
  188.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  189.                         <li class="nav-item">
  190.                             <a class="nav-link" id="dimensions-tab" data-toggle="tab" href="#dimensions" role="tab" aria-controls="dimensions" aria-selected="false">{{ 'general.dimensions' | trans }}</a>
  191.                         </li>
  192.                     {% endif %}
  193.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  194.                         <li class="nav-item">
  195.                             <a class="nav-link" id="engine-tab" data-toggle="tab" href="#engine" role="tab" aria-controls="engine" aria-selected="false">{{ 'general.engine' | trans }}</a>
  196.                         </li>
  197.                     {%  endif %}
  198.                 </ul>
  199.                 <div class="tab-content" id="myTabContent">
  200.                     <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  202.                         <div class="m-3">
  204.                             <div class="row">
  206.                                 {% if(product.manufacturer) %}
  207.                                     <dl class="item-property col-6 col-md-3">
  208.                                         <dt>{{ 'general.manufacturer' | trans }}</dt>
  209.                                         <dd>{{ product.manufacturer.name }}</dd>
  210.                                     </dl>
  211.                                 {% endif %}
  213.                                 {{ macros.attribute(product.productionYear, 'general.productionYear') }}
  215.                                 {% if(product.country) %}
  216.                                     <dl class="item-property col-6 col-md-3">
  217.                                         <dt>{{ 'general.country' | trans }}</dt>
  218.                                         <dd>{{ product.country | country }}</dd>
  219.                                     </dl>
  220.                                 {% endif %}
  222.                             </div>
  224.                         </div>
  226.                     </div>
  227.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  228.                         <div class="tab-pane fade" id="dimensions" role="tabpanel" aria-labelledby="dimensions-tab">
  230.                             <div class="m-3">
  232.                                 <div class="row">
  234.                                     {% if(product.attributes.dimensions) %}
  235.                                         {{ macros.attribute(product.attributes.dimensions.length, 'general.length') }}
  236.                                         {{ macros.attribute(product.attributes.dimensions.width, 'general.width') }}
  237.                                         {{ macros.attribute(product.attributes.dimensions.wheelbase, 'general.wheelbase') }}
  238.                                         {{ macros.attribute(product.attributes.dimensions.weight, 'general.weight') }}
  239.                                     {%  endif %}
  241.                                     {% if(product.attributes.bodywork) %}
  242.                                         {{ macros.attribute(product.attributes.bodywork.numberOfDoors, 'general.numberOfDoors') }}
  243.                                         {{ macros.attribute(product.attributes.bodywork.numberOfSeats, 'general.numberOfSeats') }}
  244.                                     {%  endif %}
  246.                                 </div>
  248.                             </div>
  250.                         </div>
  251.                     {%  endif %}
  252.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  253.                         <div class="tab-pane fade" id="engine" role="tabpanel" aria-labelledby="engine-tab">
  255.                             <div class="m-3">
  257.                                 <div class="row">
  259.                                     {% if(product.attributes.engine) %}
  260.                                         {{ macros.attribute(product.attributes.engine.cylinders, 'general.cylinders') }}
  261.                                         {{ macros.attribute(product.attributes.engine.capacity, 'general.capacity') }}
  262.                                         {{ macros.attribute(product.attributes.engine.power, 'general.power') }}
  263.                                         {{ macros.attribute(product.attributes.engine.engineLocation, 'general.engineLocation') }}
  264.                                     {%  endif %}
  266.                                     {% if(product.attributes.transmission) %}
  267.                                         {{ macros.attribute(product.attributes.transmission.wheelDrive, 'general.wheelDrive', true, 'attribute.') }}
  268.                                     {%  endif %}
  270.                                 </div>
  272.                             </div>
  274.                         </div>
  275.                     {%  endif %}
  276.                 </div>
  278.             </div>
  279.             {% endblock %}
  281.             {% block productrelations %}
  282.                 {% set accessories = product.accessories %}
  284.                 {%  if(accessories.count) %}
  286.                     <hr>
  288.                     <div class="mt-5 col-12">
  289.                         <h4 class="text-center">{{ 'general.accessories' | trans }}</h4>
  291.                         <div class="row">
  292.                             {% for item in accessories %}
  294.                                 <div class="col-md-3 d-flex align-items-stretch">
  295.                                     {% include 'product/product_teaser.html.twig' with {'product': item} %}
  296.                                 </div>
  298.                             {% endfor %}
  299.                         </div>
  301.                     </div>
  303.                 {% endif %}
  304.             {% endblock %}
  307.         </div>
  308.     </div>
  309. {% endblock %}