Блок "вы Смотрели" Как В Шаблоне Движение
#1
Отправлено 23 Июль 2014 - 21:57
Можно в шаблон "Сияние" установить блок просмотренных товаров из шаблона "Движение"?
Аккаунт SL-203304
#2
Отправлено 23 Июль 2014 - 23:51
<!-- Последние товары, просмотренные пользователем --> {% IFNOT recently_viewed_goods_empty %} <li class="recent_viewed"><br /><h2>Вы смотрели</h2> <div class="contentTbodyRecentlyViewed"> <table class="recent_viewed"> {% FOR recently_viewed_goods %} <tr class="txtalgnlft {% IF recently_viewed_goods.last %}last{% ENDIF %}"> <td class="img txtalgncnt"> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»"><img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{recently_viewed_goods.IMAGE_ICON}{% ENDIF %}" alt="{recently_viewed_goods.NAME}" /></a> </td> <td class="link statetitle fnt12n txtalgnlft"> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»">{recently_viewed_goods.NAME}</a> </td> </tr> {% ENDFOR %} </table> </div> </li> {% ENDIF %} <!-- Последние товары, просмотренные пользователем -->
и заменить его на
<!-- Последние товары, просмотренные пользователем --> {% IFNOT recently_viewed_goods_empty %} <li class="recent_viewed"><br /><h2>Вы смотрели</h2> <div class="contentTbodyRecentlyViewed"> <table class="recent_viewed"> {% FOR recently_viewed_goods %} <tr> <td class="recentlyListItem"> <div class="recentlyListItemBlock"> <table class="recentlyListItemImage"> <tr> <td style="border: none;"> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{goods.NAME}»"> <img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{recently_viewed_goods.IMAGE_SMALL}{% ENDIF %}" alt="{recently_viewed_goods.NAME}"> </a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»">{recently_viewed_goods.NAME}</a></h3> <div class="goodsListItemPriceNew"> <a href="{recently_viewed_goods.URL_MIN_PRICE_NOW}">{recently_viewed_goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF recently_viewed_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>recently_viewed_goods.MIN_PRICE_NOW %} <a href="{recently_viewed_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{recently_viewed_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF recently_viewed_goods.MIN_PRICE_OLD>recently_viewed_goods.MIN_PRICE_NOW %} <a href="{recently_viewed_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{recently_viewed_goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm"> <p> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{recently_viewed_goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{recently_viewed_goods.MIN_PRICE_NOW_ID}" /> <a class="readmore" onclick="$(this).closest('form').submit(); return false;" title="Положить «{recently_viewed_goods.NAME}» в корзину">Купить</a> </p> </form> </div> </td> </tr> {% ENDFOR %} </tr> </table> </div> </li> {% ENDIF %} <!-- Последние товары, просмотренные пользователем -->
#3
Отправлено 24 Июль 2014 - 10:19
Я вставил код и у меня просто появилась цена и кнопка "купить".
Мне нужно, чтобы был слайдер или карусель, не знаю как правильно это называется.
Уже была инструкция как поставить блок просмотренных товаров из темы "Вечность"(http://forum.storela...ренных-товаров/), только мне нужно, чтоб прокрутка была вертикальной и в окне отображалась не одна позиция, а 2-3. В теме "Движение" все как раз так как мне надо.
#4
Отправлено 25 Июль 2014 - 02:23
Основная страница: http://www.egrappler...scarousel-v2-0/
Скачиваем архив по сл.ссылке: http://www.egrappler...rousel2.0.0.zip
С архива в Редактор шаблонов загружаем сл.файлы:
jsCarousel-2.0.0.js jsCarousel-2.0.0.css top_arrow.jpg bottom_arrow.jpg
Далее в шаблоне HTML перед:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>вставляем:
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}jsCarousel-2.0.0.css" type="text/css" /> <script type="text/javascript" src="{ASSETS_JS_PATH}jsCarousel-2.0.0.js"></script>
Далее находим:
<!-- Последние товары, просмотренные пользователем --> {% IFNOT recently_viewed_goods_empty %} <li class="recent_viewed"><br /><h2>Вы смотрели</h2> <div class="contentTbodyRecentlyViewed"> <table class="recent_viewed"> {% FOR recently_viewed_goods %} <tr class="txtalgnlft {% IF recently_viewed_goods.last %}last{% ENDIF %}"> <td class="img txtalgncnt"> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»"><img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{recently_viewed_goods.IMAGE_ICON}{% ENDIF %}" alt="{recently_viewed_goods.NAME}" /></a> </td> <td class="link statetitle fnt12n txtalgnlft"> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»">{recently_viewed_goods.NAME}</a> </td> </tr> {% ENDFOR %} </table> </div> </li> {% ENDIF %} <!-- Последние товары, просмотренные пользователем -->меняем на:
<!-- Последние товары, просмотренные пользователем --> {% IFNOT recently_viewed_goods_empty %} <li class="recent_viewed"><br /><h2>Вы смотрели</h2> <div id="vWrapper"> <div id="carouselv"> {% FOR recently_viewed_goods %} <div> <a href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»"><img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{recently_viewed_goods.IMAGE_ICON}{% ENDIF %}" alt="{recently_viewed_goods.NAME}" /></a><br /> <a class="thumbnail-text" href="{recently_viewed_goods.URL}" title="Перейти на страницу «{recently_viewed_goods.NAME}»">{recently_viewed_goods.NAME}</a> </div> {% ENDFOR %} </div> </div> </li> {% ENDIF %} <!-- Последние товары, просмотренные пользователем -->
Далее заходим в main.js и в самом конце прописываем:
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' }); });
Далее остается выровнять товары внутри, в jsCarousel-2.0.0.css ищем:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }заменим на:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }
Далее найдем:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }заменим на:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }
Далее находим:
.jscarousal-vertical { background-color: #121212; border: 1px solid #7a7677; height: 460px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 140px; }меняем на:
.jscarousal-vertical { background-color: #121212; border: 1px solid #7a7677; height: 460px; margin: 0; overflow: hidden; padding: 0; position: relative; }
#5
Отправлено 25 Июль 2014 - 19:33
Мне бы вот только еще сделать, чтоб карусель сама не прокручивалась...
#6
Отправлено 26 Июль 2014 - 01:32
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' }); });заменить на:
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 3, orientation: 'v' }); });
#7
Отправлено 28 Июль 2014 - 09:18
Я так пробовал (autoscroll: false), но получается, что карусель можно прокрутить только 1 раз, дошел до крайней позиции и все, обратно не крутится.
Я просто поставил период автопрокрутки 2 минуты, вроде лучше, но тоже, иногда перестают работать стрелки.
Правда здесь такая штука: вот докрутил я карусель до конца списка, хочу обратно, если я веду курсор к другой стрелке по площади карусели, то стрелка не работает ( не всегда, но 8 раз из 10 точно). А если вывести курсор за край карусели, а потом уже на стрелку, то все нормально - крутит. Надеюсь, понятно объяснил. Я сначала подумал, что это я гребу, но как-то очень четко это срабатывает.
Вообще, меня такая работа карусели устраивает, не самая востребованная вещь на сайте, но если есть какой-нибудь несложный способ сделать её вообще безотказной, то буду очень благодарен.
#8
Отправлено 29 Июль 2014 - 04:21
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 3, orientation: 'v' }); });замените на:
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 3, circular: true, orientation: 'v' }); });
после данного изменения отключится автоскролл, также появится прокрутка на последнем товаре.
#9
Отправлено 29 Июль 2014 - 08:22
#10
Отправлено 02 Август 2014 - 08:12
Vaccina (25 Июль 2014 - 02:23) писал:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }заменим на:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }
Далее найдем:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }заменим на:
.jscarousal-contents-vertical > div > div { height: 125px; margin: 8px 8px 8px 14px; width: 140px; }
Далее находим:
.jscarousal-vertical { background-color: #121212; border: 1px solid #7a7677; height: 460px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 140px; }меняем на:
.jscarousal-vertical { background-color: #121212; border: 1px solid #7a7677; height: 460px; margin: 0; overflow: hidden; padding: 0; position: relative; }
1. Помогите, пожалуйста сделать нормальный размер фото и отцентровать их
2. Как сделать, чтоб карусель сама не перемещалась, а только, когда на стрелки нажимаешь (не с первой до последней, а по кругу - так можно?)
#11
Отправлено 02 Август 2014 - 11:09
autoscroll: true поменять на autoscroll: false. А чтоб крутилась по кругу, нужно в этом же коде добавить circular: true.
В общем будет так:
$(document).ready(function() { $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 3, circular: true, orientation: 'v' }); });
#12
Отправлено 02 Август 2014 - 11:43
Новичок Ю (02 Август 2014 - 08:12) писал:
1. Помогите, пожалуйста сделать нормальный размер фото и отцентровать их
.jscarousal-vertical { width: 140px; height: 460px; background-color: #121212; border: solid 1px #7A7677; margin: 0; padding: 0; position: relative; overflow: hidden; }и замените на:
.jscarousal-vertical { width: 235px; height: 460px; background-color: #121212; border: solid 1px #7A7677; margin: 0; padding: 0; position: relative; overflow: hidden; }затем:
.jscarousal-contents-vertical { overflow: hidden; width: 140px; height: 410px; }замените на:
.jscarousal-contents-vertical { overflow: hidden; width: 140px; height: 410px; }код:
.jscarousal-contents-vertical > div > div { width: 140px; height: 125px; margin: 8px; margin-left: 14px; }смените:
.jscarousal-contents-vertical > div > div { width: 140px; height: 125px; margin: 8px; margin-left: 25px; }а:
.jscarousal-contents-vertical img { width: 110px; height: 80px; border: solid 1px #7A7677; }поменяйте на:
.jscarousal-contents-vertical img { width: 180px; height: 100px; border: solid 1px #7A7677; }
#13
Отправлено 02 Август 2014 - 14:32
1. Как изменить цвет и размер (сделать поуже) подложки под фото?
2. Где менять размер фото - у меня ширина=0,8 высоты (приблизительно) - надо, чтоб было поуже, чем сейчас
3. Как выровнять подписи к фото (сейчас они по-разному от левого края все и наползают на фото) - надо отцентровать с фото и раздвинуть по высоте
#14
Отправлено 02 Август 2014 - 16:05
Новичок Ю (02 Август 2014 - 14:32) писал:
1. Как изменить цвет и размер (сделать поуже) подложки под фото?
2. Где менять размер фото - у меня ширина=0,8 высоты (приблизительно) - надо, чтоб было поуже, чем сейчас
3. Как выровнять подписи к фото (сейчас они по-разному от левого края все и наползают на фото) - надо отцентровать с фото и раздвинуть по высоте
Screenshot_12.jpg
Изменить цвет подложки можно меняя параметр
background-color: #ECE0E0;в jsCarousel-2.0.0.css в блоке
.jscarousal-vertical { width: 235px; height: 460px; background-color: #ECE0E0; border: solid 1px #7C5A62; margin: 0; padding: 0; position: relative; overflow: hidden; }
Размер меняется там же параметрами
width: 235px; height: 460px;
Размер фото можно изменить в jsCarousel-2.0.0.css в
.jscarousal-contents-vertical img { width: 180px; height: 100px; border: solid 1px #7A7677; }меняя параметры
width: 180px; height: 100px;
Сдвинуть фото можно добавив параметр
margin-left: "X"px;в блок
.jscarousal-contents-vertical > div { position: absolute; top: 40px; width: 100%; height: 820px; overflow: hidden; }
Выровнять подписи к фото можно меняя параметр
width: 140px;
.jscarousal-contents-vertical > div > div { width: 140px; height: 125px; margin: 8px; margin-left: 25px; }
#16
Отправлено 02 Август 2014 - 18:05
Новичок Ю (02 Август 2014 - 17:46) писал:
2. Соответственно, под фото не видно надписи
3. Поля со стрелками разной высоты - как подравнять?
Screenshot_5.jpg
.jscarousal-contents-vertical > div > div { width: 140px; height: 125px; margin: 8px; margin-left: 25px; }
измените параметр
height: 125px;так, чтобы фото были на достаточном расстоянии друг от друга, так же в итоге придется в
.jscarousal-vertical { width: 235px; height: 460px; background-color: #fff; border: solid 1px #7C5A62; margin: 0; padding: 0; position: relative; overflow: hidden; }чтобы отображались три фотографии.
Нижнее поле со стрелкой можно откорректировать, заменив
.jscarousal-vertical-forward { background-image: url(bottom_arrow.jpg); background-repeat: no-repeat; background-position: top; }на
.jscarousal-vertical-forward { background-image: url(bottom_arrow.jpg); background-repeat: no-repeat; background-position: top; margin-top: 5px; }меняя 5 в "margin-top: 5px;" на любое числовое значение(в плюс или минус, в том числе на отрицательное значение) сможете выставить поле по вашему усмотрению.
#17
Отправлено 02 Август 2014 - 23:38
Подскажите, а для чего там в коде есть настройки по вертикали (мы их меняем), а есть по горизонтали? Слайдер может двигать картинку по горизонтали?
В коде слайдера все параметры в пикселях, т.е. он не резиновый (как моя "Радость")? На разных экранах не будет разваливаться картинка?
#18
Отправлено 03 Август 2014 - 06:50
Новичок Ю (02 Август 2014 - 23:38) писал:
Screenshot_8.jpg
Подскажите, а для чего там в коде есть настройки по вертикали (мы их меняем), а есть по горизонтали? Слайдер может двигать картинку по горизонтали?
В коде слайдера все параметры в пикселях, т.е. он не резиновый (как моя "Радость")? На разных экранах не будет разваливаться картинка?
Здравствуйте, напишите через какой браузер Вы смотрите
#20
Отправлено 03 Август 2014 - 09:58
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных