Szukamy doświadczonego dewelopera z wiedzą na temat Shopify, modelowania 3D (używając Three.js lub podobnych bibliotek) oraz integracji czcionek, aby pomógł nam stworzyć funkcję personalizacji grawerunku dla produktu Champagne Sabre. Głównym celem projektu jest umożliwienie użytkownikom personalizacji szabli poprzez dodanie własnego tekstu grawerunku, wybór spośród trzech różnych opcji czcionek oraz podgląd na żywo grawerunku na modelu 3D szabli.
Kluczowym wymaganiem jest integracja podglądu grawerunku na żywo z systemem zamówień Shopify, umożliwiająca klientom dodawanie spersonalizowanych produktów do koszyka i przechodzenie przez proces zamówienia w Shopify.
Wymagania projektu:
1. Niestandardowa strona motywu Shopify dla grawerunku
Opracowanie niestandardowej strony Shopify zintegrowanej w naszym motywie, poświęconej personalizacji produktu Champagne Sabre.
Strona powinna umożliwiać użytkownikom:
Wprowadzenie własnego tekstu do grawerunku (do 40 znaków).
Wybór spośród 3 dostępnych czcionek do grawerunku (mamy czcionki w różnych formatach i może być konieczne ich przekształcenie do formatu .json kompatybilnego z Three.js).
Podgląd grawerunku na ostrzu szabli w wyznaczonym obszarze grawerunku (180mm x 20mm) za pomocą przeglądarki modeli 3D. (Obecnie używamy "motywu Shopify Prestige". Strona grawerunku powinna płynnie integrować się z ogólnym designem i układem motywu)
2. Integracja modelu 3D i podgląd grawerunku
Model 3D Champagne Sabre:
Model 3D jest już hostowany na AWS (Amazon S3) i musimy go zintegrować z stroną Shopify.
Model powinien umożliwiać powiększanie, obracanie i przesuwanie (używając Three.js lub podobnych).
Wdrożenie renderowania tekstu na modelu 3D, które pokazuje podgląd grawerunku wyśrodkowanego na ostrzu, używając jednej z wybranych czcionek.
Czcionki muszą być przekształcone na czcionki geometryczne czytelne dla Three.js (np. w formacie .json) i stosowane na modelu 3D w czasie rzeczywistym na podstawie danych wejściowych użytkownika.
3. Integracja czcionek
Mamy czcionki (obecnie w formatach .woff, .woff2, .ttf itd.) i musimy je przekształcić do formatu .json kompatybilnego z Three.js (używając narzędzi takich jak Facetype.js lub innych).
Renderowanie czcionek geometrycznych:
Tekst powinien być renderowany geometrycznie (nie jako obraz) i musi idealnie pasować do obszaru grawerunku na ostrzu.
Zapewnić odpowiednie skalowanie, obracanie i wyrównanie tekstu.
Umożliwić łatwe przełączanie między 3 opcjami czcionek, zachowując funkcjonalność podglądu na żywo.
4. Personalizacja produktu i integracja koszyka
Po zakończeniu przez użytkownika grawerunku tekstu i wyboru czcionki, spersonalizowany produkt powinien zostać dodany do koszyka.
Integracja produktu Shopify:
Tekst grawerunku i wybrana czcionka powinny być przesyłane do koszyka Shopify i przechodzić przez proces zamówienia.
Własne atrybuty (np. tekst grawerunku, czcionka) powinny pojawić się w zamówieniu Shopify, zapewniając ich widoczność w szczegółach zamówienia do realizacji.
5. Jakość i testowanie
Przetestować stronę pod kątem użyteczności i wydajności, zapewniając płynny podgląd na żywo i integrację koszyka.
Strona powinna być responsywna i działać płynnie na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.
Wymagania techniczne:
Języki i frameworki:
Silne doświadczenie w JavaScript (szczególnie Three.js) i Shopify Liquid w zakresie rozwoju niestandardowych motywów.
Znajomość HTML5, CSS3 i API Shopify.
Modelowanie 3D:
Ekspertyza w renderowaniu modeli 3D przy użyciu Three.js lub innych bibliotek WebGL.
Doświadczenie w pracy z czcionkami i tekstem geometrycznym w Three.js (przekształcanie i używanie niestandardowych czcionek).
Integracja AWS S3:
Umiejętność integracji i ładowania modelu 3D z Amazon S3.
Integracja Shopify:
Dogłębne zrozumienie personalizacji Shopify, integracji produktów i koszyka.
Umiejętność obsługi personalizacji procesu zamówienia Shopify, szczególnie dla spersonalizowanych produktów.
Oczekiwane rezultaty:
W pełni funkcjonalna niestandardowa strona Shopify dla produktu Champagne Sabre, umożliwiająca personalizację grawerunku z podglądem 3D na żywo.
Czcionki przekształcone do kompatybilnych formatów do renderowania geometrycznego na modelu 3D przy użyciu Three.js.
Pełna integracja personalizacji produktu z koszykiem i procesem zamówienia Shopify.
Finalny projekt strony, który jest responsywny i przyjazny dla użytkownika na wszystkich urządzeniach.
Testowanie i debugowanie w celu zapewnienia płynnej wydajności.
Harmonogram projektu
Szukamy dewelopera, który może ukończyć to zadanie w ciągu najbliższych 3-4 dni. Proszę o podanie przykładów wcześniejszych podobnych projektów z niestandardową integracją 3D.
