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


При Наведении Курсора Чтобы Открывалось Окно Быстрого Просмотре Товара

Автор Rosalina, 26 сент. 2015 22:44

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

#1 Rosalina

Rosalina

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

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

Отправлено 26 Сентябрь 2015 - 22:44

Добрый день. Помогите, пожалуйста, сделать так как на картинке. необходимо при наведении курсора в каталоге и на главной открывалось окно быстрого просмотра товара. А всплывающие сейчас иконки убрать совсем.

Аккаунт SL-359131

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

  • 2.JPG
  • 3.JPG

#2 Vaccina

Vaccina

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

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

Отправлено 29 Сентябрь 2015 - 01:52

В шаблоне main.js найдите:
/* Быстрый просмотр товара */
(function() {
	$(document).on('click', '.fast-quick', function() {

замените на:
/* Быстрый просмотр товара */
(function() {
	$(document).on('mouseover', '.item-img-info .product-image', function() {


Далее в main.css найдите:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
	visibility: visible;
	opacity: 1;
	left: 0px;
	bottom: 0px;
}
замените на:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
	visibility: visible;
	opacity: 1;
	left: 0px;
	bottom: 0px;
	display: none;
}

#3 Rosalina

Rosalina

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

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

Отправлено 29 Сентябрь 2015 - 07:32

Просмотр сообщенияVaccina (29 Сентябрь 2015 - 01:52) писал:

В шаблоне main.js найдите:
/* Быстрый просмотр товара */
(function() {
$(document).on('click', '.fast-quick', function() {

замените на:
/* Быстрый просмотр товара */
(function() {
$(document).on('mouseover', '.item-img-info .product-image', function() {


Далее в main.css найдите:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
visibility: visible;
opacity: 1;
left: 0px;
bottom: 0px;
}
замените на:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
visibility: visible;
opacity: 1;
left: 0px;
bottom: 0px;
display: none;
}

Спасибо, получилось!!!

#4 magiya1984

magiya1984

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

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

Отправлено 15 Ноябрь 2015 - 02:47

Доброго времени!! Скажите в шаблоне спорт есть возможность реализовать данную инструкцию Аккаунт SL-353614

#5 yuragravi

yuragravi

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

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

Отправлено 26 Ноябрь 2015 - 19:22

Просмотр сообщенияVaccina (29 Сентябрь 2015 - 01:52) писал:

В шаблоне main.js найдите:
/* Быстрый просмотр товара */
(function() {
$(document).on('click', '.fast-quick', function() {

замените на:
/* Быстрый просмотр товара */
(function() {
$(document).on('mouseover', '.item-img-info .product-image', function() {


Далее в main.css найдите:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
visibility: visible;
opacity: 1;
left: 0px;
bottom: 0px;
}
замените на:
.products-grid .item:hover .item-inner .item-img .item-box-hover {
visibility: visible;
opacity: 1;
left: 0px;
bottom: 0px;
display: none;
}

Здравствуйте! Как сделать то же самое, только всплывать должно краткое описание товара?

#6 magiya1984

magiya1984

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

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

Отправлено 26 Ноябрь 2015 - 23:46

присоединяюсь

#7 Vaccina

Vaccina

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

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

Отправлено 28 Ноябрь 2015 - 03:55

Просмотр сообщенияmagiya1984 (15 Ноябрь 2015 - 02:47) писал:

Доброго времени!! Скажите в шаблоне спорт есть возможность реализовать данную инструкцию Аккаунт SL-353614

В конец main.js добавьте:
/* Быстрый просмотр товара */
(function() {
$('.item').hover(function() {
	 $.get($(this).find('.product-name a').attr('href'), function(content) {
	 $.fancybox.close();
	 $.fancybox({
		 autoSize: true,
		 maxWidth: 960,
		 content: $(content).find('.product-view'),
		 afterShow: function() {
		 // Обновление доступности модификаций
		 MainFunctions();
		 outFunctions();
		 goodspage();
		 $('.fancybox-inner .box-up-sell').hide();
		 $('.fancybox-inner .wrap-qty').hide();
		 }
	 });
	 });
	 return (false);
});
})();
/* END Быстрый просмотр товара */

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

Просмотр сообщенияyuragravi (26 Ноябрь 2015 - 19:22) писал:

Здравствуйте! Как сделать то же самое, только всплывать должно краткое описание товара?

В конец main.js добавьте:
$(document).ready(function() {
$(".item").hover(function(){
	 var fast_view = $('meta[itemprop="description"]').attr('content');
$.fancybox({
width : '70%',
height : '70%',
autoSize : false,
closeClick : true,
openEffect : 'none',
content: $('<div>').html(fast_view),
closeEffect : 'none'
});
});
});

#8 magiya1984

magiya1984

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

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

Отправлено 01 Декабрь 2015 - 18:29

/* Быстрый просмотр товара */
(function() {
$('.item').hover(function() {
         $.get($(this).find('.product-name a').attr('href'), function(content) {
         $.fancybox.close();
         $.fancybox({
                 autoSize: true,
                 maxWidth: 960,
                 content: $(content).find('.product-view'),
                 afterShow: function() {
                 // Обновление доступности модификаций
                 MainFunctions();
                 outFunctions();
                 goodspage();
                 $('.fancybox-inner .box-up-sell').hide();
                 $('.fancybox-inner .wrap-qty').hide();
                 }
         });
         });
         return (false);
});
})();
/* END Быстрый просмотр товара */

Данный код не работает на сайте. Скажите как вывести через отдельную кнопку.Аккаунт SL-353614

#9 Vaccina

Vaccina

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

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

Отправлено 02 Декабрь 2015 - 02:03

Уточните пожалуйста, где вам необходимо расположить данную кнопку и как она должна выглядеть?
/* Быстрый просмотр товара */
(function() {
$('.item').hover(function() {
		 $.get($(this).find('.product-name a').attr('href'), function(content) {
		 $.fancybox.close();
		 $.fancybox({
				 autoSize: true,
				 maxWidth: 960,
				 content: $(content).find('.product-view'),
				 afterShow: function() {
				 // Обновление доступности модификаций
				 MainFunctions();
				 outFunctions();
				 goodspage();
				 $('.fancybox-inner .box-up-sell').hide();
				 $('.fancybox-inner .wrap-qty').hide();
				 }
		 });
		 });
		 return (false);
});
})();
/* END Быстрый просмотр товара */

замените на:
/* Быстрый просмотр товара */
$(function() {
$('.item').hover(function() {
		 $.get($(this).find('.product-name a').attr('href'), function(content) {
		 $.fancybox.close();
		 $.fancybox({
				 autoSize: true,
				 maxWidth: 960,
				 content: $(content).find('.product-view'),
				 afterShow: function() {
				 // Обновление доступности модификаций
				 MainFunctions();
				 outFunctions();
				 goodspage();
				 $('.fancybox-inner .box-up-sell').hide();
				 $('.fancybox-inner .wrap-qty').hide();
				 }
		 });
		 });
		 return (false);
});
})();
/* END Быстрый просмотр товара */

#10 magiya1984

magiya1984

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

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

Отправлено 02 Декабрь 2015 - 21:42

доброго времени!!! Спасибо за ответ скрин прикрепил где должна быть кнопка(товары на главной новинки хиты продаж). Хочу Вас сразу попросить что-бы не возвращаться к этой теме. Можно сделать при быстром просмотре товара не выводилось с эти товаром смотрят и кнопки в корзину быстрый заказ показывались как в обычной карточке товаров а то там куски кнопок не кликабельные. За ранее спасибо

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

  • site123.jpg

#11 Vaccina

Vaccina

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

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

Отправлено 03 Декабрь 2015 - 04:03 

/* Быстрый просмотр товара */
$(function() {
$('.item').hover(function() {
				 $.get($(this).find('.product-name a').attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();
/* END Быстрый просмотр товара */

замените на:
/* Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
				 $.get($(this).attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();
/* END Быстрый просмотр товара */

Далее в шаблоне Товары найдите:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-image">
						<img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sport{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}"  itemprop="image">
					  </a>

после него пропишите:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="quick_view">Быстрый просмотр</a>

В main.css найдите:
.products-grid .item .item-inner .item-img {
	text-align: center;
	position: relative;
	overflow: hidden;
}

после него пропишите:
.quick_view {
	position: absolute;
	display: none !important;
	width: auto !important;
	height: 40px !important;
	background: #09AFE7;
	color: #fff;
	z-index: 99 !important;
	top: 40%;
	margin: 0 2px;
	left: 0;
	right: 0;
	line-height: 40px;
	font-weight: bold;
}
.item:hover .quick_view {
	display: block !important;
}

#12 magiya1984

magiya1984

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

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

Отправлено 03 Декабрь 2015 - 07:09

Да то что надо спасибо большое

#13 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 27 Июнь 2016 - 23:33

Просмотр сообщенияVaccina (03 Декабрь 2015 - 04:03) писал:

/* Быстрый просмотр товара */
$(function() {
$('.item').hover(function() {
				 $.get($(this).find('.product-name a').attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();
/* END Быстрый просмотр товара */

замените на:
/* Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
				 $.get($(this).attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();
/* END Быстрый просмотр товара */

Далее в шаблоне Товары найдите:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-image">
					 <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sport{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
					 </a>

после него пропишите:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="quick_view">Быстрый просмотр</a>

В main.css найдите:
.products-grid .item .item-inner .item-img {
text-align: center;
position: relative;
overflow: hidden;
}

после него пропишите:
.quick_view {
position: absolute;
display: none !important;
width: auto !important;
height: 40px !important;
background: #09AFE7;
color: #fff;
z-index: 99 !important;
top: 40%;
margin: 0 2px;
left: 0;
right: 0;
line-height: 40px;
font-weight: bold;
}
.item:hover .quick_view {
display: block !important;
}

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

#14 Stasya

Stasya

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

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

Отправлено 30 Июнь 2016 - 17:44

Просмотр сообщенияОльга 94 (27 Июнь 2016 - 23:33) писал:

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

Получается, что пользователь сможет попасть на страницу товара, только после того как кликнет по всплывшей формочке быстрого просмотра?

#15 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 11 Июль 2016 - 10:07

Просмотр сообщенияStasya (30 Июнь 2016 - 17:44) писал:

Получается, что пользователь сможет попасть на страницу товара, только после того как кликнет по всплывшей формочке быстрого просмотра?

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

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

  • в.png

#16 MikDark

MikDark

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

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

Отправлено 11 Июль 2016 - 10:16

Просмотр сообщенияОльга 94 (11 Июль 2016 - 10:07) писал:

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

В шаблоне main.js попробуйте заменить код:
/*Быстрый просмотр товара
$(function() {
$('.item').hover(function() {
				 $.get($(this).find('.product-name a').attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();*/

на

/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
				 $.get($(this).find('.product-name a').attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();

#17 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 11 Июль 2016 - 10:19

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

В шаблоне main.js попробуйте заменить код:
/*Быстрый просмотр товара
$(function() {
$('.item').hover(function() {
				 $.get($(this).find('.product-name a').attr('href'), function(content) {
				 $.fancybox.close();
				 $.fancybox({
								 autoSize: true,
								 maxWidth: 960,
								 content: $(content).find('.product-view'),
								 afterShow: function() {
								 // Обновление доступности модификаций
								 MainFunctions();
								 outFunctions();
								 goodspage();
								 $('.fancybox-inner .box-up-sell').hide();
								 $('.fancybox-inner .wrap-qty').hide();
								 }
				 });
				 });
				 return (false);
});
})();*/

на

/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
$.get($(this).find('.product-name a').attr('href'), function(content) {
$.fancybox.close();
$.fancybox({
autoSize: true,
maxWidth: 960,
content: $(content).find('.product-view'),
afterShow: function() {
// Обновление доступности модификаций
MainFunctions();
outFunctions();
goodspage();
$('.fancybox-inner .box-up-sell').hide();
$('.fancybox-inner .wrap-qty').hide();
}
});
});
return (false);
});
})();


В ответ я получила "Запрошенный контент не может быть загружен."

#18 Stasya

Stasya

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

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

Отправлено 13 Июль 2016 - 11:21

Просмотр сообщенияОльга 94 (11 Июль 2016 - 10:19) писал:

В ответ я получила "Запрошенный контент не может быть загружен."

В файле main.js найдите блок 
/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
								 $.get($(this).find('.product-name a').attr('href'), function(content) {
								 $.fancybox.close();
								 $.fancybox({
																 autoSize: true,
																 maxWidth: 960,
																 content: $(content).find('.product-view'),
																 afterShow: function() {
																 // Обновление доступности модификаций
																 MainFunctions();
																 outFunctions();
																 goodspage();
																 $('.fancybox-inner .box-up-sell').hide();
																 $('.fancybox-inner .wrap-qty').hide();
																 }
								 });
								 });
								 return (false);
});
})();
/* END Быстрый просмотр товара */
и замените его на 
/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
								 $.get($(this).parents(".item-inner").find('.product-name a').attr('href'), function(content) {
								 $.fancybox.close();
								 $.fancybox({
																 autoSize: true,
																 maxWidth: 960,
																 content: $(content).find('.product-view'),
																 afterShow: function() {
																 // Обновление доступности модификаций
																 MainFunctions();
																 outFunctions();
																 goodspage();
																 $('.fancybox-inner .box-up-sell').hide();
																 $('.fancybox-inner .wrap-qty').hide();
																 }
								 });
								 });
								 return (false);
});
});
/* END Быстрый просмотр товара */

Для того чтобы кнопка Быстрый просмотр присутствовала всегда на карточке товара, в файле main.css найдите строку 
.item:hover .quick_view {display: block;}
и замените ее на 
.item .quick_view {display: block;}

#19 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 13 Июль 2016 - 19:55

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

В файле main.js найдите блок 
/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
								 $.get($(this).find('.product-name a').attr('href'), function(content) {
								 $.fancybox.close();
								 $.fancybox({
																 autoSize: true,
																 maxWidth: 960,
																 content: $(content).find('.product-view'),
																 afterShow: function() {
																 // Обновление доступности модификаций
																 MainFunctions();
																 outFunctions();
																 goodspage();
																 $('.fancybox-inner .box-up-sell').hide();
																 $('.fancybox-inner .wrap-qty').hide();
																 }
								 });
								 });
								 return (false);
});
})();
/* END Быстрый просмотр товара */
и замените его на 
/*Быстрый просмотр товара */
$(function() {
$('.quick_view').click(function() {
								 $.get($(this).parents(".item-inner").find('.product-name a').attr('href'), function(content) {
								 $.fancybox.close();
								 $.fancybox({
																 autoSize: true,
																 maxWidth: 960,
																 content: $(content).find('.product-view'),
																 afterShow: function() {
																 // Обновление доступности модификаций
																 MainFunctions();
																 outFunctions();
																 goodspage();
																 $('.fancybox-inner .box-up-sell').hide();
																 $('.fancybox-inner .wrap-qty').hide();
																 }
								 });
								 });
								 return (false);
});
});
/* END Быстрый просмотр товара */
Для того чтобы кнопка Быстрый просмотр присутствовала всегда на карточке товара, в файле main.css найдите строку 
.item:hover .quick_view {display: block;}
и замените ее на 
.item .quick_view {display: block;}


Класс, все работает, спасибо большое. Только мне ни к чему эта кнопка в постоянном режиме, пусть остается так как есть только при наведении..
Еще подскажите пожалуйста как менять дизайн самих этих модальных окон. У меня во первых там все съехало куда то. Во вторых фон не устраивает, нужен белый ну и еще может быть что нибудь понадобится изменить...

#20 Stasya

Stasya

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

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

Отправлено 14 Июль 2016 - 14:17

Просмотр сообщенияОльга 94 (13 Июль 2016 - 19:55) писал:

Класс, все работает, спасибо большое. Только мне ни к чему эта кнопка в постоянном режиме, пусть остается так как есть только при наведении..
Еще подскажите пожалуйста как менять дизайн самих этих модальных окон. У меня во первых там все съехало куда то. Во вторых фон не устраивает, нужен белый ну и еще может быть что нибудь понадобится изменить...

Не могли бы Вы прислать скриншот неправильного отображения?
Обратно в Каталог товаров


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

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

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