Shopify (Dawn): blok “Haft/Monogram” w karcie produktu + zapis w właściwościach pozycji linii

Potrzebny programista Shopify (Liquid/JS/CSS) do motywu Dawn (Sklep internetowy 2.0).

Celem jest stworzenie na stronie produktu (PDP) bloku “Wyszywanie / Monogram” jak w przykładzie (karta w prawej kolumnie), który otwiera panel ustawień wyszywania. Wyszywanie jest darmowe (cena produktu się nie zmienia), ale wybrane parametry powinny być przekazywane w zamówieniu jako właściwości pozycji.

Gdzie powinien być blok

• Wewnątrz informacji o produkcie na stronie produktu

• Jako blok, a nie osobna sekcja

• Lokalizacja: pod selektorem ilości, przed przyciskami zakupu

  
  

  UI/Funkcjonalność

W złożonym widoku (karta):

• Tytuł: “Dodaj swój monogram”

• Podtytuł: “Personalizuj eleganckim ręcznie wykończonym wyszywaniem”

• Odznaka po prawej: “DARMOWE”

• Przycisk/link: “Skonfiguruj”

Po kliknięciu Skonfiguruj:

• Otwiera się szuflada/modal

  • Desktop: szuflada po prawej

  • Mobile: dolny arkusz lub pełnoekranowy panel

  
  

• Obowiązkowo:

  • przewijanie wewnątrz (zawartość nie powinna być obcinana)

  • zamknięcie przez X i kliknięcie na overlay

  • blok nie powinien “przyklejać się” otwarty

  
  

  
  

Wewnątrz szuflady kroki:

1. Wybór lokalizacji (radio):

   • Górny prawy róg

   • Dolny prawy róg

   • Górny lewy róg

   • Dolny lewy róg

   
   

2. Tekst wyszywania

   • max 10 znaków

   • licznik 0/10

   • walidacja: minimum 1 znak (jeśli nie wybrano “Nie, dziękuję”)

   
   

3. Wybór czcionki

   • 6 opcji (01–06)

   • Ważne: przyciski to nie tylko nazwy, ale podgląd “ABC” jak na ekranie maszyny do wyszywania

   
   

4. Kolor nici

   • próbki (kółka) + podpis/tooltip

   • kolory:

     • Kremowy #F5EFE3

     • Głęboki ecru #D8C3A5

     • Kość słoniowa #F7F1E6

     • Chmura #B9B5AE

     • Przydymiony granat #2F4E73

     • Baby Blue #7FB2D8

     • Jasna mięta #CFE8D8

     • Khaki #8A7B6A

     • Winterberry #A3182E

     • Czerwony #D1122E

     • Różowy #F2B6C6

       
       

     
     

Przyciski:

• “Nie, dziękuję”

• “Anuluj”

• “Zapisz”

Po zapisaniu:

• wyświetla się podsumowanie (tekst + lokalizacja + czcionka + kolor)

• przyciski Edytuj / Usuń

Co powinno trafić do zamówienia (właściwości pozycji)

Trzeba zapisać w formularzu produktu (przez ukryte inputy lub inaczej poprawnie):

• właściwości[Tekst wyszywania]

• właściwości[Lokalizacja wyszywania]

• właściwości[Czcionka wyszywania]

• właściwości[Kolor nici wyszywania]

Jeśli “Nie, dziękuję”:

• Tekst wyszywania = "Nie, dziękuję"

• pozostałe pola mogą być puste

Wymagania techniczne

• Dawn / OS 2.0

• Realizacja jako blok w sections/main-product.liquid (schema + wyjście przez case block.type)

• Renderowanie przez snippet snippets/embroidery-block.liquid

• JS bez eval, bez naruszeń CSP, scoped selectors (aby nie psuło się przy kilku blokach)

• Responsywność 320px+, szuflada: max-height: 90vh; overflow-y: auto

• Nie psuć standardowego add-to-cart Dawn, bez błędów w konsoli

Wynik

• Kod wprowadzony do motywu + sprawdzenie na Desktop/Mobile

• Sprawdzam: zapisanie ustawień → dodanie do koszyka → właściwości widoczne w elemencie koszyka i w zamówieniu

  
  

Proszę, w odpowiedzi

• prześlij 2–3 przykłady prac Shopify (Dawn/OS2.0)

• ocenę czasu/kosztów

• potwierdź, że robiłeś niestandardowe właściwości pozycji