Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

[HowTo] Кнопка "Подробнее" (спойлер) для категорий.


 Поделиться

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

Всем доброе время суток. У меня такой вопрос. В моем магазине очень длинные описания для категорий (это важно) и смотрится по моему не красиво. Да, и вообще, предназначено это для профессиональных покупателей, а для обычных клиентов это описание обычно бывает не интересным.

 

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

 

Сложно ли это сделать и если кто знает поделитесь своими знаниями.  Так же какие у вас предложения и что посоветуете. Не будет ли это отражаться в работе магазина, какие могут возникнуть проблемы в общем, ну и т.д. 

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


Самая лучшая идея,это скрыть часть описания под спойлер и открывать всё,по нажатию на Подробнее!

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

Самая лучшая идея,это скрыть часть описания под спойлер и открывать всё,по нажатию на Подробнее!

 

Это я и имел в виду ) 

Не подскажете как сделать? Думаю тема будет популярной, так как идея хорошая. Ну или хотя бы сделать дополнение и выставить на продажу, а мы купим. ) 

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


catalog\view\theme\шаблон\template\product\category.tpl

 

перед 

<?php echo $footer; ?>

добавить

 

<script type="text/javascript"><!--
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 165)  {


$(".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: 165}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");


 });
//--></script> 


<style type="text/css">
.category-info {
position:relative;
height: 165px;
overflow: hidden;}
.hide {
position:absolute;
top:115px;
width:100%;
height:50px;
background: url("catalog/view/theme/default/image/hide.png") repeat-x transparent;
}
.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>
Ссылка на комментарий
Поделиться на других сайтах

Шикарно. Спасибо огромное. Выручили :) А с мультиязычность. кнопок как обычно делать да?

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


  • 1 год спустя...
  • 3 месяца спустя...

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

В 08.04.2015 в 13:30, Tom сказал:

catalog\view\theme\шаблон\template\product\category.tpl

 

перед 


<?php echo $footer; ?>

добавить

 


<script type="text/javascript"><!--
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 165)  {


$(".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: 165}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");


 });
//--></script> 


<style type="text/css">
.category-info {
position:relative;
height: 165px;
overflow: hidden;}
.hide {
position:absolute;
top:115px;
width:100%;
height:50px;
background: url("catalog/view/theme/default/image/hide.png") repeat-x transparent;
}
.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>

 

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


В чём угодно.Без указания версии и ссылок на магазин.

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

  • 3 года спустя...
  • 1 год спустя...
 
Цитата

catalog\view\theme\шаблон\template\product\category.tpl

 

перед 


<?php echo $footer; ?>

добавить...

 

Tom,

не работает.

ocStore-2.3.0.2.3, Coloring Theme

https://teplopl.com.ua/otoplenie/kotly/

category.tpl

 

Изменено пользователем Zapuzin
Ссылка на комментарий
Поделиться на других сайтах


@Zapuzin модификаторы обновляли?

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

15 минут назад, sasha3337774 сказал:

@Zapuzin модификаторы обновляли?

Да. И еще удалял кеш Jet Cache, и обновлял кеш браузера (Яндекс)

Изменено пользователем Zapuzin
Ссылка на комментарий
Поделиться на других сайтах


 

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

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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