Створення власних товарів в OpenCart з допомогою опцій

15

Від автора: В OpenCart опції – це одна з безлічі корисних функцій. У цьому уроці ви дізнаєтеся, як за допомогою опцій створювати різні варіації одного товару без необхідності створювати окремий товар. Зокрема, ви дізнаєтеся, як створювати власні товари на front end, щоб користувач міг вибирати різні доступні варіанти одного товару на його сторінці. Детально розберемо опції в панель адміністратора. Закінчимо цей урок демо настроюваного товару.

Базове поняття опцій

Ви коли-небудь потрапляли в ситуацію, коли вам потрібно створити кілька товарів з невеликими відмінностями в атрибутах? Опції в OpenCart створені саме для цього! З їх допомогою можна створювати версії одного товару, а також міняти їх ціну.

Давайте розберемо декілька реальних прикладів, щоб зрозуміти. Скажімо, вам потрібно надати різні кольори для товару «футболка» у своєму магазині. Ви також хочете отримувати трохи більше грошей з найпопулярніших кольорів. Домогтися цього можна за допомогою опції select в OpenCart. Після налаштування кольорів в панелі адміністратора, користувачеві буде наданий вибір кольорів на сторінці одного товару. І так, ціна буде змінюватися в залежності від вибраного кольору!

Більш сучасний приклад — Graphic Tee. Тут користувачам необхідно дозволити завантаження зображень, які можна друкувати на футболках. Для цього можна використовувати опцію file. Іноді від користувача потрібні деякі дані типу «ваше ім’я», які будуть роздруковані на брелоку. Тут вам допоможе опція text.

Таким чином, опції включають в себе кілька форм з даними від користувача, крім самої покупки товару. Також за необхідності можна змінювати ціну в залежності від вибору користувача.

Створення власних товарів в OpenCart з допомогою опцій

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення

Різні типи опцій

Розглянемо різні типи опцій в 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.

Створення власних товарів в OpenCart з допомогою опцій

Заповніть значення, як на скріншоті зверху. У Option Name ми вказали color. Це буде заголовок. Далі поле type, для якого ми обрали select, так як нам потрібен випадаючий список для квітів. Sort order використовується для сортування відображення опцій. Поки що введемо 1 в це поле.

Після заповнення базової інформації необхідно ввести значень опції. У нас це будуть різні кольори. Клікніть на add option value, щоб додати значення для опції color. На скріншоті зверху ми вказали red у Option Value Name і Sort Order 1. Поле image чіпати не будемо для спрощення. Так само додайте 2 кольору blue та green.

Створення власних товарів в OpenCart з допомогою опцій

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення

Опція text slogan

Давайте налаштуємо опцію Slogan Text. Клікніть на Insert на сторінці Catalog > Options.

Створення власних товарів в OpenCart з допомогою опцій

У полі option name ми ввели Slogan Text. Type встановлений text. Sort order 2.

Опція Tshirt Image

Остання опція T-Shirt Image – додайте її знову ж по кнопці insert.

Створення власних товарів в OpenCart з допомогою опцій

У полі option name ми ввели T-Shirt Image. Type дорівнює file, sort order 3.

Налаштування опція закінчили. Тепер необхідно зв’язати наші опції з товаром, щоб вони відображалися на front end. Сподіваюся, ви вже створили товар Graphic T-Shirt, як я говорив раніше. Якщо ще немає, створіть перш ніж продовжити!

Призначення опції товару

Давайте відредагуємо товар Graphic T-Shirt і додамо опції. Перейдіть на вкладку option в інтерфейсі редагування. Ліворуч буде текстовий бокс з автокомплитером. Якщо ввести color, у випадаючому списку значень автокомплитера з’явиться опція color, яку ми додали раніше.

Створення власних товарів в OpenCart з допомогою опцій

Якщо клікнути на color, додасться нова рядок кольору, як показано на скріншоті. У цьому розділі ви можете додати різні значення опції, які необхідно відобразити для color на front end. Додайте різні опції color по кнопці add option value.

Я додав три опції: blue, green і red. Price – ще одне важливе поле. Для всіх опцій можна змінювати ціну з допомогою знаків +/- для введеного значення. Останнє – потрібно задати quantity для кожного типу опції. Якщо цього не зробити, вона не буде відображатися на front end. З опцією color ми закінчили.

Тепер давайте призначимо slogan text таким же чином. Для цього поля не потрібні настройки, так як це просто текстовий бокс.

Створення власних товарів в OpenCart з допомогою опцій

І давайте призначимо T-Shirt Image. Для цієї опції також не потрібні настройки, так як це просто поле завантаження файлу.

Створення власних товарів в OpenCart з допомогою опцій

Після призначення всіх трьох опцій товару, збережіть його. І все!

Тест-драйв front end

Давайте одразу перейдемо до сторінки одного товару на front end!

Створення власних товарів в OpenCart з допомогою опцій

Виглядає круто, правда? Таким чином, ви тільки що створили настроюється товар T-shirt, в якому користувачі можуть вибрати колір, ввести текст слогану і завантажити зображення. Ви могли помітити, що за інші кольори береться інша сума. Всі налаштуванням back end! Тепер ви повинні знати, що таке опції, і вміти створювати власні товари в OpenCart. На сьогодні все!

Створення власних товарів в OpenCart з допомогою опцій

Інтернет-магазин на OpenCart!

Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!

Приступити до створення