1. aspro.ru
  2. Аспро: Маркет
  3. Новый шаблон корзины 1С-Битрикс

Новый шаблон корзины 1С-Битрикс


В готовом решении Аспро: Next версии 1.1.2 реализована поддержка нового шаблона корзины от 1С-Битрикс. Благодаря ему вы можете гибко настраивать ее внешний вид, а также использовать расширенные возможности для управления стикерами и мобильной версией.

Новая корзина будет подключена автоматически при обновлении решения и платформы. Если вы хотите использовать шаблон корзины от Аспро, переключитесь на него в настройках компонента. Инструкция из базы знаний.

Чтобы ознакомиться с возможностями нового шаблона, переключитесь в режим правки.

e090e106-7b64-11f1-8fe4-fa163e2ff576

Откройте корзину, наполненную товарами, и наведите указатель на ее содержимое. На появившейся панели кликните по изображению шестеренки.

cd6ebdbe-7b5b-11f1-8fe4-fa163e2ff576

Перед вами откроется редактор параметров компонента:

3ddd9006-7b61-11f1-8fe4-fa163e2ff576

Здесь вы можете увидеть новую группу «Настройки изображений», а также найти дополнительные параметры в группах «Внешний вид» и «Основные параметры».

Группа «Основные параметры»

Среди основных параметров корзины появилась одна новая настройка – «Разрешить восстановление удаленных товаров».

b57be4e8-7b64-11f1-8fe4-fa163e2ff576

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

e1118cdc-7b5b-11f1-8fe4-fa163e2ff576

Группа настроек «Внешний вид»


В этой группе появились параметры, которые позволят вам:

1. Определять, какие элементы корзины будут отображаться в мобильной версии сайта.

498ce5e3-7b5b-11f1-8fe4-fa163e2ff576

Например, вы можете включить/отключить отображение:

  • изображения товара (1);
  • действующей скидки (2);
  • кнопки удаления товара из корзины (3);
  • типа цены (4);
  • суммы за количество выбранного товара (для каждой позиции в корзине) (5).

3ff15c1b-7b5e-11f1-8fe4-fa163e2ff576

2. Менять положение блока с полем ввода номера купона, общей стоимостью заказа и кнопками его оформления.

de330600-7b5b-11f1-8fe4-fa163e2ff576

Теперь этот блок можно разместить:

  • над корзиной

2c02e082-7b5f-11f1-8fe4-fa163e2ff576

  • под корзиной

1c6017e3-7b63-11f1-8fe4-fa163e2ff576

3. Выбирать режим отображения корзины: «Расширенный» или «Компактный»

bdc1b8fb-7b64-11f1-8fe4-fa163e2ff576

  • Вид корзины в режиме «Расширенный» для товаров без торговых предложений:

e0b6fbba-7b5c-11f1-8fe4-fa163e2ff576

  • Вид корзины в режиме «Компактный» для товаров без торговых предложений:

80ebb25a-7b61-11f1-8fe4-fa163e2ff576

  • Вид корзины в режиме «Расширенный» для товаров с торговыми предложениями:

d83a2173-7b5e-11f1-8fe4-fa163e2ff576

  • Вид корзины в режиме «Компактный» для товаров с торговыми предложениями:

4afb898c-7b64-11f1-8fe4-fa163e2ff576

4. Включать/отключать отображение цены за штуку в отдельной колонке

23c8c1d7-7b65-11f1-8fe4-fa163e2ff576

Вид страницы при активном параметре:

68dc5e66-7b5f-11f1-8fe4-fa163e2ff576

5. Прикреплять рядом с изображением товара стикер с размером действующей скидки

01374eba-7b5c-11f1-8fe4-fa163e2ff576

Когда вы включаете отображение стикера (1), появляется дополнительная настройка (2), которая позволит вам выбрать, к какой стороне картинки крепить стикер на изображение – по центру, справа, слева или внизу:

6e387b51-7b5f-11f1-8fe4-fa163e2ff576

6. Определять порядок положения блоков товара

fc95e167-7b62-11f1-8fe4-fa163e2ff576

Например, вы можете настроить корзину так, чтобы сначала выводились свойства торгового предложения (1), а потом товара (2):

c44d1ee1-7b5e-11f1-8fe4-fa163e2ff576

Или, наоборот, сперва вывести свойства товара (2), а потом торгового предложения (1):

4f6c84a1-7b5b-11f1-8fe4-fa163e2ff576

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

bee97953-7b5e-11f1-8fe4-fa163e2ff576

7. Включать/отключать анимацию цен

74e5904c-7b5f-11f1-8fe4-fa163e2ff576

Если параметр активирован, при изменении количества товара в корзине цена по виду товара и общая стоимость заказа быстро «прокручиваются» до нужного значения (как на спидометре). Если параметр деактивирован, суммы изменяются моментально без дополнительных эффектов.

ba3d5041-7b5c-11f1-8fe4-fa163e2ff576

8. Выводить дополнительные метки товара

Метки товара – это стикеры «Акция», «Хит», «Советуем», «Новинка».

bc514d91-7b5f-11f1-8fe4-fa163e2ff576

Новый шаблон позволяет вывести их как в полной версии сайта (1), так и в мобильной (2), а также определить положение стикера относительно изображения товара (3).

7f30618d-7b5d-11f1-8fe4-fa163e2ff576

Внимание! По умолчанию в корзине данные стикеры скрыты стилями, чтобы они не загромождали пространство. Если вы все же хотите, чтобы они отображались в корзине, пожалуйста, напишите нам в поддержку. https://aspro.ru/support.

Группа «Настройки изображений»

С настройками из этой группы вы можете вывести изображения из дополнительной фотогалереи товара (1) и/или торгового предложения (2) в корзину, а также определить режим отображения основного фото товара (3).

901030a9-7b5c-11f1-8fe4-fa163e2ff576

Рассмотрим работу параметров подробнее.

Чтобы вывести вспомогательную галерею товара в корзину, выберите свойство, отвечающее за хранение изображений товаров. В примере, это «Фотогалерея».

2d4a956d-7b64-11f1-8fe4-fa163e2ff576

Также в группе «Внешний вид» не забудьте вывести соответствующую колонку для полной версии сайта и, при необходимости, для мобильной.

26f794eb-7b60-11f1-8fe4-fa163e2ff576

После сохранения изменений в корзине под свойствами товара должны появиться дополнительные фото:

2365796f-7b5f-11f1-8fe4-fa163e2ff576


Если требуется вывести дополнительные изображения торговых предложений, также выберите в настройках свойство с фото (например, «Картинки»):

3c087e27-7b62-11f1-8fe4-fa163e2ff576

И выведите колонки для полной и мобильной версии сайта.

fd487acf-7b5d-11f1-8fe4-fa163e2ff576

Результат на странице:

4cc0cfd5-7b5d-11f1-8fe4-fa163e2ff576

Чтобы определить размер основного фото товара используйте параметр «Режим отображения изображений товаров»:

  • Вариант «Без сжатия» дает максимальный размер фото

194a9089-7b65-11f1-8fe4-fa163e2ff576


  • «Адаптивный» – средний

91462c9d-7b62-11f1-8fe4-fa163e2ff576

  • «Стандартный» – самый миниатюрный

f9626a9d-7b5c-11f1-8fe4-fa163e2ff576


Предыдущая статья Подключение Яндекс SmartCaptcha
Следующая статья Требования к графическим материалам