templates/Shop/product_teaser.html.twig line 1

Open in your IDE?
  1. {% set productImg = product.getFirstImageAsset %}
  2. {% if not editmode %}
  3.     {% set linkDetail = app_product_generate_link(product, { 'document' : document, 'prefix': prefix } , {}) %}
  4. {% endif %}
  5. {% set defaultPrice = app_product_default_price(product) %}
  6. {# Determine if product is a kit (align with productDetail controller using getKitProducts) #}
  7. {% set kit = product.getKitProducts() %}
  8. {% set hasVariantKits = product.hasVariantKits() %}
  9. {% set isPartOfKit = product.isPartOfKit() %}
  10. {#{% set defaultPriceWithDiscount = app_product_default_price_with_discount(product,userIdSage) %}#}
  11. <style>
  12.     .card-img-top {
  13.         position: absolute;
  14.         top: -50px;
  15.         left: 50%;
  16.         margin-left: -50px;
  17.         width: 100px !important;
  18.         height: 100px;
  19.         transition: transform 0.3s ease;
  20.     }
  22.     .card:hover .card-img-top {
  23.         transform: scale(1.2);
  24.     }
  26.     .card {
  27.         font-family: "Roboto";
  28.         text-transform: lowercase;
  29.         margin-top: 30px;
  30.         padding-top: 30px;
  31.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  32.         height: 170px;
  33.         position: relative;
  34.     }
  36.     .card a {
  37.         color: inherit;
  38.     }
  40.     .card-title {
  41.         display: block;
  42.         font-weight: 600;
  43.     }
  45.     .card-title:first-letter {
  46.         text-transform: uppercase;
  47.     }
  49.     .card:hover .card-title {
  50.         color: #106eea;
  51.     }
  53.     @media (max-width: 991px) {
  54.         .col-md-3,
  55.         .col-6 {
  56.             flex: 0 0 50%;
  57.             max-width: 50%;
  58.         }
  60.         .card {
  61.             height: 250px;
  62.             padding-top: 10px;
  63.         }
  64.     }
  65.     @media (min-width: 768px) and (max-width: 991px) {
  66.         .col-md-3,
  67.         .col-6 {
  68.             width: 100%;
  69.             flex: 0 0 50%;
  70.             max-width: 50%;
  71.         }
  73.         .card {
  74.             height: 250px;
  75.             width: 200px;
  76.             padding-top: 10px;
  77.             margin: 10px 100px 10px 90px;
  78.         }
  79.     }
  81.     @media (min-width: 991px) {
  82.         .card {
  83.             height: 250px;
  84.         }
  85.     }
  87. </style>
  89. {% if not isPartOfKit %}
  90. <div class="col-6 col-sm-6 col-md-3 mt-5">
  91.     <div class="card">
  92.     {% if kit or hasVariantKits %}
  93.         <div class="teaser-kit-icon">
  94.             <img aria-hidden="true" src="{{ asset(pimcore_asset_by_path('/iconos/kit-icon.png').thumbnail('DefaultThumbnail')) }}">
  95.         </div>
  96.     {% endif %}
  97.         <a href="{{ editmode ? '#':linkDetail }}" class="px-3">
  98.             <img class="card-img-top" src="{{ (productImg) ? productImg.thumbnail('ProductImages') : '' }}" alt="Card image cap">
  99.             <div class="card-block text-center mt-5">
  100.                 <span class="card-title fs-6">{{ product.getName() }}</span>
  101.                 {# if product have propspeed brand hide price #}
  102. {#                {% if is_authenticated or product.marca != 15663 %}#}
  103. {#                    <p class="card-position card-price fs-6">{{ app_helper_price_format_spain(defaultPrice) }}€</p>#}
  104. {#                {% endif %}#}
  105.             </div>
  106.         </a>
  107.     </div>
  108. </div>
  109. {% endif %}