Комплексный компонент (eshop)
Комплексный компонент предназначен для вывода данных из информационных каталогов в виде многостраничной структуры: товары, карточка товаров, пагинация.
Компонент имеет все настройки компонента Комплексный компонент (catalogs) и дополнительные:
| Название | Параметр | Описание |
|---|---|---|
| Бренд | brand | |
| Опции товара | option | |
| Кнопка "Купить" | buy_enable | |
| Кнопка "Нет в наличии" | buy_disable | |
| Количественный учет товара | quantity_trace |
<div class="row">
<aside class="col-sm-4 col-lg-3">
<div class="sidebar">
<component data-name="eshop.filter">template=default&catalog=catalog§ions_sub=1</component>
{field_sidebar}
</div>
</aside>
<div class="col-sm-8 col-lg-9">
<div class="entry">
<div class="entry-body">
<div class="catalog">
<div class="catalog-heading clearfix">
<div class="catalog-heading-left">
<h1 class="catalog-title">{title_content}</h1>
<div class="catalog-count">{count_all} товара</div>
</div>
<div class="catalog-heading-right">
<component data-name="eshop.sort">template=default</component>
</div>
</div>
[if=!elements]
<div class="alert-notify">К сожалению, по Вашему запросу ничего не найдено.</div>
[/elements]
<div class="catalog-row row">
{elements}
<div class="catalog-col col-sm-6 col-lg-4" data-content="{elements:data-content}">
<div class="catalog-item catalog-item-has-rating">
<div class="catalog-item-body">
<div class="catalog-item-image">
<a href="{elements:href}"><img src="{elements:images_first_thumb_src}" alt="{elements:title}"></a>
</div>
<div class="catalog-item-sticker">
[if=elements:option_2]
<div class="catalog-item-new">Новинка</div>[/elements:option_2]
[if=elements:option_3]
<div class="catalog-item-sell">Акция</div>[/elements:option_3]
</div>
<div class="catalog-item-main">
<div class="catalog-item-price">
[if=elements:discount]
<div class="catalog-item-price-old">
<s><span data-eshop-price="{elements:element_id}">{elements:price}</span> руб</s>
<span class="catalog-item-price-discount">-{elements:discount_percent}%</span>
</div>
[/elements:discount]
<div class="catalog-item-price-current">
<span data-eshop-price-discount="{elements:element_id}">{elements:price_discount}</span> руб
</div>
</div>
<div class="catalog-item-title">
<a href="{elements:href}">{elements:title}</a>
</div>
<div class="catalog-item-ratings">
<div class="catalog-item-votes">{elements:comments} отзывов</div>
</div>
<div class="catalog-item-buttons">
<button type="button" onclick="EShop_Wish_Add('{elements:data-content}');" class="btn btn-default catalog-item-btn">
<i class="icon icon-heart2"></i>
</button>
</div>
</div>
<div class="catalog-item-hidden">
<div class="catalog-item-control">
{elements:sku_features}
<div class="catalog-item-group catalog-item-features">
<label class="catalog-item-label">{elements:sku_features:title}:</label>
{elements:sku_features:elements}
<span class="{elements:sku_features:elements:active}" {elements:sku_features:elements:data}>
{elements:sku_features:elements:title}
</span>
{/elements:sku_features:elements}
</div>
{/elements:sku_features}
[if=elements:offers_multiple]
<div class="catalog-item-group" style="display: none;">
<select id="{elements:element_id}" onchange="EShop_Select_Offer('{elements:element_id}', this);" class="form-control catalog-item-select">
{elements:offers}
<option value="{elements:offers:id}" {elements:offers:data}>{elements:offers:title}</option>
{/elements:offers}
</select>
</div>
[/elements:offers_multiple]
<button type="button" class="btn btn-primary btn-block catalog-item-buy" onclick="EShop_Cart_Add(this);" {elements:button_buy_data}>
{elements:button_buy_title}
</button>
</div>
</div>
</div>
</div>
</div>
{/elements}
</div>
{pagination}
</div>
</div>
</div>
</div>
</div><div class="row">
<div class="col-lg-12">
<div class="entry">
<div class="entry-body">
<div class="product" data-content="{data-content}">
<div class="product-main">
<div class="row">
<div class="col-sm-7">
<div class="product-gallery">
<div class="owl-carousel js-product-gallery" data-slider-id="1">
{images}
<div class="product-gallery-image zoom">
<a href="{images:src}" rel="lightbox">
<img src="{images:src}" alt="{title}">
</a>
</div>
{/images}
</div>
</div>
<div class="product-thumbs owl-thumbs" data-slider-id="1">
<?php foreach ($images as $image): ?>
<div class="product-thumbs-item owl-thumb-item">
<div class="product-thumbs-image">
<img src="<?=$image['thumb_src']?>" alt="">
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="col-sm-5">
<div class="product-heading">
<h1 class="product-title">{title}</h1>
<div class="product-heading-buttons">
<button type="button" class="btn btn-default product-heading-btn" onclick="EShop_Wish_Add('{data-content}');">
<i class="icon icon-heart2"></i>
</button>
</div>
</div>
<div class="product-preview">
{brief}
<ul>
[if=!brand_image_src]
<li class="product-preview-text">Бренд: <a href="{brand_href}">{brand}</a></li>[/brand_image_src]
[if=brand_image_src]
<li class="product-preview-logo">
<a href="{brand_href}"><img src="{brand_image_src}" alt="{brand}"></a>
</li>[/brand_image_src]
<li class="product-preview-text">Артикул: <a data-eshop-article="{id}">{article}</a></li>
</ul>
</div>
[if=offers_multiple]
<div class="product-select">
<div class="product-select-group" style="display: none;">
<select class="form-control product-select-select" id="{element_id}" onchange="EShop_Select_Offer('{element_id}', this);">
{offers}
<option value="{offers:id}" {offers:data}>{offers:title}</option>
{/offers}
</select>
</div>
{sku_features}
<div class="product-select-group product-select-feature">
<label>{sku_features:title}:</label>
{sku_features:elements}
<span class="{sku_features:elements:active}" {sku_features:elements:data}>{sku_features:elements:title}</span>
{/sku_features:elements}
</div>
{/sku_features}
</div>
[/offers_multiple]
<div class="product-divider"></div>
<div class="product-pricing clearfix">
<div class="product-price">
<div class="product-price-center">
[if=discount]
<div class="product-price-old">
<s><span data-eshop-price="{element_id}">{price}</span> руб</s>
<span class="product-price-discount" title="{discount}">-{discount_percent}%</span>
</div>
[/discount]
<div class="product-price-current">
<span data-eshop-price-discount="{element_id}">{price_discount}</span> руб
</div>
</div>
</div>
<div class="product-count" data-count-buttons>
<button type="button" class="product-count-minus"></button>
<input type="text" class="product-count-field" maxlength="2" value="1">
<button type="button" class="product-count-plus"></button>
<span class="product-count-label">{measure_ab}</span>
</div>
</div>
<div class="product-order">
<button type="button" class="btn btn-primary product-order-btn" onclick="EShop_Cart_Add(this, event);" {button_buy_data}>
<i class="icon icon-cart2"></i> В корзину
</button>
</div>
<div class="product-divider"></div>
<div class="product-details">
<ul class="product-details-list">
<li class="product-details-item">
<div class="product-details-ratings">
<div class="product-details-votes">{comments} отзывов</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="tabs">
<ul class="tabs-list">
<li class="tabs-item active"><a href="#tab-description" data-toggle="tab">Описание</a></li>
[if=features]
<li class="tabs-item"><a href="#tab-properties" data-toggle="tab">Характеристики</a></li>[/features]
<li class="tabs-item"><a href="#tab-reviews" data-toggle="tab">Отзывы</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-description">
<h3 class="product-content-title">Описание {title}</h3>
<div class="product-content-text">
{description}
</div>
</div>
[if=features]
<div class="tab-pane fade" id="tab-properties">
<h3 class="product-content-title">Характеристики</h3>
<table class="product-content-table">
<tbody>
{features}
<tr>
<th>{features:title}</th>
<td>{features:value}</td>
</tr>
{/features}
</tbody>
</table>
</div>
[/features]
<div class="tab-pane fade" id="tab-reviews">
<component data-name="comments">
template=default
sort_type=desc
per_page=20
date_format=j-m-Y, H:i
guest=0
approve=0
action_edit=1
action_delete=1
action_limit=5
profile_url=profile
</component>
</div>
</div>
</div>
[if=related]
<div class="product-related">
<h3 class="product-related-title">С этим товаром покупают</h3>
<div class="catalog-row row">
{related}
<div class="catalog-col col-sm-6 col-md-4 col-lg-3" data-content="{related:data-content}">
<div class="catalog-item catalog-item-has-rating">
<div class="catalog-item-body">
<div class="catalog-item-image">
<a href="{related:href}"><img src="{related:images_first_thumb_src}" alt="{related:title}"></a>
</div>
<div class="catalog-item-sticker">
[if=related:option_2]
<div class="catalog-item-new">Новинка</div>[/related:option_2]
[if=related:option_3]
<div class="catalog-item-sell">Акция</div>[/related:option_3]
</div>
<div class="catalog-item-main">
<div class="catalog-item-price">
[if=related:discount]
<div class="catalog-item-price-old">
<s><span data-eshop-price="{related:element_id}">{related:price}</span> руб</s>
<span class="catalog-item-price-discount">-{related:discount_percent}%</span>
</div>
[/related:discount]
<div class="catalog-item-price-current">
<span data-eshop-price-discount="{related:element_id}">{related:price_discount}</span> руб
</div>
</div>
<div class="catalog-item-title">
<a href="{related:href}">{related:title}</a>
</div>
<div class="catalog-item-ratings">
<div class="catalog-item-votes">{related:comments} отзывов</div>
</div>
<div class="catalog-item-buttons">
<button type="button" onclick="EShop_Wish_Add('{related:data-content}');" class="btn btn-default catalog-item-btn">
<i class="icon icon-heart2"></i>
</button>
</div>
</div>
<div class="catalog-item-hidden">
<div class="catalog-item-control">
{related:sku_features}
<div class="catalog-item-group catalog-item-features">
<label class="catalog-item-label">{related:sku_features:title}:</label>
{related:sku_features:elements}
<span class="{related:sku_features:elements:active}" {related:sku_features:elements:data}>
{related:sku_features:elements:title}
</span>
{/related:sku_features:elements}
</div>
{/related:sku_features}
[if=related:offers_multiple]
<div class="catalog-item-group" style="display: none;">
<select id="{related:element_id}" onchange="EShop_Select_Offer('{related:element_id}', this);" class="form-control catalog-item-select">
{related:offers}
<option value="{related:offers:id}" {related:offers:data}>{related:offers:title}</option>
{/related:offers}
</select>
</div>
[/related:offers_multiple]
<button type="button" class="btn btn-primary btn-block catalog-item-buy" onclick="EShop_Cart_Add(this);" {related:button_buy_data}>
{related:button_buy_title}
</button>
</div>
</div>
</div>
</div>
</div>
{/related}
</div>
</div>
[/related]
</div>
</div>
</div>
</div>
</div>