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. {#{% set defaultPriceWithDiscount = app_product_default_price_with_discount(product,userIdSage) %}#}
  7. <style>
  8.     .card-img-top {
  9.         position: absolute;
  10.         top: -50px;
  11.         left: 50%;
  12.         margin-left: -50px;
  13.         width: 100px !important;
  14.         height: 100px;
  15.         transition: transform 0.3s ease;
  16.     }
  18.     .card:hover .card-img-top {
  19.         transform: scale(1.2);
  20.     }
  22.     .card {
  23.         font-family: "Roboto";
  24.         text-transform: lowercase;
  25.         margin-top: 30px;
  26.         padding-top: 30px;
  27.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  28.         height: 170px;
  29.     }
  31.     .card a {
  32.         color: inherit;
  33.     }
  35.     .card-title {
  36.         display: block;
  37.         font-weight: 600;
  38.     }
  40.     .card-title:first-letter {
  41.         text-transform: uppercase;
  42.     }
  44.     .card:hover .card-title {
  45.         color: #106eea;
  46.     }
  48.     @media (max-width: 991px) {
  49.         .col-md-3,
  50.         .col-6 {
  51.             flex: 0 0 50%;
  52.             max-width: 50%;
  53.         }
  55.         .card {
  56.             height: 250px;
  57.             padding-top: 10px;
  58.         }
  59.     }
  60.     @media (min-width: 768px) and (max-width: 991px) {
  61.         .col-md-3,
  62.         .col-6 {
  63.             width: 100%;
  64.             flex: 0 0 50%;
  65.             max-width: 50%;
  66.         }
  68.         .card {
  69.             height: 250px;
  70.             width: 200px;
  71.             padding-top: 10px;
  72.             margin: 10px 100px 10px 90px;
  73.         }
  74.     }
  76.     @media (min-width: 991px) {
  77.         .card {
  78.             height: 250px;
  79.         }
  80.     }
  82. </style>
  84. <div class="col-6 col-sm-6 col-md-3 mt-5">
  85.     <div class="card">
  86.         <a href="{{ editmode ? '#':linkDetail }}" class="px-3">
  87.             <img class="card-img-top" src="{{ (productImg) ? productImg.thumbnail('ProductImages') : '' }}" alt="Card image cap">
  88.             <div class="card-block text-center mt-5">
  89.                 <span class="card-title fs-6">{{ product.getName() }}</span>
  90.                 {# if product have propspeed brand hide price #}
  91. {#                {% if is_authenticated or product.marca != 15663 %}#}
  92. {#                    <p class="card-position card-price fs-6">{{ app_helper_price_format_spain(defaultPrice) }}€</p>#}
  93. {#                {% endif %}#}
  94.             </div>
  95.         </a>
  96.     </div>
  97. </div>