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


Как "сверстать" Краткое Описание

Автор Ярослав 196, 18 нояб. 2015 14:32

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

#21 Ярослав 196

Ярослав 196

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

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

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

Просмотр сообщенияVaccina (21 Ноябрь 2015 - 07:39) писал:

Просмотр сообщенияVaccina (21 Ноябрь 2015 - 07:39) писал:

У вас после него имеется пробел, вы хотите увеличить его?
Прикрепленный файл 123.jpg
пробел нужен между знаком рубля и дублированной модификации (в самом верху) Изображение

#22 Vaccina

Vaccina

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

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

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

Простите, не там искала.

В main.css добавьте:
.price-box .textchange {
	padding-left: 10px;
}

#23 Ярослав 196

Ярослав 196

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

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

Отправлено 21 Ноябрь 2015 - 08:13

Просмотр сообщенияVaccina (21 Ноябрь 2015 - 07:55) писал:

Простите, не там искала.

В main.css добавьте:
.price-box .textchange {
padding-left: 10px;
}
Спасибо!

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

#24 Ярослав 196

Ярослав 196

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

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

Отправлено 21 Ноябрь 2015 - 08:18

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

#25 MikDark

MikDark

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

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

Отправлено 21 Ноябрь 2015 - 11:29

Просмотр сообщенияЯрослав 196 (21 Ноябрь 2015 - 08:18) писал:

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

Этот текст будет индивидуален для каждого товара или общий для всех?

#26 Ярослав 196

Ярослав 196

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

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

Отправлено 21 Ноябрь 2015 - 12:38

Просмотр сообщенияMikDark (21 Ноябрь 2015 - 11:29) писал:

Этот текст будет индивидуален для каждого товара или общий для всех?
Будет общий для всех

#27 Ярослав 196

Ярослав 196

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

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

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

Вопрос #24 остается открытым

#28 Ярослав 196

Ярослав 196

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

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

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

Вопрос #24 так же остается открытым

#29 RedHead

RedHead

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

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

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

Просмотр сообщенияЯрослав 196 (22 Ноябрь 2015 - 08:46) писал:

Вопрос #24 остается открытым

Здравствуйте! Перед внесением изменений на сайт, создайте бэкап. Чтобы добавить всплывающее окно к краткому описанию, сделайте следующее:
В шаблоне Товар найдите строки:
<!-- Краткое описание -->
				<div class="short-description">
				  <p itemprop="description">{GOODS_DESCRIPTION_SHORT | htmlspecialchars_decode}</p>
				</div>
и замените на:
<!-- Краткое описание -->
				<div class="short-description">
				  <p itemprop="description">{GOODS_DESCRIPTION_SHORT | htmlspecialchars_decode}
				   <br>
				 <a href="javascript:PopUpShow()">Нажать, чтобы открыть всплывающее окно</a>

<div class="b-popup" id="popup1">
	<div class="b-popup-content">
	   
Информация для отображения во сплывающем окне   <br>
Информация для отображения во сплывающем окне   <br>
Информация для отображения во сплывающем окне   <br>
Информация для отображения во сплывающем окне   <br>
	<a href="javascript:PopUpHide()">Закрыть окно</a>
	</div>
</div>
<script>
	$(document).ready(function(){
		//Скрыть PopUp при загрузке страницы   
		PopUpHide();
	});
	//Функция отображения PopUp
	function PopUpShow(){
		$("#popup1").show();
	}
	//Функция скрытия PopUp
	function PopUpHide(){
		$("#popup1").hide();
	}
</script>
				   
				  </p>
				</div>

Далее в конец шаблона main.css добавьте
/*Всплывающее окно */
.b-popup{
	width:100%;
	min-height:100%;
	background-color: rgba(0,0,0,0.5);
	overflow:hidden;
	position:fixed;
	top:0px;
left: 0px;
}
.b-popup .b-popup-content{
	margin:200px auto 0px auto;
height:100%;
	max-width:500px;
	max-height: 375px;
	padding:10px;
   background-color: #ffffff;
	border-radius:5px;
	box-shadow: 0px 0px 10px #000;
}

Текстовое описание замените на необходимое.

#30 Ярослав 196

Ярослав 196

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

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

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

Просмотр сообщенияRedHead (23 Ноябрь 2015 - 10:37) писал:

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

#31 Ярослав 196

Ярослав 196

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

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

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

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

#32 RedHead

RedHead

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

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

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

Просмотр сообщенияЯрослав 196 (23 Ноябрь 2015 - 13:09) писал:

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

Попробуйте сделать следующее: (перед внесением изменений, создайте бэкап сайта)
В шаблоне Товар найдите строки:
<!-- Блок описания модификации -->
			<div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			  <div class="blockquote" itemprop="description">{GOODS_MOD_DESCRIPTION}</div>
			</div>
		</div>
Замените на:
<!-- Блок описания модификации -->
			<div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			  <div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
			<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a></div>
			</div>
		</div>

В конец шаблона main.css добавьте:
.help {
color: #2C8505; outline: none; /*цвет подсказки*/
cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/
position: relative; /*позиция*/
}
/*положение всплывающей подсказки*/
.help span {
margin-left: -999em;
position: absolute;
}
/*подсказка при наведении курсора*/
.help:hover span {
font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/
position: absolute; /*позиция*/
left: 10px;
top: 25px;
z-index: 99;
margin-left: 0;
width: 200px; /*ширина блока подсказки*/
}
/*параметры изображения*/
.help:hover img {
border: 0;
}
/*блок всплывающей подсказки*/
.airhelp {
background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/
border: 1px solid #2b82b8; /*параметры бордюра*/
border-radius: 5px; /*закругление углов*/
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/
color: #fff; /*цвет шрифта всплывающей подсказки*/
padding: 5px; /*внутренний отступ*/
}
.podskazka {
  color: black;background: #d8d8d8;width: 17px;height: 17px;padding-left: 5px;padding-bottom: 14px;border-radius: 5px;
}

Измените цветовое решение на Ваше усмотрение.

#33 Ярослав 196

Ярослав 196

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

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

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

Просмотр сообщенияRedHead (23 Ноябрь 2015 - 15:30) писал:

Попробуйте сделать следующее: (перед внесением изменений, создайте бэкап сайта)
В шаблоне Товар найдите строки:
<!-- Блок описания модификации -->
		 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			 <div class="blockquote" itemprop="description">{GOODS_MOD_DESCRIPTION}</div>
		 </div>
	 </div>
Замените на:
<!-- Блок описания модификации -->
		 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
			 <div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
		 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a></div>
		 </div>
	 </div>

В конец шаблона main.css добавьте:
.help {
color: #2C8505; outline: none; /*цвет подсказки*/
cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/
position: relative; /*позиция*/
}
/*положение всплывающей подсказки*/
.help span {
margin-left: -999em;
position: absolute;
}
/*подсказка при наведении курсора*/
.help:hover span {
font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/
position: absolute; /*позиция*/
left: 10px;
top: 25px;
z-index: 99;
margin-left: 0;
width: 200px; /*ширина блока подсказки*/
}
/*параметры изображения*/
.help:hover img {
border: 0;
}
/*блок всплывающей подсказки*/
.airhelp {
background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/
border: 1px solid #2b82b8; /*параметры бордюра*/
border-radius: 5px; /*закругление углов*/
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/
color: #fff; /*цвет шрифта всплывающей подсказки*/
padding: 5px; /*внутренний отступ*/
}
.podskazka {
color: black;background: #d8d8d8;width: 17px;height: 17px;padding-left: 5px;padding-bottom: 14px;border-radius: 5px;
}

Измените цветовое решение на Ваше усмотрение.
Получилось почти: знак вопроса появился в описании первой модификации (Выберите цену: За метр)
Когда переключаюсь на вторую модификацию (Выберите цену: За рулон) знак вопроса исчезает.
Нужно что бы он тоже был там, но уже с другим текстом в подсказке.
Далее если снова переключить на модификацию первую (Выберите цену: За метр), то значок не появляется больше
http://vk.cc/4rVtCf

#34 Ярослав 196

Ярослав 196

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

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

Отправлено 24 Ноябрь 2015 - 11:38

Ну помогите уже пожалуйста (

#35 RedHead

RedHead

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

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

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

Просмотр сообщенияЯрослав 196 (24 Ноябрь 2015 - 11:38) писал:

Ну помогите уже пожалуйста (

Здравствуйте! Перед внесением изменений на сайте, создайте бекап.
В шаблоне main.js найдите строку
goodsModDescriptionBlock.show().html('<div>' + modificationDescription + '</div>');
и замените на
goodsModDescriptionBlock.show().html(modificationDescription);


В шаблоне Товар найдите строки
<div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
						<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a></div>
замените на
<div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
						  {% IF GOODS_MOD_ID = 58842745 %}
							<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ МЕТРЫ</span></a></div>
						  {% ELSEIF GOODS_MOD_ID = 58842746 %}
							<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ РУЛОНЫ</span></a></div>
						  {% ENDIF %}
						</div>

затем строку
<div class="description" style="display:none" itemprop="description">{goods_modifications.DESCRIPTION}</div>
замените на
<div class="description" style="display:none" itemprop="description"><div class="blockquote" itemprop="description">{goods_modifications.DESCRIPTION}</div>
				{% IF goods_modifications.ID = 86421726 %}
							<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ МЕТРЫ</span></a></div>
						  {% ELSEIF goods_modifications.ID = 86421728 %}
							<div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ РУЛОНЫ</span></a></div>
						  {% ENDIF %}
			  </div>

#36 Ярослав 196

Ярослав 196

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

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

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

Просмотр сообщенияRedHead (24 Ноябрь 2015 - 17:28) писал:

Здравствуйте! Перед внесением изменений на сайте, создайте бекап....
Не получилось. И стало всё криво выглядеть (бекап

25.11.2015 07:14:45)

:  Изображение

#37 RedHead

RedHead

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

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

Отправлено 27 Ноябрь 2015 - 12:57

Просмотр сообщенияЯрослав 196 (25 Ноябрь 2015 - 07:22) писал:

Не получилось. И стало всё криво выглядеть (бекап

Здравствуйте! В шаблоне Товар замените строки
<div class="description" style="display:none" itemprop="description">{goods_modifications.DESCRIPTION}</div>
на
<div class="description" style="display:none" itemprop="description"><div class="blockquote" itemprop="description">{goods_modifications.DESCRIPTION}</div>
			 {% IF goods_modifications.ID = 58842745 %}
						 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ МЕТРЫ</span></a></div>
						 {% ELSEIF goods_modifications.ID = 58842746%}
						 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ РУЛОНЫ</span></a></div>
						 {% ENDIF %}
			 </div>

и строки
<div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
					 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ</span></a></div>
					 </div>
на
<div class="blockquote" itemprop="description"> {GOODS_MOD_DESCRIPTION}</div>
						 {% IF GOODS_MOD_ID = 58842745 %}
						 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ МЕТРЫ</span></a></div>
						 {% ELSEIF GOODS_MOD_ID = 58842746 %}
						 <div><a class="help" href="#"><div class="podskazka">?</div><span class="airhelp">ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ РУЛОНЫ</span></a></div>
						 {% ENDIF %}
					 </div>

В шаблоне main.js замените
goodsModDescriptionBlock.show().html('<div>' + modificationDescription + '</div>');
на
goodsModDescriptionBlock.show().html(modificationDescription);


Прикрепляю скрины, как должно получиться
1.png 2.png

#38 Ярослав 196

Ярослав 196

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

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

Отправлено 30 Ноябрь 2015 - 14:37

Просмотр сообщенияRedHead (27 Ноябрь 2015 - 12:57) писал:

Получилось, спасибо.
Как теперь облагородить знак вопроса? Можно ли картинку свою загрузить?

#39 Ярослав 196

Ярослав 196

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

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

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

И почему то данные изменения не на всех товарах вступили в силу:
Здесь работает: http://vk.cc/4tBAHG
А здесь нет: http://vk.cc/4tBBnT

#40 Ярослав 196

Ярослав 196

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

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

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

Вопрос остается открытым
Обратно в Страница товара


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

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

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