1<article> 2 <div class="product-container" itemscope itemtype="https://schema.org/Product"> 3 <div class="product-image-container"> 4 <a class="product_img_link" 5 href="{$product.link|escape:'html':'UTF-8'}" 6 title="{$product.name|escape:'html':'UTF-8'}" 7 itemprop="url" 8 > 9 {if !empty($lazy_load)} 10 <noscript> 11 <img class="img-responsive center-block" 12 src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'}" 13 srcset=" 14 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smallest', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, 15 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smaller', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, 16 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" 17 sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" 18 alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 19 title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 20 itemprop="image" 21 width="{getWidthSize|intval type='home'}" 22 height="{getHeightSize|intval type='home'}" 23 > 24 </noscript> 25 {/if} 26 <picture {if $lazy_load}class="tb-lazy-image"{/if}> 27 <!--[if IE 9]><video style="display: none;"><![endif]--> 28 {if !empty($webp)} 29 <source class="img-responsive center-block" 30 {if !empty($lazy_load)}srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= 1w" data-{/if}srcset=" 31 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smallest', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, 32 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smaller', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, 33 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" 34 sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" 35 title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 36 type="image/webp" 37 itemprop="image" 38 > 39 {/if} 40 <!--[if IE 9]></video><![endif]--> 41 42 <img class="img-responsive center-block" 43 {if !empty($lazy_load)}src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="{/if} 44 {if !empty($lazy_load)}srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= 1w" data-{/if}srcset=" 45 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smallest', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, 46 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_smaller', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, 47 {$link->getImageLink($product.link_rewrite, $product.id_image, 'home', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" 48 sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" 49 alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 50 title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" 51 itemprop="image" 52 width="{getWidthSize|intval type='home'}" 53 height="{getHeightSize|intval type='home'}" 54 > 55 {hook h='productImageHover' id_product = $product.id_product} 56 {if isset($quick_view) && $quick_view} 57 <a class="quick-view show-if-product-item-hover" 58 href="{$product.link|escape:'html':'UTF-8'}" 59 title="{l s='Open quick view window'}" 60 data-fancybox-target="{$product.link|escape:'html':'UTF-8'}" 61 > 62 <i class="icon icon-fullscreen"></i> 63 </a> 64 {/if} 65 {if $show_functional_buttons} 66 <div class="functional-buttons clearfix show-if-product-grid-hover"> 67 {hook h='displayProductListFunctionalButtons' product=$product} 68 {if isset($comparator_max_item) && $comparator_max_item} 69 <div class="compare"> 70 <a class="add_to_compare" title="{l s='Add to Compare'}" href="{$product.link|escape:'html':'UTF-8'}" 71 data-id-product="{$product.id_product}"> 72 <i class="icon icon-plus"></i> {l s='Add to Compare'} 73 </a> 74 </div> 75 {/if} 76 </div> 77 {/if} 78 </picture> 79 </a> 80 81 <div class="product-label-container"> 82 {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} 83 {if isset($product.online_only) && $product.online_only} 84 <span class="product-label product-label-online">{l s='Online only'}</span> 85 {/if} 86 {/if} 87 {if isset($product.new) && $product.new == 1} 88 <span class="product-label product-label-new">{l s='New'}</span> 89 {/if} 90 {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} 91 <span class="product-label product-label-sale">{l s='Sale!'}</span> 92 {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} 93 <span class="product-label product-label-discount">{l s='Reduced price!'}</span> 94 {/if} 95 </div> 96 97 </div> 98 99 <div class="product-description-container"> 100 <h3 class="h4 product-name" itemprop="name"> 101 {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if} 102 <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" 103 title="{$product.name|escape:'html':'UTF-8'}" itemprop="url"> 104 {$product.name|escape:'html':'UTF-8'} 105 </a> 106 </h3> 107 {capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture} 108 {if $smarty.capture.displayProductListReviews} 109 <div class="hook-reviews"> 110 {$smarty.capture.displayProductListReviews} 111 </div> 112 {/if} 113 114 {if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if} 115 {hook h="displayProductPriceBlock" product=$product type="weight"} 116 117 <p class="product-desc hide-if-product-grid" itemprop="description"> 118 {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} 119 </p> 120 </div> 121 122 <div class="product-actions-container"> 123 124 <div class="product-price-button-wrapper"> 125 {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} 126 <div class="content_price"> 127 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} 128 {hook h="displayProductPriceBlock" product=$product type='before_price'} 129 <span class="price product-price"> 130 {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} 131 </span> 132 {if $product.price_without_reduction > 0 && isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} 133 {hook h="displayProductPriceBlock" product=$product type="old_price"} 134 <span class="old-price product-price"> 135 {displayWtPrice p=$product.price_without_reduction} 136 </span> 137 {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"} 138 {if $product.specific_prices.reduction_type == 'percentage'} 139 <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100} 140 %</span> 141 {/if} 142 {/if} 143 {hook h="displayProductPriceBlock" product=$product type="price"} 144 {hook h="displayProductPriceBlock" product=$product type="unit_price"} 145 {hook h="displayProductPriceBlock" product=$product type='after_price'} 146 {/if} 147 </div> 148 {/if} 149 <div class="button-container"> 150 {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE} 151 {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)} 152 {capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture} 153 <a class="ajax_add_to_cart_button btn btn-primary" 154 href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" 155 rel="nofollow" title="{l s='Add to cart'}" 156 data-id-product-attribute="{$product.id_product_attribute|intval}" 157 data-id-product="{$product.id_product|intval}" 158 data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}"> 159 160 <span><i class="icon icon-shopping-basket"></i>{l s='Add to cart'}</span> 161 </a> 162 {else} 163 <span class="ajax_add_to_cart_button btn btn-primary disabled"> 164 <span><i class="icon icon-shopping-basket"></i>{l s='Add to cart'}</span> 165 </span> 166 {/if} 167 {/if} 168 <!--<a class="btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}"> 169 <span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span> 170 </a>--> 171 </div> 172 {if $show_functional_buttons} 173 <div class="compare_mb"> 174 {if isset($comparator_max_item) && $comparator_max_item} 175 <div class="compare"> 176 <a class="add_to_compare" title="{l s='Add to Compare'}" href="{$product.link|escape:'html':'UTF-8'}" 177 data-id-product="{$product.id_product}"> 178 <i class="icon icon-plus"></i> {l s='Add to Compare'} 179 </a> 180 </div> 181 {/if} 182 </div> 183 {/if} 184 </div> 185 186 {if isset($product.color_list)} 187 <div class="color-list-container">{$product.color_list}</div> 188 {/if} 189 {if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} 190 {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)} 191 <div class="availability"> 192 {if ($product.allow_oosp || $product.quantity > 0)} 193 <span class="label {if $product.quantity <= 0 && isset($product.allow_oosp) && !$product.allow_oosp} label-danger{elseif $product.quantity <= 0} label-warning{else} label-success{/if}"> 194 {if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if} 195 </span> 196 {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)} 197 <span class="label label-warning">{l s='Product available with different options'}</span> 198 {else} 199 <span class="label label-danger">{l s='Out of stock'}</span> 200 {/if} 201 </div> 202 {/if} 203 {/if} 204 </div> 205 206 </div> 207</article> 208