Как подключить LazyLoad в OpenCart

На страницы товаров, в категориях, результаты поиска, страницы производителей.

В чём проблема

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

Как сделать

  1. Скачать lazyload.min.js.
  1. Как альтернатива его можно подключить ссылкой:
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>
  1. Залить файл в catalog/view/javascript/. Ну или куда удобно.
  1. Подключить в header.twig в своей теме.
  1. В footer.twig, перед закрывающим тегом body, вставить:
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"
});
</script>
  1. Теперь идём в catalog/view/тема/product/category.twig.
  1. И к каждому тегу img добавляем класс lazy, а вместо src — data-src. Вот так это будет выглядеть:
<img class="lazy" data-src="ссылка на изображение" alt="">
  1. Тоже самое теперь нужно проделать в файлах product.twig, search.twig, manufacturer_info.twig.
  1. Всё сохраняем, обновляем кэш и вот это всё.
  1. Готово.
  1. Для работы скрипта нужна подключенная библиотека jquery.
  1. У этого скрипта куча настроек и возможностей — всё можно посмотреть на гитхабе.
Поделиться
Отправить
1 мес   OpenCart 3