Как сделать спойлер opencart

Скрытие текста под Hide аналог [spoiler]

2 изображения

Информация о файле

Автор скрипта readmore.js JED FOSTER (http://jedfoster.com/)

Если у Вас шаблон лежит не в папку catalog/view/theme/default/, то в файле vqmod/xml/readmorejs.xml заменить default в пути к файлам на название папки с Вашим шаблоном

Как работает?

добавляются 2 строчки

В файле catalog/view/theme/default/template/common/footer.tpl перед

Внимание : файл footer.tpl должен быть в кодировке UTF-8 ез BOOM

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

Внимание : требует vqmod не ниже 2.4.0

Закачать все файлы из папки upload в корень Вашего сайта

II. В режиме исходного кода в Вашем редакторе при редактировании материала:

То, что хотим сократить заключаем между

Pellentesque mollis, nisi sit amet faucibus pulvinar, orci orci venenatis eros, at convallis lacus nunc id lectus. Quisque luctus sapien nec dolor rutrum tincidunt. Aliquam erat volutpat. Morbi cursus rhoncus elit eu blandit. Curabitur tempus non mi et placerat. Donec eu congue arcu. Vivamus eros odio, aliquam eget auctor vel, viverra et mauris. Maecenas at est nisl. Suspendisse potenti. Suspendisse vestibulum nulla quis metus molestie varius. Suspendisse mollis non tellus a molestie. Nulla facilisi.

Morbi tempor adipiscing nibh, in aliquet dui tempus nec. Nulla facilisi. Sed cursus aliquet ligula, ut faucibus enim tincidunt quis. Nam tempor eget magna vel sodales. Vestibulum quis vulputate elit. In vitae purus vulputate, faucibus diam nec, eleifend magna. Nulla iaculis fringilla quam ac vehicula. Fusce nec tristique nunc. Curabitur vitae elit non libero tincidunt tempus. Praesent a nisi pretium, luctus tortor at, consectetur nisl. Nullam vel mollis diam. Vivamus placerat sed nisi ac dapibus.

Nam eget sagittis orci. Mauris lobortis porta justo sit amet sagittis. In eleifend convallis risus interdum dictum. Phasellus faucibus tortor massa, et eleifend erat sagittis sagittis. Sed convallis nulla sit amet ornare lobortis. Ut tempor, erat ut facilisis porttitor, tellus purus vestibulum nibh, non vehicula dolor velit at lorem. Quisque vitae libero volutpat, pretium augue eget, fermentum purus. Morbi ultricies nibh neque, vitae porttitor elit faucibus ut. Integer sit amet lorem et purus luctus dictum. Mauris turpis ipsum, facilisis ac adipiscing eget, ultrices quis sapien. Suspendisse eget magna a arcu ultricies ullamcorper. Quisque semper ac lorem at scelerisque. Suspendisse cursus ante vitae velit lacinia dictum. In faucibus dui eu elit lacinia rhoncus.

Etiam augue neque, euismod sed arcu et, dignissim consequat ligula. In ut ipsum vitae lectus venenatis fermentum. Cras sit amet orci lacinia, gravida dui viverra, imperdiet elit. Vestibulum feugiat urna id nisl suscipit blandit. Donec nec sem nec magna porta aliquet. Suspendisse in mattis diam, quis laoreet erat. Etiam ac orci id orci elementum vehicula. Nulla faucibus a libero sit amet placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus, velit a tempus pulvinar, velit nulla gravida justo, non congue tellus magna non sem.

essLink: ‘менять можно Свернуть на свой текст и класс

Источник

FAQ по Опенкарт 2.*

Опубликовал Alexeina66 в блоге Блог Alexeina66. Просмотров: 2700

Вот уже некоторое продолжительное время я полностью погружен в opencart 2. Все проекты я разрабатываю для себя. И оцениваю их не только в качестве разработчика но и владельца магазинов.

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

Заменили везде пути, сохранились, обновили в браузере ссылку на ваш домен, должно все заработать. Если не заработало, то значит вы где-то допустили ошибку, слеш например не поставили и т.д. Проверяйте.

Заполните, как показано ниже:

Language Name: Русский
Code: ru
Locale: ru,ru_RU,ru_RU.UTF-8
Image: ru.png
Directory: russian
Filename: russian
Status: Enabled
Sort Order: 1
6. Сохраняем. Теперь нам необходимо применить язык.
7. Перейдите на вкладку System / Settings / [Edit] / Local и выберите в Language и Administration Language параметр «Русский»
8. Сохраняем. Очищаем кеш сайта и браузера и радуемся русскому языку.

Так бывает, что необходимо перенести категории и товары с одного сайта на другой.
Как это сделать?
Учтите! Переносить необходимо в ту версию базы данных в которой были созданы таблицы. Например, из Mysql 5.5 необходимо переносить в Mysql 5.5, иначе вы столкнетесь с ошибками.

Для категорий
1. Необходимо зайти в БД сайта с которого будем переносить.
Находим следующие таблицы

2. Делаем экспорт каждой таблицы
Нажимаем на таблицу. Справа вверху переходим на вкладку Экспорт и жмем OK. Итак для каждой таблицы указанные выше.
3. Переходим в базу данных в которую необходимо перенести категории.
4. Нажимаем на первую таблицу oc_category.
Если там есть какие-нибудь данные. Удаляем, нажав на вкладку SQL и далее нажимаем на кнопку DELETE.
5. После этого нажимаем на вкладку Импорт и нажав на кнопку browse находим данную таблицу которую вы сохранили при Экспорте выше на своем компьютере.
Итак для всех таблиц, которые были экспортированы ранее. Очищаем кеш, обновляем модификаторы, удаляем историю браузера. И радуемся перенесенными категориями.

Я сделал все по инструкции, но у меня не появились Категории?
Обратите внимание на столбец language_id в таблице oc_category_description.
Например, у вас он 2.
Перейдите в таблицу oc_language и посмотрите с каким id у вас установлен язык по умолчанию. Если он отличается, то его необходимо сменить в oc_category_description и тогда категории появятся.

Я сделал все по инструкции, но у меня не появились картинки Категорий?
Вам необходимо перенести папку IMAGE из корня сайта. Либо если вы создавали отдельную папку для категорий, то именно ее и переносите.

Для товаров
1. Необходимо зайти в БД сайта с которого будем переносить.
Находим следующие таблицы

Если у вас были заполнены атрибуты товаров и фильтры, то необходимо найти дополнительно эти таблицы:


2. Делаем экспорт каждой таблицы
Нажимаем на таблицу. Справа вверху переходим на вкладку Экспорт и жмем OK. Итак для каждой таблицы указанные выше. Если таблица пустая, то ее экспортировать не нужно. Просто пропускайте.
3. Переходим в базу данных в которую необходимо перенести товары.
4. Нажимаем на первую таблицу oc_product.
Если там есть какие-нибудь данные. Удаляем, нажав на вкладку SQL и далее нажимаем на кнопку DELETE.
5. После этого нажимаем на вкладку Импорт и нажав на кнопку browse находим данную таблицу, которую вы сохранили при Экспорте выше на своем компьютере.
Итак для всех таблиц, которые были экспортированы ранее. Очищаем кеш, обновляем модификаторы, удаляем историю браузера. И радуемся перенесенными товарами.

Я сделал все по инструкции, но у меня не появились Товары?
Обратите внимание на столбец language_id в таблице oc_product_description.
Например, у вас он 2.
Если он отличается, то его необходимо сменить в oc_product_description и тогда товары появятся.

Я сделал все по инструкции, но у меня не появились картинки Товаров?
Вам необходимо перенести папку IMAGE из корня сайта. Либо если вы создавали отдельную папку для товаров, то именно ее и переносите.

При установке модулей через установщик расширений в opencart 2 возникает ошибка

Источник

Создаём спойлер для сайта на HTML за 5 шагов

Навигация по статье:

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

Что понадобится для создания спойлера на HTML?

Шаг 1. Подключаем библиотеку Jquery

Это можно сделать двумя способами:

Шаг 2. Верстаем спойлер на HTML

У меня код спойлера выглядит следующим образом:

Шаг 3. Прописываем скрипт для спойлера

В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:

Шаг 4. Дописываем стили для разворачивающегося текста.

Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:

Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код:

Шаг 5. Проверяем работу спойлера на сайте

Если по каким либо причинам ваш спойлер не заработал попробуйте сделать следующее:

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

24 комментария

Приветствую. Спойлер оригинальный, понравился. Все работает отлично, но вот что надумал реализовать (пока безуспешно, не специалист :)) А можно каким-то образом в блоке открывшегося контента поставить кнопку, которая служила бы то есть для закрытия? 🙂 Понятно, что посетитель может нажать ту же кнопку, что и для открытия, но тем не менее, бывает такое, что не каждый догадается.

Здравствуйте!
Можно попробовать добавить в блоки спойлера блок с классом «close-button», оформить его в виде кнопки, а затем дописать для него скрипт:
$(‘.close-button’).click(function() <
$(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>);

Его нужно вставить в тот скрипт, который я давала в статье после строк:
$(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
return false;
>);

Еще не по теме, можно ответить на мейл а не сюда, т.к. оффтоп.

у меня для вопросов и отзывов стоит тот же плагин что и у вас, у вас платная версия? просто отличается от моего, может это все в настройках есть, а я не нашел, т.к. сильно еще не вникал в него, но тем не менее сходу не увидел такой возможности. Например у меня если написать отзыв который идет на модерацию, то при обновлении странички он исчезает из виду, пока его не одобрят, у вас он доступен с надписью что он на модерации, тоже бы так хотелось. да и вообще стиль оригинальный, я тоже постарался убрать все ненужное (кнопку меню, по которой доступно 3 пункта, 2 из которых реклама и еще убрал из футора добавку, которую плагин внедряет, если навести курсор на копирайт, там появляется 2 значка) В общем, интересно знать, если у вас платная версия, тогда я пойму, почему они такие разные, если бесплатная — буду искать настройки…

Здравствуйте, Андрей! Вы имеете ввиду систему hypercomments? Если да, то у меня бесплатная версия.

Извините за спамм,но я наконец понял, у вас 3 типа отзывов, я не обратил внимание.
1 — через ВК
2 — плагин hypercomments, именно его я имел введу, когда спрашивал
3 — а вот этот вид отзывов заинтересовал. Можете сообщить, как такой себе на сайт установить? Что это за плагин?

Здравствуйте, Андрей! У меня установлена система комментариев hypercomments. Как нибудь сделаю статью по этой теме

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

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

Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает 🙂

Вы можете заменить этот текст на любой другой.

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

И чтобы ссылка открывала именно тот блок, для которого написана, например чтобы они «чуяли» друг друга по какому-то определеному >

где Х переменная, для разных соответсвующих блоков и ссылок разная

Для этого нужно полностью переделывать верстку спойлера и переписывать скрипт.

а то уж очень понравилась плавность разъезжания скрытого дива, хочу применять для разъезжающихся спойлеров по тексту и так же для организации меню. Но нужно чтобы не по принципу дочернесте, а по принципу самостоятельных двух объектов узнаЮщих друг друга… Заранее спасибо!

Понравился ваш спойлер, просто, удобно и со вкусом 🙂

К сожалению не прогер 🙂 так бы решил задачу. Заранее спасибо 🙂

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

Во-вторых — подскажите, пожалуйста.. Можно ли как-то сделать, чтоб после открытия спойлера текст не выезжал от его левого края, а появлялся сразу там, где должен быть?

Здравствуйте, Пит!
Спасибо за Ваш комментарий!
Для данного решения, к сожалению, эффект появления текста выбрать нельзя, но можно задать скорость анимации.
Для этого в скрипте вместо «fast» можно задать значение в миллисекундах, например, «0».

Здравствуйте. Только что сделал спойлер — он поработал час, потом перестал:

1) Сначала прописал стили в общие стили CSS, но они не помогли, пришлось на каждой странице прописывать как script — text.css.

Всё замечательно работало.

2) Через час зашёл на сайт снова — перестало =(

Удалил из общих стилей CSS — не помогло.

Что может быть? Jquery точно доступна

Интересная ситуация :). Даже не знаю. Плагины кеширования какие-нибудь стоят на сайте?

Конкретно проблема в том что Спойлер виден, но при клике ничего не происходит.

Здравствуйте! Прежде всего огромное спасибо за кучу интересной информации на Вашем сайте. Знакомлюсь с WP именно по нему. Но несмотря на многочасовые попытки спойлер так и не заработал.. (WP — Vantage)…. а так хотелось((.

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

Очень понравился материал, воспользовался, спасибо!

Есть замечание к оформлению, долго не мог найти где пример. Блок «Посмотреть пример» «Скачать исходник» оформлен как рекламный блок, такое у нас отфильтровывается и как информация не воспринимается.

В целом, всё круто, спасибо большое!

Источник

Как сделать спойлер opencart

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

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

Теперь представьте такую же статью, только с соблюдением должного оформления:

Вопрос скрытия/открытия контента довольно актуальный. Мы уже рассматривали как в одном и том же месте, на том же пространстве страницы сайта, можно вывести куда больше материала, чем это кажется на первый взгляд: статья про табы (своеобразные вкладки для вывода различной информации в одном и том же месте). В этой же статье речь пойдет о спойлерах для сайта wordpress.

Чтобы не вдаваться в определение спойлера сразу приведу пример:

Текст спойлера. Открывается/закрывается при клике.

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

Кликните по нему и Вы увидите содержание данного спойлера. Он реализован без плагинов, этот вариант мы так же рассмотрим ниже.

Для чего нужны спойлеры на сайте?

Пара примеров применения спойлеров:

Поисковые системы без проблем индексируют содержание спойлеров, так что за это переживать ни в коем случае не нужно.

Спойлер на WordPress – как сделать с помощью плагина.

Для реализации спойлеров на движке WordPress написан замечательный плагин: Advanced Spoiler – он простой, удобный и красивый. Кроме того можно самому дописать стили для него, поэтому вписавать спойлеры в дизайн статей блога не составит никакого труда.

Выбираем эффект появления и текст при закрытом/открытом спойлере:

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

Я например для себя написал следующее:

Спойлер для сайта без плагинов.

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

Что бы добавить спойлер в нужное место скопируйте вот этот код:

Замените два участка этого кода, на то что требуется:

Название спойлера выполнено в виде кнопки ( type=”button” ) с классом: class=”input-button”.

Источник

Простое зафиксированное (липкое) меню

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

Так же для мобильной версии в меню категорий добавлена возможность прокрутки меню если у Вас много позиций в категориях и при раскрытии меню они не помещаются на странице.

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

Просьба не писать комментарии, такие как: «Установил, но не работает», «Установил и ничего не изменилось» и т.д. и т.п.
Если необходима помощь, в комментариях УБЕДИТЕЛЬНАЯ просьба указывать точную версию Opencart или ocStope, какой шаблон установлен и его версия. Если установлен дефолтный шаблон, то делали ли в нем какие-либо правки кода.

Предоставляется как есть!
Не работает на IE.

Написать

Ваш отзыв: Внимание: HTML не поддерживается! Используйте обычный текст.

Оценка: Плохо Хорошо

Введите код, указанный на картинке:

Чтобы скачать файлы нужно сначала Войти или Зарегистрироваться

Источник