Jak używać wtyczki Simplio3D WordPress w Elementorze

Wtyczka Simplio3D WordPress nie ma osobnych widżetów Elementor — i ich nie potrzebuje. Każdy blok Simplio3D jest również shortcode’em i umieszczasz go za pomocą własnego widżetu Shortcode Elementora — po jednym widżecie na blok. Shortcode wyświetla dokładnie to samo co blok, dlatego konfigurator produktu w Elementorze działa tak samo jak konfigurator zbudowany w edytorze bloków WordPress: jedna aktywna konfiguracja współdzielona przez wszystkie widżety, pasek narzędzi 3D, wymiary, AR, cena na żywo, podsumowanie, zapytania ofertowe i koszyk WooCommerce.

Ten przewodnik opisuje krótką ścieżkę: znajdź swoje identyfikatory, zbuduj układ, dodaj do koszyka i napraw typowe błędy. Został przygotowany dla wersji wtyczki 2.0.3 i działa z bezpłatną wersją Elementora.

Zanim zaczniesz

• Wtyczka Simplio3D w wersji 2.0.3 lub nowszej, z katalogu wtyczek WordPress.org, działająca w trybie Simplio3D v3. Nowe instalacje uruchamiają się w tym trybie. Witryna zaktualizowana z wersji 1.x pozostaje w trybie Legacy, dopóki nie przełączysz jej w Simplio3D → Migracja.
• Połączone konto Simplio3D: w WordPress przejdź do Simplio3D → Zaloguj się do Simplio3D.
• Opublikowany projekt: w Simplio3D otwórz Udostępnij, włącz link do udostępniania i pozostaw go bez hasła. Jeśli ograniczasz domeny osadzania, dodaj domenę swojej witryny.
• Elementor. Wystarczy bezpłatna wersja.
• Dla opcji Dodaj do koszyka: WooCommerce oraz prosty produkt z ceną.

Dodawanie do koszyka z WooCommerce

W edytorze bloków wybranie produktu w bloku Dodaj do koszyka łączy go z projektem. Shortcode nie może tego zrobić, dlatego najpierw połącz produkt ręcznie:

1. W sekcji Produkty edytuj prosty produkt z ceną regularną.
2. Otwórz Dane produktu → Simplio3D, ustaw projekt Simplio3D na swój projekt, a Cenę w koszyku na cenę obliczoną przez Simplio3D (zweryfikowaną po stronie serwera) albo na własną cenę WooCommerce produktu. Kliknij Zaktualizuj.
3. Zanotuj identyfikator produktu: najedź kursorem na produkt na liście Produktów albo odczytaj post=123 z paska adresu na ekranie edycji.
4. Zastąp widżet Submit elementem [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Dodaj quantity_mode="selector", aby klienci mogli wybrać ilość, oraz after_add="cart", aby przenieść ich do koszyka.

Koszyk, finalizacja zamówienia, e-maile dotyczące zamówień oraz WooCommerce → Zamówienia będą wtedy wyświetlać konfigurację, jej obraz i zweryfikowaną cenę.

Produkt połączony z ceną Simplio3D można kupić wyłącznie przez konfigurator, dlatego standardowy przycisk Dodaj do koszyka WooCommerce na stronie produktu prosi klientów o wcześniejsze skonfigurowanie produktu. W bezpłatnym Elementorze umieść konfigurator na osobnej stronie i podlinkuj go z produktu, na przykład linkiem „Skonfiguruj swój” w krótkim opisie. W Elementor Pro możesz utworzyć szablon pojedynczego produktu, który używa widżetów Shortcode Simplio3D zamiast widżetu Dodaj do koszyka Elementora; przetestuj tę konfigurację w podglądzie przed publikacją.

Najczęściej używane ustawienia

Dodawaj ustawienia wewnątrz shortcode’u, używając prostych cudzysłowów i podkreśleń. Kopiowanie z Worda, Google Docs lub Slacka może zamienić cudzysłowy na typograficzne, a wtedy WordPress ignoruje ustawienie.

• height="620px" mobile_height="400px" w Viewerze ustawia jego wysokość na komputerach oraz ekranach o szerokości do 781 px.
• loading="eager" w Viewerze na górze strony ładuje go od razu, zamiast dopiero po przewinięciu do niego.
• layout="dropdown" w widżecie Options zmienia sposób wyboru na listę rozwijaną. Działają również grid, list i buttons, zależnie od typu opcji.
• columns="4" thumbnails="small" mieści więcej możliwości w każdym wierszu.
• prefix="From" tax_display="exclude" w elemencie Price dodaje tekst przed ceną i wyświetla cenę przed podatkiem, zgodną z koszykiem WooCommerce.
• summary_mode="compact" hide_defaults="yes" w Summary umieszcza każdą opcję w osobnym wierszu i pomija te pozostawione z domyślną wartością.
• display="hosted" w Viewerze wyświetla pełny konfigurator Simplio3D, łącznie z opcjami, w jednym widżecie — bez potrzeby podawania identyfikatorów opcji.
• instance="oak" w każdym widżecie zestawu rozdziela dwa konfiguratory na jednej stronie. Widżety z tym samym wystąpieniem współdzielą jedną konfigurację.

Dopasuj wygląd do projektu Elementora

• Karta Zaawansowane każdego widżetu Shortcode pozwala ustawić margines, dopełnienie, tło, obramowanie i widoczność responsywną. Viewer wypełnia swoją kolumnę, dlatego ustaw szerokość kolumny lub kontenera, aby był szerszy albo węższy.
• Bloki przejmują czcionkę i kolor tekstu ze strony. Kolor akcentu — wybranej opcji, obramowania fokusu i przycisków — w klasycznych motywach, takich jak Hello Elementor, domyślnie zmienia się na niemal czarny. Ustaw więc kolor akcentu Elementora w Wygląd → Dostosuj → Dodatkowy CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Pozostałe właściwości obejmują --s3d-radius dla narożników, --s3d-thumb dla rozmiaru miniatur oraz --s3d-button-bg dla przycisku. Aby ostylować tylko jeden widżet, dodaj class="my-finish" do jego shortcode’u i wskaż .my-finish w swoim CSS.