Задача
Crea il tuo caffè позволяет покупателям составить собственную кофейную смесь и купить её уже обжаренной и упакованной. Обычная страница товара с несколькими вариациями с этим не справлялась. Цена зависит от сочетания происхождений, количества, степени обжарки и упаковки, а некоторые покупатели хотят видеть на пакете свой логотип.
Что я сделал
Я написал собственный плагин WordPress, который превращает один товар WooCommerce в конфигуратор смесей.
- Ползунки происхождения — 7 происхождений (Эфиопия, Гватемала, Бразилия, Уганда, Индия, Вьетнам, Индонезия) с шагом 10%. Корзина не примет смесь, если сумма не равна ровно 100%.
- Рекомендуемые смеси — можно начать с предложенной смеси и подстроить её под себя. Подсказки оценивают характеристики каждого происхождения от 1 до 5 кофейных зёрен.
- Цена в реальном времени — цена равна взвешенной сумме цен всех происхождений и обновляется на экране, пока покупатель двигает ползунки.
- Цены за объём — 1, 50, 100 или 250 кг. Цена за килограмм снижается с ростом количества: половина при 50 кг, 40% при 100 кг, треть при 250 кг.
- Обжарка и упаковка — светлая, средняя или тёмная обжарка; простой пакет, пакет с загруженным логотипом покупателя или предложение индивидуального дизайна, которое оплачивается отдельно.
- Выбор сохраняется в заказе — происхождения, количество, обжарка, упаковка и логотип видны в корзине, при оформлении и в деталях заказа, так что обжарщик точно знает, что производить.
- Точка входа на главной — блок конфигуратора на главной странице, доступный и как элемент WPBakery, передаёт первые выбранные параметры на страницу товара.
Технологии
WordPress, WooCommerce и тема Larcorso с WPBakery; собственный плагин на PHP с чистым JavaScript и Swiper; WooPayments, Mailchimp for WordPress, Complianz для согласия на cookie и онлайн-чат tawk.to.
Почему именно так
Смеси, происхождения, вкусовые оценки и цены хранятся в атрибутах товара в WooCommerce, а не в коде. Клиент может изменить цену или рекомендуемую смесь на обычном экране товара, и конфигуратор это подхватит.
