Shopify (Dawn): блок “Embroidery/Monogram” в карточке товара + сохране
Нужен разработчик Shopify (Liquid/JS/CSS) для темы Dawn (Online Store 2.0).
Цель: сделать на странице товара (PDP) блок “Embroidery / Monogram” как у примера (карточка в правой колонке), который открывает панель настройки вышивки. Вышивка бесплатная (цена товара не меняется), но выбранные параметры должны уходить в заказ как line item properties.
Где должен быть блок
Внутри Product information на странице товара
Как block, а не отдельная секция
Расположение: под Quantity selector, до Buy buttons
UI/Функционал
В свернутом виде (карточка):
Title: “Add Your Monogram”
Subtitle: “Personalize with elegant hand-finished embroidery”
Badge справа: “COMPLIMENTARY”
Кнопка/ссылка: “Configure”
При клике Configure:
Открывается drawer/модалка
Desktop: drawer справа
Mobile: bottom-sheet или полноэкранная панель
Обязательно:
скролл внутри (контент не должен обрезаться)
закрытие по X и по клику на overlay
блок не должен “залипать” открытым
Внутри drawer шаги:
Выбор локации (radio):
Top Right Corner
Bottom Right Corner
Top Left Corner
Bottom Left Corner
Текст вышивки
max 10 символов
счетчик 0/10
валидация: минимум 1 символ (если не выбрано “No, thanks”)
Выбор шрифта
6 опций (01–06)
Важно: кнопки не просто названия, а превью “ABC” как на экране вышивальной машины
Цвет нити
swatches (кружочки) + подпись/tooltip
цвета:
Cream #F5EFE3
Deep Ecru #D8C3A5
Ivory #F7F1E6
Cloud #B9B5AE
Dusty Navy #2F4E73
Baby Blue #7FB2D8
Light Mint #CFE8D8
Khaki #8A7B6A
Winterberry #A3182E
Red #D1122E
Pink #F2B6C6
Кнопки:
“No, thanks”
“Cancel”
“Save”
После Save:
показывается summary (текст + локация + шрифт + цвет)
кнопки Edit / Remove
Что должно попадать в заказ (line item properties)
Нужно записывать в product form (через hidden inputs или иначе корректно):
properties[Embroidery Text]
properties[Embroidery Location]
properties[Embroidery Font]
properties[Embroidery Thread Color]
Если “No, thanks”:
Embroidery Text = "No, thanks"
остальные поля можно пустыми
Технические требования
Dawn / OS 2.0
Реализация как block в sections/main-product.liquid (schema + вывод через case block.type)
Рендер через snippet snippets/embroidery-block.liquid
JS без eval, без нарушений CSP, scoped selectors (чтобы не ломалось при нескольких блоках)
Адаптив 320px+, drawer: max-height: 90vh; overflow-y: auto
Не ломать стандартный add-to-cart Dawn, без ошибок в консоли
Результат
Код внесён в тему + проверка на Desktop/Mobile
Я проверяю: сохранение настроек → добавление в корзину → свойства видны в cart item и в order
Пожалуйста, в отклике
пришлите 2–3 примера Shopify работ (Dawn/OS2.0)
оценку по времени/стоимости
подтвердите, что делали кастомные line item properties
