Jak používat plugin Simplio3D WordPress v Elementor

Plugin Simplio3D WordPress nemá samostatné widgety Elementor a ani je nepotřebuje. Každý blok Simplio3D je zároveň shortcode a vložíte jej pomocí vlastního widgetu Shortcode v Elementoru, jeden widget pro každý blok. Shortcode vykreslí přesně totéž co blok, takže konfigurátor produktu v Elementoru funguje stejně jako konfigurátor vytvořený v editoru bloků WordPress: jedna živá konfigurace sdílená všemi widgety, 3D panel nástrojů, rozměry, AR, aktuální cena, souhrn, žádosti o cenovou nabídku a košík WooCommerce.

Tento průvodce popisuje rychlý postup: najděte svá ID, vytvořte rozvržení, přidejte do košíku a opravte běžné chyby. Je určen pro verzi pluginu 2.0.3 a funguje s bezplatnou verzí Elementoru.

Než začnete

• Plugin Simplio3D, verze 2.0.3 nebo novější, z adresáře pluginů WordPress.org, spuštěný v režimu Simplio3D v3. Nové instalace v něm začínají. Web aktualizovaný z verze 1.x zůstává v režimu Legacy, dokud jej nepřepnete v části Simplio3D → Migrace.
• Připojený účet Simplio3D: v WordPress přejděte do Simplio3D → Přihlásit se do Simplio3D.
• Publikovaný projekt: v Simplio3D otevřete Sdílet, zapněte odkaz pro sdílení a ponechte jej bez hesla. Pokud omezujete domény pro vložení, přidejte doménu svého webu.
• Elementor. Bezplatná verze stačí.
• Pro Přidání do košíku: WooCommerce a jednoduchý produkt s cenou.

Přidání do košíku pomocí WooCommerce

V editoru bloků propojí výběr produktu v bloku Přidat do košíku produkt s vaším projektem. Shortcode to nedokáže, proto nejprve propojte produkt ručně:

1. V části Produkty upravte jednoduchý produkt s běžnou cenou.
2. Otevřete Údaje o produktu → Simplio3D, nastavte projekt Simplio3D na svůj projekt a Cenu v košíku na vypočítanou cenu Simplio3D (ověřenou na straně serveru), případně na vlastní cenu produktu WooCommerce. Klikněte na Aktualizovat.
3. Poznamenejte si ID produktu: najeďte kurzorem na produkt v seznamu Produktů nebo si přečtěte post=123 v adresním řádku na obrazovce úprav.
4. Nahraďte widget Odeslat za [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Přidejte quantity_mode="selector", aby si zákazníci mohli zvolit množství, a after_add="cart", abyste je přesměrovali do košíku.

Košík, pokladna, e-maily s objednávkami a WooCommerce → Objednávky pak zobrazí konfiguraci, její obrázek a ověřenou cenu.

Produkt propojený s cenou Simplio3D lze koupit pouze prostřednictvím konfigurátoru, takže běžné tlačítko Přidat do košíku WooCommerce na stránce produktu vyzve zákazníky, aby jej nejprve nakonfigurovali. V bezplatném Elementoru ponechte konfigurátor na samostatné stránce a propojte na něj produkt, například odkazem „Nakonfigurujte si vlastní“ v krátkém popisu. S Elementor Pro můžete vytvořit šablonu jednoho produktu, která místo widgetu Přidat do košíku v Elementoru používá widgety Shortcode Simplio3D; před zveřejněním toto nastavení zkontrolujte v náhledu.

Nastavení, která budete používat nejčastěji

Nastavení přidávejte přímo do shortcode, s rovnými uvozovkami a podtržítky. Při kopírování z Wordu, Google Docs nebo Slacku se mohou uvozovky změnit na typografické a WordPress pak nastavení ignoruje.

• height="620px" mobile_height="400px" ve Vieweru nastavuje jeho výšku na desktopu a na obrazovkách širokých až 781 px.
• loading="eager" u Vieweru v horní části stránky jej načte ihned, místo až po posunutí do zobrazení.
• layout="dropdown" u widgetu Options přepne jeho volby do rozbalovací nabídky. V závislosti na typu volby fungují také grid, list a buttons.
• columns="4" thumbnails="small" umožní zobrazit více voleb v každém řádku.
• prefix="From" tax_display="exclude" u Ceny přidá před ni text a zobrazí cenu bez daně, což odpovídá košíku WooCommerce.
• summary_mode="compact" hide_defaults="yes" u Souhrnu umístí každou volbu na samostatný řádek a vynechá ty, které zůstaly ve výchozím nastavení.
• display="hosted" u Vieweru zobrazí celý konfigurátor Simplio3D včetně voleb v jediném widgetu bez nutnosti zadávat ID voleb.
• instance="oak" u každého widgetu jedné sady oddělí dva konfigurátory na jedné stránce. Widgety se stejnou instancí sdílejí jednu konfiguraci.

Slaďte vzhled s designem Elementoru

• Karta Pokročilé každého widgetu Shortcode umožňuje nastavit okraje, vnitřní odsazení, pozadí, ohraničení a responzivní viditelnost. Viewer vyplní svůj sloupec, proto nastavte šířku sloupce nebo kontejneru podle požadované šířky.
• Bloky přebírají písmo a barvu textu ze stránky. Barva zvýraznění (vybraná volba, kroužek fokusu a tlačítka) se v klasických šablonách, jako je Hello Elementor, vrátí téměř k černé, proto ji nastavte na akcentní barvu Elementoru v části Vzhled → Přizpůsobit → Dodatečné CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Mezi další vlastnosti patří --s3d-radius pro rohy, --s3d-thumb pro velikost náhledů a --s3d-button-bg pro tlačítko. Chcete-li stylovat pouze jeden widget, přidejte do jeho shortcode class="my-finish" a v CSS zacilte na .my-finish.