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

[Zaurius]

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

 

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

 

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

[Tom]

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

[Zaurius]

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

 

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

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

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

[Zaurius]

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

[Tom]

Да.

[Matt]

Да.

Спасибо огромное! 

[Irenly]

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

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

 

[Irenly]

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

[Tom]

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

[Anril]

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

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

 

 

 

Благодарю, помогло

[Zapuzin]

 

Цитата

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

 

Змінено 20 травня 2021 користувачем Zapuzin

[sasha3337774]

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

[Zapuzin]

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

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

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

Змінено 20 травня 2021 користувачем Zapuzin

[ArtemPitov]