Dostosuj przycisk
Skonfiguruj wygląd i zawartość przycisku listy zakupów
Zawartość
Wygląd
Ikona
Dodaj własne CSS, aby jeszcze bardziej dostosować wygląd przycisku
Podgląd na żywo
Czas rzeczywistyInstrukcja instalacji
Skopiuj wygenerowany kod
Kliknij przycisk "Kopiuj kod" powyżej, aby skopiować kompletny kod HTML i CSS do schowka.
Wklej do pliku HTML
Otwórz swój plik HTML i wklej kod CSS wewnątrz sekcji <head> (w tagach <style>), a kod HTML tam, gdzie ma pojawić się przycisk.
Dodaj skrypt Listonic
Umieść skrypt przycisku Listonic przed zamykającym tagiem </body>, aby włączyć funkcjonalność dodawania do listy.
Przetestuj przycisk
Otwórz swoją stronę w przeglądarce i kliknij przycisk, aby sprawdzić, czy otwiera interfejs dodawania do listy Listonic.
Otwórz edytor wpisu lub strony
Otwórz panel administracyjny WordPress i przejdź do wpisu lub strony, gdzie chcesz dodać przycisk.
Dodaj blok Własny HTML
W edytorze Gutenberg kliknij przycisk "+" i wyszukaj blok "Własny HTML". Dodaj go w miejscu, gdzie ma pojawić się przycisk.
Wklej kompletny kod
Skopiuj kod "HTML + CSS" z góry i wklej go do bloku Własny HTML. Uwzględnij zarówno style, jak i znaczniki przycisku.
Dodaj skrypt (opcjonalnie)
Aby uzyskać pełną funkcjonalność Listonic, dodaj JavaScript do pliku footer.php swojego motywu lub użyj wtyczki typu "Insert Headers and Footers".
Otwórz edytor motywu
Przejdź do Sklep online → Motywy → Kliknij "Dostosuj" lub "Edytuj kod" w swoim aktywnym motywie.
Dodaj CSS do stylów motywu
Przejdź do Zasoby → theme.css (lub base.css) i wklej kod CSS na końcu pliku.
Dodaj HTML do szablonu produktu
Znajdź szablon produktu (Sekcje → product-template.liquid) i wklej kod HTML w miejscu, gdzie ma pojawić się przycisk.
Dodaj skrypt
Dodaj skrypt Listonic do pliku theme.liquid przed tagiem </body> lub użyj sekcji "Skrypt" w ustawieniach motywu.
Stwórz komponent
Utwórz nowy plik o nazwie ListonicButton.jsx (lub .tsx dla TypeScript) w folderze komponentów.
Dodaj style
Skopiuj kod CSS i dodaj go do modułu CSS (ListonicButton.module.css) lub użyj styled-components / stylów inline.
Zaimplementuj komponent
Skorzystaj z zakładki JavaScript, aby pobrać kod komponentu z odpowiednią obsługą zdarzeń i zarządzaniem stanem.
Załaduj SDK Listonic
Dodaj skrypt Listonic do pliku public/index.html lub załaduj go dynamicznie w useEffect.
Stwórz komponent Vue
Utwórz nowy plik o nazwie ListonicButton.vue w katalogu komponentów.
Dodaj szablon i style
Użyj kodu HTML w sekcji <template>, a kodu CSS w <style scoped>.
Zarejestruj komponent
Zaimportuj i zarejestruj komponent w komponencie nadrzędnym lub globalnie w main.js.
Załaduj zewnętrzny skrypt
Załaduj skrypt Listonic w pliku index.html lub użyj hooka mounted() do dynamicznego załadowania.