Shopify (Dawn): блок “Embroidery/Monogram” в карточке товара + сохранение в line item properties
Нужен разработчик 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
Приложения 5
-
6650 28 0 2 Приветствую! Ознакомился с вашим подробным техническим заданием по реализации блока вышивки для темы Dawn. Я специализируюсь на разработке под Shopify (OS 2.0) и имею большой опыт работы с Liquid, JavaScript и кастомизацией секций темы Dawn. Ваша задача по внедрению line item properties через скрытые инпуты мне абсолютно понятна, я неоднократно реализовывал подобные решения для персонализации товаров, которые корректно передаются в корзину и отображаются в заказе.
Я реализую этот функционал именно как блок в схеме main-product.liquid с выносом логики в отдельный сниппет, что обеспечит чистоту кода и удобство управления через редактор тем. Drawer будет адаптирован под мобильные устройства в формате bottom-sheet, а логика сохранения свойств будет работать на чистом JS без конфликтов со стандартным функционалом добавления в корзину.
Для начала работы мне важно уточнить пару моментов. Подскажите, пожалуйста, шрифты для выбора будут реализованы через стандартный функционал шрифтов Shopify или вы предоставите кастомные файлы для подключения через CSS? Также уточните, нужно ли отображать выбранные параметры в корзине (cart page/drawer) или достаточно их передачи в свойства заказа для администратора?
Я готов обсудить реализацию вашего проекта в личных сообщениях. Подтверждаю, что работа с line item properties является стандартной частью моей практики. Буду рад помочь вам внедрить этот функционал!
Актуальные фриланс-проекты в категории CMS
Администратор-настройщик LearnWorldsЗадача Настроить готовую платформу LearnWorlds под элитный онлайн-курс. Не разрабатывать архитектуру — реализовать уже готовую структуру руками в admin panel. ———————— Что нужно сделать: Брендинг ⦁ Подключить свой домен ⦁ Загрузить логотип, настроить фирменные цвета ⦁… CMS, Веб-программирование ∙ 1 день 16 часов назад ∙ 10 ставок |
Адаптивный дизайн портфолио сайта (wordap - сайт для продажи и покупки)Мне нужен чистый, современный сайт портфолио, который соответствует моему существующему бренд-гиду и прекрасно адаптируется к настольным компьютерам, планшетам и мобильным устройствам. Задача сайта проста: выделить мою работу с помощью эффектных фотографий, встроенных видео и… CMS, Веб-программирование ∙ 2 дня 10 часов назад ∙ 44 ставки |
Перенести полностью готовую адаптивную HTML5-структуру в WordPress.
12 000 UAH
Я ищу опытного WordPress-разработчика, который сможет преобразовать наш тщательно подготовленный статический HTML5/CSS3 код в высокопроизводимую кастомную WordPress-тему. Фронтенд уже практически готов (примерно 99%): семантическая разметка, метаданные и мультиязычная структура… CMS, PHP ∙ 3 дня назад ∙ 66 ставок |
Нужен сильный специалист по WordPress / WooCommerce для доработки сайта MARSPROИщем ответственного фрилансера или небольшую команду для качественного завершения и технической доработки сайта компании MARSPRO. Сайт уже работает, но после предыдущего разработчика осталось много мелких и важных технических проблем. Нам нужен человек, который сможет не просто… CMS, HTML и CSS верстка ∙ 3 дня 15 часов назад ∙ 44 ставки |
Разработка современного сайта для Театра
10 000 UAH
Ищем веб-разработчика для создания официального сайта современной культурной платформы. Проект объединяет театральные, художественные, образовательные и культурные инициативы. Необходимо создать современный адаптивный сайт, который будет одновременно выполнять имиджевую функцию,… CMS, Веб-программирование ∙ 3 дня 17 часов назад ∙ 114 ставок |