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

Плюшка от JQuery )

Рекомендуемые сообщения

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 :(

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

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


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

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

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

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

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

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


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

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

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


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

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

<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. Форма раскрывается всего на пару пикселей и сразу сворачивается обратно.

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

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


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

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

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

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

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


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

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

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


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

Попробую пофиксить на досуге, больше для общего развития...Хотя лично мне на 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, более старые версии ещё не проверял.

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


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

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

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


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

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

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

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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