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.