Блок списка товаров

В списке товаров показан блок(вид) товара test.
Верстку и css елемента товара можно посмотреть здесь

№1 Список товаров в слайдере

(Вид до поключения слайдера)

(Вид после поключения слайдера)

Посмотреть код html

<div class="el_offerItem_xxxxxx col">
	<div class="wrapperInner">
		<p class="el_blockTitle_xxxxxx clearfix">Наименование блока</p>
		<div class="offerListSlider typeContentBlock1 row inRow5 clearfix">
			<div class="el_offerItem_xxxxxx col">
				<div class="wrapperInner">
					<div class="imageBlock image-flex">
						<a class="el" href="/offer/"><img src="offer.png" alt=""></a>
					</div>
					<p class="title"><a href="/offer/" title="Наименование товара">Наименование товара</a></p>
					<div class="priceBlock">
						<p class="priceLine">
							<span class="priceOld"><span>456.27</span> грн.</span>
							<span class="price"><span>432.49</span> грн.</span>
						</p>
						<form method="POST" enctype="multipart/form-data" onsubmit="CartOfferAction.add(this); return false;">
							<input type="hidden" name="offerModAmount" value="1" />
							<input type="hidden" name="offerModId" value="1" />
							<button  class="btn addToCartButton" title="Купить товар">Купить</button>
						</form>
					</div>
					<div class="rateBlock clearfix">
						<a href="/offer/#tab=2" title="Отзывы (0)">
							<div class="rateStar smallStar clearfix">
								{% spaceless %}
									<div class="starsPassive">
										<div>
											<i class="fa fa-star-o"></i>
											<i class="fa fa-star-o"></i>
											<i class="fa fa-star-o"></i>
											<i class="fa fa-star-o"></i>
											<i class="fa fa-star-o"></i>
										</div>
									</div>
									<div class="starsActive" style="width: 45%;">
										<div>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
									</div>
								{% endspaceless %}
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="el_offerItem_xxxxxx col">...</div>
			...
			<div class="el_offerItem_xxxxxx col">...</div>
		</div>
	</div>
</div>

Посмотреть код css

.el_offerListBlock_xxxxxx
{
}
 
.el_offerListBlock_xxxxxx .offerListSlider.slick-slider
{
	margin-bottom: 30px;
}
 
.el_offerListBlock_xxxxxx .offerListSlider .el_offerItem_xxxxxx
{
	margin-bottom: 30px;
}
.el_offerListBlock_xxxxxx .offerListSlider.slick-slider .el_offerItem_xxxxxx
{
	margin-bottom: 0px;
}
 
/*****/
 
.offerListSlider.slick-slider .slick-arrow
{
	z-index: 30;
}
.offerListSlider.slick-slider .slick-prev
{
	left: 25px;
}
.offerListSlider.slick-slider .slick-next
{
	right: 25px;
}
 
.offerListSlider.slick-slider .slick-prev::before,
.offerListSlider.slick-slider .slick-next::before
{
	color: #2091C9;
}
 
.offerListSlider.slick-slider .slick-dots
{
	display: none !important;
}
.offerListSlider.slick-slider .slick-dots li
{
}
.offerListSlider.slick-slider .slick-dots li button
{
}
.offerListSlider.slick-slider .slick-dots li button::before
{
}
.offerListSlider.slick-slider .slick-dots li.slick-active button::before
{
	color: #2091C9;
}

Содержимое блока без javascript должно смотреться корректно. Для этого можно использовать css списка здесь

№2 Список товаров (тип блока 1 (typeContentBlock1) например на всю ширину без левого и правого меню)

Тут показанны блоки списков товаров от 2 до 7 елементов в строке при максимальной ширине блока

Посмотреть код html

<div class="el_offerList_xxxxxx">
	<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
	<!-- от inRow2 до inRow7 -->
	<div class="offerList typeContentBlock1 row inRow2 clearfix">
		<div class="el_offerItem_xxxxxx col">
			<div class="wrapperInner">
				<div class="imageBlock image-flex">
					<a class="el" href="/offer/"><img src="offer.png" alt=""></a>
				</div>
				<p class="title"><a href="/offer/" title="Наименование товара">Наименование товара</a></p>
				<div class="priceBlock">
					<p class="priceLine">
						<span class="priceOld"><span>456.27</span> грн.</span>
						<span class="price"><span>432.49</span> грн.</span>
					</p>
 
 
					<form method="POST" enctype="multipart/form-data" onsubmit="CartOfferAction.add(this); return false;">
						<input type="hidden" name="offerModAmount" value="1" />
						<input type="hidden" name="offerModId" value="1" />
						<button  class="btn addToCartButton" title="Купить товар">Купить</button>
					</form>
				</div>
				<div class="rateBlock clearfix">
					<a href="/offer/#tab=2" title="Отзывы (0)">
						<div class="rateStar smallStar clearfix">
							{% spaceless %}
								<div class="starsPassive">
									<div>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
									</div>
								</div>
								<div class="starsActive" style="width: 45%;">
									<div>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
									</div>
								</div>
							{% endspaceless %}
						</div>
					</a>
				</div>
			</div>
		</div>
		<div class="el_offerItem_xxxxxx col">...</div>
		...
		<div class="el_offerItem_xxxxxx col">...</div>
	</div>
</div>

Посмотреть код css

.el_offerList_xxxxxx
{
}
 
.el_offerList_xxxxxx .el_offerItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь

№3 Список товаров (тип блока 2 (typeContentBlock2) например с левым или правым меню)

Тут показанны блоки списков товаров от 2 до 7 елементов в строке при максимальной ширине блока

Посмотреть код html

<div class="el_offerList_xxxxxx">
	<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
	<!-- от inRow2 до inRow7 -->
	<div class="offerList typeContentBlock2 row inRow2 clearfix">
		<div class="el_offerItem_xxxxxx col">
			<div class="wrapperInner">
				<div class="imageBlock image-flex">
					<a class="el" href="/offer/"><img src="offer.png" alt=""></a>
				</div>
				<p class="title"><a href="/offer/" title="Наименование товара">Наименование товара</a></p>
				<div class="priceBlock">
					<p class="priceLine">
						<span class="priceOld"><span>456.27</span> грн.</span>
						<span class="price"><span>432.49</span> грн.</span>
					</p>
 
 
					<form method="POST" enctype="multipart/form-data" onsubmit="CartOfferAction.add(this); return false;">
						<input type="hidden" name="offerModAmount" value="1" />
						<input type="hidden" name="offerModId" value="1" />
						<button  class="btn addToCartButton" title="Купить товар">Купить</button>
					</form>
				</div>
				<div class="rateBlock clearfix">
					<a href="/offer/#tab=2" title="Отзывы (0)">
						<div class="rateStar smallStar clearfix">
							{% spaceless %}
								<div class="starsPassive">
									<div>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
									</div>
								</div>
								<div class="starsActive" style="width: 45%;">
									<div>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
									</div>
								</div>
							{% endspaceless %}
						</div>
					</a>
				</div>
			</div>
		</div>
		<div class="el_offerItem_xxxxxx col">...</div>
		...
		<div class="el_offerItem_xxxxxx col">...</div>
	</div>
</div>

Посмотреть код css

.el_offerList_xxxxxx
{
}
 
.el_offerList_xxxxxx .el_offerItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь

№4 Список товаров (тип блока 3 (typeContentBlock3) например с левым и правым меню)

Тут показанны блоки списков товаров от 2 до 7 елементов в строке при максимальной ширине блока

Посмотреть код html

<div class="el_offerList_xxxxxx">
	<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
	<!-- от inRow2 до inRow7 -->
	<div class="offerList typeContentBlock3 row inRow2 clearfix">
		<div class="el_offerItem_xxxxxx col">
			<div class="wrapperInner">
				<div class="imageBlock image-flex">
					<a class="el" href="/offer/"><img src="offer.png" alt=""></a>
				</div>
				<p class="title"><a href="/offer/" title="Наименование товара">Наименование товара</a></p>
				<div class="priceBlock">
					<p class="priceLine">
						<span class="priceOld"><span>456.27</span> грн.</span>
						<span class="price"><span>432.49</span> грн.</span>
					</p>
 
 
					<form method="POST" enctype="multipart/form-data" onsubmit="CartOfferAction.add(this); return false;">
						<input type="hidden" name="offerModAmount" value="1" />
						<input type="hidden" name="offerModId" value="1" />
						<button  class="btn addToCartButton" title="Купить товар">Купить</button>
					</form>
				</div>
				<div class="rateBlock clearfix">
					<a href="/offer/#tab=2" title="Отзывы (0)">
						<div class="rateStar smallStar clearfix">
							{% spaceless %}
								<div class="starsPassive">
									<div>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
										<i class="fa fa-star-o"></i>
									</div>
								</div>
								<div class="starsActive" style="width: 45%;">
									<div>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
									</div>
								</div>
							{% endspaceless %}
						</div>
					</a>
				</div>
			</div>
		</div>
		<div class="el_offerItem_xxxxxx col">...</div>
		...
		<div class="el_offerItem_xxxxxx col">...</div>
	</div>
</div>

Посмотреть код css

.el_offerList_xxxxxx
{
}
 
.el_offerList_xxxxxx .el_offerItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь