Dzień dobry, poniżej opisuję jak wdrożyłem w swoim sklepie preloader. Pomijam dyskusję o słuszności takich pozycji i jak to wpływa na szybkość strony, mi się po prostu to podoba W pierwszej kolejności odwiedziłem stronę: https://devcorner.pl/jak-zrobic-preloader/ oraz https://devcorner.pl/12-minimalistycznych-loaderow-css/ Następnie wybrany preloader wdrażamy w naszym sklepie (ja wybrałem taki bez zewnętrznego kodu js-javascript dokładnie Fala) Przechodzimy do Konfiguracja >> Integracje >> Integracje własne Pierwszy kod wklejamy wg opisu z artykułu na początku sekcji <body>, esklep nie daje takiej możliwości bezpośrednio, ale wprowadzenie kodu w polu Nagłówek strony - <head> esklep bez problemu interpretuje i umieszcza w sekcji <body> na samym początku, zalecam dodanie kodu na samym końcu tego pola po wszystkich <meta ***>: Uwaga! Jeśli wkleimy to przed znacznikiem </body> (drugie pole w Integracje własne) to będziemy mieli niepożądany efekt, mianowicie strona się załaduje i na chwilę mignie preloader. HTML: <div id="loader-wrapper"> <!-- ----- PRELOADER ----- --> <div class='wave'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> Będąc na tej samej stronie w polu Stopka strony, przed zamknięciem </body> dodajemy kod: HTML: <script> <!-- ----- PRELODAER ----- --> $(window).load(function() { $("#loader-wrapper").fadeOut(); }); </script> Przechodzimy do Konfiguracja >> Wygląd >> Aktywny styl graficzny a po lewej stronie wybieramy Własny styl CSS i dodajemy styl związany z preloaderem w tym przypadku fala. HTML: /* ---------- PRELOADER ---------- */ .js .load, .js #loader-wrapper { display: block; } #loader-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(255,255,255,0.97); display: none; } /* Design */ /* Animation */ /* Helpers */ .wave { width: 117px; height: 13px; position: absolute; top: 50%; margin-top: -6.5px; left: 50%; margin-left: -58.5px; } .wave div { display: inline-block; width: 13px; height: 13px; border-radius: 6.5px; background: #25c1ac; animation: wave 2.6s cubic-bezier(0.626, 0, 0, 1) infinite; margin-right: 13px; } .wave div:nth-child(1) { animation-delay: -0.34667s; } .wave div:nth-child(2) { animation-delay: -0.26s; } .wave div:nth-child(3) { animation-delay: -0.17333s; } .wave div:nth-child(4) { animation-delay: -0.08667s; } @keyframes wave { 0% { transform: translateY(0px); } 40% { transform: translateY(0px); background: #25c1ac; } 60% { background: #21bba6; transform: translateY(20px); } 80% { background: #1db6a1; transform: translateY(-20px); } 100% { background: #25c1ac; transform: translateY(0px); } } Następnie po lewej stronie wybieramy Własny skrypt JS i wklejamy kod: HTML: /* ---------- PRELOADER (wyjątek jakby nie było obsługi JS po stronie klienta) ---------- */ $('html').addClass('js'); Sam kod pilnuje czy przeglądarka pozwala na obsługę skryptów, ale z drugiej strony gdyby nie skrpty js to sklep by nie działał Jeśli wybierzecie inny preloader, odpowiednio należy wkleić kod przed <body> ten ze znaczkami <div> bo nieznacznie się różnią od autora preloadera, no i oczywiście trzeba wkleić inny styl CSS. Istnieje możliwość edytowania stylów css przez narzędzia ze strony z artykułu z preloaderami, można też dopasować sobie kod w miarę umiejętności edycji css sprawdzić efekt na bieżąco, a gotowe kody wkleić na stronę. ps. efekt można obejrzeć na www.ecoandyou.pl
