Плюшка от JQuery )

[Vetroff]

Jquery очень прикольная библиотека, содержит массу интересных вещей, которые можно с пользой и минимальными затратами применить к своему сайту. Вот одна из фишек.

Лично мне не понравился большой обьем, занимаемый формой для новых отзывов на странице с продуктом. Почему бы не спрятать его до тех пор, пока клиенту он действительго не понадобится ? :(

HOWTO

/catalog/view/theme/ШАБЛОН/template/product/product.tpl

находим код

<div id="tab_review" class="tab_page">      <div id="review"></div>      <div class="heading" id="review_title"><?php echo $text_write; ?></div>      <div class="content">[b]<?php echo $entry_name; ?>[/b]        <input type="text" name="name" value="" />                        [b]<?php echo $entry_review; ?>[/b]        <textarea name="text" style="width: 98%;" rows="8"></textarea>        <span style="font-size: 11px;"><?php echo $text_note; ?></span>                [b]<?php echo $entry_rating; ?>[/b] <span><?php echo $entry_bad; ?></span>         <input type="radio" name="rating" value="1" style="margin: 0;" />                 <input type="radio" name="rating" value="2" style="margin: 0;" />                 <input type="radio" name="rating" value="3" style="margin: 0;" />                 <input type="radio" name="rating" value="4" style="margin: 0;" />                 <input type="radio" name="rating" value="5" style="margin: 0;" />          <span><?php echo $entry_good; ?></span>                [b]<?php echo $entry_captcha; ?>[/b]        <input type="text" name="captcha" value="" autocomplete="off" />                [img=index.php?route=product/product/captcha]</div>      <div class="buttons">        <table>          <tr>            <td align="right"><a onclick="review();" class="button"><span><?php echo $button_continue; ?></span></a></td>          </tr>        </table>      </div>    </div>

меняем на этот

<div id="tab_review" class="tab_page"><div class="button" id="review_title"><span><?php echo $text_write; ?></span></div><div id="slider" style="display:none;">      <div class="content">[b]<?php echo $entry_name; ?>[/b]        <input type="text" name="name" value="" />                        [b]<?php echo $entry_review; ?>[/b]        <textarea name="text" style="width: 98%;" rows="8"></textarea>        <span style="font-size: 11px;"><?php echo $text_note; ?></span>                [b]<?php echo $entry_rating; ?>[/b] <span><?php echo $entry_bad; ?></span>         <input type="radio" name="rating" value="1" style="margin: 0;" />                 <input type="radio" name="rating" value="2" style="margin: 0;" />                 <input type="radio" name="rating" value="3" style="margin: 0;" />                 <input type="radio" name="rating" value="4" style="margin: 0;" />                 <input type="radio" name="rating" value="5" style="margin: 0;" />          <span><?php echo $entry_good; ?></span>                [b]<?php echo $entry_captcha; ?>[/b]        <input type="text" name="captcha" value="" autocomplete="off" />                [img=index.php?route=product/product/captcha]</div>      <div class="buttons">        <table>          <tr>            <td align="right"><a onclick="review();" class="button"><span><?php echo $button_continue; ?></span></a></td>          </tr>        </table>      </div></div><script>    $("#review_title").click(function () {      $("#slider").slideToggle("slow");    });</script><div id="review"></div>    </div>

Теперь вкладка "Отзывы" имеет более компактный вид и кнопку "Оставить отзыв", при нажатии на которую, собственно, и открывается форма добавления комментария.

P.S. Естественно, это будет работать, если к движку подключена сама бибилиотека JQuery :(

Вроде бы ничего не забыл, пробуем, отписываемся в комментах.

[RGB]

А я предлагаю добавить небольшое усовершенствование:

Вместо строчки:

<div class="button" id="review_title"><span><?php echo $text_write; ?></span></div>

Написать:

<div class="button" id="review_title" style="cursor:pointer;"><span><?php echo $text_write; ?></span></div>

Потому что иначе при наведении на кнопку «Написать отзыв» указатель мыши не менялся на руку (как это должно быть для кнопок).

[RGB]

Кстати, пример совершенно не хочет работать в IE8. Форма раскрывается всего на пару пикселей и сразу сворачивается обратно.

[Vetroff]

А я предлагаю добавить небольшое усовершенствование:Вместо строчки:

<div class="button" id="review_title"><span><?php echo $text_write; ?></span></div>

Написать:

<div class="button" id="review_title" style="cursor:pointer;"><span><?php echo $text_write; ?></span></div>

Потому что иначе при наведении на кнопку «Написать отзыв» указатель мыши не менялся на руку (как это должно быть для кнопок).

Можно и так, лично я cursor:pointer в CSS дописал, забыл )

Кстати, пример совершенно не хочет работать в IE8. Форма раскрывается всего на пару пикселей и сразу сворачивается обратно.

Тут наверное какие-то костыли нужны, в ие не проверял.

[RGB]

Насколько я понимаю, вот решение:

http://icebeer.livejournal.com/24184.html

Но прикрутить его к плюшке у меня что-то не вышло.

[Vetroff]

Попробую пофиксить на досуге, больше для общего развития...Хотя лично мне на ie без разницы, а в конкретно этом случае даже прикольно то, что комментарий сможет оставить более продвинутый пользователь с нормальным браузером :D С натяжкой можно назвать это не багом, а фичей ;)

[RGB]

Попробую пофиксить на досуге, больше для общего развития...Хотя лично мне на ie без разницы, а в конкретно этом случае даже прикольно то, что комментарий сможет оставить более продвинутый пользователь с нормальным браузером :D С натяжкой можно назвать это не багом, а фичей ;)

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

<div id="tab_review" class="tab_page"><div class="button" id="review_title" style="cursor:pointer; padding-bottom: 5px;"><span><?php echo $text_write; ?></span></div><!-- <div id="slider" style="display:none;"></div> --><div id="slide" style="display: none;"><div id="filter" style="visibility:hidden;">    <div class="content">[b]<?php echo $entry_name; ?>[/b]        <input type="text" name="name" value="" />                        [b]<?php echo $entry_review; ?>[/b]        <textarea name="text" style="width: 98%;" rows="8"></textarea>        <span style="font-size: 11px;"><?php echo $text_note; ?></span>                [b]<?php echo $entry_rating; ?>[/b] <span><?php echo $entry_bad; ?></span>         <input type="radio" name="rating" value="1" style="margin: 0;" />                 <input type="radio" name="rating" value="2" style="margin: 0;" />                 <input type="radio" name="rating" value="3" style="margin: 0;" />                 <input type="radio" name="rating" value="4" style="margin: 0;" />                 <input type="radio" name="rating" value="5" style="margin: 0;" />          <span><?php echo $entry_good; ?></span>                [b]<?php echo $entry_captcha; ?>[/b]        <input type="text" name="captcha" value="" autocomplete="off" />                [img=index.php?route=product/product/captcha]</div>      <div class="buttons">        <table>          <tr>            <td align="right"><a onclick="review();" class="button"><span><?php echo $button_continue; ?></span></a></td>          </tr>        </table>      </div>   </div></div><script>$(document).ready(function(){   $("#review_title").click(function()   {      if($("#filter:visible").is("div"))      {         $("#slide").height($("#slide").height());         $("#filter").css("display", "none");         $("#slide").slideUp("slow");      }      else      {         $("#slide").slideDown("slow", function()         {            $("#filter").css({display: "none",                              visibility: "visible"});            $("#filter").fadeIn();         });      }   });})    </script><div id="review"></div>    </div>

Работает под IE8, более старые версии ещё не проверял.

[Vetroff]

Угу, вроде пашет. Спасибо за корректировку. А вообще при разгребании подобного рода затыков, где две строчки кода превращается в десяток-другой, возникает нездоровое желание надругательства в извращенной форме над всей "командой" разработчиков этого долбаного IE ;) Особенно в последнее время, когда появляется очень много интересных фишек на CSS3 и HTML5, которые очень просты и приятны визуально во всех нормальных браузерах кроме "Этого" ...

[Kompozitor]

А как стили прикрутить к этой штуке? А то все отображается как простой текст...

И кнопка отправить отзыв не работает...