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


Открывающиесся Контейнеры На Старнице Товара


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

#1 bg999

bg999

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

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

Отправлено 13 Август 2016 - 16:27

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

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

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

Изображение

#2 Vaccina

Vaccina

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

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

Отправлено 16 Август 2016 - 03:37

Уточните пожалуйста, по какой инструкции вы добавляли спойлеры?
В main.css найдите:
.catalog51 h4 {
	color: rgb(0, 0, 0);
	font-size: 23px;
	line-height: 14px;
	font-weight: bold;
	cursor: pointer;
}

замените на:
.catalog51, .catalog {
	position: relative;
}
.catalog51 h4, .catalog h4 {
	color: rgb(0, 0, 0);
	font-size: 23px;
	line-height: 14px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: -15px;
}


#3 bg999

bg999

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

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

Отправлено 16 Август 2016 - 14:29

Просмотр сообщенияVaccina (16 Август 2016 - 03:37) писал:

Уточните пожалуйста, по какой инструкции вы добавляли спойлеры?
В main.css найдите:
.catalog51 h4 {
color: rgb(0, 0, 0);
font-size: 23px;
line-height: 14px;
font-weight: bold;
cursor: pointer;
}

замените на:
.catalog51, .catalog {
position: relative;
}
.catalog51 h4, .catalog h4 {
color: rgb(0, 0, 0);
font-size: 23px;
line-height: 14px;
font-weight: bold;
cursor: pointer;
position: absolute;
right: 0;
top: -15px;
}




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

#4 Stasya

Stasya

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

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

Отправлено 19 Август 2016 - 15:52

Просмотр сообщенияbg999 (16 Август 2016 - 14:29) писал:

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

В файле main.js найдите блок
$(document).ready(function(){
$('.catalog2').hide();
$('.catalog h4').toggle(
function(){
$(this).siblings('.catalog2').stop(false, true).slideDown(100);
$('.catalog h4').html('-');
},
function(){
$(this).siblings('.catalog2').stop(false, true).slideUp(100);
$('.catalog h4').html('+');
}
);
});

$(document).ready(function(){
$('.catalog23').hide();
$('.catalog51 h4').toggle(
function(){
$(this).siblings('.catalog23').stop(false, true).slideDown(100);
$('.catalog51 h4').html('-');
},
function(){
$(this).siblings('.catalog23').stop(false, true).slideUp(100);
$('.catalog51 h4').html('+');
}
);
});
и замените его на
$(document).ready(function(){
$('.catalog2 .htmlDataBlock').hide();
$('.catalog h4').toggle(
function(){
$('.catalog2 .htmlDataBlock').show(1000);
$('.catalog h4').html('-');
},
function(){
$('.catalog2 .htmlDataBlock').hide(1000);
$('.catalog h4').html('+');
}
);
});

$(document).ready(function(){
$('.catalog23 .htmlDataBlock').hide();
$('.catalog51 h4').toggle(
function(){
$('.catalog23 .htmlDataBlock').show(1000);
$('.catalog51 h4').html('-');
},
function(){
$('.catalog23 .htmlDataBlock').hide(1000);
$('.catalog51 h4').html('+');
}
);
});


#5 bg999

bg999

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

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

Отправлено 20 Август 2016 - 11:37

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

В файле main.js найдите блок
$(document).ready(function(){
$('.catalog2').hide();
$('.catalog h4').toggle(
function(){
$(this).siblings('.catalog2').stop(false, true).slideDown(100);
$('.catalog h4').html('-');
},
function(){
$(this).siblings('.catalog2').stop(false, true).slideUp(100);
$('.catalog h4').html('+');
}
);
});

$(document).ready(function(){
$('.catalog23').hide();
$('.catalog51 h4').toggle(
function(){
$(this).siblings('.catalog23').stop(false, true).slideDown(100);
$('.catalog51 h4').html('-');
},
function(){
$(this).siblings('.catalog23').stop(false, true).slideUp(100);
$('.catalog51 h4').html('+');
}
);
});
и замените его на
$(document).ready(function(){
$('.catalog2 .htmlDataBlock').hide();
$('.catalog h4').toggle(
function(){
$('.catalog2 .htmlDataBlock').show(1000);
$('.catalog h4').html('-');
},
function(){
$('.catalog2 .htmlDataBlock').hide(1000);
$('.catalog h4').html('+');
}
);
});

$(document).ready(function(){
$('.catalog23 .htmlDataBlock').hide();
$('.catalog51 h4').toggle(
function(){
$('.catalog23 .htmlDataBlock').show(1000);
$('.catalog51 h4').html('-');
},
function(){
$('.catalog23 .htmlDataBlock').hide(1000);
$('.catalog51 h4').html('+');
}
);
});

Добрый день!
Уже лучше, осталось пару доработок:
1 сделать ссылками надписи "ПРИМЕНЕНИЕ" и "СОСТАВ" (при наведении на эти ссылки мышкой они становились серыми), чтобы контейнер открывался и при нажатии на "ПРИМЕНЕНИЕ" и "СОСТАВ" и при нажатии на "+"
2 как сделать, чтобы "+" и "-" были одинаковыми по размерам, сейчас "-" как будто меньше и при смене он смещается вниз и становится меньше "+"
нужно чтобы при смене "+" на "-" убиралась только вертикальная черточка от плюсика, а не как сейчас смещались элементы и менялись в размерах

#6 bg999

bg999

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

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

Отправлено 01 Сентябрь 2016 - 13:40

Здравствуйте!
Вы ответите на наши последние вопросы? Уже больше 10 дней прошло

Добрый день!
Уже лучше, осталось пару доработок:
1 сделать ссылками надписи "ПРИМЕНЕНИЕ" и "СОСТАВ" (при наведении на эти ссылки мышкой они становились серыми), чтобы контейнер открывался и при нажатии на "ПРИМЕНЕНИЕ" и "СОСТАВ" и при нажатии на "+"
2 как сделать, чтобы "+" и "-" были одинаковыми по размерам, сейчас "-" как будто меньше и при смене он смещается вниз и становится меньше "+"
нужно чтобы при смене "+" на "-" убиралась только вертикальная черточка от плюсика, а не как сейчас смещались элементы и менялись в размерах

#7 Vaccina

Vaccina

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

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

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

В шаблоне Товар найдите:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">

	 <tr>
					 <td class="goodsDataMainDeliveryItemZ" colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">ОПИСАНИЕ</span>
					 {% IF GOODS_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock">
		 {GOODS_DESCRIPTION_LARGE}
	 </div>
	 {% ENDIF %}
	 </tr>
	 <!--- END Блок описания товара. Показываем его есть описание товара --->
				



	 <tr>
	
					 <div><td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">ПРИМЕНЕНИЕ</span>
	
<div class="catalog51">
<span class="catalog91">
</span>
<span class="catalog23">
					 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">
		 {GOODS_SEO_DESCRIPTION_LARGE}
	 </div>
	 {% ENDIF %}
</span>
<p style="float: right;">+</p>
</td>
</div>
	 </tr>				
				
				
	 <tr>
	
					 <div><td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">СОСТАВ</span>
	
<div class="catalog">
<span class="catalog1">
</span>
<span class="catalog2">
					 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">
		 {GOODS_SEO_DESCRIPTION_SHORT}
	 </div>
	 {% ENDIF %}
</span>
<p style="float: right;">+</p>
</td>
</div>
	 </tr>
	 <!--- END Блок описания товара. Показываем его есть описание товара --->

замените на:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
	 <span class="catalog91"></span>
	 <span class="catalog23">
	 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
	 {% ENDIF %}
	 </span>
	 <p>+</p>
</div>
</td>
</div>
</tr>			
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
	 <span class="catalog1"></span>
	 <span class="catalog2">
	 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
	 {% ENDIF %}
	 </span>
	 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

В данном блоке удален css, он будет перенесен в main.css и исправлен синтаксис структуры.

В main.css найдите:
.goodsDataMainDeliveryItemZ {
border-top: 1px solid #E5E5E5;
padding: 1em 1em 1.5em 1em;
}

после него пропишите:
.goodsDataMainDeliveryItemZ > span {
color: #000;
font-weight: bold;
font-size: 12px;
}
.goodsDataMainDeliveryItemZ > span:hover {
color: #ccc;
cursor: pointer;
}
.goodsDataMainDeliveryItemZ > div > p {
float: right;
}

В main.js найдите:
$(document).ready(function(){
$('.catalog23 .htmlDataBlock').hide();
$('.catalog51 p').toggle(
function(){
$('.catalog23 .htmlDataBlock').show(1000);
$('.catalog51 p').html('-');
},
function(){
$('.catalog23 .htmlDataBlock').hide(1000);
$('.catalog51 p').html('+');
}
);
});

замените на:
$(document).ready(function(){
$('.goodsDataMainDeliveryItemZ > div > span > div').hide();
$('.goodsDataMainDeliveryItemZ > div > p, .goodsDataMainDeliveryItemZ > span').click(function() {
if ($(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html() == "+") {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html("-");
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > span > div').show(1000);
}
else {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html("+");
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > span > div').hide(1000);
}
});
});

то есть в последующем достаточно будет использовать структуру вида:
<div class="goodsDataMainDeliveryItemZ">
<span>заголовок спойлера</span>
<div>
	 <span>
	 <div>скрытый текст спойлера</div>
	 </span>
	 <p>+</p>
</div>
</div>

чтобы автоматически срабатывал спойлер без добавочных скриптов для каждого по отдельности

Хотя здесь все равно много лишних элементов, можно было бы еще более упростить, по структуре:
<div class="goodsDataMainDeliveryItemZ">
	<span>заголовок спойлера</span>
	<div>
	 <div>скрытый текст спойлера</div>
	 <p>+</p>
	</div>
   </div>

по js получилось бы:
$(document).ready(function(){
$('.goodsDataMainDeliveryItemZ div div').hide();
$('.goodsDataMainDeliveryItemZ div p, .goodsDataMainDeliveryItemZ span').click(function() {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div div').toggle(1000);
if ($(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html() == "+") {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html("-");
}
else {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html("+");
}
});
});


#8 bg999

bg999

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

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

Отправлено 05 Сентябрь 2016 - 16:42

Просмотр сообщенияVaccina (02 Сентябрь 2016 - 03:23) писал:

В шаблоне Товар найдите:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">

	 <tr>
					 <td class="goodsDataMainDeliveryItemZ" colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">ОПИСАНИЕ</span>
					 {% IF GOODS_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock">
		 {GOODS_DESCRIPTION_LARGE}
	 </div>
	 {% ENDIF %}
	 </tr>
	 <!--- END Блок описания товара. Показываем его есть описание товара --->
				



	 <tr>
	
					 <div><td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">ПРИМЕНЕНИЕ</span>
	
<div class="catalog51">
<span class="catalog91">
</span>
<span class="catalog23">
					 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">
		 {GOODS_SEO_DESCRIPTION_LARGE}
	 </div>
	 {% ENDIF %}
</span>
<p style="float: right;">+</p>
</td>
</div>
	 </tr>				
				
				
	 <tr>
	
					 <div><td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2"><span style="font-size: 12px; font-weight: bold; color: rgb(23, 23, 23);">СОСТАВ</span>
	
<div class="catalog">
<span class="catalog1">
</span>
<span class="catalog2">
					 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">
		 {GOODS_SEO_DESCRIPTION_SHORT}
	 </div>
	 {% ENDIF %}
</span>
<p style="float: right;">+</p>
</td>
</div>
	 </tr>
	 <!--- END Блок описания товара. Показываем его есть описание товара --->

замените на:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
	 <span class="catalog91"></span>
	 <span class="catalog23">
	 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
	 {% ENDIF %}
	 </span>
	 <p>+</p>
</div>
</td>
</div>
</tr>			
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
	 <span class="catalog1"></span>
	 <span class="catalog2">
	 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
	 <div style="padding-top:0.7em;"></div>
	 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
	 {% ENDIF %}
	 </span>
	 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

В данном блоке удален css, он будет перенесен в main.css и исправлен синтаксис структуры.

В main.css найдите:
.goodsDataMainDeliveryItemZ {
border-top: 1px solid #E5E5E5;
padding: 1em 1em 1.5em 1em;
}

после него пропишите:
.goodsDataMainDeliveryItemZ > span {
color: #000;
font-weight: bold;
font-size: 12px;
}
.goodsDataMainDeliveryItemZ > span:hover {
color: #ccc;
cursor: pointer;
}
.goodsDataMainDeliveryItemZ > div > p {
float: right;
}

В main.js найдите:
$(document).ready(function(){
$('.catalog23 .htmlDataBlock').hide();
$('.catalog51 p').toggle(
function(){
$('.catalog23 .htmlDataBlock').show(1000);
$('.catalog51 p').html('-');
},
function(){
$('.catalog23 .htmlDataBlock').hide(1000);
$('.catalog51 p').html('+');
}
);
});

замените на:
$(document).ready(function(){
$('.goodsDataMainDeliveryItemZ > div > span > div').hide();
$('.goodsDataMainDeliveryItemZ > div > p, .goodsDataMainDeliveryItemZ > span').click(function() {
if ($(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html() == "+") {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html("-");
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > span > div').show(1000);
}
else {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > p').html("+");
$(this).closest('.goodsDataMainDeliveryItemZ').find('div > span > div').hide(1000);
}
});
});

то есть в последующем достаточно будет использовать структуру вида:
<div class="goodsDataMainDeliveryItemZ">
<span>заголовок спойлера</span>
<div>
	 <span>
	 <div>скрытый текст спойлера</div>
	 </span>
	 <p>+</p>
</div>
</div>

чтобы автоматически срабатывал спойлер без добавочных скриптов для каждого по отдельности

Хотя здесь все равно много лишних элементов, можно было бы еще более упростить, по структуре:
<div class="goodsDataMainDeliveryItemZ">
<span>заголовок спойлера</span>
<div>
	 <div>скрытый текст спойлера</div>
	 <p>+</p>
</div>
</div>

по js получилось бы:
$(document).ready(function(){
$('.goodsDataMainDeliveryItemZ div div').hide();
$('.goodsDataMainDeliveryItemZ div p, .goodsDataMainDeliveryItemZ span').click(function() {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div div').toggle(1000);
if ($(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html() == "+") {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html("-");
}
else {
$(this).closest('.goodsDataMainDeliveryItemZ').find('div p').html("+");
}
});
});

Почему-то "-" меньше оп размеру, чем "+"
И почему так скрипт приторможивает когда открывается и закрывается контейнер? Как будто зависает, можно как то ускорить этот момент?

Когда нажимаю на "состав" и "+" рядом с ним, то контейнер открывается и сразу же закрывается. тут

#9 Stasya

Stasya

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

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

Отправлено 08 Сентябрь 2016 - 10:59

Просмотр сообщенияbg999 (05 Сентябрь 2016 - 16:42) писал:

Почему-то "-" меньше оп размеру, чем "+"
И почему так скрипт приторможивает когда открывается и закрывается контейнер? Как будто зависает, можно как то ускорить этот момент?

Когда нажимаю на "состав" и "+" рядом с ним, то контейнер открывается и сразу же закрывается. тут

В шаблоне Товар найдите и удалите блок
$(document).ready(function(){
$('.catalog2 .htmlDataBlock').hide();
$('.catalog p').toggle(
function(){
$('.catalog2 .htmlDataBlock').show(1000);
$('.catalog p').html('-');
},
function(){
$('.catalog2 .htmlDataBlock').hide(1000);
$('.catalog p').html('+');
}
);
});

Что касаемо того, что плюс больше минуса. Такое ощущение возникает потому что знак плюс в принципе по отображению больше знака минуса. Шрифт у них одинаковый и при клике не меняется.

#10 bg999

bg999

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

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

Отправлено 09 Сентябрь 2016 - 01:51

Просмотр сообщенияStasya (08 Сентябрь 2016 - 10:59) писал:

В шаблоне Товар найдите и удалите блок
$(document).ready(function(){
$('.catalog2 .htmlDataBlock').hide();
$('.catalog p').toggle(
function(){
$('.catalog2 .htmlDataBlock').show(1000);
$('.catalog p').html('-');
},
function(){
$('.catalog2 .htmlDataBlock').hide(1000);
$('.catalog p').html('+');
}
);
});

Что касаемо того, что плюс больше минуса. Такое ощущение возникает потому что знак плюс в принципе по отображению больше знака минуса. Шрифт у них одинаковый и при клике не меняется.





Может в шаблоне main.js?
Все равно скрипт при открытии/закрытии притормаживает и почему то текст после раскрытия контейнера отскакивает вниз.
И скажите, как сделать, чтобы надпись "История просмотренных товаров" тоже была кнопкой и при нажатии на нее открывала и закрывала товары.

#11 Vaccina

Vaccina

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

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

Отправлено 09 Сентябрь 2016 - 05:05

В шаблоне Товар найдите:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
		 <span class="catalog91"></span>
		 <span class="catalog23">
		 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
		 <div style="padding-top:0.7em;"></div>
		 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>				
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
		 <span class="catalog1"></span>
		 <span class="catalog2">
		 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
		 <div style="padding-top:0.7em;"></div>
		 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

замените на:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
		 <span class="catalog23">
		 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
		 <div class="htmlDataBlock" style="display: block; padding-top:0.7em; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>				
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
		 <span class="catalog2">
		 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
		 <div class="htmlDataBlock" style="display: block; padding-top:0.7em; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

В коде удалены лишние пустые блоки с отступами, из-за них возникает эффект подергивания.

#12 bg999

bg999

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

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

Отправлено 09 Сентябрь 2016 - 16:37

Просмотр сообщенияVaccina (09 Сентябрь 2016 - 05:05) писал:

В шаблоне Товар найдите:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
		 <span class="catalog91"></span>
		 <span class="catalog23">
		 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
		 <div style="padding-top:0.7em;"></div>
		 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>				
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
		 <span class="catalog1"></span>
		 <span class="catalog2">
		 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
		 <div style="padding-top:0.7em;"></div>
		 <div class="htmlDataBlock" style="display: block; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

замените на:
<!-- Блок описания товара. Показываем его есть описание товара -->
<div class="op">
<!--- Блок описания товара. Показываем его есть описание товара --->
<tr>
<td class="goodsDataMainDeliveryItemZ" colspan="2">
<span>ОПИСАНИЕ</span>
{% IF GOODS_DESCRIPTION_LARGE %}
<div style="padding-top:0.7em;"></div>
<div class="htmlDataBlock">{GOODS_DESCRIPTION_LARGE}</div>
{% ENDIF %}
</td>
</tr>
<!--- END Блок описания товара. Показываем его есть описание товара --->
<!--- Блок SEO полного описания товара.--->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;"colspan="2">
<span>ПРИМЕНЕНИЕ</span>
<div class="catalog51">
		 <span class="catalog23">
		 {% IF GOODS_SEO_DESCRIPTION_LARGE %}
		 <div class="htmlDataBlock" style="display: block; padding-top:0.7em; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_LARGE}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>				
<!--- END Блок SEO полного описания товара.--->
<!--- SEO краткого описания товара. --->
<tr>
<div>
<td class="goodsDataMainDeliveryItemZ" style="padding: 14px 10px 4px;" colspan="2">
<span>СОСТАВ</span>
<div class="catalog">
		 <span class="catalog2">
		 {% IF GOODS_SEO_DESCRIPTION_SHORT %}
		 <div class="htmlDataBlock" style="display: block; padding-top:0.7em; padding-bottom: 14px;">{GOODS_SEO_DESCRIPTION_SHORT}</div>
		 {% ENDIF %}
		 </span>
		 <p>+</p>
</div>
</td>
</div>
</tr>
<!--- END SEO краткого описания товара. --->

В коде удалены лишние пустые блоки с отступами, из-за них возникает эффект подергивания.




Попробовал и проблема не ушла. Так же был вопрос про:  И скажите, как сделать, чтобы надпись "История просмотренных товаров" тоже была кнопкой и при нажатии на нее открывала и закрывала товары.

#13 Stasya

Stasya

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

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

Отправлено 16 Сентябрь 2016 - 14:43

Просмотр сообщенияbg999 (09 Сентябрь 2016 - 16:37) писал:

Попробовал и проблема не ушла. Так же был вопрос про:  И скажите, как сделать, чтобы надпись "История просмотренных товаров" тоже была кнопкой и при нажатии на нее открывала и закрывала товары.

Проблемы с задержкой работы скрипта мы не обнаружили. Есть только время исполнения анимации. Т.е. текст открывается 1 сек (1000 мс).
Что касаемо Истории просмотренных товаров. В шаблоне Товар найдите блок
$('.spoiler_links').click(function(){
				  $(this).parent().children('div.car1').toggle();
				  return false;
				 });
и замените его на
$('.spoiler_links').click(function(){
				  $(this).parents().children('div.car1').toggle();
				  return false;
				 });


#14 bg999

bg999

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

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

Отправлено 16 Сентябрь 2016 - 16:55

Просмотр сообщенияStasya (16 Сентябрь 2016 - 14:43) писал:

Проблемы с задержкой работы скрипта мы не обнаружили. Есть только время исполнения анимации. Т.е. текст открывается 1 сек (1000 мс).
Что касаемо Истории просмотренных товаров. В шаблоне Товар найдите блок
$('.spoiler_links').click(function(){
				 $(this).parent().children('div.car1').toggle();
				 return false;
				 });
и замените его на
$('.spoiler_links').click(function(){
				 $(this).parents().children('div.car1').toggle();
				 return false;
				 });


Спасибо, вот, что обнаружили: почему то когда нет сопутствующих товаров на странице товара, то съезжают просмотренные товары, вот здесь пример

Просмотр сообщенияbg999 (16 Сентябрь 2016 - 16:54) писал:






Спасибо,
Как ускорить время открытия с 1000 мс?


вот, что обнаружили: почему то когда нет сопутствующих товаров на странице товара, то съезжают просмотренные товары, вот здесь пример


#15 Vaccina

Vaccina

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

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

Отправлено 17 Сентябрь 2016 - 04:05

В шаблоне Товар найдите:
<!-- Сопутствующие товары -->
{% IFNOT related_goods_empty %}
<script type="text/javascript">
		jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
				jQuery('.d-carouselR .carousel').jcarousel({
						scroll: 1,
				});
				 jQuery('.car1 .d-carouselR .carousel').jcarousel({
						scroll: 1,
				});
				$('div.car1').hide();
				 $('.spoiler_links').click(function(){
								  $(this).parents().children('div.car1').toggle();
								  return false;
								 });
		});
</script>

замените на:
<!-- Сопутствующие товары -->
<script type="text/javascript">
		jQuery(document).ready(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
				jQuery('.d-carouselR .carousel').jcarousel({
						scroll: 1,
				});
				 jQuery('.car1 .d-carouselR .carousel').jcarousel({
						scroll: 1,
				});
				$('div.car1').hide();
				 $('.spoiler_links').click(function(){
								  $(this).parents().children('div.car1').toggle();
								  return false;
								 });
		});
</script>
{% IFNOT related_goods_empty %}





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

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