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


Новинки В Два Ряда

Автор M0zg, 06 апр. 2014 00:30
карусель новинки расширение

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

#61 M0zg

M0zg

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

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

Отправлено 15 Май 2014 - 09:57

Просмотр сообщенияM0zg (15 Май 2014 - 09:44) писал:

т.е. вы предлагаете перебить все артикулы, которые у меня без дефисов, снабидить их дефисом. И сделать экранизацию скриптом?

#62 wickedslim

wickedslim

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

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

Отправлено 15 Май 2014 - 16:51

Просмотр сообщенияVaccina (14 Май 2014 - 02:33) писал:

В переменной {BODY} выводится инфа из шаблона Страница, можете вставить и после него, это не принципиально, мы ведь код товаров меняем. блоки всегда можно выровнять, чтобы убрать описание достаточно удалить строку:
<p>{index_page_new_goods.DESCRIPTION_SHORT}</p>




Инструкция по поиску по артикулу:
http://forum.storela...ск-по-артикулу/
Все сделал, помогите выровнять этот блок sportpower18.ru
и сделать перелистывание по 3 товара
и еще, при наведении на товарную позицию, она никак не подсвечивается

#63 MikDark

MikDark

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

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

Отправлено 15 Май 2014 - 17:19

Просмотр сообщенияwickedslim (15 Май 2014 - 16:51) писал:

Все сделал, помогите выровнять этот блок sportpower18.ru
и сделать перелистывание по 3 товара
и еще, при наведении на товарную позицию, она никак не подсвечивается

В шаблоне HTML найдите код:
jQuery('.d-carousel .carousel').jcarousel({
		 scroll: 1
});
});
</script>

и замените на:
jQuery('.d-carousel .carousel').jcarousel({
		 scroll: 3
});
});
</script>

Покажите, пожалуйста, на скриншоте как его выровнять и как должна подсвечиваться.

#64 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 08:05

Просмотр сообщенияMikDark (15 Май 2014 - 17:19) писал:

В шаблоне HTML найдите код:
jQuery('.d-carousel .carousel').jcarousel({
		 scroll: 1
});
});
</script>

и замените на:
jQuery('.d-carousel .carousel').jcarousel({
		 scroll: 3
});
});
</script>

Покажите, пожалуйста, на скриншоте как его выровнять и как должна подсвечиваться.
Съехал правый блок(меню, Вк, Просмотренные товары), следовательно увеличился слайдер.
Как должно выделяться показано на 2м скрине.
sportpower18.ru

Прикрепленные изображения

  • Безымянный.png
  • Безымянный2.png

#65 MikDark

MikDark

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

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

Отправлено 16 Май 2014 - 08:26

Просмотр сообщенияwickedslim (16 Май 2014 - 08:05) писал:

Съехал правый блок(меню, Вк, Просмотренные товары), следовательно увеличился слайдер.
Как должно выделяться показано на 2м скрине.
sportpower18.ru

В carousel.css добавьте код:
#wrapper .d-carousel ul li:hover {
-webkit-box-shadow: 0px 1px 2px 0px #F57119;
-moz-box-shadow: 0px 1px 2px 0px #F57119;
box-shadow: 0px 1px 2px 0px #F57119;
}

Блок съехал из-за карусели, т.к. она слишком большая. Ищем там же:
.d-carousel .jcarousel-container-horizontal {
width: 650px;
height: 325px;
padding: 0 45px;
}

и меняем на:
.d-carousel .jcarousel-container-horizontal {
width: 605px;
height: 325px;
padding: 0 45px;
}

#66 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 08:41

Просмотр сообщенияMikDark (16 Май 2014 - 08:26) писал:

В carousel.css добавьте код:
#wrapper .d-carousel ul li:hover {
-webkit-box-shadow: 0px 1px 2px 0px #F57119;
-moz-box-shadow: 0px 1px 2px 0px #F57119;
box-shadow: 0px 1px 2px 0px #F57119;
}

Блок съехал из-за карусели, т.к. она слишком большая. Ищем там же:
.d-carousel .jcarousel-container-horizontal {
width: 650px;
height: 325px;
padding: 0 45px;
}

и меняем на:
.d-carousel .jcarousel-container-horizontal {
width: 605px;
height: 325px;
padding: 0 45px;
}
Уже лучше, но теперь обрезаются блоки товара и при наведении контур не единен.

Прикрепленные изображения

  • Безымянный.png

#67 MikDark

MikDark

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

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

Отправлено 16 Май 2014 - 08:48

Просмотр сообщенияwickedslim (16 Май 2014 - 08:41) писал:

Уже лучше, но теперь обрезаются блоки товара и при наведении контур не единен.

В данном случае нужно уменьшать блоки. Ищем там же:
#wrapper .d-carousel ul li {
background: none;
background-color: #FFF;
-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
box-shadow: 0px 1px 2px 0px #b7b7b7;
padding: 15px;
width: 175px;
}

и меняем на:
#wrapper .d-carousel ul li {
background: none;
background-color: #FFF;
-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
box-shadow: 0px 1px 2px 0px #b7b7b7;
padding: 15px;
width: 160px;
}
#wrapper .d-carousel ul li img{
width:160px;
}

#68 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 10:11

Просмотр сообщенияMikDark (16 Май 2014 - 08:48) писал:

В данном случае нужно уменьшать блоки. Ищем там же:
#wrapper .d-carousel ul li {
background: none;
background-color: #FFF;
-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
box-shadow: 0px 1px 2px 0px #b7b7b7;
padding: 15px;
width: 175px;
}

и меняем на:
#wrapper .d-carousel ul li {
background: none;
background-color: #FFF;
-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
box-shadow: 0px 1px 2px 0px #b7b7b7;
padding: 15px;
width: 160px;
}
#wrapper .d-carousel ul li img{
width:160px;
}
Понять не могу, теперь картинки смещены вправо(

Прикрепленные изображения

  • Безымянный.png

#69 MikDark

MikDark

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

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

Отправлено 16 Май 2014 - 10:51

Просмотр сообщенияwickedslim (16 Май 2014 - 10:11) писал:

Понять не могу, теперь картинки смещены вправо(

Не полностью Вы заменили код. Еще эта часть осталась:
#wrapper .d-carousel ul li img{
width:160px;
}

#70 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 11:11

Просмотр сообщенияMikDark (16 Май 2014 - 10:51) писал:

Не полностью Вы заменили код. Еще эта часть осталась:
#wrapper .d-carousel ul li img{
width:160px;
}
Невнимателен, сейчас норм.
Кстати полистайте эту карусель http://sportpower18.ru/ , почему-то некоторые изображения большие, некоторые маленькие и они лесенкой

#71 MikDark

MikDark

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

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

Отправлено 16 Май 2014 - 11:13

Просмотр сообщенияwickedslim (16 Май 2014 - 11:11) писал:

Невнимателен, сейчас норм.
Кстати полистайте эту карусель, почему то некоторые изображения большие, некоторые маленькие и они лесенкой

Потому что изначально загружены изображения разных пропорций: одни более вытянутые, другие более квадратные. Вытягивать с помощью кода не  очень хорошо скажется на их качестве, поэтому лучше изначально загружать картинки с одинаковыми пропорциями.

#72 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 13:42

Просмотр сообщенияMikDark (16 Май 2014 - 11:13) писал:

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

Прикрепленные изображения

  • Безымянный1.png
  • Безымянный.png

#73 Dars

Dars

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

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

Отправлено 16 Май 2014 - 14:18

Просмотр сообщенияwickedslim (16 Май 2014 - 13:42) писал:

А как эту карусельку немного подвинуть, сделав как на 2м скрине
Пришлите, пожалуйста, ещё раз скриншот, как должно быть, никак не могу заметить изменения.

#74 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 14:54

Просмотр сообщенияDars (16 Май 2014 - 14:18) писал:

Пришлите, пожалуйста, ещё раз скриншот, как должно быть, никак не могу заметить изменения.
если сохранить на рабочий стол обе картинки и перелистывать их, то разница будет видна
т.е. левый край карусели, не считая стрелки, выровнять по левому краю tbody

Прикрепленные изображения

  • Безымянный1.png

#75 wickedslim

wickedslim

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

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

Отправлено 16 Май 2014 - 17:13

Просмотр сообщенияMikDark (16 Май 2014 - 11:13) писал:

Потому что изначально загружены изображения разных пропорций: одни более вытянутые, другие более квадратные. Вытягивать с помощью кода не  очень хорошо скажется на их качестве, поэтому лучше изначально загружать картинки с одинаковыми пропорциями.
в коде что был раньше или в Популярных товарах, довольно неплохо выравниваются

#76 Vaccina

Vaccina

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

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

Отправлено 17 Май 2014 - 02:27

Товары в карусели сейчас выровнены по высоте, на счет само карусели, в carousel.css найдите:
.d-carousel .jcarousel-prev-horizontal {
	background: url("http://design.sportpower18.ru/blog-arrows.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
	cursor: pointer;
	height: 28px;
	left: 0;
	margin-left: 3px;
	position: absolute;
	top: 149px;
	width: 15px;
}
удалите margin-left: 3px;

далее найдите:
.d-carousel .jcarousel-container-horizontal {
	height: 290px;
	padding: 0 45px;
	width: 605px;
}
замените на:
.d-carousel .jcarousel-container-horizontal {
	height: 290px;
	padding: 0 15px;
	width: 655px;
}
далее найдите:
.d-carousel .jcarousel-item-horizontal {
	margin: 3px 11px 3px 3px;
}
измените значение margin чтобы увеличить отступы у товаров в карусели

#77 wickedslim

wickedslim

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

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

Отправлено 17 Май 2014 - 09:19

Просмотр сообщенияVaccina (17 Май 2014 - 02:27) писал:

Товары в карусели сейчас выровнены по высоте, на счет само карусели, в carousel.css найдите:
.d-carousel .jcarousel-prev-horizontal {
background: url("http://design.sportpower18.ru/blog-arrows.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
cursor: pointer;
height: 28px;
left: 0;
margin-left: 3px;
position: absolute;
top: 149px;
width: 15px;
}
удалите margin-left: 3px;

далее найдите:
.d-carousel .jcarousel-container-horizontal {
height: 290px;
padding: 0 45px;
width: 605px;
}
замените на:
.d-carousel .jcarousel-container-horizontal {
height: 290px;
padding: 0 15px;
width: 655px;
}
далее найдите:
.d-carousel .jcarousel-item-horizontal {
margin: 3px 11px 3px 3px;
}
измените значение margin чтобы увеличить отступы у товаров в карусели
А еще как добавить цену?
изменил код
<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>						
		 </li>
		 {% ENDFOR index_page_new_goods %}
		 </ul>
</div>
на
<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>
<div class="goodsListItemPriceNew">
<a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a>
</div>
<div class="goodsListItemPriceOld">
{% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %}
<a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
{% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
<a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
{% ENDIF %}
</div>
						
		 </li>
		 {% ENDFOR index_page_new_goods %}
		 </ul>
</div>
не хочет работать

P.S. Все заработало
Вопрос другой, как их привести к единому виду, как в блоке "популярных товаров"

Прикрепленные изображения

  • Безымянный.png

Сообщение отредактировал wickedslim: 17 Май 2014 - 09:39

#78 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 17 Май 2014 - 10:02

Просмотр сообщенияwickedslim (17 Май 2014 - 09:19) писал:

А еще как добавить цену?
изменил код
<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>						
		 </li>
		 {% ENDFOR index_page_new_goods %}
		 </ul>
</div>
на
<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>
<div class="goodsListItemPriceNew">
<a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a>
</div>
<div class="goodsListItemPriceOld">
{% IF index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>index_page_new_goods.MIN_PRICE_NOW %}
<a href="{index_page_new_goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{index_page_new_goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
{% ELSEIF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
<a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
{% ENDIF %}
</div>
						
		 </li>
		 {% ENDFOR index_page_new_goods %}
		 </ul>
</div>
не хочет работать

P.S. Все заработало
Вопрос другой, как их привести к единому виду, как в блоке "популярных товаров"

Здравствуйте,

В файле "carousel.css".
Удалить код:
.d-carousel a {
text-decoration: none;
color: #4b4b4b;
}

.d-carousel a:hover {
text-decoration: none;
color: #1c1c1c;
}


В конец файла "main.css".
Добавить код:
.goodsListItemPriceNew a span {
color: #390;
font-size: 17px;
font-weight: bold;
}

#79 M0zg

M0zg

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

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

Отправлено 21 Май 2014 - 09:57

Всем привет, подскажите пожалуйста как поправить:

1) http://brasletus.ru/goods/Braslet-7 - содержимое таблицы слева от фотографий сдвинуто влево, потому что строка "Под заказ" короче чем "Товар есть в наличии"
2) http://brasletus.ru/goods/Braslet-9 - тут всё нормально.

Подскажите, как сделать таблицу так, чтобы не зависело от того что там написано, где ширину прописать.
Спасибо

Прикрепленные изображения

  • no.jpg
  • yes.jpg

#80 Сake

Сake

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

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

Отправлено 21 Май 2014 - 13:17

Добавьте в ваш файл стилей main.css следующий класс

.goodsDataMainModificationDataBlock {
  width: 150px;
}

Обратно в Главная


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Вопросы общие для всех шаблонов
  5. → Главная
  6. Privacy Policy