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


При Выборе Модификации Менялась Картинка

лазурь модификация цвет картинка

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

#21 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 20:20

Просмотр сообщенияMr.Nito (19 Январь 2018 - 20:15) писал:

1. В main.js

заменил

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
				var url = $(this).attr('href');
				$('.general-img').find('img').attr('src', url).attr('data-large', url);
				$('.general-img').find('a').attr('href', url);
				return false;
});

на


// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
				var url = $(this).attr('href');
				$('.general-img').find('img').attr('src', url).attr('data-large', url);
				$('.general-img').find('a').attr('href', url);
				$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
				return false;
});

Рамку убрал  в cloud-zoom.css
/* This is the zoom window. */
.cloud-zoom-big {
border: 0px solid #ccc;
overflow:hidden;
}

2.Иконку с увеличением:

Код

в main.js
// Открытие изображения товара при клике
$(document).ready(function() {
$('.zoom-icon').on('click',function(){
$('.popup-gallery').magnificPopup({
	 delegate: 'a',
	 type: 'image',
	 tLoading: 'Загружаем изображение #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
	 enabled: true,
	 navigateByImgClick: true,
	 preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
	 tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
	 titleSrc: function(item) {
	 return item.el.attr('title') + '<small>StoreLand.ru</small>';
	 }
}
}).magnificPopup('open');
})
});

в шаблон Товар

{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=spring" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
{% ELSE %}
	 <div class="zoom-icon">
	 <style>
		 .zoom-icon {
			 width: 60px;
			 height: 60px;
			 position: absolute;
			 z-index: 10000;
			 left: 0;
			 top: 0;
			 cursor: pointer;
			 background: url('{ASSETS_IMAGES_PATH}zoom-in.png');
		 }
	 </style>
	 </div>
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom " id="zoom1" rel="position: 'inside', showTitle: false, adjustX: 19, adjustY:0" style="position: relative; display: block;">
<img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
</a>
{% ENDIF %}
Спасибо огромное Вам.
Как можно починить карусель галереи внизу, под главным фото, перестала работать ?

#22 Mr.Nito

Mr.Nito

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

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

Отправлено 19 Январь 2018 - 20:27

Просмотр сообщенияDevidINA (19 Январь 2018 - 20:20) писал:

Спасибо огромное Вам.
Как можно починить карусель галереи внизу, под главным фото, перестала работать ?

Добавил скрипт карусели
перед
// Фильтр отзывов

код

// Другие изображение товара
$(document).ready(function(){
  var $ = jQuery;
  if ($('#thumblist').length) {
	$('#thumblist').carouFredSel({
	  prev  : '.thumblist-box .prev',
	  next  : '.thumblist-box .next',
	  width : '100%',
	  auto  : false,
	  swipe : {
	  onMouse : false,
	  onTouch : true
	}
	}).parents('.thumblist-box').removeClass('load');
  }
});


#23 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 20:43

Спасибо. Еще такой момент. При выборе модификации меняется цена на обычный шрифт, как можно исправить ?
И как сделать иконки модификаций круглыми и убрать "нет в наличии" почему-то дублируется.

Просмотр сообщенияMr.Nito (19 Январь 2018 - 20:27) писал:

Добавил скрипт карусели
перед
// Фильтр отзывов

код

// Другие изображение товара
$(document).ready(function(){
var $ = jQuery;
if ($('#thumblist').length) {
$('#thumblist').carouFredSel({
prev : '.thumblist-box .prev',
next : '.thumblist-box .next',
width : '100%',
auto : false,
swipe : {
onMouse : false,
onTouch : true
}
}).parents('.thumblist-box').removeClass('load');
}
});


Спасибо. Еще такой момент. При выборе модификации меняется цена на обычный шрифт, как можно исправить ?
И как сделать иконки модификаций круглыми и убрать текст из них, только в цветах. И убрать надпись "нет в наличии" почему-то дублируется.

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

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

  • 3213.png
  • 3213.png


#24 DevidINA

DevidINA

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

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

Отправлено 19 Январь 2018 - 21:05

Просмотр сообщенияMr.Nito (19 Январь 2018 - 20:27) писал:

Добавил скрипт карусели
перед
// Фильтр отзывов

код

// Другие изображение товара
$(document).ready(function(){
var $ = jQuery;
if ($('#thumblist').length) {
$('#thumblist').carouFredSel({
prev : '.thumblist-box .prev',
next : '.thumblist-box .next',
width : '100%',
auto : false,
swipe : {
onMouse : false,
onTouch : true
}
}).parents('.thumblist-box').removeClass('load');
}
});
Еще большая просьба.
Можно подвинуть карточку товара к боковому меню. Хлебные крошки сделать меньше и все поднять ближе к верхнему меню.
и рейтинг товаров сделать немного больше и загнать под цену.
Спасибо!

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

  • 332131.png


#25 Mr.Nito

Mr.Nito

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

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

Отправлено 20 Январь 2018 - 17:46

Просмотр сообщенияDevidINA (19 Январь 2018 - 20:43) писал:

Спасибо. Еще такой момент. При выборе модификации меняется цена на обычный шрифт, как можно исправить ?
И как сделать иконки модификаций круглыми и убрать "нет в наличии" почему-то дублируется.




Спасибо. Еще такой момент. При выборе модификации меняется цена на обычный шрифт, как можно исправить ?
И как сделать иконки модификаций круглыми и убрать текст из них, только в цветах. И убрать надпись "нет в наличии" почему-то дублируется.

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

Модификации поправил в main.js
								 // Цена товара
								 goodsPriceNow.html(modificationPriceNowFormated).find('> span').addClass('price');

								 // Старая цена товара
								 if(modificationPriceOld>modificationPriceNow) {
								  goodsPriceOld.html(modificationPriceOldFormated).find('> span').addClass('price');

Убрал текст и закруглил кнопки модификаций
.goodsDataMainModificationsBlockProperty input {display:none;}
.goodsDataMainModificationsBlockProperty input + label {
font-size:0;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
height: 35px;
line-height: 33px;
margin: 4px;
text-align: center;
width: 35px;
border-radius: 50%;
}

Чтобы на товаре появилась надпись "нет в наличии" необходимо в админ панели установить ему в поле "Остаток:"    0

Рейтинг перенёс и увеличил
.product-shop .ratings {float: right;}
заменил на
.product-shop .ratings {float:left;}
.product-shop .ratings .rating-box {
	transform: scale(1.3);
	margin-left: 10px;
}

Отступ хлебных крошек от навигации
/* Хлебные крошки */
#breadcrumbs {position: relative;padding: 20px 0 1px;}
Отступ контента от хлебных крошек
#content {margin: 30px 0;position: relative;z-index: 0;min-height: 400px;}


#26 DevidINA

DevidINA

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

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

Отправлено 20 Январь 2018 - 19:51

Просмотр сообщенияMr.Nito (20 Январь 2018 - 17:46) писал:

Модификации поправил в main.js
								 // Цена товара
								 goodsPriceNow.html(modificationPriceNowFormated).find('> span').addClass('price');

								 // Старая цена товара
								 if(modificationPriceOld>modificationPriceNow) {
								 goodsPriceOld.html(modificationPriceOldFormated).find('> span').addClass('price');

Убрал текст и закруглил кнопки модификаций
.goodsDataMainModificationsBlockProperty input {display:none;}
.goodsDataMainModificationsBlockProperty input + label {
font-size:0;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
height: 35px;
line-height: 33px;
margin: 4px;
text-align: center;
width: 35px;
border-radius: 50%;
}

Чтобы на товаре появилась надпись "нет в наличии" необходимо в админ панели установить ему в поле "Остаток:" 0

Рейтинг перенёс и увеличил
.product-shop .ratings {float: right;}
заменил на
.product-shop .ratings {float:left;}
.product-shop .ratings .rating-box {
transform: scale(1.3);
margin-left: 10px;
}

Отступ хлебных крошек от навигации
/* Хлебные крошки */
#breadcrumbs {position: relative;padding: 20px 0 1px;}
Отступ контента от хлебных крошек
#content {margin: 30px 0;position: relative;z-index: 0;min-height: 400px;}
Спасибо огромное. Вы супер!
Можно еще произвести некоторые изменения

Сузить расстояние между карточкой товара и боковым меню
Вернуть наместо (напротив цены) рейтинг
Сделать цену больше. Цену больше делать не надо!
Передвинуть корзину и сделать клавиши "количество такими как на фото"
и сверху в хлебных крошках убрать дублирование названия товара
А еще поставить в верхнее меню поиск, он у меня вообще с сайта пропал
Спасибо!!

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

  • 4215.png


#27 Mr.Nito

Mr.Nito

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

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

Отправлено 24 Январь 2018 - 09:51

Просмотр сообщенияDevidINA (20 Январь 2018 - 19:51) писал:

Спасибо огромное. Вы супер!
Можно еще произвести некоторые изменения

Сузить расстояние между карточкой товара и боковым меню
Вернуть наместо (напротив цены) рейтинг
Сделать цену больше. Цену больше делать не надо!
Передвинуть корзину и сделать клавиши "количество такими как на фото"
и сверху в хлебных крошках убрать дублирование названия товара
А еще поставить в верхнее меню поиск, он у меня вообще с сайта пропал
Спасибо!!
На данный момент Ваш магазин заблокирован, для выполнения изменений нужно пополнить баланс магазина.

#28 DevidINA

DevidINA

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

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

Отправлено 24 Январь 2018 - 19:34

Просмотр сообщенияMr.Nito (24 Январь 2018 - 09:51) писал:

На данный момент Ваш магазин заблокирован, для выполнения изменений нужно пополнить баланс магазина.
Я рассчитываю на получение оперативной помощи после его разблокировки. Спасибо!

#29 SERGHEI.B

SERGHEI.B

    Новичок

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

Отправлено 29 Апрель 2019 - 11:44

Просмотр сообщенияStasya (18 Август 2016 - 11:59) писал:

Для реализации смены главное картинки при смене модификации Вы можете воспользоваться этой инструкцией.

Добрый день.
Сделал всё по инструкции но эффекта не получил
Добавилась еще один блок в которой уже меняется картинка в зависимости от цвета.
В основной галереи товара изменений нет.
Нужна помощь

#30 SERGHEI.B

SERGHEI.B

    Новичок

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

Отправлено 29 Апрель 2019 - 12:00

Просмотр сообщенияMikDark (31 Июль 2016 - 13:47) писал:

Здравствуйте. Изменения Вам произвел.
Добрый день.
Сделал всё по инструкции но эффекта не получил
Добавилась еще один блок в которой уже меняется картинка в зависимости от цвета.
В основной галереи товара изменений нет.
Нужна помощь.

#31 Vaccina

Vaccina

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

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

Отправлено 30 Апрель 2019 - 08:39

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

Укажите номер аккаунта магазина и ссылку на товар, где в модификациях добавлены изображения (можно без указания домена)

#32 SERGHEI.B

SERGHEI.B

    Новичок

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

Отправлено 03 Май 2019 - 11:54

Просмотр сообщенияVaccina (30 Апрель 2019 - 08:39) писал:

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

Укажите номер аккаунта магазина и ссылку на товар, где в модификациях добавлены изображения (можно без указания домена)

Добрый день
SL-474467
http://laporta.store...nom-3?from=Y2Zh
Вот этот товар.
Вроде делал по инструкции и ни одной несколько вариантов перепробовал, подскажите в чем проблема

#33 Vaccina

Vaccina

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

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

Отправлено 15 Май 2019 - 05:14

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

В редактировании товара в описании модификации добавьте:
<img src="*">

вместо символа * укажите ссылку на фото модификации

#34 srebrov

srebrov

    Новичок

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

Отправлено 09 Октябрь 2019 - 13:07

Доброго дня! Не получается сделать смену изображения при выборе цвета.

В шаблоне Товар добавил (по сообщениям с этой ветки) это:
{% IF GOODS_MOD_DESCRIPTION %}
{GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}

{% ENDIF %}

Общий вид:
<div class="general-img popup-gallery">
	 {% IF GOODS_IMAGE_EMPTY %}
	 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=azure" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
	 <a href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
{% IF GOODS_MOD_DESCRIPTION %}
	 {GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
	 {%ELSE%}
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" class="goods-image-medium" />{% ENDIF %}
	 </a>

В описании модификации добавляю картинку а-ля:
<img src="*">

В итоге при смене цвета из выпадающего меню получаю следующее:
Изображение

Т.е. главная картинка не меняется у меня. Очень прошу помощи.. Аккаунт SL-484875, страница товара /goods/Magnit-na-holodilnik-BVURChB?mod_id=208323956#show_tab_3
Спасибо.

#35 srebrov

srebrov

    Новичок

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

Отправлено 14 Октябрь 2019 - 11:46

Anyone help me?

#36 Vaccina

Vaccina

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

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

Отправлено 15 Октябрь 2019 - 05:35

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

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

#37 srebrov

srebrov

    Новичок

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

Отправлено 15 Октябрь 2019 - 11:04

Номер аккаунта добавил, товар вот:
http://urupsuvenir.r...3956#show_tab_3

#38 Vaccina

Vaccina

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

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

Отправлено 19 Октябрь 2019 - 05:18

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.product-shop .goodsDataMainModificationsBlock div {margin: 0 10px 10px 10px;float: left;}
.product-shop .goodsDataMainModificationsBlock div:first-child {margin-left:0;}

замените на:
.product-shop .goodsDataMainModificationsBlock div {margin: 0 10px 10px 10px;float: left;}
.product-shop .goodsDataMainModificationsBlock div:first-child {margin-left:0;}
.product-shop .goodsDataMainModificationsBlock .goodsDataMainModificationsDescriptionBlock img {display: none;}

далее зайдите в main.js - найдите:
		// Отправим запись об ошибке на сервер
		sendError('no modification by slug '+slug);
		alert('К сожалению сейчас не получается подобрать модификацию соответствующую выбранным параметрам.');
	  }

после него вставьте:
src_new = $('.goodsDataMainModificationsDescriptionBlock').find('img').attr('src');
$('.general-img img').attr('src', src_new);
$('.general-img a').attr('href', src_new);
$('#cloud-zoom-big').css('background-image','url(src_new)');


#39 srebrov

srebrov

    Новичок

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

Отправлено 21 Октябрь 2019 - 15:47

Просмотр сообщенияVaccina (19 Октябрь 2019 - 05:18) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.product-shop .goodsDataMainModificationsBlock div {margin: 0 10px 10px 10px;float: left;}
.product-shop .goodsDataMainModificationsBlock div:first-child {margin-left:0;}

замените на:
.product-shop .goodsDataMainModificationsBlock div {margin: 0 10px 10px 10px;float: left;}
.product-shop .goodsDataMainModificationsBlock div:first-child {margin-left:0;}
.product-shop .goodsDataMainModificationsBlock .goodsDataMainModificationsDescriptionBlock img {display: none;}

далее зайдите в main.js - найдите:
	 // Отправим запись об ошибке на сервер
	 sendError('no modification by slug '+slug);
	 alert('К сожалению сейчас не получается подобрать модификацию соответствующую выбранным параметрам.');
	 }

после него вставьте:
src_new = $('.goodsDataMainModificationsDescriptionBlock').find('img').attr('src');
$('.general-img img').attr('src', src_new);
$('.general-img a').attr('href', src_new);
$('#cloud-zoom-big').css('background-image','url(src_new)');

Спасибо большое! Теперь все работает как надо :rolleyes:





Темы с аналогичным тегами лазурь, модификация, цвет, картинка

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

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