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


Тема Новогодняя - Добавить Модификации В Карточках Каталога

Автор ogonek7777, 06 июля 2017 13:12

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

#1 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 06 Июль 2017 - 13:12

2017-07-06_13-03-40.png

Здравствуйте. как сделать, чтобы при наведении курсора, в карточках, имеющих более одной модификации, вниз увеличивалась карточка товара и там прописывались имеющиеся модификации через запятую. В моем магазине модификации не имеют разделений на цвета и пр. (разных характеристик). То есть это только разный размер товара, например, и все. Слово модификация или название модификации выводить не надо, только сами значения: 10см, 20см и тд.

#2 Vaccina

Vaccina

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

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

Отправлено 07 Июль 2017 - 07:34

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

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>


после него вставьте:
<div class="mods" {% FOR mods %}{% IF goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
	 {%FOR v %}
	 {goods.mods.v.VALUE}<span>, </span>
	 {% ENDFOR %}
{% ENDFOR %}
</div>

Далее зайдите в main.css - найдите:
.products-grid .item .item-inner {display: inline-block;position: relative;overflow: hidden;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}


замените на:
.products-grid .item .item-inner {display: inline-block;position: relative;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}
.products-grid .item .product-shop .mods{display: none;position: absolute; top: 99%; left:-0.5%;z-index: 10;background: #fff;padding: 10px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;width: 101%;}
.products-grid .item:hover .product-shop .mods{display: block;}
.products-grid .item:hover .product-shop .mods span:last-child{display: none;}

#3 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 07 Июль 2017 - 14:04

Просмотр сообщенияVaccina (07 Июль 2017 - 07:34) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>


после него вставьте:
<div class="mods" {% FOR mods %}{% IF goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
	 {%FOR v %}
	 {goods.mods.v.VALUE}<span>, </span>
	 {% ENDFOR %}
{% ENDFOR %}
</div>

Далее зайдите в main.css - найдите:
.products-grid .item .item-inner {display: inline-block;position: relative;overflow: hidden;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}


замените на:
.products-grid .item .item-inner {display: inline-block;position: relative;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}
.products-grid .item .product-shop .mods{display: none;position: absolute; top: 99%; left:-0.5%;z-index: 10;background: #fff;padding: 10px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;width: 101%;}
.products-grid .item:hover .product-shop .mods{display: block;}
.products-grid .item:hover .product-shop .mods span:last-child{display: none;}

У меня последний код вот такой

.products-grid .item .item-inner {display: inline-block;position: relative;overflow: hidden;border: 1px solid #fce3bd;max-width: 100%;width: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

Это не совсем то (невнимательно, возможно, прочли).
1. Модификации должны быть самыми нижними (см. фото).
2. Карточка должна удлиняться и модификации подставляться только при наведении курсора.
3. Изначально (если не наводить курсор), все карточки должны быть как были изначально.
4. Если курсор убрать, модификации должны опять скрыться.
5. Хотелось бы изменить стили модификаци: расположение от левого края (а  не по центру), и столбиком (=каждая с новой строки).

Сейчас выглядит не очень
2017-07-07_13-59-03.png

Спасибо!

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

  • 2017-07-07_13-59-03.png
  • 2017-07-07_13-59-03.png

#4 Vaccina

Vaccina

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

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

Отправлено 12 Июль 2017 - 08:22

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

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>


после него вставьте:
<div class="mods" {% FOR mods %}{% IF goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
		 {%FOR v %}
		 {goods.mods.v.VALUE}<span>,<br/></span>
		 {% ENDFOR %}
{% ENDFOR %}
</div>

Далее зайдите в main.css - найдите:
.products-grid .item .item-inner {display: inline-block;position: relative;overflow: hidden;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}


замените на:
.products-grid .item .item-inner {display: inline-block;position: relative;border: 1px solid #fce3bd;max-width: 100%;width: 270px;}
.products-grid .item .product-shop .mods{text-align: left; display: none;position: absolute; top: 99%; left:-0.5%;z-index: 10;background: #fff;padding: 10px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;width: 101%;}
.products-grid .item:hover .product-shop .mods{display: block;}
.products-grid .item:hover .product-shop .mods span:last-child{display: none;}

Результат:
Иконы Иисуса Христа Спаса и Божьей Матери Казанской в Москве.png

#5 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 12 Июль 2017 - 12:50

ЗАРАБОТАЛО! Оказывается, проблема была в этой глючной теме - в ней даже чистка кэша не срабатывает и надо очень долго ждать ,  пока появятся изменения.
ПОпыталась повторить фокус в сопутке и с этим товаром смотрят - где-то ошиблась, не подставляются модификации.
СПасибо!

#6 metry

metry

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

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

Отправлено 12 Июль 2017 - 14:52

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:
.products-grid .item .product-shop .mods{text-align: left; display: none;position: absolute; top: 99%; left:-0.3%;z-index: 10;background: #fff;padding: 10px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;width: 101%;font-size: 12px;}

- задайте свое значение для font-size чтобы уменьшить шрифт.

далее найдите:

.products-grid .item {padding: 0 15px 30px;}

замените на:
.products-grid .item {margin: 0 15px 30px;}

#7 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 12 Июль 2017 - 15:10

Просмотр сообщенияmetry (12 Июль 2017 - 14:52) писал:

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:
.products-grid .item .product-shop .mods{text-align: left; display: none;position: absolute; top: 99%; left:-0.3%;z-index: 10;background: #fff;padding: 10px;border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;width: 101%;font-size: 12px;}

- задайте свое значение для font-size чтобы уменьшить шрифт.

далее найдите:

.products-grid .item {padding: 0 15px 30px;}

замените на:
.products-grid .item {margin: 0 15px 30px;}
Спасибо!

#8 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 09 Ноябрь 2017 - 13:28

2017-11-09_13-27-33.jpg Здраствуйте!
Добавленный по этой ветке вывод модификаций в товарных карточках Сопутки и Рекомендаций перестал отражаться. Появляется только рамка от них.

#9 Vaccina

Vaccina

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

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

Отправлено 10 Ноябрь 2017 - 08:26

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

Попробуйте следующее, зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<div class="mods" {% FOR mods %}{% IF related_views_goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
				 {%FOR v %}
				 {related_views_goods.mods.v.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>
                
замените на:
<div class="mods" {% FOR goods_mod_list %}{% IF related_views_goods.goods_mod_list.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR goods_mod_list %}
				 {%FOR goods_mod_property_list %}
				 {related_views_goods.goods_mod_list.goods_mod_property_list.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

далее найдите:
<div class="mods" {% FOR mods %}{% IF related_goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
				 {%FOR v %}
				 {related_goods.mods.v.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

замените на:
<div class="mods" {% FOR goods_mod_list %}{% IF related_goods.goods_mod_list.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR goods_mod_list %}
				 {%FOR goods_mod_property_list %}
				 {related_goods.goods_mod_list.goods_mod_property_list.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

#10 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 11 Ноябрь 2017 - 19:48

Просмотр сообщенияVaccina (10 Ноябрь 2017 - 08:26) писал:

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

Попробуйте следующее, зайдите в раздел Сайт - Редактор шаблонов - Товар - найдите:
<div class="mods" {% FOR mods %}{% IF related_views_goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
				 {%FOR v %}
				 {related_views_goods.mods.v.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

замените на:
<div class="mods" {% FOR goods_mod_list %}{% IF related_views_goods.goods_mod_list.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR goods_mod_list %}
				 {%FOR goods_mod_property_list %}
				 {related_views_goods.goods_mod_list.goods_mod_property_list.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

далее найдите:
<div class="mods" {% FOR mods %}{% IF related_goods.mods.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR mods %}
				 {%FOR v %}
				 {related_goods.mods.v.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>

замените на:
<div class="mods" {% FOR goods_mod_list %}{% IF related_goods.goods_mod_list.length <= 1 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
{% FOR goods_mod_list %}
				 {%FOR goods_mod_property_list %}
				 {related_goods.goods_mod_list.goods_mod_property_list.VALUE}<span>,<br/></span>
				 {% ENDFOR %}
{% ENDFOR %}
</div>
Cпасибо. Вакцина! РАботает. Но вкладка открывается только на 0,7см. все остальное не видно.
ПС. Можно ли сделать сопутку и С этим товаром смотрят не по 3 а по 4?

#11 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 14 Ноябрь 2017 - 10:51

ау

#12 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 17 Ноябрь 2017 - 23:02

ау

#13 Ирина345

Ирина345

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

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

Отправлено 20 Ноябрь 2017 - 15:45

Просмотр сообщенияogonek7777 (11 Ноябрь 2017 - 19:48) писал:

Cпасибо. Вакцина! РАботает. Но вкладка открывается только на 0,7см. все остальное не видно.
ПС. Можно ли сделать сопутку и С этим товаром смотрят не по 3 а по 4?
здравствуйте, добавьте в конец файла main.css код
.related-goods .owl-carousel .owl-stage-outer, .related-views .owl-carousel .owl-stage-outer {
	overflow: initial;
}

что бы увеличить количество товаров в карусели, найдите в файле main.js код
// С этим товаром смотрят
jQuery(function($) {
  var owl = $('.related-views .products-grid');
  // Показывать\Скрывать навигацию
  owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
	var items = event.item.count;
	var size = event.page.size;
	if (items < size){
	  $('.related-views .navigation').hide();
	} else {
	  $('.related-views .navigation').show();
	}
  });
  // Запуск слайдера
  owl.owlCarousel({
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  480:{items:1},
	  641:{items:2},
	  991:{items:3},
	  1400:{items:4}
	},

замените на
// С этим товаром смотрят
jQuery(function($) {
  var owl = $('.related-views .products-grid');
  // Показывать\Скрывать навигацию
  owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
	var items = event.item.count;
	var size = event.page.size;
	if (items < size){
	  $('.related-views .navigation').hide();
	} else {
	  $('.related-views .navigation').show();
	}
  });
  // Запуск слайдера
  owl.owlCarousel({
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  480:{items:1},
	  641:{items:2},
	  991:{items:4},
	  1400:{items:4}
	},

далее найдите
// Сопутствующие товары
jQuery(function($) {
  var owl = $('.related-goods .products-grid');
  // Показывать\Скрывать навигацию
  owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
	var items = event.item.count;
	var size = event.page.size;
	if (items < size){
	  $('.related-goods .navigation').hide();
	} else {
	  $('.related-goods .navigation').show();
	}
  });
  // Запуск слайдера
  owl.owlCarousel({
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  480:{items:1},
	  641:{items:2},
	  991:{items:3},
	  1400:{items:4}
	},\
замените на
// Сопутствующие товары
jQuery(function($) {
  var owl = $('.related-goods .products-grid');
  // Показывать\Скрывать навигацию
  owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
	var items = event.item.count;
	var size = event.page.size;
	if (items < size){
	  $('.related-goods .navigation').hide();
	} else {
	  $('.related-goods .navigation').show();
	}
  });
  // Запуск слайдера
  owl.owlCarousel({
	responsiveClass:true,
	responsive:{
	  0:{items:1},
	  480:{items:1},
	  641:{items:2},
	  991:{items:4},
	  1400:{items:4}
	},

#14 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 21 Ноябрь 2017 - 21:07

Ирина, спасибо, получилось!
Обратно в Каталог товаров


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

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

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