Перейти к содержимому


Как Добавить Адаптивную Карусель В Шаблоне "бистро"

карусель

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 13

#1 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 24 Июнь 2014 - 09:55

В ввиде карусели можно сделать товары на главной из категорий "Новинки", "Хиты продаж", "Товары на главной".
Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)
QIP Shot - Screen 045.png
В файле "html".
После кода:
														 <div class="btn-toolbar">
															 <!-- Если товара нет в наличие и в настройках отключена возможность класть -->
															 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %}
																 <div class="tovar-available fnt11 fntupcase aunder">
																	 <a href="#" rel="false" class="catalog-available-false" >
																		 <div class="stikno">Товара нет в наличии</div>
																	 </a>
																 </div>
															 {%ELSE%}
																 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
																	 <div class="btnToCart">
																		 <input type="hidden" name="hash" value="{HASH}" />
																		 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
																		 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
																		 <a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}');
																	 return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{index_page_goods.NAME}&raquo; в корзину">
																			 <span class="basket_add"></span>
																		 </a>
																	 </div>
																	 <div class="numeric input-prepend input-append btn-group">
																		 <a class="js-minus btn minus">
																			 <i class="icon-minus">
																				 -
																			 </i>
																		 </a>
																		 <input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" />
																		 <a class="js-plus btn plus">
																			 <i class="icon-plus">
																				 +
																			 </i>
																		 </a>
																	 </div>
																 </form>
															 {% ENDIF %}
														 </div>
													 </div>
												 </div>
											 </div>
										 {% ENDFOR index_page_goods %}
										 <!-- END Вывод товаров таблицей-->
									 </div>
								 </div>
Добавить код:
									<div class="customNavigation my">
									  <a class="btn prev" title="Назад"></a>
									  <a class="btn next" title="Вперед"></a>
									</div>
									<script>
									  $(document).ready(function() {
										var owl = $(".index_page_goods .blockTableTovarIndexPage");
										owl.owlCarousel({
										  items : 4, //количество плиток
										  autoPlay: 4000 // скорость прокрутки
										});
										// Custom Navigation Events
										$(".next").click(function(){
										  owl.trigger('owl.next');
										});
										$(".prev").click(function(){
										  owl.trigger('owl.prev');
										});
									  });
									</script>
QIP Shot - Screen 046.png
Добавить в конец файла "main.css" код:
.blockIndexPage .owl-wrapper-outer {
max-width: none;
}
.customNavigation.my {
position: relative;
margin-bottom: -40px;
height: 40px;
bottom: 0;
width: 100%;
overflow: visible;
opacity: 0.5;
}
.index_page_goods .menu-item {
width: 90%;
}
.my .next, .my .prev {
position:relative;
bottom:235px;
background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%;
height: 30px;
width: 5px;
background-color: #4E6D8D;
}
.my .prev {
float: left;
background-position-x: -277px;
left: 1px;
}
.my .next {
float: right;
background-position-x: -315px;
}
.customNavigation.my:hover {
opacity: 0.5;
}
.my .next:hover, .my .prev:hover {
opacity: 1;
background-color: #0E4277;
}
.index_page_goods .menu-item-icon {
right: 8%;
}


#2 vadim777

vadim777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 302 сообщений

Отправлено 06 Август 2014 - 01:27

Просмотр сообщенияKoderhan (24 Июнь 2014 - 09:55) писал:

В ввиде карусели можно сделать товары на главной из категорий "Новинки", "Хиты продаж", "Товары на главной".
Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)
Прикрепленный файл QIP Shot - Screen 045.png
В файле "html".
После кода:
														 <div class="btn-toolbar">
															 <!-- Если товара нет в наличие и в настройках отключена возможность класть -->
															 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %}
																 <div class="tovar-available fnt11 fntupcase aunder">
																	 <a href="#" rel="false" class="catalog-available-false" >
																		 <div class="stikno">Товара нет в наличии</div>
																	 </a>
																 </div>
															 {%ELSE%}
																 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
																	 <div class="btnToCart">
																		 <input type="hidden" name="hash" value="{HASH}" />
																		 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
																		 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
																		 <a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}');
																	 return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{index_page_goods.NAME}&raquo; в корзину">
																			 <span class="basket_add"></span>
																		 </a>
																	 </div>
																	 <div class="numeric input-prepend input-append btn-group">
																		 <a class="js-minus btn minus">
																			 <i class="icon-minus">
																				 -
																			 </i>
																		 </a>
																		 <input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" />
																		 <a class="js-plus btn plus">
																			 <i class="icon-plus">
																				 +
																			 </i>
																		 </a>
																	 </div>
																 </form>
															 {% ENDIF %}
														 </div>
													 </div>
												 </div>
											 </div>
										 {% ENDFOR index_page_goods %}
										 <!-- END Вывод товаров таблицей-->
									 </div>
								 </div>
Добавить код:
								 <div class="customNavigation my">
									 <a class="btn prev" title="Назад"></a>
									 <a class="btn next" title="Вперед"></a>
								 </div>
								 <script>
									 $(document).ready(function() {
									 var owl = $(".index_page_goods .blockTableTovarIndexPage");
									 owl.owlCarousel({
										 items : 4, //количество плиток
										 autoPlay: 4000 // скорость прокрутки
									 });
									 // Custom Navigation Events
									 $(".next").click(function(){
										 owl.trigger('owl.next');
									 });
									 $(".prev").click(function(){
										 owl.trigger('owl.prev');
									 });
									 });
								 </script>
Прикрепленный файл QIP Shot - Screen 046.png
Добавить в конец файла "main.css" код:
.blockIndexPage .owl-wrapper-outer {
max-width: none;
}
.customNavigation.my {
position: relative;
margin-bottom: -40px;
height: 40px;
bottom: 0;
width: 100%;
overflow: visible;
opacity: 0.5;
}
.index_page_goods .menu-item {
width: 90%;
}
.my .next, .my .prev {
position:relative;
bottom:235px;
background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%;
height: 30px;
width: 5px;
background-color: #4E6D8D;
}
.my .prev {
float: left;
background-position-x: -277px;
left: 1px;
}
.my .next {
float: right;
background-position-x: -315px;
}
.customNavigation.my:hover {
opacity: 0.5;
}
.my .next:hover, .my .prev:hover {
opacity: 1;
background-color: #0E4277;
}
.index_page_goods .menu-item-icon {
right: 8%;
}
Просто супер. Подскажите как реализовать Хиты и Новинки

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 06 Август 2014 - 03:15

Изменения производить аналогичные, сам код данных видов товаров одинаковый, разница лишь в переменных, например для Товаров на главной используются переменные
index_page_goods
для хитов продаж:
index_page_favorites_goods
для новинок:
index_page_new_goods


#4 vadim777

vadim777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 302 сообщений

Отправлено 06 Август 2014 - 21:41

Просмотр сообщенияVaccina (06 Август 2014 - 03:15) писал:

Изменения производить аналогичные, сам код данных видов товаров одинаковый, разница лишь в переменных, например для Товаров на главной используются переменные
index_page_goods
для хитов продаж:
index_page_favorites_goods
для новинок:
index_page_new_goods
напишите пожалуйста целиком код, пытался изменить, ничего не получилось.

#5 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 06 Август 2014 - 22:02

Просмотр сообщенияvadim777 (06 Август 2014 - 21:41) писал:

напишите пожалуйста целиком код, пытался изменить, ничего не получилось.
Здравствуйте,
найдите в HtML
{% ENDFOR index_page_new_goods %}
											<!-- END Вывод товаров таблицей-->
										</div>
									</div>
замените на

{% ENDFOR index_page_new_goods %}
											<!-- END Вывод товаров таблицей-->
										</div>
									</div>

 <div class="customNavigation my">
																		  <a class="btn prev" title="Назад"></a>
																		  <a class="btn next" title="Вперед"></a>
																		</div>
																		<script>
																		  $(document).ready(function() {
																				var owl = $(".index_page_new_goods .blockTableTovarIndexPage");
																				owl.owlCarousel({
																				  items : 4, //количество плиток
																				  autoPlay: 4000 // скорость прокрутки
																				});
																				// Custom Navigation Events
																				$(".next").click(function(){
																				  owl.trigger('owl.next');
																				});
																				$(".prev").click(function(){
																				  owl.trigger('owl.prev');
																				});
																		  });
																		</script> 

далее найдите
{% ENDFOR index_page_favorites_goods %}
											<!-- END Вывод товаров таблицей-->
										</div>
									</div>
замените на



{% ENDFOR index_page_favorites_goods %}
											<!-- END Вывод товаров таблицей-->
										</div>
									</div>
 <div class="customNavigation my">
																		  <a class="btn prev" title="Назад"></a>
																		  <a class="btn next" title="Вперед"></a>
																		</div>
																		<script>
																		  $(document).ready(function() {
																				var owl = $(".index_page_favorites_goods .blockTableTovarIndexPage");
																				owl.owlCarousel({
																				  items : 4, //количество плиток
																				  autoPlay: 4000 // скорость прокрутки
																				});
																				// Custom Navigation Events
																				$(".next").click(function(){
																				  owl.trigger('owl.next');
																				});
																				$(".prev").click(function(){
																				  owl.trigger('owl.prev');
																				});
																		  });
																		</script>  


#6 vadim777

vadim777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 302 сообщений

Отправлено 06 Август 2014 - 22:07

Просмотр сообщенияИрина345 (06 Август 2014 - 22:02) писал:

Здравствуйте,
найдите в HtML
{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
замените на

{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>

<div class="customNavigation my">
<a class="btn prev" title="Назад"></a>
<a class="btn next" title="Вперед"></a>
</div>
<script>
$(document).ready(function() {
var owl = $(".index_page_new_goods .blockTableTovarIndexPage");
owl.owlCarousel({
items : 4, //количество плиток
autoPlay: 4000 // скорость прокрутки
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
});
$(".prev").click(function(){
owl.trigger('owl.prev');
});
});
</script> 

далее найдите
{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
замените на



{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
<div class="customNavigation my">
<a class="btn prev" title="Назад"></a>
<a class="btn next" title="Вперед"></a>
</div>
<script>
$(document).ready(function() {
var owl = $(".index_page_favorites_goods .blockTableTovarIndexPage");
owl.owlCarousel({
items : 4, //количество плиток
autoPlay: 4000 // скорость прокрутки
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
});
$(".prev").click(function(){
owl.trigger('owl.prev');
});
});
</script> 
чтото немного нето, смещено вправо Снимок экрана 2014-08-06 в 23.08.39.png

#7 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 06 Август 2014 - 22:13

Просмотр сообщенияvadim777 (06 Август 2014 - 22:07) писал:

чтото немного нето, смещено вправо Прикрепленный файл Снимок экрана 2014-08-06 в 23.08.39.png
Найдите в main.css
.menu-item {
	position: relative;
	display: inline-block;
	float: none !important;
	margin: 6px;
	width: 23%;
	vertical-align: top;
}
замените на


.menu-item {
	position: relative;
	display: inline-block;
	float: none !important;
	margin: 6px;
	vertical-align: top;
}



#8 vadim777

vadim777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 302 сообщений

Отправлено 06 Август 2014 - 22:16

Просмотр сообщенияИрина345 (06 Август 2014 - 22:13) писал:

Найдите в main.css
.menu-item {
position: relative;
display: inline-block;
float: none !important;
margin: 6px;
width: 23%;
vertical-align: top;
}
замените на


.menu-item {
position: relative;
display: inline-block;
float: none !important;
margin: 6px;
vertical-align: top;
}

огромное спасибо.

#9 RomanP

RomanP

    Пользователь

  • Пользователи
  • PipPip
  • 28 сообщений

Отправлено 20 Ноябрь 2014 - 23:39

Очень полезно!.. Подскажите, а как мне заставить одну панель в обратную сторону двигаться? А еще сделать размещение как в таблице "Недавно смотрели" (компактные)?

#10 Kot da Vinci

Kot da Vinci

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 124 сообщений
  • ГородMoscow

Отправлено 21 Ноябрь 2014 - 02:05

Просмотр сообщенияKoderhan (24 Июнь 2014 - 09:55) писал:

В ввиде карусели можно сделать товары на главной из категорий "Новинки", "Хиты продаж", "Товары на главной".
Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)
Прикрепленный файл QIP Shot - Screen 045.png
В файле "html".
После кода:
														 <div class="btn-toolbar">
															 <!-- Если товара нет в наличие и в настройках отключена возможность класть -->
															 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %}
																 <div class="tovar-available fnt11 fntupcase aunder">
																	 <a href="#" rel="false" class="catalog-available-false" >
																		 <div class="stikno">Товара нет в наличии</div>
																	 </a>
																 </div>
															 {%ELSE%}
																 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
																	 <div class="btnToCart">
																		 <input type="hidden" name="hash" value="{HASH}" />
																		 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
																		 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
																		 <a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}');
																	 return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{index_page_goods.NAME}&raquo; в корзину">
																			 <span class="basket_add"></span>
																		 </a>
																	 </div>
																	 <div class="numeric input-prepend input-append btn-group">
																		 <a class="js-minus btn minus">
																			 <i class="icon-minus">
																				 -
																			 </i>
																		 </a>
																		 <input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" />
																		 <a class="js-plus btn plus">
																			 <i class="icon-plus">
																				 +
																			 </i>
																		 </a>
																	 </div>
																 </form>
															 {% ENDIF %}
														 </div>
													 </div>
												 </div>
											 </div>
										 {% ENDFOR index_page_goods %}
										 <!-- END Вывод товаров таблицей-->
									 </div>
								 </div>
Добавить код:
								 <div class="customNavigation my">
									 <a class="btn prev" title="Назад"></a>
									 <a class="btn next" title="Вперед"></a>
								 </div>
								 <script>
									 $(document).ready(function() {
									 var owl = $(".index_page_goods .blockTableTovarIndexPage");
									 owl.owlCarousel({
										 items : 4, //количество плиток
										 autoPlay: 4000 // скорость прокрутки
									 });
									 // Custom Navigation Events
									 $(".next").click(function(){
										 owl.trigger('owl.next');
									 });
									 $(".prev").click(function(){
										 owl.trigger('owl.prev');
									 });
									 });
								 </script>
Прикрепленный файл QIP Shot - Screen 046.png
Добавить в конец файла "main.css" код:
.blockIndexPage .owl-wrapper-outer {
max-width: none;
}
.customNavigation.my {
position: relative;
margin-bottom: -40px;
height: 40px;
bottom: 0;
width: 100%;
overflow: visible;
opacity: 0.5;
}
.index_page_goods .menu-item {
width: 90%;
}
.my .next, .my .prev {
position:relative;
bottom:235px;
background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%;
height: 30px;
width: 5px;
background-color: #4E6D8D;
}
.my .prev {
float: left;
background-position-x: -277px;
left: 1px;
}
.my .next {
float: right;
background-position-x: -315px;
}
.customNavigation.my:hover {
opacity: 0.5;
}
.my .next:hover, .my .prev:hover {
opacity: 1;
background-color: #0E4277;
}
.index_page_goods .menu-item-icon {
right: 8%;
}

Что-то не так... карусель походу получилась,но ее не видно из-за белого фона. И как я понимаю она смещена немного вправо.
И еще сейчас заметил, что кнопка "ВЛЕВО" показывает  ВПРАВО :D

Изображение


Сделал вот это и удалились "Хиты продаж"

найдите в HtML
{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>



замените на
{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>

<div class="customNavigation my">



Сделал это и ничего не изменилось

далее найдите
{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>

замените на




{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
<div class="customNavigation my">


Вернул все обратно  

#11 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 26 Ноябрь 2014 - 15:28

уточните, пожалуйста, для какого аккаунта вы производите эти изменения ?

#12 Kot da Vinci

Kot da Vinci

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 124 сообщений
  • ГородMoscow

Отправлено 27 Ноябрь 2014 - 00:19

Просмотр сообщенияTaisia (26 Ноябрь 2014 - 15:28) писал:

уточните, пожалуйста, для какого аккаунта вы производите эти изменения ?

Аккаунт SL-244602

#13 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 29 Ноябрь 2014 - 13:36

Просмотр сообщенияKot da Vinci (27 Ноябрь 2014 - 00:19) писал:

Аккаунт SL-244602
Здравствуйте, данной проблемы не обнаружили.

#14 Kot da Vinci

Kot da Vinci

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 124 сообщений
  • ГородMoscow

Отправлено 01 Декабрь 2014 - 00:17

Просмотр сообщенияИрина345 (29 Ноябрь 2014 - 13:36) писал:

Здравствуйте, данной проблемы не обнаружили.

Здравствуйте. Обнаружил,что данная проблема наблюдается в FireFox, в хроме нормально работает. Посмотрите, пожалуйста, что нужно исправить. Кэш чистил не помогло.

И еще для "Новинок" и "Хитов продаж" уже второй раз попробовал сделать по вашей инструкции,которая выше, следующие изменения и ничего не получается:

УДАЛЯЮТСЯ ХИТЫ ПРОДАЖ С ГЛАВНОЙ СТРАНИЦЫ,КОГДА ДЕЛАЕШЬ ЭТО:
найдите в HtML
{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>



замените на
{% ENDFOR index_page_new_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>

<div class="customNavigation my">


НИЧЕГО НЕ ПРОИСХОДИТ,КОГДА ДЕЛАЕШЬ ЭТО:
далее найдите
{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>




замените на
{% ENDFOR index_page_favorites_goods %}
<!-- END Вывод товаров таблицей-->
</div>
</div>
<div class="customNavigation my">


СДЕЛАЛ, КАК БЫЛО ИЗНАЧАЛЬНО! ПОМОГИТЕ СДЕЛАТЬ,ПОЖАЛУЙСТА, ЧТОБ "НОВИНКИ" И "ХИТЫ ПРОДАЖ" ТОЖЕ ДВИГАЛИСЬ!





Темы с аналогичным тегами карусель

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных