Jcarousel Для Товаров На Главной
#1
Отправлено 21 Май 2014 - 20:09
#2
Отправлено 22 Май 2014 - 02:28
<!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <a href="{index_page_new_goods.URL}"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> <h4><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h4> <p>{index_page_new_goods.DESCRIPTION_SHORT}</p> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper -->замените на:
<!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <div class="goodstable over fleft"> <div class="title anone fnt11 fntarl"> <a href="{index_page_new_goods.URL}" title="Перейти на страницу «{index_page_new_goods.NAME}»">{index_page_new_goods.NAME}</a> <div class="clr"></div> </div> <div class="maingoodstable"> <div class="img txtalgncnt clr"> <a href="{index_page_new_goods.URL}"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_new_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> </div> <div class="text fnt11 fntarl txtalgnjsf clr">{index_page_new_goods.DESCRIPTION_SHORT}</div> <div class="price over"> <ul class="cost fnt11 fntupcase txtalgnlft fntarl fleft "> <li class="only">Цена: {index_page_new_goods.MIN_PRICE_NOW | money_format}</li> {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | number_format("0", ",", " ")} </li> {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_new_goods.MIN_PRICE_OLD | number_format("0", ",", " ")} </li> {% ENDIF %} </ul> <!-- Если товара нет в наличие и в настройках отключена возможность класть --> {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_new_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_new_goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_new_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_new_goods.MIN_PRICE_NOW_ID}" /> <a class="orangebut fnt11 fntarl txtalgncnt fright fntupcase anone0" onclick="$('#goodsListFormId{index_page_new_goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_new_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_new_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_new_goods.NAME}» в корзину">Купить</a> </div> </form> {% ENDIF %} </div> </div> <div class="bottom"></div> </div> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper -->
для других товаров изменения по структуре аналогичны, отличаются только переменные.
#3
Отправлено 22 Май 2014 - 23:36
Vaccina (22 Май 2014 - 02:28) писал:
<!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <a href="{index_page_new_goods.URL}"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_new_goods.IMAGE_SMALL}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> <h4><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h4> <p>{index_page_new_goods.DESCRIPTION_SHORT}</p> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper -->замените на:
<!-- Begin Wrapper --> <div id="wrapper"> <div class="d-carousel"> <ul class="carousel"> {% FOR index_page_new_goods %} <li> <div class="goodstable over fleft"> <div class="title anone fnt11 fntarl"> <a href="{index_page_new_goods.URL}" title="Перейти на страницу «{index_page_new_goods.NAME}»">{index_page_new_goods.NAME}</a> <div class="clr"></div> </div> <div class="maingoodstable"> <div class="img txtalgncnt clr"> <a href="{index_page_new_goods.URL}"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_new_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a> </div> <div class="text fnt11 fntarl txtalgnjsf clr">{index_page_new_goods.DESCRIPTION_SHORT}</div> <div class="price over"> <ul class="cost fnt11 fntupcase txtalgnlft fntarl fleft "> <li class="only">Цена: {index_page_new_goods.MIN_PRICE_NOW | money_format}</li> {% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | number_format("0", ",", " ")} </li> {% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_new_goods.MIN_PRICE_OLD | number_format("0", ",", " ")} </li> {% ENDIF %} </ul> <!-- Если товара нет в наличие и в настройках отключена возможность класть --> {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_new_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_new_goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{index_page_new_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{index_page_new_goods.MIN_PRICE_NOW_ID}" /> <a class="orangebut fnt11 fntarl txtalgncnt fright fntupcase anone0" onclick="$('#goodsListFormId{index_page_new_goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_new_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_new_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_new_goods.NAME}» в корзину">Купить</a> </div> </form> {% ENDIF %} </div> </div> <div class="bottom"></div> </div> </li> {% ENDFOR index_page_new_goods %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper -->
для других товаров изменения по структуре аналогичны, отличаются только переменные.
Здравствуйте.Я не эту карусель имел ввиду,с ней пока понятно.Попробовал всё же применить изменения в этой карусели коряво получилось.
Мне нужно ещё одну карусель внизу страницы поставить и выводить товары на главной.Сейчас у меня три позиции на странице ,на их месте поставить карусель. Только вот думал такую же прикрутить,а теперь вычитал карусель в два ряда jsCarusel.Попытался сам поставить не получилось выбело ошибки на сайте.
Инструкции чёткой по установке не нашёл.
Почему-то при ошибке сразу верхнюю карусель ставит вертикально,да и так при загрузки страницы сначала карусель грузится вертикально .
#4
Отправлено 23 Май 2014 - 03:18
http://forum.storela...ой/#entry139642
На счет "корявого" отображения в carousel.css найдите и удалите:
#wrapper .d-carousel ul li { background: #F6F4EB; padding: 15px; text-align: center; width: 175px; }
#5
Отправлено 23 Май 2014 - 19:57
Vaccina (23 Май 2014 - 03:18) писал:
#wrapper .d-carousel ul li { background: #F6F4EB; padding: 15px; text-align: center; width: 175px; }
Спасибо,ещё с размерами пришлось повозиться,обрезано и сдвинуто всё было.
по карусели в два ряда, необходимо установить иную карусель, ссылка на нее находится в сл.теме форума: http://forum.storela...ой/#entry139642
Вот эту я и пробовал.Карусель,что у меня сейчас стоит и эта в два ряда, могут конфликтовать между собой?
По инструкции по ссылке попробовал поставить.Верхняя карусель сразу становится вертикально.Во вторую просто ставил изображения и они стали вертикально,съехала левая колонка вправо под страницу.
Всё посносил,страшно людей пугать.
#6
Отправлено 24 Май 2014 - 03:35
https://github.com/m...jsCarousel-V2.0
Лучше ставить ее, внутри имеются файлы для скачки и инструкция по установке, конфликта возникать не должно, главное чтобы у этих каруселей классы не совпадали
#7
Отправлено 24 Май 2014 - 19:10
И выходит 1 JS ошибка.
Отключил jquery-1.4.4.min.js ошибка пропала,но столбцом товары так и остались.
А вообще нужно подключать jquery-1.4.4.min.js?
Переставил карусель вниз страницы.Товары в столбец,вывел пока 3 товара,чтобы не растянуло страницу.Что делать дальше?Размеры пока приблизно выставил.
А если две одинаковые карусели установить,что нужно будет сделать?
Помогите пожалуйста,а то косяк на сайте,люди будут шарахаться.
Сообщение отредактировал valeriruss: 25 Май 2014 - 09:21
#8
Отправлено 25 Май 2014 - 09:00
#9
Отправлено 26 Май 2014 - 08:54
#11
Отправлено 26 Май 2014 - 09:21
#13
Отправлено 26 Май 2014 - 09:40
Vaccina (24 Май 2014 - 03:35) писал:
https://github.com/m...jsCarousel-V2.0
Лучше ставить ее, внутри имеются файлы для скачки и инструкция по установке, конфликта возникать не должно, главное чтобы у этих каруселей классы не совпадали
У меня в начале страницы стояла карусель jCarusel вырезал этот код вывода новинок поменял стиль для jsCarusel.Скрипты использовал из инструкции выше.Подсмотрел код ещё на
http://brasletus.ru/ Задавал вопрос по поводу jquery-1.4.4.min.js:
valeriruss (24 Май 2014 - 19:10) писал:
И выходит 1 JS ошибка.
Отключил jquery-1.4.4.min.js ошибка пропала,но столбцом товары так и остались.
А вообще нужно подключать jquery-1.4.4.min.js?
Переставил карусель вниз страницы.Товары в столбец,вывел пока 3 товара,чтобы не растянуло страницу.Что делать дальше?Размеры пока приблизно выставил.
А если две одинаковые карусели установить,что нужно будет сделать?
#14
Отправлено 26 Май 2014 - 10:17
#15
Отправлено 26 Май 2014 - 10:24
valeriruss (26 Май 2014 - 09:40) писал:
http://brasletus.ru/ Задавал вопрос по поводу jquery-1.4.4.min.js:
Находим в шаблоне HTML код:
<!--Вывод товаров таблицей--> <div class="goodstabl clr"> {% FOR index_page_goods %} <div class="goodstable over fleft"> <div class="title anone fnt11 fntarl"> <a href="{index_page_goods.URL}" title="Перейти на страницу «{index_page_goods.NAME}»">{index_page_goods.NAME}</a> <div class="clr"></div> </div> <div class="maingoodstable"> <div class="img txtalgncnt clr"> <a href="{index_page_goods.URL}"><img src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a> </div> <div class="text fnt11 fntarl txtalgnjsf clr">{index_page_goods.DESCRIPTION_SHORT}</div> <div class="price over"> <ul class="cost fnt11 fntupcase txtalgnlft fntarl fleft "> <li class="only">Цена: {index_page_goods.MIN_PRICE_NOW | money_format}</li> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | number_format("0", ",", " ")} </li> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_goods.MIN_PRICE_OLD | number_format("0", ",", " ")} </li> {% ENDIF %} </ul> <!-- Если товара нет в наличие и в настройках отключена возможность класть --> {% 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> <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="orangebut fnt11 fntarl txtalgncnt fright fntupcase anone0" onclick="$('#goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_goods.NAME}» в корзину">Купить</a> </div> </form> {% ENDIF %} </div> </div> <div class="bottom clr"></div> </div> {% ENDFOR index_page_goods %} </div>
и меняем на:
<!--Вывод товаров таблицей--> <div class="goodstabl clr" id="carouselh"> {% FOR index_page_goods %} <div class="goodstable over fleft"> <div class="title anone fnt11 fntarl"> <a href="{index_page_goods.URL}" title="Перейти на страницу «{index_page_goods.NAME}»">{index_page_goods.NAME}</a> <div class="clr"></div> </div> <div class="maingoodstable"> <div class="img txtalgncnt clr"> <a href="{index_page_goods.URL}"><img src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a> </div> <div class="text fnt11 fntarl txtalgnjsf clr">{index_page_goods.DESCRIPTION_SHORT}</div> <div class="price over"> <ul class="cost fnt11 fntupcase txtalgnlft fntarl fleft "> <li class="only">Цена: {index_page_goods.MIN_PRICE_NOW | money_format}</li> {% IF index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | number_format("0", ",", " ")} </li> {% ELSEIF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %} <li class="last linethrough">Старая цена: {index_page_goods.MIN_PRICE_OLD | number_format("0", ",", " ")} </li> {% ENDIF %} </ul> <!-- Если товара нет в наличие и в настройках отключена возможность класть --> {% 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> <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="orangebut fnt11 fntarl txtalgncnt fright fntupcase anone0" onclick="$('#goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить «{index_page_goods.NAME}» в корзину">Купить</a> </div> </form> {% ENDIF %} </div> </div> <div class="bottom clr"></div> </div> {% ENDFOR index_page_goods %} </div>
Далее в этом же шаблоне перед </head> ставим:
<script type="text/javascript"> $(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' }); $('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, circular: true, masked: false, itemstodisplay: 6, orientation: 'h' }); $('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 6, orientation: 'h' }); }); </script>
Ошибки выбило, потому что у вас подключены js и css файлы - 2.0.0, а загружены обычные. Закачайте jsCarousel-2.0.0.js и jsCarousel-2.0.0.css
#16
Отправлено 26 Май 2014 - 11:00
MikDark (26 Май 2014 - 10:24) писал:
Извиняюсь перепутал,до этого стояло что нужно.Исправления сделал.Ошибки всё равно выбивает.карусель вроде стала только размерами и цветом поэкспериментирую.
В верхней карусели столб из товаров
#17
Отправлено 26 Май 2014 - 11:17
valeriruss (26 Май 2014 - 11:00) писал:
В верхней карусели столб из товаров
Попробуйте восстановить до того момента, когда верхняя карусель работала.
#19
Отправлено 26 Май 2014 - 14:10
#20
Отправлено 26 Май 2014 - 14:14
valeriruss (26 Май 2014 - 14:10) писал:
В main.css найдите:
.goodstable, .related_goodstable { width: 225px; margin: 1% 0.2% 0% 0.8%; float: none; vertical-align: top; display: inline-block; clear: both; min-height: 250px; zoom: 1; }
и замените на:
.goodstable, .related_goodstable { width: 225px; margin: 1% 0.2% 0% 0.8%; float: none; vertical-align: top; display: inline-block; min-height: 250px; zoom: 1; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных