Обновление 1.2.0."Одежда, обувь и аксессуары. Современный интернет-магазин"
17 июля 2013
Автор: Голубев Владислав
Обновление решения «Одежда, обувь и аксессуары. Современный интернет-магазин» 1.2.0 от 17 июля 2013 года включает в себя следующее:
1. Отложенная загрузка фотографий товаров
На странице каталога всегда много товаров, а значит много картинок. Это сильно влияет на скорость загрузки страницы в целом. По-умолчанию на странице раздела отображается 30 товаров – это всего 10 строк товаров по 3 в каждой. А что если нужно показывать больше товаров? Например, 60? Ответ очевиден – скорость загрузки страницы значительно упадёт.
Для оптимизации данной ситуации и повышения скорости загрузки страниц в целом мы реализовали отложенную загрузку изображений товаров. Давайте посмотрим, как это выглядит:
При загрузке страницы изображения товаров не загружаются – вместо изображений отображается иконка загрузки. Покупатель пролистывает список товаров и изображения подгружаются автоматически:
Данный функционал включен по-умолчанию. Но если всё же нужно будет его отключить, то это легко можно сделать в настройках компонента. Для этого находясь на странице каталога, перейдите в «режим правки», откройте страницу на редактирование и два раза щёлкните по иконке компонента каталога. Откроется диалог редактирования параметров компонента, в котором без труда можно найти в секции «Дополнительно» параметр «Отложенная загрузка фото товаров».
2. Подсказка к корзине в шапке сайта
Теперь покупателю не обязательно переходить на страницу корзины, чтобы посмотреть что уже там есть. Достаточно навести курсор мыши на корзину в шапке сайта и автоматически отобразится подсказка с основной информацией о товарах в корзине:
3. Поиск в шапке сайта – отображение фото и цен товаров
Теперь быстрый поиск в шапке сайта стал намного удобнее и информативнее. Для товаров отображается изображение и цена. Для раздела каталога также отображается изображение (если оно есть) и полный путь к разделу:
4. Настройка генерации превью товаров
Изначально каталог был предназначен для товаров с горизонтальными фотографиями (высота изображения больше чем ширина) и при попытке размещения более квадратных фотографий происходила генерация превью с «обрезкой» слева/справа, что естественно выглядело не очень презентабельно:
Специально для таких случаем мы реализовали возможность менять настройки генерации превью товаров в списках - слайдерах на главной странице (новинки, распродажа) и в разделах каталога. Настройки доступны в административной части сайта в разделе «Настройки › Настройки продукта › Настройки модулей › Одежда, обувь и аксессуары. Современный интернет-магазин», вкладка «Изображения»:
С помощью этих настроек можно управлять генерацией как превью изображений в обычном состоянии, так и превью изображений товаров при наведении. Можно также указать тип масштабирования:
Итак, возвращаясь к примеру «обрезки» превью товаров, посмотрим как будут генерироваться превью с настройками по-умолчанию:
Получилось, что превью создаются с сохранением пропорций и фото не «обрезается» слева/справа.
Что нужно учесть: на сайте используется кеширование, поэтому изменение настроек генерации превью не повлияет на отображение уже закешированных страниц. Необходимо сбросить кеш сацта. Для этого в административной части сайта перейдите в раздел «Настройки › Настройки продукта › Автокеширование» на вкладку «Очистка файлов кеша», выберите режим «Все» и нажмите «Начать».
5. Полная поддержка объединения CSS и JS файлов
Решение было проверено и оптимизировано для работы с новыми возможностями платформы «Объединять CSS файлы» и «Объединять JS файлы». Главный плюс от использования данных возможностей – ускорение загрузки страниц сайта. Вместе с нашим новым функционалом «отложенной загрузкой изображений товаров» данный функционал дал прирост в скорости загрузки страниц магазина почти в 2 раза!
Для включения данного функционала в административной части сайта перейдите в раздел «Настройки › Настройки продукта › Настройки модулей › Главный модуль» на вкладку «Настройки»:
6. Отображение описания раздела каталога
Для SEO немаловажным является наличие описания раздела на странице, поэтому мы добавили отображение описания раздела после списка товаров (страница раздела каталога):
Итак, перечислим всё, что вошло в обновление 1.2.0 ещё раз:
Обновить шаблон вашего сайта Вы можете в разделе «Настройки › Настройки продукта › Настройки модулей › Одежда, обувь и аксессуары. Современный интернет-магазин», вкладка «Обновление».
1. Отложенная загрузка фотографий товаров
На странице каталога всегда много товаров, а значит много картинок. Это сильно влияет на скорость загрузки страницы в целом. По-умолчанию на странице раздела отображается 30 товаров – это всего 10 строк товаров по 3 в каждой. А что если нужно показывать больше товаров? Например, 60? Ответ очевиден – скорость загрузки страницы значительно упадёт.
Для оптимизации данной ситуации и повышения скорости загрузки страниц в целом мы реализовали отложенную загрузку изображений товаров. Давайте посмотрим, как это выглядит:
При загрузке страницы изображения товаров не загружаются – вместо изображений отображается иконка загрузки. Покупатель пролистывает список товаров и изображения подгружаются автоматически:
Данный функционал включен по-умолчанию. Но если всё же нужно будет его отключить, то это легко можно сделать в настройках компонента. Для этого находясь на странице каталога, перейдите в «режим правки», откройте страницу на редактирование и два раза щёлкните по иконке компонента каталога. Откроется диалог редактирования параметров компонента, в котором без труда можно найти в секции «Дополнительно» параметр «Отложенная загрузка фото товаров».
2. Подсказка к корзине в шапке сайта
Теперь покупателю не обязательно переходить на страницу корзины, чтобы посмотреть что уже там есть. Достаточно навести курсор мыши на корзину в шапке сайта и автоматически отобразится подсказка с основной информацией о товарах в корзине:
3. Поиск в шапке сайта – отображение фото и цен товаров
Теперь быстрый поиск в шапке сайта стал намного удобнее и информативнее. Для товаров отображается изображение и цена. Для раздела каталога также отображается изображение (если оно есть) и полный путь к разделу:
4. Настройка генерации превью товаров
Изначально каталог был предназначен для товаров с горизонтальными фотографиями (высота изображения больше чем ширина) и при попытке размещения более квадратных фотографий происходила генерация превью с «обрезкой» слева/справа, что естественно выглядело не очень презентабельно:
Специально для таких случаем мы реализовали возможность менять настройки генерации превью товаров в списках - слайдерах на главной странице (новинки, распродажа) и в разделах каталога. Настройки доступны в административной части сайта в разделе «Настройки › Настройки продукта › Настройки модулей › Одежда, обувь и аксессуары. Современный интернет-магазин», вкладка «Изображения»:
С помощью этих настроек можно управлять генерацией как превью изображений в обычном состоянии, так и превью изображений товаров при наведении. Можно также указать тип масштабирования:
- С сохранением пропорций
- Точные размеры
Итак, возвращаясь к примеру «обрезки» превью товаров, посмотрим как будут генерироваться превью с настройками по-умолчанию:
Получилось, что превью создаются с сохранением пропорций и фото не «обрезается» слева/справа.
Что нужно учесть: на сайте используется кеширование, поэтому изменение настроек генерации превью не повлияет на отображение уже закешированных страниц. Необходимо сбросить кеш сацта. Для этого в административной части сайта перейдите в раздел «Настройки › Настройки продукта › Автокеширование» на вкладку «Очистка файлов кеша», выберите режим «Все» и нажмите «Начать».
5. Полная поддержка объединения CSS и JS файлов
Решение было проверено и оптимизировано для работы с новыми возможностями платформы «Объединять CSS файлы» и «Объединять JS файлы». Главный плюс от использования данных возможностей – ускорение загрузки страниц сайта. Вместе с нашим новым функционалом «отложенной загрузкой изображений товаров» данный функционал дал прирост в скорости загрузки страниц магазина почти в 2 раза!
Для включения данного функционала в административной части сайта перейдите в раздел «Настройки › Настройки продукта › Настройки модулей › Главный модуль» на вкладку «Настройки»:
6. Отображение описания раздела каталога
Для SEO немаловажным является наличие описания раздела на странице, поэтому мы добавили отображение описания раздела после списка товаров (страница раздела каталога):
Итак, перечислим всё, что вошло в обновление 1.2.0 ещё раз:
- Отложенная загрузка фотографий товаров
- Подсказка к корзине в шапке сайта
- Поиск в шапке сайта – отображение фото и цен товаров
- Настройка генерации превью товаров
- Полная поддержка объединения CSS и JS файлов
- Отображение описания раздела каталога
Обновить шаблон вашего сайта Вы можете в разделе «Настройки › Настройки продукта › Настройки модулей › Одежда, обувь и аксессуары. Современный интернет-магазин», вкладка «Обновление».
Статья полезна для
Предлагаем еще прочесть