COVID2019 и это вот все. Друзья, вся эта история начинает плохо пахнет. Мойте руки, не ходите в люди. Отложите все плановые покупки и положите в носок заначку. Заприте ваших родителей, бабушек-дедушек на даче. Лучше перебдеть чем недобдеть. Берегите себя!

Общий FAQ от WarStyle по Opencart 2.x


Recommended Posts

  • 5 months later...

Немного годного контента :) 
 

Делаем удобное меню сайта с картинками формата SVG, которые не теряют качество, даже если увеличить на максимум размер экрана телефона. Плюс в том, что эти картинки так же и весят до 5 кб в среднем, PageSpeed не ругается на такие картинки, а сейчас как мы знаем, все хотят побольше попугаев. Так же плюс этого меню в том, что в нем можно сделать меню с большим уровнем вложенности кастомными ссылками, что актуально и очень удобно для вывода разной полезной информации.
 

Пример меню:

 

Скрытый текст

1.png

 

 

Скрытый текст

2.png

 

 

Скрытый текст

3.png

 

Демо такого меню, без картинок SVG: ТЫЦ, просто для ознакомления.

 

Все делалось на opencart.pro 2.3 версии, инструкция распространяется как есть, все что Вы делаете - на свой страх и риск.

 

Нам понадобится:

 

1) Мега меню от @29aleksey или же шаблон, в котором есть такое меню NewStore или CyberStore.
2) Сделать поддержку SVG картинок в движке.
3) Найти картинки SVG и подогнать их под размер нашего меню.
 

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


Второе, это поддержка SVG, есть несколько вариантов развития событий, добавить код ручками, будет чуть ниже, или же поставить модификатор: ТЫЦ

 

Добавляем код ручками: 


Идем в файл admin/model/tool/image.php после строки:

 

Скрытый текст

$extension = pathinfo($filename, PATHINFO_EXTENSION);

 

 

Добавляем:

 

Скрытый текст

if('svg' == $extension) {
            if ($this->request->server['HTTPS']) {
                return HTTPS_CATALOG . 'image/' . $filename;
            } else {
                return HTTP_CATALOG . 'image/' . $filename;
            }
      }

 

 

Тоже самое делаем в файле: catalog/model/tool/image.php после строки:

 

Скрытый текст

$extension = pathinfo($filename, PATHINFO_EXTENSION);

 

 

Добавляем:

 

Скрытый текст

if('svg' == $extension) {
            if ($this->request->server['HTTPS']) {
                return HTTPS_SERVER . 'image/' . $filename;
            } else {
                return HTTP_SERVER . 'image/' . $filename;
            }
      }

 

 

Далее идем в файл admin/controller/common/filemanager.php и после:

 

Скрытый текст

// Get files
 $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);

 

 

Добавляем "svg,SVG" или же заменяем кодом ниже:

 

Скрытый текст

$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF,svg,SVG}', GLOB_BRACE);

 

 

В этом же файле ищем вот такой кусок кода:

 

Скрытый текст

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png'
 );

 

 

И так же добавляем поддержку SVG:
 

Скрытый текст

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png',
 'svg'
 );

 

 

В этом же файле находим дальше вот такой кусок кода:

 

Скрытый текст

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif'
 );

 

 

И так же заменяем на этот:

 

Скрытый текст

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif',
 'image/svg+xml'
 );

 

 

После всех изменений, не забываем обновить модификаторы! Причем не важно, руками добавляли код или модификатором. Теперь наш магазин поддерживает SVG картинки. Инструкция с кодом взята на просторах интернета, как я и говорил ранее - все что Вы делаете, на Ваш страх и риск.

 

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

 

Например нам нужна иконка телефона в формате SVG и при этом зеленого цвета. Вверху этого сайта есть поиск с фильтром.

 

http://joxi.ru/GrqpBxeHk7QJkA - выбираем вот такие параметры и пишем что мы ищем.

 

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

 

1) http://joxi.ru/Q2KQqGxuwe4Gxr

2) http://joxi.ru/DmBPRqEHznwQlA

3) http://joxi.ru/Q2KQqGxuwe4Rxr

 

После того как мы скачали картинки вроде как все готово и можно её поставить, но не спешите радоваться, к сожалению размер картинки не подгоняется автоматом и если Вы её вставите как есть, то она на сайте будет просто огромная, если кто-то допилит код для меню, чтобы они автоматом становились 25*25, буду благодарен, а пока расскажу о другом костыле, которым можно обойтись :)

Так вот, чтобы картинки хорошо смотрелись в меню, нам нужно сделать их 25px * 25px и тут довольно все просто, Вам нужно открыть скачанную картинку через блокнот или редактор кода и найти где у неё задан размер.

 

1) http://joxi.ru/bmogbnOc9gxq8m

2) http://joxi.ru/vAWnevYHqN1L72

 

После того как нашли, заменяем размер на 25*25 и сохраняем, это размер, который подойдет для нашего меню, картинка станет маленькой, но качество не потеряет.

 

http://joxi.ru/bmogbnOc9gx58m

 

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

 

Вроде все, если будут вопросы или предложения - задавайте или дополняйте, удачи.

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Похожие публикации

    • Автор: Seriusis
      Тема поддержки модуля Accordion & Tabs & Steps.
       
      Универсальный конструктор контента -  вкладки, аккордеоны, popup, шаги, панели, мини-галереи, баннера, шорткоды.  Вопрос/ответ, микроразметка FAQ/HowTo. Модули в табах и popup. Вывод сторонних модулей с привязкой к категории, товару и др. без необходимости создания макета. 
      Детальнее о разметке и чем она так полезна FAQ page, How To
       

      ОБЛАДАТЕЛЯМ OpenCart.pro 2.x СКИДКА 20%
      для получения скидки обратитесь к Admin
       

       
       
       
       
      Ниже определение "Блок" подразумевает под собой созданный блок любого типа, из доступных, а именно: вкладки/аккордеон/шаги/набор панелей типа заголовок + содержимое/список
      ВОЗМОЖНОСТИ
      Реализация вкладок Реализация аккордеонов (расскрывающихся списков) NEW!  Всплывающие окна, изображения, мини-галереи
      NEW! Баннера с настройкой количества баннеров в строке: 1,2,3,4,6
      Реализация блоков вида step by step, т.е. шагов Реализация списка элементов вида Панель: заголовок + содержимое Микроразметка FAQ или HowTo элемента блока, что позволяет хорошо выделить ваш сайт в выдаче Вставка любого модуля вашего магазина в элемент вкладки / аккордеона / шага / панели / всплывающее окно
      Например, модули "Рекомендуемые", "Новинки" и тд, и организовать табы с товарами
      Или модули "Баннер", "Карусель", "Слайдшоу", и организовать табы с баннерами или слайдерами
      Привязка созданных блоков к Товару, Категории, Производителю, Статье
      NEW! Привязка для вывода в группах товаров по критериям: "Присутствует в категории", "Товар производителя"
      Вывод на системных страницах: Главная, Список проиводителей, Контакты, Акции, Страница возврата, Форма входа, Личный кабинет, Корзина
      NEW! Вставка блока через шорткод в полях описания товара любом поле админки и прямо в tpl/twig файлах вашей темы.
               Два режима работы шорткода:
               1. Обычный (выводить всегда)
               2. Учитывать связи блока, который вставляем
      NEW! Вставка блока в другой блок
      Модуль совместим с блогами в сборках ocstore и opencart.pro  (можно привязать блоки в статье блога)
      Модуль совместим с SEO CMS блогом  (можно привязать блоки в статье блога)
      Модуль совместим с фильтром товаров OCfilter (можно привязать блоки к посадочной seo странице)
      NEW! Модуль совместим с Newsblog (доп. модификатор) NEW! Модуль совместим с Opencart Blog (доп. модификатор) Возможность вывода нескольких блоков на одной странице с сортировкой Настойка позиции выводя блоков для каждого типа страниц через макеты opencart Вывод в любое место на странице через привязку по селектору или через шорткод Возможность индивидуальной настройки для каждого созданного блока отдельно (стиль вывода, микроразметка, маркер и др.) Любые вариации блоков и различными видами и привязками и паралельной работой на одной странице NEW! Можно использовать Emoji. NEW! Возможность копирования блока NEW! Поддержка редактора ckeditor как опция, если он есть в сборке  
       
      ДЕМО
      https://oc23.likedev.pro/
      Админка https://oc23.likedev.pro/admin/   логин/пароль: demo/demo
       
      ОСОБЕННОСТИ
      Решает сразу несколько задач: Табы, Аккордеоны, Шаги, всплывающие окна, мини-галерея, баннера, шорткоды,  2 вида микроразметки, т.е. заменяет сразу 3-4 десяток модулей Вставка других модулей внутри себя еще больше расширяет возможности модуля Шорткоды позволяют вставить блок в любое поле админки через визуальный редактор или в файлах tpl/twig (т.е, например, вместо  [ldev_question_block_id=1] будут выведены табы, аккордеон и тд) Можно вставлять один созданный блок в другой (например создать вкладки, и вставить в них аккордеон, баннер и т.д.) Работает практически на всех страницах, мультипривязка к нескольким страницам одного блока, или нескольких блоков к одной странице Очень гибкая админка и много настроек Удобное управление блоками с фильтром и поиском в списке блоков. Информация по типу блока, привязках прямо в списке Единый интерфейс в админке и разные типы вывода на сайте Совместимость с нестандатными шаблонами без бутстрапа, благодаря возможности подключения автономных скриптов и стилей модуля Никакого iouncube, что позволяет доработать под себя  
      ВАРИАНТЫ ПРИМЕНЕНИЯ
      Часто задаваемые вопросы с FAQ разметкой Инструкции с HowTo разметкой Вывод модулей с товарами, категориями и др. в табах, аккордеонах, всплывающих окнах Вывод модулей с баннерами, каруселями в табах, аккордеонах Вывод панелей/вкладок типа "Оплата, Доставка, Гарантия" для всех карточек или индивидуально с разным текстом Предоставление информации по шагам, например, инструкция по применению товара магазина с микроразметкой HowTo Очень полезна для выдачи сайта возможность быстро реализовать микроразметку faq/howto для любой страницы Таблицы размеров, сертификаты, фотографии, предупреждения или другая информация в всплывающих окнах Вывод мини-галереи фотографий Создание баннеров или баннерной сетки  Вывод любой информации в удобном виде Вывод блоков или сторонних модулей в нужных местах шаблона, без необходимости создания дополнительных позиций.  Каждый блок типа вкладка/аккордеон/шаги/панель/список имеет свои поля: название блока, описание.
      Каждый блок состоит из элементов
      Каждый элемент имеет свои поля: название, текст (любое html содержимое), изображение, модуль
      Элементы блока можно сортировать.
      Блоки тоже можно сортировать и выводить несколько на одной странице
       
      Внимание! Не включайте микроразметку одного типа больше чем для 1 блока на 1 странице, гугл это зарещает!
       
       
      ЛИЦЕНЗИЯ 
      Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Для получения ключа обращайтесь в лс или на почту seriusisu@gmail.com, сразу указывайте данные о покупке: номер заказа и домен
       
      ОБНОВЛЕНИЕ
      для обновления модуля к версии 1.0.4 |  1.1 | 1.2:
       
      удалить модификатор Accordion + Tabs + Steps, Faq + HowTo Microdata.ocmod установить архив как обычное дополнение через админку. Обновить кэш модификаторов Для версии 1.2 обязательно зайти в Расширения - Модули - Accordion & Tabs & Steps.  Таблицы модуля будут обновлены.  Сам модуль в списке дополнений удалять не нужно
       
      Еще видео
      Создание аккордеона "Вопрос-ответ" + FAQ микроразметка
       
       
      Создание вкладок (табов) + вставка модуля "Рекомендуемые" в вкладку
       
       
      Пошаговый режим (Step by step) + HowTo микроразметка
       
       
       
       
      Купить модуль можно ЗДЕСЬ
      Приветствую дельные предложения по развитию и расширению модуля. Задавайте вопросы в данной теме или в лс.
       
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу