KREATYWNI

... Z NATURY

Więcej o nas

NASZA OFERTA

co robimy ?

Od momentu założenia w 2004 roku, rozwija się bardzo dynamicznie. Dzięki ciągłemu rozszerzaniu świadczonych przez nas usług, stale powiększamy grupę zadowolonych klientów. To co przekonało naszych klientów to nasza elastyczność i uwzględnianie ich indywidualnych potrzeb.

Strony internetowe
optymalizacja seo

Strona WWW jest głównym źródłem informacji i interaktywnym środowiskiem kontaktu z klientem.

Czytaj więcej

SKLEPY INTERNETOWE PRESTASHOP

Nowoczesne, funckjonalne i łatwe w obsłudze rozwiązanie e-commerce dostosowane do Twoich potrzeb.

Czytaj więcej

SEO /SEM
audyty

Zwiększanie widoczności strony, podniesienie pozycji w wyszukiwarce Google. Pozycjonowanie sklepów internetowych - SEO PrestaShop. Audyty SEO.

Czytaj więcej
Strona WWW jest głównym źródłem informacji i interaktywnym środowiskiem kontaktu z klientem. Jest to równocześnie najtańszy sposób zareklamowania się szerokiemu gronu klientów i kontrahentów. Jakie funkcje powinna spełniać Twoja strona internetowa?

PORTFOLIO

Nasze prace

Kodowanie stron internetowych

Profesjonalne Kodowanie Stron Internetowych. W erze cyfrowej, posiadanie atrakcyjnej, funkcjonalnej i responsywnej strony internetowej to klucz do sukcesu każdej firmy. Nasz zespół ekspertów jest tutaj, aby zapewnić Ci najwyższą jakość usług w zakresie tworzenia stron internetowych.

Co oferujemy?

Indywidualne Podejście:
Każdy kodowany projekt traktujemy indywidualnie, dostosowując rozwiązania do potrzeb i oczekiwań klienta. Tworzymy strony internetowe, które odzwierciedlają charakter Twojej marki i spełniają Twoje cele biznesowe.

Responsywność:
Wszystkie kodowane strony przez nas – zakodowane są responsywne, co oznacza, że wyglądają i działają doskonale na każdym urządzeniu – od komputerów stacjonarnych po smartfony i tablety.

Kodowanie stron Internetowch

Nowoczesne Technologie:
Korzystamy z najnowszych technologii i standardów kodowania, takich jak HTML5, CSS3, JavaScript, Bootstrap, jQuery, a także popularnych systemów zarządzania treścią (CMS) jak WordPress, CMSMS czy PrestaShop.

Optymalizacja SEO:
Dbamy o to, aby Twoja nowo zakodowana strona internetowa była przyjazna dla wyszukiwarek, co zwiększa jej widoczność i pomaga w osiągnięciu lepszych wyników w rankingu Google.

Szybkość i Wydajność:
Zoptymalizujemy Twoją stronę pod kątem szybkości ładowania, co jest kluczowe dla użytkowników i wpływa na lepsze pozycjonowanie w wyszukiwarkach.

Bezpieczeństwo:
Implementujemy najnowsze rozwiązania w zakresie bezpieczeństwa, aby Twoja strona była chroniona przed zagrożeniami i atakami.

Wsparcie Techniczne:
Oferujemy pełne wsparcie techniczne po zakończeniu projektu, abyś mógł bez obaw korzystać z nowej strony.

Na co możesz liczyć?

W trakcie kodowania możemy znacznie zwiększyć interaktywność i funkcjonalność naszych stron internetowych, wdrażając różnorodne skrypty JavaScript. Przykładowo, możemy dodać animacje, które ożywią naszą witrynę, przyciągając uwagę użytkowników i poprawiając ich doświadczenia. Możliwości są nieograniczone – od prostych animacji przycisków, które reagują na najechanie myszką, po bardziej zaawansowane efekty, takie jak przewijane galerie obrazów czy dynamiczne zmiany kolorów tła. Ponadto, JavaScript pozwala nam na implementację praktycznych funkcjonalności, takich jak kalkulatory, które umożliwiają użytkownikom wykonywanie obliczeń bez konieczności opuszczania strony. Dzięki takim interaktywnym elementom, możemy tworzyć bardziej angażujące i użyteczne aplikacje webowe, które lepiej odpowiadają na potrzeby użytkowników.

Przesuń suwak, aby odkryć napis „kodowanie stron”.

K o d o w a n i e S t r o n

Powyżej znajduje się przykład wykorzystania JavaScript który został użyty przy kodowaniu strony. Jeśli podjedziesz na początek strony do zakodowania napisu "Kodowanie Stron WWW" efekt pisania na maszynie został

Dlaczego my?
Doświadczenie: Nasz zespół składa się z doświadczonych programistów, którzy zrealizowali już wiele udanych projektów.
Jakość: Stawiamy na jakość, dlatego każdy projekt jest przez nas dokładnie testowany przed przekazaniem go klientowi.
Terminowość: Szanujemy Twój czas i zawsze dotrzymujemy ustalonych terminów realizacji.
Jak skorzystać z naszej oferty?


Skontaktuj się z nami za pomocą formularza kontaktowego na naszej stronie lub napisz bezpośrednio na nasz adres e-mail. Chętnie umówimy się na bezpłatną konsultację, podczas której omówimy Twoje potrzeby i przedstawimy szczegółową ofertę.

Nie czekaj! Zainwestuj w profesjonalną stronę internetową, która przyciągnie nowych klientów i zwiększy Twoją obecność w sieci.

Jeśli mamy komfort, że możemy zatrzymać swój sklep na 1-3 godzin to sytuacja jest prosta. Wiele poradników opisało jak to zrobić (skopiuj pliki i bazę na nowy serwer i oddeleguj domenę)

W tym wpisie nie interesuje nas TTL (czas propagacji) domeny bo musimy przeprowadzić migrację w pełnej integralności danych w możliwie jaka najkrótszym czasie (najchętniej rzeczywistym)

Zamówienia wpadają średnio co kilka minut .. każda minuta źle zaplanowanej migracji to strata dla klienta.

Nie ma mowy o najmniejszych pomyłkach środowisko na które migrujemy zweryfikowane przetestowane wszystko działa (kopia odwzorowana zamówienia testowe wykonane) pozostaje tylko przenieść.

Baza MySQL 5GB czas wykonania backupu i odtworzenia 30min i tego się trzymamy :). Widzimy że między godziną między 2 a 4 w nocy najmniej ruchu. IP na FIREWALL przepuszczone do bazy dostęp jest zaczynamy

1. Sklep STOP

mysqldump -u user -p database_name > backup.sql
scp backup.sql user@newserver:/path/to/destination
mysql -u user -p new_database_name < /path/to/destination/backup.sql

2. odwołanie (modyfikacja pliku) z konfiguracją bazy żeby odwoływała się na nowy serwer – sklep start (całość na starym serwerze )

3. Przegrywanie plików – w tym momencie już nie miało znaczenia czy trwa to 3 czy 5h (nie mieliśmy nic co mogło w czasie rzeczywistym zapisywać lokalnie dane)

4. Formalnie żeby przyspieszyć proces migracji oddelegowanie rekordu A

5. zmiana delegacji DNS

Konwersje w Google – czym są i jak je ustawić

Konwersje są kluczowym wskaźnikiem efektywności działań marketingowych w potężnym e-commerce jak i na zwykłej wizytówce WWW. Jednak ich właściwa implementacja i interpretacja może być wyzwaniem, szczególnie w kontekście specyficznym dla polskiego rynku. Ten wpis postara pomóc Ci zrozumieć, czym są konwersje, jak je mierzyć i interpretować, aby skutecznie zarządzać swoim sklepem internetowym.

Typowe konwersje:

  • Zakup: Użytkownik dokonuje zakupu produktu lub usługi.
  • Rejestracja: Użytkownik tworzy konto w Twojej witrynie lub aplikacji.
  • Pobranie pliku: Użytkownik pobiera plik, np. e-booka lub białą księgę.
  • Zapis na newsletter: Użytkownik zapisuje się na Twój newsletter.
  • Kontakt: Użytkownik kontaktuje się z Tobą za pomocą formularza kontaktowego lub poczty e-mail.
  • Obejrzenie filmu: Użytkownik ogląda cały film na Twojej stronie internetowej lub w aplikacji.
  • Kliknięcie w reklamę: Użytkownik klika w reklamę wyświetlaną na Twojej stronie internetowej lub w aplikacji.

Mniej typowe konwersje:

  • Dodanie produktu do koszyka: Użytkownik dodaje produkt do koszyka, ale nie finalizuje zakupu.
  • Spędzenie określonego czasu na stronie: Użytkownik spędza na Twojej stronie internetowej więcej niż X minut.
  • Przejście do określonej strony: Użytkownik odwiedza określoną stronę na Twojej stronie internetowej, np. stronę z cenami lub stronę z informacjami o firmie.
  • Kliknięcie w określony link: Użytkownik klika w określony link na Twojej stronie internetowej, np. link do strony z recenzjami lub link do mediów społecznościowych.
  • Udostępnienie strony w mediach społecznościowych: Użytkownik udostępnia stronę Twojej witryny w mediach społecznościowych.

I teraz pomyśl, że chcesz wiedzieć ile osób zadzwoniło ze strony klikając w link ze strony:

<a href="tel:+48123456789">tel: +48 123 456 789</a>

Zmień na:

<a href="tel:+48123456789" onclick="trackCall()">tel: +48 123 456 789</a>

<script>
  function tracklClick() {
    gtag('event', 'click', {
      'event_category': 'kontakt',
      'event_action': 'klikniecie z www',
      'event_label': '+48 123 456 789'
    });
  }
</script>

I odczytaj ilość kliknięć w Analitikcs

Na podstawie powyższego przykładu możesz mierzyć wszystko na stronie WWW dodanie produktu do koszyka. -> ilość koszyków zrealizowanych

Dodaj to raportu urządzenia i zweryfikuj gdzie są błędy na stronie – popraw i wyciśnij jak najwięcej (tak działamy)

Potrzebujesz pomocy przy wdrożeniu GA4 zapraszamy do współpracy.

Profesjonalne Cięcie projektu PSD do WordPress

Twoje pomysły zasługują na perfekcyjną realizację. Oferujemy usługę cięcia projektów graficznych do WordPress, która zapewni, że Twoje wizje staną się rzeczywistością w sieci. Nasz zespół specjalistów z dużym doświadczeniem przekształca Twoje pliki PSD, Sketch, Figma czy Adobe XD w w pełni funkcjonalne, responsywne strony internetowe oparte na WordPress.

Projekt przesłany przez agencję reklamową do zakodowania do html i css
Projekt podstrony do pocięcia – wraz z opisem funkcjonalności w JS

Dlaczego warto wybrać naszą usługę?

  • Precyzja i Dbałość o Detale: Każdy piksel ma znaczenie. Dokładnie odwzorowujemy Twój projekt graficzny, zachowując najwyższą jakość.
  • Responsywność: Twoja strona będzie wyglądać doskonale na każdym urządzeniu – od komputerów stacjonarnych po smartfony.
  • Optymalizacja SEO: Tworzymy strony przyjazne dla wyszukiwarek, aby pomóc Ci osiągnąć lepsze wyniki w Google.
  • Szybkość i Wydajność: Nasze strony są zoptymalizowane pod kątem szybkości ładowania, co przekłada się na lepsze doświadczenia użytkowników.
  • Integracje i Rozszerzenia: Wprowadzamy zaawansowane funkcje i integracje z wtyczkami WordPress, aby Twoja strona była nie tylko piękna, ale i funkcjonalna.

Jak wygląda nasz proces?

  1. Analiza Projektu: Zaczynamy od dokładnego zrozumienia Twoich wymagań i wizji.
  2. Cięcie: Przekształcamy Twój projekt graficzny w czysty, semantyczny kod HTML/CSS/JS.
  3. Integracja z WordPress: Implementujemy cięte szablony jako motywy WordPress, zapewniając pełną funkcjonalność i łatwość zarządzania treścią.
  4. Testowanie i Optymalizacja: Przeprowadzamy gruntowne testy, aby upewnić się, że strona działa bez zarzutu na wszystkich urządzeniach i przeglądarkach.
  5. Wdrożenie: Publikujemy Twoją stronę i zapewniamy wsparcie techniczne, abyś mógł skupić się na rozwijaniu swojego biznesu.
Pocięta strona i zakodowana w trakcie testów na urządzeniach mobilnych.

Gotowy na start?

Skontaktuj się z nami już dziś, aby dowiedzieć się, jak możemy pomóc Ci w realizacji Twojego projektu. Wspólnie stworzymy stronę internetową, która wyróżni się na tle konkurencji i zachwyci Twoich użytkowników.

Dodatkowa treść w kategorii Prestashop – pod produktami

Rozwiązanie jest proste i powinno działać w większości scenariuszy

Nasz dział SEO zidentyfikował potrzebę zamieszczenia obszernych opisów w kategoriach produktów na stronie internetowej. W celu poprawy optymalizacji pod kątem wyszukiwarek (SEO). Dłuższy opis jest niezbędny, aby zawrzeć więcej słów kluczowych i dostarczyć pełniejszych informacji użytkownikom oraz robotom wyszukiwarek. Aby jednak nie przytłoczyć odwiedzających naszą stronę zbyt długim tekstem umieszczonym od razu na górze strony, zdecydowaliśmy się na przeniesienie części tego opisu na dół strony.

Kod jQuery poniżej został stworzony, aby automatycznie przenieść elementy z klasą .bottomtext na dół sekcji z identyfikatorem #main po załadowaniu strony. Dzięki temu, dłuższy opis SEO jest wciąż obecny na stronie i indeksowany przez wyszukiwarki, ale nie dominuje nad główną zawartością strony.

$(document).ready(() => {
    $( ".bottomtext" ).appendTo( "#main" );
});

Teraz wystarczy w standardowym polu kategorii dodać element o class równej bottomtext

Treść pod produktami w kategorii sklepu prestashop

Chętnie zajmiemy się opieką, dostosowując nasze usługi do indywidualnych potrzeb i oczekiwań. Skontaktuj się z nami już dziś, aby dowiedzieć się więcej i umówić na bezpłatną konsultację. Razem stworzymy plan opieki Prestashop. Zachęcamy do sprawdzenia cennika Prestashop

Obsługa błędów w PrestaShop – debug mode

Wiesz po co to robisz przejdź od razu do rozwiązania:
włączanie debug Prestashop za pomocą panelu administracyjnego,
włączanie debug Prestashop za pomocą pliku defines.inc.php

Napotkałeś błąd 500 na swojej stronie PrestaShop?
Błąd 500 (czasem wyświetlany jako biała strona), znany również jako „Internal Server Error”, jest powszechnym problemem w wielu aplikacjach internetowych, w tym w sklepach PrestaShop. Oznacza on, że serwer napotkał niespodziewaną sytuację, której nie mógł obsłużyć. Przyczyny mogą być różne, ale nie martw się! Oferujemy Ci prosty przewodnik, jak szybko zdiagnozować i potencjalnie rozwiązać problem.

Włączanie trybu debug w PrestaShop jest pomocne w trakcie procesu rozwijania, testowania i debugowania sklepu internetowego. Tryb debug pozwala uzyskać szczegółowe informacje o błędach, ostrzeżeniach i innego rodzaju komunikatach, co ułatwia zlokalizowanie i naprawienie problemów w sklepie. Oto kilka powodów, dla których warto włączyć tryb debug w PrestaShop:

Lokalizacja błędów w PrestaShop:

Tryb debug w PrestaShop wyświetla dokładne informacje o błędach, w tym plik i numer linii, gdzie wystąpił problem. To ułatwia programistom zlokalizowanie i naprawienie błędów w kodzie sklepu.

Ostrzeżenia i komunikaty w PrestaShop:

Po włączeniu trybu debug otrzymasz ostrzeżenia i komunikaty dotyczące różnych aspektów działania sklepu. Dzięki temu możesz dowiedzieć się o potencjalnych problemach jeszcze przed tym, nim staną się one krytyczne.

Śledzenie wywołań funkcji:

Tryb debug pozwala śledzić kolejność wywołań funkcji, co jest przydatne do analizy procesów i zrozumienia, co dzieje się w trakcie różnych operacji na stronie.

Analiza wydajności sklepu interntowego:

Możesz monitorować wydajność strony, sprawdzając, które elementy sklepu zajmują najwięcej czasu ładowania. To może pomóc w optymalizacji kodu i zwiększeniu szybkości działania sklepu.

Rozwój i testowanie sklepu PrestaShop:

Podczas prac nad nowymi funkcjonalnościami lub modyfikacjami w sklepie, tryb debug ułatwia monitorowanie zachowania systemu, co przyspiesza proces rozwijania i testowania.

1. Włączanie debug w panelu Prestashop

Aby włączyć tryb debug mode w PrestaShop, wykonaj poniższe kroki:

Zaloguj się do panelu administracyjnego PrestaShop.
Przejdź do zakładki „Zaawansowane Parametry” (Advanced Parameters).
Kliknij na zakładkę „Wydajność” (Performance).
W sekcji „Debugowanie” (Debug Mode) ustaw wartość na „Tak”.
Kliknij „Zapisz”.

2. Włączanie debug mode w pliku (dostęp przez FTP)

Istnieją sytuacje, że włączenie debugowania jest tylko możliwe przy pomocy edycji pliku (za pośrednictwem dostępu do FTP) – np. panel administracyjny PrestaShop nie działa i nie ma możliwości wykonania czynności opisanej w pkt 1.

Aby włączyć tryb debugowania w PrestaShop 1.7, musisz zmodyfikować konfigurację w pliku defines.inc.php, który znajduje się w folderze config. Poniżej znajdziesz krok po kroku, jak to zrobić:

Krok 1: Dostęp do plików serwera

Najpierw musisz uzyskać dostęp do plików serwera, na którym zainstalowano Twój sklep PrestaShop. Możesz to zrobić za pomocą klienta FTP (takiego jak FileZilla) lub bezpośrednio przez menedżera plików w panelu administracyjnym hostingu.

Krok 2: Edycja pliku defines.inc.php

  1. Odszukaj folder config w głównym katalogu instalacji PrestaShop.
  2. Znajdź plik o nazwie defines.inc.php i otwórz go do edycji.
  3. Znajdź w pliku linię:

define('_PS_MODE_DEV_', false);

4. Zmień false na true, aby włączyć tryb debugowania:

define('PS_MODE_DEV', true);

Krok 3: Zapisz zmiany

Po dokonaniu zmian, zapisz plik i zamknij edytor. Upewnij się, że plik został poprawnie przesłany z powrotem na serwer, jeśli korzystałeś z klienta FTP.

Krok 4: Testowanie

Po włączeniu trybu debugowania, wszelkie błędy, ostrzeżenia i informacje diagnostyczne będą wyświetlane bezpośrednio na Twojej stronie. Odwiedź stronę, która wcześniej sprawiała problemy, aby sprawdzić, czy są teraz wyświetlane dodatkowe informacje o błędach.

Po włączeniu trybu debug, pamiętaj, aby go wyłączyć po zakończeniu prac deweloperskich, ponieważ informacje debugowania mogą zawierać poufne dane, które nie powinny być dostępne publicznie na stronie produkcyjnej sklepu.

Nie chcesz martwić się o błędy w swoim sklepie zleć nam opiekę PrestaShop i śpij spokojnie.

Opieka nad sklepami PrestaShop

Oferujemy kompleksową opiekę nad sklepami opartymi na platformie PrestaShop, aby zapewnić Ci spokój i sukces w prowadzeniu Twojego e-sklepu. Nasza oferta opieki nad sklepami PrestaShop obejmuje szeroki zakres usług, które dostosowujemy do Twoich indywidualnych potrzeb. Oto, co możemy dla Ciebie zrobić:

Utrzymanie PrestaShop:

Monitorowanie sklepu pod kątem ewentualnych problemów i szybka reakcja na wszelkie zagrożenia.

Dostosowanie i rozwijanie sklepów PrestaShop:

Personalizacja wyglądu i funkcjonalności Twojego sklepu PrestaShop. Dodawanie nowych modułów i rozszerzeń, aby rozwinąć możliwości sklepu.

Optymalizacja sklepu PrestaShop:

Poprawa wydajności i szybkości działania sklepu. Optymalizacja stron produktów, aby zwiększyć konwersje.

Bezpieczeństwo:

Monitorowanie bezpieczeństwa sklepu i jego ochrona przed atakami.

Obsługa techniczna PrestaShop:

Pomoc techniczna dla Ciebie i Twoich klientów. Rozwiązywanie problemów związanych z działaniem sklepu.

SEO i marketing:

Optymalizacja SEO, aby zwiększyć widoczność Twojego sklepu w wynikach wyszukiwania. Wspieranie działań marketingowych, takie jak kampanie reklamowe i e-mail marketing.

Szkolenia i wsparcie:

Szkolenie Ciebie i Twojego zespołu w obszarze zarządzania sklepem PrestaShop. Stałe wsparcie i konsultacje w zakresie e-commerce.



Niezależnie od tego, czy jesteś właścicielem małego sklepu internetowego czy dużego przedsiębiorstwa, nasza opieka nad sklepami PrestaShop pomoże Ci osiągnąć sukces online. Skontaktuj się z nami, aby omówić Twoje potrzeby i dostosować naszą ofertę do Twoich indywidualnych wymagań. Zaufaj nam i ciesz się rosnącym zyskiem ze swojego sklepu PrestaShop.

Zaokrąglanie podatku VAT w PrestaShop

PrestaShop po instalacji ma ustawione domyślnie obliczanie podatku VAT dla pojedynczego produktu.
W przypadku Polski przy zamawianiu większej liczby produktów tego samego typu może powodować błędy w obliczaniu VAT.

Załóżmy, że nasz produkt kosztuje 46,20 zł netto.

W momencie jeśli dodamy dodamy do niego VAT (23%) wartość produktu wyniesie 56,83zł brutto.

Jeśli zamawiamy jeden produkt błędu nie ma natomiast jeśli chcemy zamówić 30sztuk. PrestaShop obliczoną wartość brutto przemnoży przez 30 co da nam 1704,90 brutto

Niestety nie jest to zgodne z polskim systemem księgowym. Np. subiekt mnoży najpierw cenę netto x ilość jednostek a na końcu oblicza VAT i w tym przypadku wartość brutto naszego koszyka powinna wynosić : 46,20*30szt=1386zł netto *1,23 (VAT23%) = 1704,78

Różnica w VAT w zależności od sposobu liczenia wynosi 12groszy. Z księgowego punktu widzenia mamy za dużą wpłatę faktura wystawiona na mniejszą kwotę.

Żeby ujednolicić sposób obliczania VAT aby w PrestaShop był taki sam jak w Subiekt należy przejść do Preferencje -> ogólne i zmienić sposób zaokrąglania na zaokrąglanie w linii.

Po tej zmianie wartość brutto w PrestaShop jest taka sama jak w Subiekt.

Tworzenie wpisów w WordPress używając Gutenberga.

Wybór tekstu:

Powyższy tekst to nagłówek, który można wybrać tutaj:

Inne rodzaje tekstu to akapit, który wygląda tak jak ten tekst. Pozostałe rodzaje to:

Lista:

  • To
  • jest
  • lista.

Cytat:

To jest cytat.

Kod:

int i=0;
i++;
System.out.println(i);

Wstępnie sformatowany:

Dodaje tekst, który uwzględnia odstępy i tabulatory, a także pozwala na nadanie wyglądu. Ten tekst jest wstępnie sformatowany.

Cytat wyróżniony:

Tak wygląda cytat wyróżniony.

Anonim

Tabela:

Kolumna 1Kolumna 2Kolumna 3
Wiersz 1Wiersz 1Wiersz 1
Tak wygląda tabela na 3 kolumny i 2 wiersze.

Wiersz:

Oto wiersz, prosty i krótki jak sen,
Słowa splatają się tu w rytmiczną grę.

Wybór media:

Media można wybrać tutaj:

Zdjęcie powyżej to obrazek.

Galeria:

Plik dźwiękowy:

Dodawanie tekstu i mediów jest proste w obsłudze. Po wyborze, pojawia się pole:

Po przesłaniu lub napisaniu tekstu tworzy się nasz wybrany tekst lub media.

Walidacja pola NIP w PrestaShop

Poniższy film prezentuje działanie skryptu który uniemożliwia wpisanie niepoprawnych znaków do pola NIP w PrestaShop.

PrestaShop w standardzie niestety nie ma walidacji pola NIP. Często klienci w tym polu wpisują uwagi do zamówienia a w kolejnym kroku jeśli mamy integrację z programami księgowymi generują się błędy przy synchronizacji spowodowane niedozwolonymi znakami w polu NIP.

W prosty sposób możemy nadać maskę do do pola NIP w javascript która będzie walidować rzeczy wpisywane do pola NIP w czasie rzeczywistym. W przypadku wykrycia niepoprawnego znaku zapobiegnie wpisanie poprzez przywrócenie ostatniej poprawnej wartości.

Założenia: Funkcja ma pozwalać jedynie na wprowadzanie cyfr. Format w polu NIP ma być zachowany: 3 cyfry-3 cyfry- 2 cyfry- 2 cyfry. Myślniki mają wprowadzać się automatycznie. Maksymalna długość wartości w polu to 13, wszystko ponad ma być automatycznie usuwane.

  1. Zmienne:
  • beforeValue – przechowuje wartość przed wpisaniem nowego znaku, jest globalna
  • nip – przechowuje kolekcje elementów o nazwie „vat_number”
  • lastkey – przechowuje kod ostatniego  wprowadzonego znaku
  • lastKeyNB – przechowuje ostatni wprowadzony znak niebędący backspace
  • lastKeyChar – przechowuje char ostatniego wprowadzonego znaku backspace
  • nipLength – przechowuje długość wprowadzonego napisu
  • regexLastKey – przechowuje regex sprawdzania pojedynczego znaku, jest const
  • regexBackspace – przechowuje regex sprawdzania backspace, jest const.

2. Działanie funkcji ‘keyup’:

Jeżeli wystąpiło zdarzenie keyup, czyli podniesienie klawisza, to wykonuje się sprawdzanie ostatnio wprowadzonego znaku. Pierwsze sprawdzenie warunkowe odpowiada za przypadek, jeśli zostało wciśnięte backspace. W nim następnie sprawdzane jest czy został usunięty myślnik. Jeśli tak to zostają usunięte dwa ostatnie znaki. Znak przed myślnikiem również zostaje usunięty, ponieważ regex nie pozwala na wprowadzanie myślników przez użytkownika, więc jeśli użytkownik przez przypadek usunąłby myślnik, nie miałby możliwości wprowadzenia go z powrotem.  W przeciwnym razie usunięty zostaje tylko jeden znak. Na koniec wartość beforeValue zostaje nadpisana, aby przechowywała wartość po usunięciu znaku/znaków.

Jeśli wprowadzony znak nie jest cyfrą to do wartości pola nip zostaje przypisana wartość beforeValue. Funkcja pozwala na wprowadzanie tylko cyfr, wszystkie inne znaki zostają automatycznie usunięte.

Jeżeli żadne z powyższych przypadków nie zostanie spełnionych to najpierw funkcja sprawdzi czy jest to miejsce, w którym powinien znajdować się myślnik. Jeśli tak to dopisze myślnik do wartości pola nip, co sprawia, że myślniki wprowadzają się automatycznie. Na koniec wartość pola beforeValue zostanie nadpisana.

Po sprawdzeniu wprowadzonego znaku, funkcja sprawdza czy wprowadzona wartość nie jest dłuższa od maksymalnej długości.  Jeśli jest, to funkcja usuwa dodatkowo wprowadzony znak i nadpisuje wartość beforeValue.

3. Działanie funkcji ‘blur’:

Jeśli wystąpiło zdarzenie ‘blur’, czyli wyjście poza pole, to funkcja sprawdza czy znajduje się w polu jakiś znak i czy wartość jest krótsza od maksymalnej długości. Jeśli jest to wypisuje alarm o niepoprawnej wartości pola nip. Zabezpiecza to przed przypadkowym wpisaniu cyfry w pole nip.

let beforeValue="";
$(function() {
	var nip = document.getElementsByName('vat_number');
	$(nip).on('keyup',function(event){
		var lastkey = event.keyCode;
		var lastKeyNB = event.key;
		var nipLength = nip[0].value.length;
		const regexLastKey = /[^\d]/i;
		const regexBackspace = /[\b]/i;
		var lastkeyChar = String.fromCharCode(lastkey);
		if(regexBackspace.test(lastkeyChar)){
			if(nipLength==3 || nipLength==7 || nipLength==10){
				nip[0].value = nip[0].value.substr(0,nip[0].value.length-1);
			} else{
				nip[0].value = nip[0].value.substr(0,nip[0].value.length);
			}
			beforeValue = nip[0].value;
		} else if(regexLastKey.test(lastKeyNB)){
			nip[0].value=beforeValue;
		} else{
			if(nipLength==3 || nipLength==7 || nipLength==10){
				nip[0].value += "-";
			}
			beforeValue=nip[0].value;
		}
		if(nip[0].value.length>13){
			nip[0].value = nip[0].value.substr(0,13);
			beforeValue = nip[0].value;
		}
	});
	$(nip).on('blur',function(event){
		if(nip[0].value.length>0 && nip[0].value.length<13){
			alert("Niepoprawny NIP");
		}
	});
});

Potrzebujesz wsparcia przy Twoim PrestaShop przejdź od cennik PrestaShop

Pokaż więcej projektów
Zamów wycenę
Polityka prywatności | Regulamin
Pro-link 2005-2020