PrestaShop Forum

 :oПодскажите кто нить видел коментарии для сайта в виде спойлера или как можно переделать hypercoments под спойлер а то удленняет сраницу ,хотелось бы сохранить компактность?

Простой спойлер на JavaScript

<script type="text/javascript">
function spoiler(id)
{
    var obj = "";
    if(document.getElementById)
        obj = document.getElementById(id).style;
    else if(document.all)
        obj = document.all[id];
    else if(document.layers)
        obj = document.layers[id];
    else
        return 1;

    if(obj.display == "")
        obj.display = "none";
    else if(obj.display != "none")
        obj.display = "none";
    else
        obj.display = "block";
}
</script>


На jQuery можно
$(document).ready(function(){
    $('.spoiler').click(function(){
        var show = $(this).attr('show');
        if(show == 1){
            $(this).attr('show', 0);
            $('.spoiler_block').slideUp(500);
        }else{
            $(this).attr('show', 1);
            $('.spoiler_block').slideDown(500);
        }
    });
});

Вот самый легкий и сайт не грузит.
Cпойлер средствами css

Спасибо вот решил вопрос
Global css
spoyler ****************************************************************************
.spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#F5F5F5;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{-moz-box-shadow: 2px 8px 22px #000000;
-webkit-box-shadow: 2px 8px 22px #000000;
box-shadow: 2px 8px 22px #000000;}
spoyler ****************************************************************************

/ views / templates / hook/hypercommentscolumn.tpl
<div  class='block'>
</div>
  </div>
    <div class="spoiler">
<input type="checkbox" id="spoilerid_1"><label for="spoilerid_1">
<h4>
<a href="http://сайт/" title="" class="tooltip" ><img src="{$base_dir}modules/hypercomments/logo2.gif" style="vertical-align:middle; margin-top:-2px; margin-left:2px" /></a>&nbsp;<a title='' href='{$news_dir}' >Книга отзывов</a></h4>
</h4>
</label><div class="spoiler_body">
<div class='block_content'  style='text-align:center'>
<br /><div id="hypercomments_mix"></div>
<script type="text/javascript" src="{$base_dir}modules/hypercomments/js/scriptcount.js"></script>
<br />
</div></div>
этот блок был в правой панели перенес его над футером здесь уже готовый код..

не подскажите как в этом коде добавить плавность окрытия

Плавность это анимация, добавляется в javascript.

Подскажите,не могу разобраться,создал спойлер,переместил,уменьшил ,хочу сделать его иконкой или в этом роде пробовал через background он тогда делает и фон всего спойлера,тем изображением какое хотел вставить ,как его спойлер организовать в ярлык всмысле jpg или иконку?
Или какие правильные дать команды чтобы над спойлером было одно изображение внутри остовалось прежним?

Если стандарная тема, то для иконок так
<i class="fa fa-camera-retro fa-lg"></i>
Font Awesome icons

Цитата: Adik от 24 января 2015, 20:11:07
Если стандарная тема, то для иконок так

Код Выделить Развернуть

<i class="fa fa-camera-retro fa-lg"></i>
Font Awesome icons

тема balim,вы имеете ввиду создать под этим классом?
можно ли ее через button сделать тогда надо весь спойлер переделывать?
подскажите подойдет ли этот код ?
<a href="#" class="button" style="text-decoration: none;">Кнопка спойлера</a>
<div class="spoiler" style="display:none; overflow-y:hidden; border:1px dashed #ccc; background:whitesmoke;">Текст спойлера</div>
$(function(){

$(".button").click(function(){
$(".spoiler").toggle();
});

});.   

В базовой теме prestashop для иконок используется шрифт Font Awesome. Если у вас другая тема, то нужно проверить подключение и наличие этого шрифта или использовать свои иконки.

<a href="#" class="button"><i class="fa fa-camera-retro fa-lg"></i>Кнопка спойлера</a>

Цитата: coder от 24 января 2015, 21:14:36
В базовой теме prestashop для иконок используется шрифт Font Awesome. Если у вас другая тема, то нужно проверить подключение и наличие этого шрифта или использовать свои иконки.

Вы правы ....решение нашел!

Font Awesome достаточно просто:

Качаем архив.https://github.com/FortAwesome/Font-Awesome/zipball/master
Копируем шрифты из архива в проект.
Добавляем в наш css @import «font-awesome.css»;и @import «font-awesome-ie7.css»;
Ниже:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype'),
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
    }
Далее добавляем к нужным нам элементам путем добавления класса css.
<i class="icon-glass"></i>
Справится даже новичок. Все это дело работает на вполне обычных элементах CSS, которые мы  с Вами применяем практически в каждом проекте.

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-glass:before { content: "\f000"; }
И далее мы можем изменять внешний вид иконок средствами форматирования текста CSS: color, font-size, font-style и т.д., в зависимости от стилевых требований шаблона.