Сообщений в теме: 28

[z1129]

Здравствуйте.
Можно в шаблон "Сияние" установить блок просмотренных товаров из шаблона "Движение"?

Аккаунт SL-203304

[Сake]

В шаблоне "HTML" вы можете найти код просмотренных товаров

<!-- Последние товары, просмотренные пользователем -->
				  {% 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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;"><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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{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="Перейти на страницу &laquo;{goods.NAME}&raquo;">
						<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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{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="Положить &laquo;{recently_viewed_goods.NAME}&raquo; в корзину">Купить</a>
			 </p>
			</form>
			   
			  </div>
			</td>
		  </tr>
		  {% ENDFOR %}
		</tr>
	  </table>
					</div>
				  </li>
				  {% ENDIF %}
				  <!-- Последние товары, просмотренные пользователем -->

[z1129]

Спасибо, но я, наверное, неправильно задал вопрос.
Я вставил код и у меня просто появилась цена и кнопка "купить".
   Мне нужно, чтобы был слайдер или карусель, не знаю как правильно это называется.


Уже была инструкция как поставить блок просмотренных товаров из темы "Вечность"(http://forum.storela...ренных-товаров/), только мне нужно, чтоб прокрутка была вертикальной и в окне отображалась не одна позиция, а 2-3. В теме "Движение" все как раз так как мне надо.

[Vaccina]

Вертикальная карусель "jsCarousel V 2.0.0" для товаров "Вы смотрели"
Основная страница: 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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;"><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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;"><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="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{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;
}

[z1129]

Это именно то, что я хотел. Спасибо огромное.

Мне бы вот только еще сделать, чтоб карусель сама не прокручивалась...

[Vaccina]

Попробуйте в main.js

$(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' });
});

[z1129]

Здравствуйте.   Не мог 2 дня вам написать

Я так пробовал (autoscroll: false), но получается, что карусель можно прокрутить только 1 раз, дошел до крайней позиции и все, обратно не крутится.

Я просто поставил период автопрокрутки 2 минуты, вроде лучше, но тоже, иногда перестают работать стрелки.
Правда здесь такая штука: вот докрутил я карусель до конца списка, хочу обратно, если я веду курсор к другой стрелке по площади карусели, то стрелка не работает ( не всегда, но 8 раз из 10 точно). А если вывести курсор за край карусели, а потом уже на стрелку, то все нормально - крутит. Надеюсь, понятно объяснил. Я сначала подумал, что это я гребу, но как-то очень четко это срабатывает.  

  Вообще, меня такая работа карусели устраивает, не самая востребованная вещь на сайте, но если есть какой-нибудь несложный способ сделать её вообще безотказной, то буду очень благодарен.

[Vaccina]

$(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' });
});

после данного изменения отключится автоскролл, также появится прокрутка на последнем товаре.

[z1129]

Спасибо.

[Новичок Ю]

Здравствуйте! У меня тема Радость. Сделала по инструкции, но не смогла найти у себя вот это

Vaccina (25 Июль 2014 - 02:23) писал:

Далее остается выровнять товары внутри, в 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;
}

1. Помогите, пожалуйста сделать нормальный размер фото и отцентровать их
2. Как сделать, чтоб карусель сама не перемещалась, а только, когда на стрелки нажимаешь (не с первой до последней, а по кругу - так можно?)

[z1129]

Чтоб карусель не крутилась сама нужно в main.js , в коде, который вы вставляли,
  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' });
});

[Alekseys]

Новичок Ю (02 Август 2014 - 08:12) писал:

Здравствуйте! У меня тема Радость. Сделала по инструкции, но не смогла найти у себя вот это


1. Помогите, пожалуйста сделать нормальный размер фото и отцентровать их

Здравствуйте. В jsCarousel-2.0.0.css найдите:

.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;
}

[Новичок Ю]

Спасибо! Еще несколько вопросов:
1. Как изменить цвет и размер (сделать поуже) подложки под фото?
2. Где менять размер фото - у меня ширина=0,8 высоты (приблизительно) - надо, чтоб было поуже, чем сейчас
3. Как выровнять подписи к фото (сейчас они по-разному от левого края все и наползают на фото) - надо отцентровать с фото и раздвинуть по высоте

[Alekseys]

Новичок Ю (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;
}

[Новичок Ю]

Спасибо)) Пока не получилось с размером фото - при изменении размера они наехали друг на друга
2. Соответственно, под фото не видно надписи
3. Поля со стрелками разной высоты - как подравнять?

[Alekseys]

Новичок Ю (02 Август 2014 - 17:46) писал:

Спасибо)) Пока не получилось с размером фото - при изменении размера они наехали друг на друга
2. Соответственно, под фото не видно надписи
3. Поля со стрелками разной высоты - как подравнять?
Screenshot_5.jpg

В jsCarousel-2.0.0.css в

.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;" на любое числовое значение(в плюс или минус, в том числе на отрицательное значение) сможете выставить поле по вашему усмотрению.

[Новичок Ю]

Спасибо! Все получилось, но при движении на паре фото происходит "наезд". Надо где-то раздвинуть блок, но не пойму где (слишком много разных div-ов).

Подскажите, а для чего там в коде есть настройки по вертикали (мы их меняем), а есть по горизонтали? Слайдер может двигать картинку по горизонтали?
В коде слайдера все параметры в пикселях, т.е. он не резиновый (как моя "Радость")? На разных экранах не будет разваливаться картинка?

[Danil]

Новичок Ю (02 Август 2014 - 23:38) писал:

Спасибо! Все получилось, но при движении на паре фото происходит "наезд". Надо где-то раздвинуть блок, но не пойму где (слишком много разных div-ов).
Screenshot_8.jpg
Подскажите, а для чего там в коде есть настройки по вертикали (мы их меняем), а есть по горизонтали? Слайдер может двигать картинку по горизонтали?
В коде слайдера все параметры в пикселях, т.е. он не резиновый (как моя "Радость")? На разных экранах не будет разваливаться картинка?

Здравствуйте, напишите через какой браузер Вы смотрите

[Новичок Ю]

Danil (03 Август 2014 - 06:50) писал:

Здравствуйте, напишите через какой браузер Вы смотрите

Добрый день! Через Яндекс-браузер.

[Новичок Ю]

Посмотрела на другом экране с разрешением 1600х900 - фотографии сдвинулись левее и надписи там, где были в 2 строки, стали в 3 и развалились, наезд при движении стал больше и на многих фотках. Браузер там тоже Яндекс. Я margin-left в % указывала. Как правильно? Може еще где-то в % надо?