Открывающиесся Контейнеры На Старнице Товара
#1
Отправлено 13 Август 2016 - 16:27
Нужно немного доработать код, чтобы значек "+" и "-" были на уровне "Применение" и "Состав" и данный код плохо работает в не которых браузерах не закрывается при нажатии на значек "-", например в хроме и сафари. Наш сайт здесь пример страницы товара тут
изображение ниже:
#2
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 20 Август 2016 - 11:37
Stasya (19 Август 2016 - 15:52) писал:
$(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
Отправлено 01 Сентябрь 2016 - 13:40
Вы ответите на наши последние вопросы? Уже больше 10 дней прошло
Добрый день!
Уже лучше, осталось пару доработок:
1 сделать ссылками надписи "ПРИМЕНЕНИЕ" и "СОСТАВ" (при наведении на эти ссылки мышкой они становились серыми), чтобы контейнер открывался и при нажатии на "ПРИМЕНЕНИЕ" и "СОСТАВ" и при нажатии на "+"
2 как сделать, чтобы "+" и "-" были одинаковыми по размерам, сейчас "-" как будто меньше и при смене он смещается вниз и становится меньше "+"
нужно чтобы при смене "+" на "-" убиралась только вертикальная черточка от плюсика, а не как сейчас смещались элементы и менялись в размерах
#7
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 16 Сентябрь 2016 - 16:55
Stasya (16 Сентябрь 2016 - 14:43) писал:
Что касаемо Истории просмотренных товаров. В шаблоне Товар найдите блок
$('.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
Отправлено 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 анонимных