От автора: в OpenCart опции – это одна из множества полезных функций. В этом уроке вы узнаете, как с помощью опций создавать различные вариации одного товара без необходимости создавать отдельный товар. В частности, вы узнаете, как создавать настраиваемые товары на front end, чтобы пользователь мог выбирать различные доступные варианты одного товара на его странице. Детально разберем опции в панель администратора. Закончим этот урок демо настраиваемого товара.
Базовое понятие опций
Вы когда-нибудь попадали в ситуацию, когда вам нужно создать несколько товаров с небольшими различиями в атрибутах? Опции в OpenCart созданы именно для этого! С их помощью можно создавать версии одного товара, а также менять их цену.
Давайте разберем парочку реальных примеров, чтобы понять. Скажем, вам нужно предоставить разные цвета для товара «футболка» в своем магазине. Вы также хотите получать немного больше денег с самых популярных цветов. Добиться этого можно с помощью опции select в OpenCart. После настройки цветов в панели администратора, пользователю будет предоставлен выбор цветов на странице одного товара. И да, цена будет меняться в зависимости от выбранного цвета!
Более продвинутый пример — Graphic Tee. Здесь пользователям необходимо разрешить загрузку изображений, которые можно печатать на футболках. Для этого можно использовать опцию file. Иногда от пользователя нужны некоторые данные типа «ваше имя», которые будут распечатаны на брелке. Здесь вам поможет опция text.
Таким образом, опции включают в себя несколько форм с данными от пользователя, помимо самой покупки товара. Также по необходимости можно менять цену в зависимости от выбора пользователя.
Различные типы опций
Рассмотрим различные типы опций в OpenCart.
Text и textarea. С помощью этого типа от пользователя получаются текстовые данные. Text даст вам текстовый бокс, а textarea – текстовое поле, в которые пользователь может ввести необходимые данные.
Загрузка файлов. Судя по названию, тип file можно использовать, когда пользователю необходимо загрузить файл для товара.
Date и time. Как вы могли догадаться, этот тип попросит пользователя ввести дату и время. Есть три разных типа. Тип date & time позволяет вводить дату и время вместе. Date позволяет вводить только дату. Time – только время. Опция полезна, когда необходимо уточнить у пользователя дату доставки.
Выборочные данные. В этом типе опций пользователю даются на выбор различные элементы. Есть 4 выбираемых типа:
Select – выпадающий список с различными опциями
Radio – радиокнопка для каждой опции
Checkbox – различные чекбоксы для каждой опции. Эту опцию можно использовать, когда необходимо дать множественный выбор для одной опции
Image – схож с radio, только пользователь выбирает из разных изображений, а не текста
С типами опций закончили. Хватит теории, перейдем к действию!
Создание настраиваемого товара
В этом разделе мы создадим настраиваемый товар в панели администратора. Сначала создайте простой товар Graphic T-Shirt через back end. Заполните стандартную информацию о товаре и выберите категорию. Детали не важны, так как мы будем работать только с вкладкой option в интерфейсе редактирования товара. Вернусь к этому в конце раздела.
Наша футболка должна быть настраиваемая. Можно выбрать ее цвет, ввести слоган и загрузить изображение для печати. Давайте посмотрим, как это сделать с помощью опций.
Опция color
Перейдите в back end и далее в Catalog > Options. Откроются существующие опции. Для создания новой опции color кликните на insert.
Заполните значения, как на скриншоте сверху. В Option Name мы указали color. Это будет заголовок. Далее поле type, для которого мы выбрали select, так как нам нужен выпадающий список для цветов. Sort order используется для сортировки отображения опций. Пока что введем 1 в это поле.
После заполнения базовой информации необходимо ввести значений опции. У нас это будут разные цвета. Кликните на add option value, чтобы добавить значения для опции color. На скриншоте сверху мы указали red в Option Value Name и Sort Order 1. Поле image трогать не будем для упрощения. Так же добавьте 2 цвета blue и green.
Опция slogan text
Давайте настроим опцию Slogan Text. Кликните на Insert на странице Catalog > Options.
В поле option name мы ввели Slogan Text. Type установлен text. Sort order 2.
Опция Tshirt Image
Последняя опция T-Shirt Image – добавьте ее опять же по кнопке insert.
В поле option name мы ввели T-Shirt Image. Type равен file, sort order 3.
Настройку опция закончили. Теперь необходимо связать наши опции с товаром, чтобы они отображались на front end. Надеюсь, вы уже создали товар Graphic T¬-Shirt, как я говорил ранее. Если еще нет, создайте прежде чем продолжить!
Назначение опции товару
Давайте отредактируем товар Graphic T-Shirt и добавим опции. Перейдите на вкладку option в интерфейсе редактирования. Слева будет текстовый бокс с автокомплитером. Если ввести color, в выпадающем списке значений автокомплитера отобразится опция color, которую мы добавили ранее.
Если кликнуть на color, добавится новая строка для цвета, как показано на скриншоте. В этом разделе вы можете добавить разные значения опции, которые необходимо отобразить для color на front end. Добавьте разные опции color по кнопке add option value.
Я добавил три опции: blue, green и red. Price – еще одно важное поле. Для всех опций можно менять цену с помощью знаков +/- для введенного значения. Последнее – нужно задать quantity для каждого типа опции. Если этого не сделать, она не будет отображаться на front end. С опцией color мы закончили.
Теперь давайте назначим slogan text таким же образом. Для этого поля не нужны настройки, так как это просто текстовый бокс.
И давайте назначим T-Shirt Image. Для этой опции также не нужны настройки, так как это просто поле загрузки файла.
После назначения всех трех опций товару, сохраните его. И все!
Тест-драйв front end
Давайте сразу перейдем к странице одного товара на front end!
Смотрится круто, правда? Таким образом, вы только что создали настраиваемый товар T-shirt, в котором пользователи могут выбрать цвет, ввести текст слогана и загрузить изображение. Вы могли заметить, что за другие цвета берется другая сумма. Все по настройкам back end! Теперь вы должны знать, что такое опции, и уметь создавать настраиваемые товары в OpenCart. На сегодня все!
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
