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