Задача
Доработать карточку товара (PDP) в теме Shopify Dawn (Online Store 2.0).
Что нужно реализовать
- Добавить блок «Embroidery / Monogram» - функциональность, аналогичную представленной на карточке справа от примера (выбор параметров вышивки, монограммы).
- Поля для ввода: типы вышивки (например, строчка, сатин), цвета ниток, текст монограммы, шрифт на выбор.
- Отображение цены (доплаты) за услуги вышивки, если она зависит от опций.
- Проверка на корректность ввода (доступные цвета, числовые параметры).
Сохранение данных
Записать введённые параметры (выбор опций, текст монограммы) в line item properties оформленного заказа - чтобы они автоматически отображались в админ-панели Shopify, в заказе в уведомлении (например в письме клиенту) и на странице просмотра заказа.
Ожидаемый механизм: обычная передача через input[type='hidden'] с name, заданным по шаблону properties[…Все подробности…] (то есть стандартный способ для line item properties). Все дополнительные сборные и ассеты не требуются, кроме чистого Liquid, HTML/Css/JS внутри темы. Фреймворк, библиотеки (Slick, Select2…): использовать минимум . Допускается Vanilla JavaScript : без селекторов $('#'), только element/selectors для взаимодействия с обnовой.
Требования к клиентской стороне
- Совместимость с последней версией темы Dawn.
- Аккуратная работа с каруселью и дополнительной цифрой во время количства - используйте минимальный кастомный попап или небольшой HTML-ов. Метка (чтобы улучшить UX для всплывания при вводе) - безопасна..
- Корректно при обновлении и при клике опций, при adding to не дубить входные и свойства передаются сперва item state.
UX/UI дополнения
- Добавить выбраное и настраиваемое расширение (подробность для метода обдирной монограмы). жаблуч разeры выти и так далее далее плательщикоме Все фичи контрмира соответствующим.