Перейти к содержанию
ONeiLL

Спойлер для описания товара

Рекомендуемые сообщения

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

 

JX90O.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Открыть файл: catalog/view/theme/default(ваша тема)/template/product/ctegory.tpl
 
перед < ?php echo $footer; ?>
 
Добавляемс: 

<!--свернуть описание для категорий -->
<script type="text/javascript"><!--
 
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 135) {
 
$(".category-info").after('<div id="obexpand" class="obertka"><button class="expand" type="button" id="expand"><span class="">Развернуть </span></button></div>');
$(".category-info").after('<div id="obhide" class="obertka" style="display:none;"><button class="expand" type="button" id="hide"><span class="">Свернуть </span></button></div>');
$('.category-info').append("<div class='hide'></div>");
};
 
});
 
$('#expand').live('click',function(){
$('#obexpand').css("display", "none");
$('.category-info').animate({height: $('.category-info')[0].scrollHeight}, 600);
$('#obhide').css("display", "block");
$('.hide').css("display", "none");
 
});
 
$('#hide').live('click',function(){
$('#obhide').css("display", "none");
$('.category-info').animate({height: 120}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");
 
});
 
//--></script>
 
<style type="text/css">
.category-info {
position:relative;
height: 120px;
overflow: hidden;}
 
.hide {
position:absolute;
top:80px;
width:100%;
height:50px;
background: url('/catalog/view/theme/default/image/hide.png') repeat-x;
}
 
.obertka {
width: 100%;
text-align: center;
border-bottom: #ccc solid 1px;
height: 8px;
margin:0 auto;
margin-bottom: 20px;
}
.expand {
height: 18px;
padding: 0 .9em;
border-width: 1px;
border-style: solid;
outline: 0;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background:white;}
 
.expand:hover {
border:#ccc solid 1px;
background:#eee;
 
}
</style>
<!--свернуть описание для категорий -->

не забываем hide.png вставить в /catalog/view/theme/default/image/

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Только вот как это всё с респонсив дизайном будет состыковываться - неизвестно...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Открыть файл: catalog/view/theme/default(ваша тема)/template/product/ctegory.tpl

 

перед < ?php echo $footer; ?>

 

Добавляемс: 

<!--свернуть описание для категорий -->
<script type="text/javascript"><!--
 
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 135) {
 
$(".category-info").after('<div id="obexpand" class="obertka"><button class="expand" type="button" id="expand"><span class="">Развернуть </span></button></div>');
$(".category-info").after('<div id="obhide" class="obertka" style="display:none;"><button class="expand" type="button" id="hide"><span class="">Свернуть </span></button></div>');
$('.category-info').append("<div class='hide'></div>");
};
 
});
 
$('#expand').live('click',function(){
$('#obexpand').css("display", "none");
$('.category-info').animate({height: $('.category-info')[0].scrollHeight}, 600);
$('#obhide').css("display", "block");
$('.hide').css("display", "none");
 
});
 
$('#hide').live('click',function(){
$('#obhide').css("display", "none");
$('.category-info').animate({height: 120}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");
 
});
 
//--></script>
 
<style type="text/css">
.category-info {
position:relative;
height: 120px;
overflow: hidden;}
 
.hide {
position:absolute;
top:80px;
width:100%;
height:50px;
background: url('/catalog/view/theme/default/image/hide.png') repeat-x;
}
 
.obertka {
width: 100%;
text-align: center;
border-bottom: #ccc solid 1px;
height: 8px;
margin:0 auto;
margin-bottom: 20px;
}
.expand {
height: 18px;
padding: 0 .9em;
border-width: 1px;
border-style: solid;
outline: 0;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background:white;}
 
.expand:hover {
border:#ccc solid 1px;
background:#eee;
 
}
</style>
<!--свернуть описание для категорий -->

не забываем hide.png вставить в /catalog/view/theme/default/image/

не фунциклирует

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От sifo
      Как лучше спрятать текст описания брендов\категорий под спойлером? (ради экономии места)
      Может это привести к пессимизации?
    • От baronz
      Здравствуйте! скажите есть ли модуль для того что б скрыть большую часть описания категории с товаром, виден анонс статьи, а при открытии уже и вся?
    • От baronz
      Нашол на форуме интересное ришение для описания категорий тут
      Подключил все как описано, но описание полностью отображает, где я пропустил что то?
    • От CODEONETEAM
      Предлагаю добавить новый пункт в правила форума относительно обязательного заключения объёмного контента (код, текст, изображения) в спойлер и вынести соответствующую кнопку на панель редактора.
      Ситуация дошла уже до маразма, правила - нет, кнопки - нет, портянки - есть.
    • От schved
      Подскажите есть ли возможность вставить что то типа спойлера в опции к товару?
       
      Вот пример страницы: http://mftriumf.ru/baby/moduli_sprint_junior/komod_junior.html список опций очень длинный и это еще не все, на форуме нашел два примера к описаниям, но у меня они отказываются работать, вернее спойлер появляется но перекашивает весь дизайн.
       
      Тема Default
       
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.