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


Быстрый Просмотр


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

#101 tolikkansk

tolikkansk

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

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

Отправлено 28 Август 2014 - 18:01

Как сделать, чтобы всплывающее окно было не на всю страницу? Как на картинке

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

  • 2.png


#102 tolikkansk

tolikkansk

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

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

Отправлено 28 Август 2014 - 20:16

Просмотр сообщенияDanil (27 Август 2014 - 10:11) писал:

Здравствуйте.
1)Зайдите в cartpanel.css и найдите код
#float-cart {
position: fixed;
top: 0;
left: 50%;
margin: 0 auto;
margin-left: -500px;
width: 1000px;
z-index: 10000;
color: #fff;
background-color: #ECEA2E;
padding: 10px 0 10px;
display: none;
font: 10pt arial, helvetics, sens-serif;
border-bottom: 1px solid #009900;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
И замените на
#float-cart {
position: fixed;
top: 0;
left: 50%;
margin: 0 auto;
margin-left: -500px;
width: 1000px;
z-index: 2000;
color: #fff;
background-color: #ECEA2E;
padding: 10px 0 10px;
display: none;
font: 10pt arial, helvetics, sens-serif;
border-bottom: 1px solid #009900;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
2) Зайдите в main.css и добавьте код
.pad-box .goodsDataOpinion {
display: none;
}

В html найдите код
Скрытый текст
И замените на
Скрытый текст
Там же найдите код
Скрытый текст
И замените на
Скрытый текст
3) Данная ошибка не наблюдается.

Ещё вопрос: почему когда  убираю отзывы из быстрого просмотра они исчезают и со страницы товара?

#103 MikDark

MikDark

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

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

Отправлено 28 Август 2014 - 20:22

Просмотр сообщенияtolikkansk (28 Август 2014 - 20:16) писал:

Ещё вопрос: почему когда  убираю отзывы из быстрого просмотра они исчезают и со страницы товара?

Уточните, по какой инструкции Вы убираете отзывы?

#104 tolikkansk

tolikkansk

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

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

Отправлено 28 Август 2014 - 20:35

Просмотр сообщенияDanil (27 Август 2014 - 10:11) писал:

Здравствуйте.
1)Зайдите в cartpanel.css и найдите код
#float-cart {
position: fixed;
top: 0;
left: 50%;
margin: 0 auto;
margin-left: -500px;
width: 1000px;
z-index: 10000;
color: #fff;
background-color: #ECEA2E;
padding: 10px 0 10px;
display: none;
font: 10pt arial, helvetics, sens-serif;
border-bottom: 1px solid #009900;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
И замените на
#float-cart {
position: fixed;
top: 0;
left: 50%;
margin: 0 auto;
margin-left: -500px;
width: 1000px;
z-index: 2000;
color: #fff;
background-color: #ECEA2E;
padding: 10px 0 10px;
display: none;
font: 10pt arial, helvetics, sens-serif;
border-bottom: 1px solid #009900;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
2) Зайдите в main.css и добавьте код
.pad-box .goodsDataOpinion {
display: none;
}

В html найдите код
Скрытый текст
И замените на
Скрытый текст
Там же найдите код
Скрытый текст
И замените на
Скрытый текст
3) Данная ошибка не наблюдается.

Вот этой инструкцией.

#105 MikDark

MikDark

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

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

Отправлено 28 Август 2014 - 20:48

Просмотр сообщенияtolikkansk (28 Август 2014 - 20:35) писал:

Вот этой инструкцией.

Вместо:
.pad-box .goodsDataOpinion {
display: none;
}

напишите:

table.arcticmodal-container_i .goodsDataOpinion {
display: none;
}

и отмените изменения из сообщения
http://forum.storela...ку/#entry155641

#106 Сake

Сake

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

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

Отправлено 29 Август 2014 - 01:18

Просмотр сообщенияsotil (28 Август 2014 - 11:31) писал:

Изображениеsotil (27 August 2014 - 14:54) писал:

Спасибо, Cake! Заработало
Подскажите как реализовать такую функцию?


У вас сейчас именно так и реализовано, за исключением увеличения размера блока товара. Корректно так реализовать не получиться, так как при увеличении блока (при наведении) будут опускаться нижние блоки с товаром. В результате блоки с товарами будут судорожно прыгать.
Может посмотрите на этот сайтwildberries? тут реализовано, то что меня интересует
Хотелось бы чтобы при наведении на блок с товаром в "таблице" , предлагались дополнительные картинки для просмотра.
А расширения просто накладываются на смежные товарные блоки

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

.goodsListItemBlock {
  position: relative;
}
.goodsListItem,
.content_page,
.goodsListItemBlock {
  overflow: visible;
}
.goodsListItemImages {
  background: #fff;
  border: 1px solid #ccc;
  display: none;
  height: 300px;
  left: -62px;
  position: absolute;
  top: -1px;
  width: 60px;
  z-index: 9999;
}
.goodsListItemBlock:hover .goodsListItemImages {
  display: block;
}
.goodsListImage a {
  border-bottom: 1px solid #ccc;
  display: block;
  padding: 10px 0;
}
.goodsListImage a:hover {
  outline: 2px solid #8052c2;
}

далее в файл main.js вставьте код

$(function() {
  $('.goodsListImage a').click(function() {
	$(this).closest('.goodsListItemBlock')
	.find('.goodsListItemImage img').attr('src', $(this).attr('href'));
	return(false);
  }).hover(function() {
	$(this).trigger('click');
  });
});

далее в шаблон "Товары" после строки

<div class="goodsListItemBlock withBorder cornerAll">

вставьте код

<div class="goodsListItemImages">
  {% FOR images %}
	 <div class="goodsListImage">
		 <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
	 </div>
  {% ENDFOR %}
</div>

Просмотр сообщенияtolikkansk (28 Август 2014 - 08:06) писал:

Когда меняю  main.js выдает очень много ошибок(

Возможно вы использовали не предназначенный вам код для файла main.js. В сообщении http://forum.storela...100#entry155407 приведено 2 разных содержимого файла main.js. Используйте только содержимое предназначенное для вашего файла. Смотрите сообщение по цитатам.

Просмотр сообщенияtolikkansk (28 Август 2014 - 17:30) писал:

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

Выполните замену содержимого файла main.js как было сказано ранее в сообщении http://forum.storela...100#entry155407

#107 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 29 Август 2014 - 08:43

Просмотр сообщенияСake (29 Август 2014 - 01:18) писал:

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

.goodsListItemBlock {
position: relative;
}
.goodsListItem,
.content_page,
.goodsListItemBlock {
overflow: visible;
}
.goodsListItemImages {
background: #fff;
border: 1px solid #ccc;
display: none;
height: 300px;
left: -62px;
position: absolute;
top: -1px;
width: 60px;
z-index: 9999;
}
.goodsListItemBlock:hover .goodsListItemImages {
display: block;
}
.goodsListImage a {
border-bottom: 1px solid #ccc;
display: block;
padding: 10px 0;
}
.goodsListImage a:hover {
outline: 2px solid #8052c2;
}

далее в файл main.js вставьте код

$(function() {
$('.goodsListImage a').click(function() {
$(this).closest('.goodsListItemBlock')
.find('.goodsListItemImage img').attr('src', $(this).attr('href'));
return(false);
}).hover(function() {
$(this).trigger('click');
});
});

далее в шаблон "Товары" после строки

<div class="goodsListItemBlock withBorder cornerAll">

вставьте код

<div class="goodsListItemImages">
{% FOR images %}
	 <div class="goodsListImage">
		 <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
	 </div>
{% ENDFOR %}
</div>


Подскажите как можно ограничить количество картинок до 5 при этом сохранить иконку основной картинки

#108 Сake

Сake

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

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

Отправлено 29 Август 2014 - 23:38

Вам необходимо ранее добавленный код для шаблона "Товары"

<div class="goodsListItemImages">
{% FOR images %}
		 <div class="goodsListImage">
				 <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
		 </div>
{% ENDFOR %}
</div>

заменить на код

<div class="goodsListItemImages">
{% FOR images %}{% IF goods.images.index > 5 %}{break}{% ENDIF %}
		 <div class="goodsListImage">
				 <a href="{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
		 </div>
{% ENDFOR %}
</div>


#109 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 30 Август 2014 - 06:50

Просмотр сообщенияСake (29 Август 2014 - 23:38) писал:

Вам необходимо ранее добавленный код для шаблона "Товары"

<div class="goodsListItemImages">
{% FOR images %}
		 <div class="goodsListImage">
				 <a href="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
		 </div>
{% ENDFOR %}
</div>

заменить на код

<div class="goodsListItemImages">
{% FOR images %}{% IF goods.images.index > 5 %}{break}{% ENDIF %}
		 <div class="goodsListImage">
				 <a href="{goods.images.OTHER}{% ENDIF %}"><img src="{goods.images.ICON}" alt="" /></a>
		 </div>
{% ENDFOR %}
</div>
Не заметил чтобы что-то поменялось

#110 Ирина345

Ирина345

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

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

Отправлено 30 Август 2014 - 11:24

Просмотр сообщенияsotil (30 Август 2014 - 06:50) писал:

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

#111 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 30 Август 2014 - 11:50

Просмотр сообщенияИрина345 (30 Август 2014 - 11:24) писал:

Здравствуйте,, Вы не выполнили инструкцию из сообщения выше.
Говорит " ошибка компиляции шаблона, неверный синтаксис, неожиданный тег "ENDIF " строка 211,



Убрал endif , вроде заработало

Еще надо сделать, чтобы исходная картинка возвращалась на место после просмотра доп картинок

#112 Ирина345

Ирина345

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

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

Отправлено 30 Август 2014 - 12:34

Просмотр сообщенияsotil (30 Август 2014 - 11:50) писал:

Говорит " ошибка компиляции шаблона, неверный синтаксис, неожиданный тег "ENDIF " строка 211
Изменения произвели.

#113 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 30 Август 2014 - 12:57

Просмотр сообщенияИрина345 (30 Август 2014 - 12:34) писал:

Изменения произвели.
Спасибо! Посмотрите ещё вопрос в сообщении повыше

#114 Сake

Сake

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

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

Отправлено 02 Сентябрь 2014 - 02:08

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

$(function() {
  $('.goodsListItemBlock').mouseleave(function() {
	var objImageLink = $(this).find('.goodsListImage:first a');
	if (objImageLink.length) {
	  $(this).find('.goodsListItemImage img').attr('src', objImageLink.attr('href')); 
	}
  });
});


#115 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 02 Сентябрь 2014 - 06:52

Спасибо!
Ещё хочется сделать нижний блок с кнопкой "быстрый просмотр" появлялся при наведении , также как справа появляются доп картинки

#116 Ирина345

Ирина345

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

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

Отправлено 02 Сентябрь 2014 - 13:15

Просмотр сообщенияsotil (02 Сентябрь 2014 - 06:52) писал:

Спасибо!
Ещё хочется сделать нижний блок с кнопкой "быстрый просмотр" появлялся при наведении , также как справа появляются доп картинки
Здравствуйте, уточните где именно требуется скрыть блок "быстрый просмотр", у Вас на сайте он везде скрыт.

#117 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 02 Сентябрь 2014 - 21:39

Просмотр сообщенияИрина345 (02 Сентябрь 2014 - 13:15) писал:

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

1 Как показано на картинке, товарный блок в списке "ТАБЛИЦА", если на нём нет курсора занимает минимальную площадь, при наведении курсора он должен расширяться вправо (реализовано) и вниз (необходимо сделать), чтобы в правом наросте показались дополнительные картинки (реализовано), в нижнем была кнопка "быстрый просмотр" (реализовано наполовину). Задумка позволяет сэкономить занимаемую площадь, например уменьшив исходный товарный блок или увеличить картинку в блоке.

2 Когда всплывает модальное окно, добавленный блок с доп картинками, некоторое время остаётся поверх модального окна, пока мышка не сдвинется.

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

  • Блок1.png


#118 Ирина345

Ирина345

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

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

Отправлено 02 Сентябрь 2014 - 22:00

Просмотр сообщенияsotil (02 Сентябрь 2014 - 21:39) писал:

1 Как показано на картинке, товарный блок в списке "ТАБЛИЦА", если на нём нет курсора занимает минимальную площадь, при наведении курсора он должен расширяться вправо (реализовано) и вниз (необходимо сделать), чтобы в правом наросте показались дополнительные картинки (реализовано), в нижнем была кнопка "быстрый просмотр" (реализовано наполовину). Задумка позволяет сэкономить занимаемую площадь, например уменьшив исходный товарный блок или увеличить картинку в блоке.

2 Когда всплывает модальное окно, добавленный блок с доп картинками, некоторое время остаётся поверх модального окна, пока мышка не сдвинется.
Здравствуйте,
1.если реализовать Вашу идею, то товар к сожалению при наведение будет сдвигаться(пример на скриншоте)

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

  • 23411.jpg


#119 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 02 Сентябрь 2014 - 22:27

Просмотр сообщенияИрина345 (02 Сентябрь 2014 - 22:00) писал:

Здравствуйте,
1.если реализовать Вашу идею, то товар к сожалению при наведение будет сдвигаться(пример на скриншоте)
Ведь справа получилось как надо. Нарост просто накладывается на смежный блок. Надо и снизу так же

#120 Vaccina

Vaccina

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

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

Отправлено 03 Сентябрь 2014 - 02:29

попробуйте следующее, в main.css найдите:
.fastview {
	background: #f1f1f1;
	border: 1px solid #d9d9d9;
	border-radius: 10px;
	clear: both;
	display: none;
	height: 18px;
	margin: 0 auto;
	padding: 5px;
	width: 150px;
}
замените на:
.fastview {
	background: none repeat scroll 0 0 #f1f1f1;
	border: 2px solid #ff8b36;
	bottom: -34px;
	clear: both;
	display: none;
	height: 20px;
	left: -1px;
	margin: 0 auto;
	padding: 5px;
	position: absolute;
	width: 206px;
	z-index: 99;
}





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

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