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

[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>

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


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

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

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


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

Да.

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


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

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

В 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>

 

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


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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти

  • Последние посетители   0 пользователей онлайн

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

×

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

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