Лидеры

Веб сервер nginx позволяет работать в разных режимах, как с использованием интерпретатора php, так и без. Для работы OpenCart лучше выбирать оптимальный режим работы php-fpm. Многих данный режим пугает тем, что в данном случае файл htaccess напрочь игнорируется и все необходимые настройки нужно вносить в конфиг nginx. Но в этом нет ничего сверх сложного. Конфигурационный файл - это обычный текстовый файл на сервере, который подчиняется определённым правилам. И по данному поводу можно найти много готовых описаний и инструкций. Данная статья не претендует на уникальность, а просто представляет краткую выжимку по настройкам, учитывая особенности работы с движком OpenCart и сборками на его основе. Для удобства будут приводится примеры настройки с использованием панели ISPmanager. Основные настройки будут касаться секции location, и зависимость описания от используемой панели будет минимальной. Для начала переведём nginx в режим работы php-fpm. Для этого в панели сделаем следующие настройки разделе WWW-домены для нужного сайта: 1. Выбираем в списке нужный сайт, если их несколько, и жмём кнопку "Изменить". 2. Находим настройки PHP и настраиваем следующим образом: Обратите внимание, что версия php у вас может отличаться. При необходимости, можно эту версию изменить на нужную, но этот вопрос выходит за рамки данной статьи. После сохранения настроек будет работать почти всё, что и раньше. Если в настройках OpenCart отключены ЧПУ ссылки, то всё будет работать, как и работало до переключения режима работы. Теперь можно приступать к непосредственной настройке самого конфигурационного файла nginx для текущего сайта. Для этого в списке www доменов находим нужный нам и нажимаем справа на иконку с тремя точками. В выпадающем меню выбираем пункт "Конфиг": Вот примерный конфигурационный файл, который будет создан у вас по умолчанию: В конфигурации у вас будет две секции server, если у вас включено защищённое соединение SSL (и оно должно быть обязательно включено). Если у вас включен принудительный редирект с http на https, то можно редактировать только секцию server для https. Определить её легко: в самом начале есть параметр с указанием сертификата ssl_certificate. Также в этой секции указан параметр listen с указанием порта 443: listen 8.8.8.8:443 ssl Но лучше делать настройки сразу в двух секциях server, чтобы не допустить механической ошибки. На данный момент нас интересует вот эта часть конфигурационного файла: location / { location ~ [^/]\.ph(p\d*|tml)$ { try_files /does_not_exists @php; } location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf)$ { expires 365d; } } Все дальнейшие изменения мы будем вносить внутри этой секции "location /". В первую очередь нам не хватает вот такой директивы: if (!-e $request_filename){ rewrite ^/(.+)$ /index.php?_route_=$1 last; } Данное условие очень простое: если сервер не может найти файл по указанному в запросе пути, то запрос будет переписан на вызов index.php, а в параметр _route_ будет передан запрашиваемый путь. Именно это и позволит корректно отрабатывать всем ЧПУ ссылкам движка. Это правило является аналогом записи в файле htaccess: RewriteRule ^([^?]*) index.php?_route_=$1 [L,QSA] На этом можно было бы и закончить, но стоит внести ещё некоторые изменения для улучшения безопасности. Рассмотрим более внимательно вот эту секцию: location ~ [^/]\.ph(p\d*|tml)$ { Тут отбираются все все подходящие динамические файлы с типами .php (в том числе с числами в окончании) и .phtml Но у движка OpenCart в штатном режиме есть всего две точки входа для вызова php файлов через web окружение - это index.php и admin/index.php Есть ещё install/index.php, но она используется только при установке движка. Учитывая данные обстоятельства, логично запретить прямое выполнение всех остальных php скриптов через web окружение, кроме указанных администратором. Сделать это можно следующим образом: location ~ ^/(index|admin/index|install/index)\.php { try_files /does_not_exists @php; } В скобках через разделитель "|" указываем все php скрипты, которые можно выполнять. После завершения установки можно будет сократить это список до такого: (index|admin/index) ВНИМАНИЕ!!! Очень важный момент! После того, как убрали вызов интерпретатора php для всех файлов, кроме указанных, при попытке запроса любого другого php файла он будет отдан как обычный текстовый файл. И при запросе https://test.ru/config.php любой желающий сможет получить содержимое вашего конфигурационного файла, где содержится доступ к БД. Поэтому нам обязательно нужно запретить доступ для всех остальных файлов с расширением php. Ну и заодно к другим типам файлов, которые не стоит отдавать по запросу извне. Сделать это можно простым правилом: location ~* \.(php|log|tpl|txt|twig|xml|ini)$ { deny all; } В скобках через разделитель "|" указываем все расширения файлов, которые мы хотим запретить. Но у нас есть несколько важных файлов, которые пока попали под запрет, например: robots.txt и sitemap.xml. Этот вопрос мы решим чуть позже. А сейчас ещё немного запретов. Запретим открывать файлы, которые начинаются с точки, а также все файлы в папке system: location ~ /\. { deny all; } location ~ ^/system/ { deny all; } Этих запретов вполне достаточно, чтобы сделать невозможным выполнение каких-либо несанкционированных скриптов. А также просмотр логов, текстовых и xml файлов. Теперь нам необходимо открыть доступ к файлу robots.txt, для этого нам нужно такое правило: location = /robots.txt { allow all; } Также пропишем разрешение на открытие sitemap.xml и rewrite правило: location = /sitemap.xml { allow all; rewrite ^/(.*)$ /index.php?route=extension/feed/google_sitemap last; } Если вы используете сторонний модуль сайтмапа, то нужно указать соответствующий route для данного модуля. Если у вас несколько файлов sitemap или вы используете фиды для выгрузки данных, то просто пропишите для них права по аналогии. В итоге мы должны получить вот такую секцию location: Этих настроек достаточно для корректной работы движка OpenCart. И при этом данная конфигурация является безопасной с точки зрения выполнения несанкционированных скриптов php через web окружение. После всех настроек обязательно проверьте правильность работы, сделав запросы по указанному чек-листу (test.ru замените на адрес вашего сайта): https://test.ru/config.php https://test.ru/admin/config.php https://test.ru/admin/1.php https://test.ru/admin/1.txt https://test.ru/admin/1.log https://test.ru/admin/1.xml https://test.ru/system/modification.xml Для всех этих ссылок вы должны получить ошибку "403 Forbidden", вне зависимости от того, есть файл по указанному пути на сервере, или нет. Также проверяем белый список: https://test.ru/robots.txt https://test.ru/sitemap.xml Эти файлы не должны вызывать ошибок и вы должны корректно получать их содержимое. Дополнительно стоит проверить все ваши дополнительные сайтмапы или фиды, если вы их добавляли. Ещё раз повторюсь, что данная настройка является базовой, с небольшими правилами для улучшения безопасности. Но даже уже при такой настройке вы в среднем получите выигрыш 100-200ms для параметра TTFB, по сравнению с остальными режимами работы.

При покупке товаров в интернет-магазинах, большинство клиентов изучают товар более подробно, просматривая характеристики и описание, пролистывая при этом карточку товара. И когда после изучения всех необходимых подробностей клиент готов купить товар, кнопка покупки уже находится далеко за пределами экрана, что заставляет совершать покупателя дополнительные действия по поиску данной кнопки, чтобы иметь возможность добавить товар в корзину. Эту задачу своим клиентам вы можете упростить, сделав на странице товара небольшую прилипающую панель с названием товара, ценой и кнопкой добавления в корзину, которая будет появляться при исчезновении стационарной кнопки покупки за пределами экрана. Данное нововведение вполне может повлиять на конверсию для вашего интернет-магазина на OpenCart, конечно же, в сторону её увеличения. Посмотреть готовый пример такой реализации можно по ссылке. Как только кнопка покупки уходит за верхнюю границу экрана, внизу показывается прилипающая панель с необходимыми данными. В данной статье будут описаны основные шаги по созданию такого функционала своими руками. Ссылку на готовый пример в виде модуля для OpenCart3 вы сможете найти в конце статьи. При желании, адаптировать модификатор для других версий OpenCart не составит особого труда. Приступим к созданию. Для начала в файле шаблона catalog/view/theme/default/template/product/product.twig добавим сразу после строки: {{ header }} HTML блок со всеми необходимыми нам данными: <div class="psp-wrap" id="product-sticky-panel"> <div class="container"> <div class="psp-content"> ... </div> </div> </div> Код сокращён для наглядности. Полный исходный код можно посмотреть по ссылке в конце статьи. Теперь нам нужно добавить необходимые стили. Для начала сделаем нашу панель прилипающей. Для этого будем использовать position: sticky (заодно пропишем нужные правила для позиционирования нашей панели) .psp-wrap { position: sticky; top: 0; left: 0; right: 0; z-index: 999; } С такими стилями наша панель будет отображаться всегда, а при скроле будет прилипать к верху экрана. Такая реализация не совсем подходит для поставленной цели. Поэтому скроем нашу панель по умолчанию: .psp-wrap:not(.active) { display: none; } !ВНИМАНИЕ! В исходном коде модуля-примера все стили помещаются в <head> страницы. Если стили будут переноситься в css файл, то стиль скрытия надо обязательно оставить в секции <head>, иначе наша панель будет видна, пока не подгрузится файл стилей, а это увеличит совокупное смещение макета (CLS), что соответственно снизит оценку PageSpeed. Теперь наша панель скрыта. Дело остаётся за небольшим скриптом, который добавит нужный класс active для нашей панели в от момент, когда кнопка покупки спрячется за верхней границей экрана. Задача довольно простая, поэтому её лучше решить без использования jQuery. Для данной задачи нам также не нужно активное отслеживание событий onscroll, поэтому здесь как нельзя лучше подойдёт Intersection Observer API. Подробный разбор скрипта в этой статье не приводится, т.к. в интернете хватает документации и примеров по использованию данного API. Действия по отслеживанию будут выполняться вот таким скриптом: document.addEventListener('DOMContentLoaded', () => { let target = document.querySelector('#button-cart'); let psp = document.querySelector('#product-sticky-panel'); target && psp && new IntersectionObserver(([e]) => psp.classList.toggle('active', e.boundingClientRect.y < 0), { threshold:1.0 }).observe(target); }); Полный код этой несложной модификации можно скачать вот тут: