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>
  159.                         <form id="shop_add_to_cart_form_{{ product.id }}" method="post" action="{{ path('shop-add-to-cart', { id: product.id }) }}">
  160.                             <input type="hidden" name="_csrf_token" value="{{ csrf_token('addToCart') }}">
  161.                             <a href="#"
  162.                                onclick="document.getElementById('shop_add_to_cart_form_{{ product.id }}').submit();"
  163.                                class="btn btn-success btn-block">{{ 'general.add-to-cart' | trans }}</a>
  164.                         </form>
  166.                     </div>
  168.                 </div>
  170.             </div>
  172.             <hr>
  174.             {% block description %}
  175.                 <div class="mt-5 col-12 text-center">
  176.                     <h4 class="text-center">{{ 'general.additional-information' | trans }}</h4>
  178.                     {% if(product.description) %}
  179.                         <p>{{ product.description | raw }}</p>
  180.                     {% endif %}
  182.                 </div>
  183.             {% endblock %}
  185.             {% block attributes %}
  186.                 <div class="col-12">
  188.                 <ul class="nav nav-tabs" id="attributes" role="tablist">
  189.                     <li class="nav-item">
  190.                         <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>
  191.                     </li>
  192.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  193.                         <li class="nav-item">
  194.                             <a class="nav-link" id="dimensions-tab" data-toggle="tab" href="#dimensions" role="tab" aria-controls="dimensions" aria-selected="false">{{ 'general.dimensions' | trans }}</a>
  195.                         </li>
  196.                     {% endif %}
  197.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  198.                         <li class="nav-item">
  199.                             <a class="nav-link" id="engine-tab" data-toggle="tab" href="#engine" role="tab" aria-controls="engine" aria-selected="false">{{ 'general.engine' | trans }}</a>
  200.                         </li>
  201.                     {%  endif %}
  202.                 </ul>
  203.                 <div class="tab-content" id="myTabContent">
  204.                     <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  206.                         <div class="m-3">
  208.                             <div class="row">
  210.                                 {% if(product.manufacturer) %}
  211.                                     <dl class="item-property col-6 col-md-3">
  212.                                         <dt>{{ 'general.manufacturer' | trans }}</dt>
  213.                                         <dd>{{ product.manufacturer.name }}</dd>
  214.                                     </dl>
  215.                                 {% endif %}
  217.                                 {{ macros.attribute(product.productionYear, 'general.productionYear') }}
  219.                                 {% if(product.country) %}
  220.                                     <dl class="item-property col-6 col-md-3">
  221.                                         <dt>{{ 'general.country' | trans }}</dt>
  222.                                         <dd>{{ product.country | country }}</dd>
  223.                                     </dl>
  224.                                 {% endif %}
  226.                             </div>
  228.                         </div>
  230.                     </div>
  231.                     {% if(product.attributes.dimensions or product.attributes.bodywork) %}
  232.                         <div class="tab-pane fade" id="dimensions" role="tabpanel" aria-labelledby="dimensions-tab">
  234.                             <div class="m-3">
  236.                                 <div class="row">
  238.                                     {% if(product.attributes.dimensions) %}
  239.                                         {{ macros.attribute(product.attributes.dimensions.length, 'general.length') }}
  240.                                         {{ macros.attribute(product.attributes.dimensions.width, 'general.width') }}
  241.                                         {{ macros.attribute(product.attributes.dimensions.wheelbase, 'general.wheelbase') }}
  242.                                         {{ macros.attribute(product.attributes.dimensions.weight, 'general.weight') }}
  243.                                     {%  endif %}
  245.                                     {% if(product.attributes.bodywork) %}
  246.                                         {{ macros.attribute(product.attributes.bodywork.numberOfDoors, 'general.numberOfDoors') }}
  247.                                         {{ macros.attribute(product.attributes.bodywork.numberOfSeats, 'general.numberOfSeats') }}
  248.                                     {%  endif %}
  250.                                 </div>
  252.                             </div>
  254.                         </div>
  255.                     {%  endif %}
  256.                     {% if(product.attributes.engine or product.attributes.transmission) %}
  257.                         <div class="tab-pane fade" id="engine" role="tabpanel" aria-labelledby="engine-tab">
  259.                             <div class="m-3">
  261.                                 <div class="row">
  263.                                     {% if(product.attributes.engine) %}
  264.                                         {{ macros.attribute(product.attributes.engine.cylinders, 'general.cylinders') }}
  265.                                         {{ macros.attribute(product.attributes.engine.capacity, 'general.capacity') }}
  266.                                         {{ macros.attribute(product.attributes.engine.power, 'general.power') }}
  267.                                         {{ macros.attribute(product.attributes.engine.engineLocation, 'general.engineLocation') }}
  268.                                     {%  endif %}
  270.                                     {% if(product.attributes.transmission) %}
  271.                                         {{ macros.attribute(product.attributes.transmission.wheelDrive, 'general.wheelDrive', true, 'attribute.') }}
  272.                                     {%  endif %}
  274.                                 </div>
  276.                             </div>
  278.                         </div>
  279.                     {%  endif %}
  280.                 </div>
  282.             </div>
  283.             {% endblock %}
  285.             {% block productrelations %}
  286.                 {% set accessories = product.accessories %}
  288.                 {%  if(accessories.count) %}
  290.                     <hr>
  292.                     <div class="mt-5 col-12">
  293.                         <h4 class="text-center">{{ 'general.accessories' | trans }}</h4>
  295.                         <div class="row">
  296.                             {% for item in accessories %}
  298.                                 <div class="col-md-3 d-flex align-items-stretch">
  299.                                     {% include 'product/product_teaser.html.twig' with {'product': item} %}
  300.                                 </div>
  302.                             {% endfor %}
  303.                         </div>
  305.                     </div>
  307.                 {% endif %}
  308.             {% endblock %}
  311.         </div>
  312.     </div>
  313. {% endblock %}