Jump to content
Sign in to follow this  
Zaurius

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

Recommended Posts

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Да.

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.