templates/frontend/components/smallProduct.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'store' %}
  2. <!-- START OF ARTICLE -->
  4. <div class="column {% if isOneThird is defined and isOneThird == 1 %}
  5.             is-one-third-desktop is-one-third-tablet is-half-mobile
  6.         {% elseif isOneQuarter is defined and isOneQuarter == 1 %}
  7.             is-one-quarter-desktop is-one-quarter-tablet is-half-mobile
  8.         {% else %}is-half{% endif %}">
  9.     <div class="card {% if cssClass is defined and cssClass%}{{ cssClass }}{% endif%} {% if compareIds is defined and product.id in compareIds %} compare {% endif %}">
  10.         <span>
  11.             {% if (product.availability and product.availability.id == 1) or (product.availability and product.availability.id == 15 and app.request.locale == 'pl') or (product.availability and product.availability.id == 12 and app.request.locale == 'pl') or (product.availability and product.availability.id == 5) %}
  12.                 <div class="is-24h-product"></div>
  13.             {% elseif productData.isPromotion %}
  14.                 <div class="is-promotion-product"></div>
  15.             {% endif %}
  16.         </span>
  17.         <div class="{% if isOneThird is defined and isOneThird == 1 %}with-description{% else %}no-description{% endif %}">
  18.             <div class="card-image">
  19.                 <div class="image">
  20.                     {% if productData.subName is defined and productData.subName %}
  21.                         <a href="{{ path('product', {'id':product.id, 'slug':product.slug, 'sub':productData.subId}) }}">
  22.                     {% else %}
  23.                         <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  24.                     {% endif %}
  25.                     {% if lazyDisabled is defined and lazyDisabled %}
  26.                         <img data-main="{{ asset('/images/product/'~productData.mainPhoto~'') | imagine_filter('small') }}" src="{{ asset('/images/product/'~productData.mainPhoto~'') | imagine_filter('small') }}" alt="{{ product.name }}" class="img-responsive small-photo" />
  27.                     {% else %}
  28.                         <img data-main="{{ asset('/images/product/'~productData.mainPhoto~'') | imagine_filter('small') }}" src="/images/ajax-loader.gif" alt="{{ product.name }}" class="lazy img-responsive small-photo" data-src="{{ asset('/images/product/'~productData.mainPhoto~'') | imagine_filter('small') }}" />
  29.                     {% endif %}
  30.                     </a>
  31.                 </div>
  32.                 <div class="markers">
  33.                     {% if product.listingMarkersIds %}
  34.                         {% set listingImages = markerListingsProduct(product, app.request.locale) %}
  36.                         {% set c = 0 %}
  37.                         {% if listingImages is not empty %}
  38.                             {% set c = 0 %}
  39.                             {% for listingImage in listingImages %}
  40.                                 {% if listingImage.text %}
  41.                                     {% if listingImage.url %}
  42.                                         <a href="{{ listingImage.url }}">
  43.                                             <div class="listing-marker-element listing-marker-element-{{ c }}"
  44.                                                  style="background: {{ listingImage.backgroundColor }}; color: {{ listingImage.textColor }};">
  45.                                                 {{ listingImage.text }}
  46.                                             </div>
  47.                                         </a>
  48.                                         {% set c = c + 1 %}
  49.                                     {% else %}
  50.                                         <div class="listing-marker-element"
  51.                                              style="background: {{ listingImage.backgroundColor }}; color: {{ listingImage.textColor }};">
  52.                                             {{ listingImage.text }}
  53.                                         </div>
  54.                                     {% endif %}
  55.                                 {% endif %}
  56.                             {% endfor %}
  57.                         {% endif %}
  58.                     {% endif %}
  59.                 </div>
  60.             </div>
  61.             <div class="card-content">
  62.                 {% if productData.subName is defined and productData.subName %}
  63.                     <a class="cut-text" href="{{ path('product', {'id':product.id, 'slug':product.slug, 'sub':productData.subId}) }}">
  64.                         <span class="small-product-title">{{ productData.subName }}</span>
  65.                     </a>
  66.                 {% else %}
  67.                     <a class="cut-text" href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  68.                         <span class="small-product-title">{{ product.name }}</span>
  69.                     </a>
  70.                 {% endif %}
  71.                 <div class="title is-4">
  72.                     <div class="ta is-medium">
  73.                         {% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
  74.                             <span style="color:#e22d2d">
  75.                         {% endif %}
  77.                         {% if productData.subPrice is defined and productData.subPrice %}
  78.                             <strong>{{ productData.subPrice|formatPrice(productData.currencyId) }}</strong>
  79.                         {% else %}
  80.                             <strong>{{ productData.priceDescription|formatPrice(productData.currencyId) }}</strong>
  81.                         {% endif %}
  83.                         {% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
  84.                             </span>
  85.                         {% endif %}
  87.                         {% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
  88.                             <br/>
  89.                             <span style="font-size: 14px!important; font-weight: 300!important;"><strike>{{ productData.priceCrossed|formatPrice(productData.currencyId) }}</strike></span>
  90.                         {% endif %}
  91.                     </div>
  92.                 </div>
  94.                 <div class="level is-mobile">
  95.                     <div class="level-left" style="margin-left:-5px;">
  96.                         {% if product.smallProductPhoto == constant('App\\Entity\\Product::SMALL_PRODUCT_PHOTO') %}
  97.                             {% set c = 0 %}
  98.                             {% for photo in getPhotos(product, language) %}
  99.                                 {% if c < 3 and photo.main != 1 and photo.imageName %}
  100.                                     {% set c = c + 1 %}
  101.                                     <div class="level-item color-thumb {% if c == 2 %}is-hidden-mobile{% endif %}">
  102.                                         <figure class="image">
  103.                                             <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  104.                                                 {% if lazyDisabled is defined and lazyDisabled %}
  105.                                                     <img src="{{ asset('/images/product/'~photo.imageName~'') | imagine_filter('textileBig4') }}">
  106.                                                 {% else %}
  107.                                                     <img src="/images/ajax-loader.gif" class="lazy" data-src="{{ asset('/images/product/'~photo.imageName~'') | imagine_filter('textileBig4') }}">
  108.                                                 {% endif %}
  109.                                             </a>
  110.                                         </figure>
  111.                                     </div>
  112.                                 {% endif %}
  113.                             {% endfor %}
  114.                         {% else %}
  115.                             {% set counter = 0 %}
  116.                             {% set c = 0 %}
  117.                             {% for value in product.getAllVariantValues() %}
  118.                                 {% set c = c + 1 %}
  119.                                 {% if c <= 3 %}
  120.                                     {% set counter = counter + 1 %}
  121.                                     {% if value.imageName %}
  122.                                         <div class="level-item color-thumb {% if c == 3 %}is-hidden-mobile{% endif %}">
  123.                                             <figure class="image">
  124.                                                 <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  125.                                                     <img class="lazy" data-src="{{ asset('/images/parameters/'~value.imageName~'') | imagine_filter('textileBig4') }}">
  126.                                                 </a>
  127.                                             </figure>
  128.                                         </div>
  129.                                     {% endif %}
  130.                                 {% endif %}
  131.                             {% endfor %}
  133.                             {% if counter %}
  134.                                 <!-- START OF MORE COLOURS / MATERIALS -->
  135.                                 <div class="level-item" style="margin-left:-10px;">
  136.                                         <span class="subtitle is-7">
  137.                                             {% if c > 3 %}
  138.                                                 <a href="#">+{{ c-3 }}</a>
  139.                                             {% endif %}
  140.                                         </span>
  141.                                 </div>
  142.                                 <!-- END OF MORE COLOURS / MATERIALS -->
  143.                             {% endif %}
  144.                         {% endif %}
  145.                     </div>
  146.                 </div>
  147.                 <div class="ta is-medium" style="{% if product.listingMarkersIds %}min-height: 85px;{% endif %}">
  148.                     {% if product.getShortDescriptionColor %}
  149.                         <div class="">
  150.                             <span class="subtitle is-7 short-description">
  151.                                 <span style="font-weight: normal">{{ 'colours'|trans }}:</span> <strong>{{ product.getShortDescriptionColor|striptags }}</strong>
  152.                                 </span>
  153.                         </div>
  154.                     {% endif %}
  156.                     {% if product.getShortDescriptionTextile %}
  157.                         <div class="is-hidden-mobile">
  158.                         <span class="subtitle is-7 short-description">
  159.                             <span style="font-weight: normal">{{ 'textile'|trans }}: </span>
  160.                                 <strong>{{ product.getShortDescriptionTextile|striptags }}</strong>
  161.                             </span>
  162.                         </div>
  163.                     {% endif %}
  165.                     <div>
  166.                     <span class="subtitle is-7 short-description">
  167.                         <span style="font-weight: normal">{{ 'shipping'|trans }}: </span> <strong>{{ product.getAvailability(language.localeShort).name }}</strong>
  168.                         </span>
  169.                     </div>
  172.                     {#
  174.                     {% if product.listingMarkersIds %}
  175.                         {% set listingImage = markerListingsProduct(product, app.request.locale) %}
  177.                         {% if listingImage %}
  178.                             {% if listingImage.url %}
  179.                                 <a href="{{ listingImage.url }}">
  180.                                         <span class="subtitle is-7">
  181.                                             <img class="listing-marker" src="/images/important/{{ listingImage.getImageName }}">
  182.                                         </span>
  183.                                 </a>
  184.                             {% else %}
  185.                                 <span class="subtitle is-7">
  186.                                         <img class="listing-marker" src="/images/important/{{ listingImage.getImageName }}">
  187.                                     </span>
  188.                             {% endif %}
  190.                         {% endif %}
  191.                     {% endif %}
  193.                     #}
  194.                 </div>
  195.             </div>
  197.             <div class="item-details is-hidden-touch" {% if lazyDisabled is defined and lazyDisabled %}style="display: none;" {% endif %}>
  198.                 <div class="container hidableContainer">
  199.                     {% if product.shortDescription %}
  200.                         <span class="subtitle is-7">
  201.                                 {{ product.shortDescription|raw }}
  202.                             </span>
  203.                         <br>
  204.                     {% endif %}
  206.                     {#
  207.                     <label {% if compareIds is defined and product.id in compareIds %}comparechecked{% endif %} @click="compareactive" class="checkbox" style="margin-top:5px;">
  208.                     #}
  210.                     <label class="checkbox" style="margin-top: 7px; font-size: 12px!important;">
  212.                         <input {% if compareIds is defined and product.id in compareIds %}
  213.                             checked="checked"
  214.                         {% endif %} type="checkbox" data-removepath="{{ path('remove_compare') }}" data-path="{{ path('add_to_compare') }}" class="add_to_compare" data-product="{{ product.id }}" id="{{ product.id }}">
  215.                         {{ 'add_to_compare'|trans }}
  216.                     </label>
  217.                 </div>
  218.             </div>
  220.         </div>
  221.     </div>
  222. </div>
  224. {#
  226. <chair-card inline-template {% if productData.isPromotion %}promotion{% endif %} {% if compareIds is defined and product.id in compareIds %}comparechecked{% endif %} v-cloak {% if (product.availability and product.availability.id == 1) or (product.availability and product.availability.id == 15 and app.request.locale == 'pl') or (product.availability and product.availability.id == 12 and app.request.locale == 'pl') or (product.availability and product.availability.id == 5) %}delivery24{% endif %}>
  227.     <div class="column
  228.         {% if isOneThird is defined and isOneThird == 1 %}
  229.             is-one-third
  230.         {% elseif isOneQuarter is defined and isOneQuarter == 1 %}
  231.             is-one-quarter
  232.         {% else %}is-half{% endif %}">
  233.         <div class="card" :class="{ 'compare': compare }">
  234.             <span v-if="!promotion">
  235.                 <div class="is-24h-product" v-if="delivery24"></div>
  236.             </span>
  238.             <div class="is-promotion-product" v-if="promotion"></div>
  240.             <div class="{% if isOneThird is defined and isOneThird == 1 %}with-description{% else %}no-description{% endif %}">
  241.                 <div class="card-image">
  242.                     <div class="image">
  243.                         {% if productData.subName is defined and productData.subName %}
  244.                             <a href="{{ path('product', {'id':product.id, 'slug':product.slug, 'sub':productData.subId}) }}">
  245.                         {% else %}
  246.                             <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  247.                         {% endif %}
  248.                             <img src="/images/ajax-loader.gif" alt="{{ product.name }}" class="lazy" data-src="{{ asset('/images/product/'~productData.mainPhoto~'') | imagine_filter('small') }}" class="img-responsive" />
  249.                         </a>
  250.                     </div>
  251.                 </div>
  253.                 <div class="card-content">
  254.                     {% if productData.subName is defined and productData.subName %}
  255.                         <a href="{{ path('product', {'id':product.id, 'slug':product.slug, 'sub':productData.subId}) }}">
  256.                             <span class="title is-6">{{ productData.subName }}</span>
  257.                         </a>
  258.                     {% else %}
  259.                         <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  260.                             <span class="title is-6">{{ product.name }}</span>
  261.                         </a>
  262.                     {% endif %}
  263.                     <div class="title is-4">
  264.                         <div class="ta is-medium">
  265.                             {% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
  266.                                 <span style="color:#fe931f"><strong><strike>{{ productData.priceCrossed }} {{ productData.currencySign }}</strike></strong></span>
  267.                             {% endif %}
  268.                             {% if productData.subPrice is defined and productData.subPrice %}
  269.                                 <strong>{{ productData.subPrice|formatPrice(productData.currencyId) }}</strong>
  270.                             {% else %}
  271.                                 <strong>{{ productData.priceDescription|formatPrice(productData.currencyId) }}</strong>
  272.                             {% endif %}
  273.                         </div>
  274.                     </div>
  276.                     <div class="level is-mobile">
  277.                         <div class="level-left" style="margin-left:-5px;">
  278.                             {% if product.smallProductPhoto == constant('App\\Entity\\Product::SMALL_PRODUCT_PHOTO') %}
  279.                                 {% set c = 0 %}
  280.                                 {% for photo in getPhotos(product, language) %}
  281.                                     {% if c < 3 and photo.main != 1 and photo.imageName %}
  282.                                         {% set c = c + 1 %}
  283.                                         <div class="level-item color-thumb">
  284.                                             <figure class="image">
  285.                                                 <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  286.                                                     <img src="/images/ajax-loader.gif" class="lazy" data-src="{{ asset('/images/product/'~photo.imageName~'') | imagine_filter('textileBig4') }}">
  287.                                                 </a>
  288.                                             </figure>
  289.                                         </div>
  290.                                     {% endif %}
  291.                                 {% endfor %}
  292.                             {% else %}
  293.                                 {% set counter = 0 %}
  294.                                 {% set c = 0 %}
  295.                                 {% for value in product.getAllVariantValues() %}
  296.                                     {% set c = c + 1 %}
  297.                                     {% if c <= 3 %}
  298.                                         {% set counter = counter + 1 %}
  299.                                         {% if value.imageName %}
  300.                                             <div class="level-item color-thumb">
  301.                                                 <figure class="image">
  302.                                                     <a href="{{ path('product', {'id':product.id, 'slug':product.slug}) }}">
  303.                                                         <img class="lazy" data-src="{{ asset('/images/parameters/'~value.imageName~'') | imagine_filter('textileBig4') }}">
  304.                                                     </a>
  305.                                                 </figure>
  306.                                             </div>
  307.                                         {% endif %}
  308.                                     {% endif %}
  309.                                 {% endfor %}
  311.                                 {% if counter %}
  312.                                     <!-- START OF MORE COLOURS / MATERIALS -->
  313.                                     <div class="level-item" style="margin-left:-10px;">
  314.                                         <span class="subtitle is-7">
  315.                                             {% if c > 3 %}
  316.                                                 <a href="#">+{{ c-3 }}</a>
  317.                                             {% endif %}
  318.                                         </span>
  319.                                     </div>
  320.                                     <!-- END OF MORE COLOURS / MATERIALS -->
  321.                                 {% endif %}
  322.                             {% endif %}
  323.                         </div>
  324.                     </div>
  325.                     <div class="ta is-medium" style="{% if product.listingMarkersIds %}min-height: 85px;{% endif %}">
  326.                         {% if product.getShortDescriptionColor %}
  327.                             <span class="subtitle is-7 short-description">
  328.                                 {{ 'colours'|trans }}: <strong>{{ product.getShortDescriptionColor|striptags }}</strong>
  329.                             </span>
  330.                             <br>
  331.                         {% endif %}
  333.                         {% if product.getShortDescriptionTextile %}
  334.                             <span class="subtitle is-7 short-description">
  335.                                 {{ 'textile'|trans }}: <strong>{{ product.getShortDescriptionTextile|striptags }}</strong>
  336.                             </span>
  337.                             <br>
  338.                         {% endif %}
  340.                         <span class="subtitle is-7 short-description">
  341.                             {{ 'shipping'|trans }}: <strong>{{ product.getAvailability(language.localeShort).name }}</strong>
  342.                         </span>
  344.                         {% if product.listingMarkersIds %}
  345.                             {% set listingImage = markerListingsProduct(product, app.request.locale) %}
  347.                             {% if listingImage %}
  348.                                 {% if listingImage.url %}
  349.                                     <a href="{{ listingImage.url }}">
  350.                                         <span class="subtitle is-7">
  351.                                             <img class="listing-marker" src="/images/important/{{ listingImage.getImageName }}">
  352.                                         </span>
  353.                                     </a>
  354.                                 {% else %}
  355.                                     <span class="subtitle is-7">
  356.                                         <img class="listing-marker" src="/images/important/{{ listingImage.getImageName }}">
  357.                                     </span>
  358.                                 {% endif %}
  360.                             {% endif %}
  361.                         {% endif %}
  362.                     </div>
  363.                 </div>
  365.                 <div class="item-details">
  366.                     <div class="container hidableContainer">
  367.                         {% if product.shortDescription %}
  368.                             <span class="subtitle is-7">
  369.                                 {{ product.shortDescription|raw }}
  370.                             </span>
  371.                             <br>
  372.                         {% endif %}
  374.                         <label {% if compareIds is defined and product.id in compareIds %}comparechecked{% endif %} @click="compareactive" class="checkbox" style="margin-top:5px;">
  375.                             <input {% if compareIds is defined and product.id in compareIds %}
  376.                                 checked="checked"
  377.                             {% endif %} type="checkbox" v-model="compare" data-removepath="{{ path('remove_compare') }}" data-path="{{ path('add_to_compare') }}" class="add_to_compare" data-product="{{ product.id }}" id="{{ product.id }}">
  378.                             {{ 'add_to_compare'|trans }}
  379.                         </label>
  380.                     </div>
  381.                 </div>
  382.             </div>
  383.         </div>
  384.     </div>
  385. </chair-card>
  386. <!-- END OF ARTICLE -->
  387. #}