Jump to content

Спойлер (Spoiler), как это можно реализовать на PrestaShop

Oleg2013
 Share

Recommended Posts

Oleg2013 Newbie

Oleg2013

Posted
Posted

Коллеги, доброго дня всем!

Возникла острая необходимость скрывать часть текста в Спойлер (Spoiler) при описании категорий товара. Начну обо всем по порядку.

Каждая категория моего магазина имеет техническое описание данной группы товаров и это описание бывает очень объемным, что в свою очередь очень затрудняет процесс просмотра самого товара в магазине, т.к. товар отображается после него.

Я уже сделал на сейте одну очень полезную вещь, добавил второе окно добавления описания в категориях с визуальным редактором TinyMCE , об этом подробно тут, за это отдельное спасибо участнику нашего форума fortuner!

Это позволило при выводе подкатегорий с описанием сэкономить место на странице.

 

Сейчас же встала другая проблема - как большую часть контента с подробным описанием (техническое описание подкатегорий) убрать в Спойлер (Spoiler).

 

Ребят, уже перерыл весь интернет, информации по этому поводу очень и очень мало, все что находил - это что можно как-то к редактору TinyMCE добавить модуль Спойлер (Spoiler) и тогда в этом визуальном редакторе появится кнопка Спойлер (Spoiler), вот эта статья.

Но увы, я не программист, что-то я знаю, но этого не достаточно, что бы прикрутить это все на своем сайте.

 

Ребят, если у кого какие идеи, мысли по этому поводу? Ну не могу я это сделать, а очень надо. Бюджета тоже нет. Вот и бьюсь я уже какой день об Yandex и Google, толку никакого.

Кто хорошо в этом разбирается - подскажите! Думаю это будет полезно не только мне, но и другие пользователи будут премного благодарны!

Спасибо!

Link to comment
Share on other sites
Dimitri Yelquin Newbie

Dimitri Yelquin

Posted
Posted (edited)

Я тоже не программист, но знаю, что на ВордПрессе для спойлеров используются тоглы. Тогл (буквально значит «застёжка») — это такой скрипт, с помощью которого прячется часть содержания. Расстегнул застёжку — вывалилось спрятанное, застегнул — убралось. Скрипт тогла имеется и в библиотеке скриптов магазина. Про запас. Потому что я не встречал ни одного случая его использования. Всё что требуется — это подключить скрипт и айда злоупотреблять им, где надо и не надо...

 

Лично мне более симпатичной кажется разбивка описания по табам. Короткое описание — это, ясное дело, в карточке товара. Спецификация заполняется автоматически со страницы «Характеристик» (они же «спецификация», они же «детали», они же «features») и занимает отдельный таб... Но у нас после этого есть ещё возможность добавить подробное описание через редактор на главной странице добавления товара. Это уже отдельный таб. Если Вы и в эти два таба не уложитесь, можно добавить дополнительные. Для этого имеются специальные модули.

Edited by Dimitri Yelquin (see edit history)
Link to comment
Share on other sites
ai.egorov Newbie

ai.egorov

Posted
Posted

..

 

Самое быстрое решение по-моему, это сделать аналогично скрывающемуся длинному описанию категории (набейте длинный текст в описание категории в стандартном шаблоне и откройте ее в фронт-офисе).

 

Второе решение, тоже быстрое требует базовых навыков jQuery, где можно просто переключить через toggle класс или свойства css для элемента. Через класс, пример:

<script>
$('a.somClass1').click(function(){
$('div.someClass2').toggleClass('visibleElement');
});
</script>
<style>
.visibleElement {
свойства css
}
</style>

 

К слову, поскольку truncate использовать в этом случае сложнее, можно либо вывести два описания в разных блоках, чтобы при переключении они давали полноценную картину (но это полумера), либо сделать то, на что хватит фантазии, но полноценно, без лишних байтов кода на странице.

Link to comment
Share on other sites
Oleg2013 Newbie

Oleg2013

Posted
  • Author
Posted (edited)

Я тоже не программист, но знаю, что на ВордПрессе для спойлеров используются тоглы. Тогл (буквально значит «застёжка») — это такой скрипт, с помощью которого прячется часть содержания. Расстегнул застёжку — вывалилось спрятанное, застегнул — убралось. Скрипт тогла имеется и в библиотеке скриптов магазина. Про запас. Потому что я не встречал ни одного случая его использования. Всё что требуется — это подключить скрипт и айда злоупотреблять им, где надо и не надо...

 

Спасибо всем за быстрый ответ, и за решения. Но мне не совсем все это понятно. Хотелось бы сделать вот как тут: http://wiki.umisoft.ru/%D0%9F%D0%B...

Это бы упростила работу в будущем, по время написания статей.

 

Или можно подробнее, как активизировать эти Тоглы! Где их взять? Пока буду инет ворошить. Спасибо за указанное направление!

Edited by Oleg2013 (see edit history)
Link to comment
Share on other sites
Dimitri Yelquin Newbie

Dimitri Yelquin

Posted
Posted (edited)

Тоглы нигде искать не надо, они уже в библиотеке скриптов магазина. В корневой папке подпапка js, а в ней — toggle.js. А как его подключить, Андрей Егоров лучше расскажет... Собсвенно, кое-что он уже рассказал, но по-моему это не всё?

 

Я бы, заодно, хотел спросить про фенсибокс. В четвёртой версии я точно также, используя класс enlargeme подключал вывод картинки в фенсибоксе к любой текстовой ссылке в описании. Бывает очень удобно. Это как хотлинк, только картинки я цеплял не с чужого сайта, а с моего же блога или с фотохостинга. В четвёртой версии всё прекрасно работало, в пятой — не получается подключить... Кто-нибудь знает, как?

Edited by Dimitri Yelquin (see edit history)
Link to comment
Share on other sites
Oleg2013 Newbie

Oleg2013

Posted
  • Author
Posted

Тоглы нигде искать не надо, они уже в библиотеке скриптов магазина. В корневой папке подпапка js, а в ней — toggle.js. А как его подключить, Андрей Егоров лучше расскажет... Собсвенно, кое-что он уже рассказал, но по-моему это не всё?

 

Андрей Егоров, если есть время, расскажите подробнее, как их использовать? Будьте так добры. Спасибо!

  • Like 1
Link to comment
Share on other sites
ai.egorov Newbie

ai.egorov

Posted
Posted

..как их использовать?

 

Вот документация на русском:

http://jquery-docs.ru/effects/toggle/

 

Запрос в google:

https://www.google.ru/search?q=jquery+toggle

 

Принцип прост, нужно просто понять как писать небольшие скрипты. Вставляется в tpl, без экранов, просто в тегах <script> </script>.

 

Если вы о описании категории - смотрите через firebug большие описания категорий.

Link to comment
Share on other sites
Oleg2013 Newbie

Oleg2013

Posted
  • Author
Posted (edited)

...Принцип прост, нужно просто понять как писать небольшие скрипты. Вставляется в tpl, без экранов, просто в тегах <script> </script>.

Если вы о описании категории - смотрите через firebug большие описания категорий.

 

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

Я нашел этот файл, как подсказали выше. но в нем вот этот код:

function toggleLayer(whichLayer, flag)
{
if (!flag)
 $(whichLayer).hide();
else
 $(whichLayer).show();
}
function openCloseLayer(whichLayer, action)
{
if (!action)
{
 if ($(whichLayer).css('display') == 'none')
  $(whichLayer).show();
 else
  $(whichLayer).hide();
}
else if (action == 'open')
 $(whichLayer).show();
else if (action == 'close')
 $(whichLayer).hide();
}

 

Понимаю, что он уже написан и его осталось только применить, но вот как? Этого я не могу понять.

Уже читал и тут: http://jquery-docs.ru/effects/toggle/ - не понял, может уже просто устал, так как кучу всего перелопатил и на примере бился.

И искал вы Google, не могу понять. Какой код нужно написать в подробном описании категории, чтобы текст был изначально скрыт, а по нажатию на кнопку появлялся.

 

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

Спасибо!

 

Или я так понимаю, что toggle.js не подключены к шаблону? Может быть из-за этого у меня они и не

работали? Может такое быть?

 

Вот все что подключено:

<script type="text/javascript" src="/js/jquery/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script>
 <script type="text/javascript" src="/js/tools.js"></script>
 <script type="text/javascript" src="/themes/default/js/products-comparison.js"></script>
 <script type="text/javascript" src="/modules/blockcart/ajax-cart.js"></script>
 <script type="text/javascript" src="/themes/default/js/tools/treeManagement.js"></script>
 <script type="text/javascript" src="/js/jquery/plugins/autocomplete/jquery.autocomplete.js"></script>
 <script type="text/javascript" src="/modules/favoriteproducts/favoriteproducts.js"></script>
 <script type="text/javascript" src="/modules/blocklayered/blocklayered.js"></script>
 <script type="text/javascript" src="/js/jquery/ui/jquery.ui.core.min.js"></script>
 <script type="text/javascript" src="/js/jquery/ui/jquery.ui.widget.min.js"></script>
 <script type="text/javascript" src="/js/jquery/ui/jquery.ui.mouse.min.js"></script>
 <script type="text/javascript" src="/js/jquery/ui/jquery.ui.slider.min.js"></script>
 <script type="text/javascript" src="/js/jquery/plugins/jquery.scrollTo.js"></script>
 <script type="text/javascript" src="/modules/blocktopmenu/js/hoverIntent.js"></script>
 <script type="text/javascript" src="/modules/blocktopmenu/js/superfish-modified.js"></script>
  <script type="text/javascript">

И тут не связи с toggle.js.

Edited by Oleg2013 (see edit history)
Link to comment
Share on other sites
savvato Newbie

savvato

Posted
Posted (edited)

вам проще добавить плагин в тини мсе престы с юмикмс, главное чтоб совпадали версии, иначе плагин может не работать. Сравните версии визуальных редакторов Юмикмс и престы, если необходимо обновите до той версии, которая в юмикмс. Скопируйте плагин как написано в рервом посте. А вот подключение его в тинимсе престы немного по другому... . Откройте файлик tinymce.inc.js , в папке js он вроде , там строка plugins есть, пропишите имя плагина в нее, а кнопку инициализирующую вызов пропишите в theme__buttons, как то так... Подключал сторонние плагины в визуальный редактор на одном проекте ...Должно работать.

Edited by savvato (see edit history)
Link to comment
Share on other sites
  • 1 month later...
Oleg2013 Newbie

Oleg2013

Posted
  • Author
Posted (edited)

вам проще добавить плагин в тини мсе престы с юмикмс, главное чтоб совпадали версии, иначе плагин может не работать. Сравните версии визуальных редакторов Юмикмс и престы, если необходимо обновите до той версии, которая в юмикмс. Скопируйте плагин как написано в рервом посте. А вот подключение его в тинимсе престы немного по другому... . Откройте файлик tinymce.inc.js , в папке js он вроде , там строка plugins есть, пропишите имя плагина в нее, а кнопку инициализирующую вызов пропишите в theme__buttons, как то так... Подключал сторонние плагины в визуальный редактор на одном проекте ...Должно работать.

 

Интересно, но немного не понятно по поводу обновления чтобы версии совпадали. Я не понимаю, что нужно обновить TinyMCE или плагин UmiSpoiler?

Все проделал как написано выше. Скачал плагин, поместил его, в PresaShop 1.5.4.1 сюда: js/tiny_mce/plugins

 

Подключил плагин так: в файл js/tinymce.inc.js

в код:

plugins : "safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview,umispoiler",

Добавил название плагина: umispoiler

 

Кнопку в визуальном редакторе выводил так:

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor, media, fullscreen,umispoiler",

Добавил название плагина: umispoiler

 

Но кнопка в визуальном редакторе не появилась и сам плаген не работает.

Что можно тут сделать?

Спасибо!

Edited by Oleg2013 (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
  • 1 year later...
 Share
Go to topic listing
×
×
  • Create New...