Pracownia SZKLIWO · ręcznie szkliwiona kamionka

Kubek kamionkowy z Twoim napisem

Wybierz szkliwo i pojemność, dopisz słowa albo dodaj logo — kubek obraca się na żywo, a cena liczy się przy każdej zmianie. Szkliwimy i wypalamy go dla Ciebie w 1240 °C.

Zaprojektuj swój kubek

Kobaltowy kubek kamionkowy z grawerowanym napisem „Dobrego dnia”

Konfigurator potrzebuje JavaScriptu

Podgląd 3D i personalizacja działają w przeglądarce. Włącz JavaScript albo napisz do pracowni — przygotujemy projekt ręcznie (w wersji demonstracyjnej to tylko przykład).

Jak działa wtyczka

  1. Jeden skrypt, jeden div

    Sklep wkleja <script> i znacznik <div data-szkliwo-konfigurator>. Bez bibliotek, bez frameworka, bez iframe’a.

  2. Podgląd 3D na żywo

    Kubek renderuje się w WebGL2: szkliwo, połysk, grawer i złoto reagują na światło. Bez WebGL2 włącza się uproszczony podgląd w Canvas 2D.

  3. Plik zostaje u klienta

    Logo jest skalowane i obracane w przeglądarce. Widżet niczego nie wysyła — link „Udostępnij” zawiera tylko ustawienia.

  4. Czysty JSON do koszyka

    „Dodaj do koszyka” wysyła zdarzenie z wariantem, położeniem w milimetrach, wyceną w groszach i wynikiem walidacji.

Dla developera

Widżet żyje w Shadow DOM: style strony go nie psują, a jego style nie wyciekają na stronę. Jedyny global to window.SzkliwoKonfigurator.

Wklej w miejscu konfiguratora na karcie produktu. Plik CSS musi leżeć obok JS (widżet sam go dołącza do swojego Shadow DOM).

HTML
<script src="/js/szkliwo-konfigurator.js" defer></script>

<div data-szkliwo-konfigurator
     data-sku="SZK-KUBEK"
     data-name="Kubek kamionkowy z personalizacją"
     data-heading-level="3"></div>

<script>
  document.addEventListener('szkliwo:add-to-cart', function (e) {
    // e.detail to gotowy JSON pozycji koszyka
    fetch('/koszyk/pozycje', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(e.detail)
    });
  });
</script>

Włącza na tej stronie agresywne reguły (* { font-family … !important }, kanciaste żółte przyciski, ramki wokół każdego div). Strona się zmienia, widżet — nie.

Zdarzenia wychodzą z elementu osadzenia z bubbles i composed. Dane są w event.detail; kwoty w groszach (minorUnit: 2), z flagą example: true.

Dziennik

    Ostatni payload
    Kliknij „Dodaj do koszyka” w konfiguratorze albo przycisk poniżej.
    Atrybuty elementu osadzenia
    AtrybutDomyślnieOpis
    data-skuSZK-KUBEKBazowy SKU; w payloadzie dochodzi pojemność, np. SZK-KUBEK-350.
    data-name—Nazwa produktu w payloadzie.
    data-heading-level2Poziom nagłówków widżetu (2–5), by pasował do struktury strony.
    data-rendererauto2d wymusza podgląd Canvas 2D (testy, słabe urządzenia).
    data-share-basebieżący URLAdres, do którego dokleja się #szk=… w linku do projektu.
    data-cssobok JSInna ścieżka do arkusza widżetu.
    data-autoloadtruefalse — montujesz sam przez mount().
    Metody i zdarzenia
    NazwaOpis
    SzkliwoKonfigurator.mount(el, opcje)Montuje widżet i zwraca instancję. Opcje: sku, state, onAddToCart, onChange…
    getState() / setState(s)Odczyt i zapis konfiguracji (dane są sprawdzane i przycinane).
    getPayload()Ten sam JSON co w zdarzeniu koszyka, bez klikania.
    undo() / redo()Historia zmian (także Ctrl+Z, Ctrl+Shift+Z).
    exportPNG({download})Wizualizacja 1600×1200 px; zwraca data URL.
    share()Link z konfiguracją w #szk= (bez pliku grafiki).
    on(nazwa, fn) / destroy()Nasłuch zdarzeń i sprzątanie.
    szkliwo:readyWidżet gotowy; zawiera użyty renderer.
    szkliwo:changePo każdej zmianie (z opóźnieniem 140 ms).
    szkliwo:add-to-cartTylko gdy projekt przechodzi walidację pola nadruku.
    szkliwo:share, szkliwo:exportPo utworzeniu linku i eksporcie PNG.

    Wygląd ustawiasz zmiennymi CSS na elemencie osadzenia — to jedyna droga do środka Shadow DOM. Przełącznik „Ciemny motyw sklepu” na górze strony zmienia tylko te zmienne.

    CSS
    [data-szkliwo-konfigurator] {
  --szk-font: "Onest", system-ui, sans-serif;
  --szk-surface: #FFFFFF;      /* tło widżetu */
  --szk-surface-2: #F2F4F9;    /* pola, podsumowanie */
  --szk-text: #0F1635;
  --szk-muted: #4A5170;
  --szk-accent: #2340D6;       /* przyciski, zaznaczenia */
  --szk-accent-ink: #FFFFFF;   /* tekst na akcencie */
  --szk-line: #D5D9E6;
  --szk-line-strong: #7F87A3;
  --szk-stage: radial-gradient(…);  /* tło sceny 3D */
  --szk-stage-solid: #E4E8F1;  /* tło eksportu PNG */
  --szk-radius: 14px;
  --szk-err: #B3261E; --szk-ok: #1D6B3A; --szk-warn: #7A4A00;
}

    O kubku

    Materiał
    Kamionka toczona na kole, szkliwo bezołowiowe
    Wypał
    1240 °C; złocenie — trzeci wypał w 780 °C
    Pojemności
    250 ml (Ø 80 mm), 350 ml (Ø 86 mm), 450 ml (Ø 90 mm)
    Pole nadruku
    Cała ścianka z wyjątkiem 24 mm przy uchu i 12 mm przy brzegach
    Zmywarka i mikrofala
    Tak — poza kubkami ze złoceniem (tylko mycie ręczne)
    Realizacja
    5–7 dni roboczych, ekspresowo 2 dni (przykład)
    1. ProjektSkładasz kubek w konfiguratorze; plik logo dosyłasz dopiero po zamówieniu.
    2. AkceptacjaPracownia odsyła wizualizację do zatwierdzenia przed szkliwieniem.
    3. Szkliwo i wypałKażdy kubek jest szkliwiony ręcznie — odcień i zacieki różnią się delikatnie.

    Koszyk demo

    Koszyk jest pusty. Zaprojektuj kubek i kliknij „Dodaj do koszyka”.