W dzisiejszej erze cyfrowej, dobrze funkcjonujący sklep internetowy stał się ważnym narzędziem dla firm, które chcą sprzedawać swoje produkty lub usługi. Dla polskiej firmy Krosno S.A stworzyliśmy nowoczesny sklep internetowy oparty o system PlentyMarkets. W ramach tego projektu, została stworzona wielojęzyczna platforma mająca na celu ekspansję firmy Krosno S.A na zagraniczne rynki. Głównym wyzwaniem było stworzenie precyzyjnego odzwierciedlenia polskiego sklepu firmy. Wiązało się to z dużą ilością customizacji, które musieliśmy wykonać na gotowym silniku PlentyMarkets. W dalszej części artykułu pokażemy konkretne przeszkody jakie napotkaliśmy wraz z gotowymi rozwiązaniami, jakie należało zastosować.
Przedstawimy także praktyczne wskazówki przydatne w pracy z PlentyMarkets, wskażemy korzyści wynikające z użycia gotowego silnika sklepowego. Omówimy kluczowe aspekty projektu, które przyczyniły się do osiągnięcia celów biznesowych naszego klienta.
Krosno to polska firma zajmująca się produkcją i sprzedażą wyrobów szklanych. Jest jednym z największych producentów szkła i kryształów w Polsce, a także eksporterem swoich produktów na rynki zagraniczne. Dodatkowo, firma Krosno oferuje usługi związane z personalizacją szkła, umożliwiając klientom indywidualne grawerowanie czy nadrukowanie logo na wybranych produktach.
Plentymarkets to oprogramowanie do zarządzania e-commerce, integruje ono różne procesy biznesowe w jednym miejscu, dodatkowo posiada wbudowany system zarządzania treścią i możliwość tworzenia sklepu internetowego.
Przed rozpoczęciem projektu firma Krosno wykorzystywała już system Plentymarkets do obsługi sprzedaży. Firmie zależało na jak najszybszym uruchomieniu sprzedaży online na rynkach zagranicznych. Wykorzystanie wbudowanego, zintegrowanego sklepu było więc naturalnym krokiem.
Budowa i zarządzanie sklepem internetowym od podstaw może być czasochłonne i wymagać znacznych zasobów. Istnieją jednak narzędzia, takie jak system Plentymarkets, które oferują liczne zalety i ułatwienia dla przedsiębiorców. Należą do nich:
Prace przy tworzeniu sklepu pokazały, że z jednej strony wykorzystywanie gotowego rozwiązania znacząco przyspiesza pracę. Z drugiej, niektóre z funkcjonalności wymagane przez klienta wymusiły niekonwencjonalnego podejścia.
Utrudnienia, które napotkaliśmy podczas prac:
Pomimo powyższych utrudnień, skutecznie zrealizowaliśmy prace, znajdując alternatywne rozwiązania. Dzięki temu osiągnęliśmy zamierzone cele i stworzyliśmy funkcjonalny sklep internetowy dla klienta. W dalszej części artykułu opiszę jakie rozwiązania zostały zastosowane, aby poradzić sobie z najważniejszymi wyzwaniami.
Akordeon to inaczej zakładki na stronie internetowej. Jest to jedna z ciekawszych form prezentowania treści w postaci rozsuwanych pozycji, które ujawniają swoją zawartość po kliknięciu w nadrzędny względem nich element.
Projekt graficzny użyty w sklepie wymagał zastosowania akordeonu. Jednak w sklepie wbudowanym przez Plentymarkets istnieje wyłącznie funkcjonalność zwykłych zakładek. Przez brak możliwości bezpośredniej edycji kodu źródłowego, został wdrożony całkowicie dedykowany kod CSS/JS, który w pełni wdrożył potrzebne rozwiązanie. Na poniższym zrzucie ekranu można zobaczyć finalny efekt prac.
Domyślnie system pozwala wyświetlać wiele zdjęć na liście produktów, jednak aby zobaczyć kolejne użytkownik musiał kliknąć w strzałke. W ramach realizacji sklepu postawiono na większą dynamikę sklepu, aby przyciągnąć uwagę klienta - alternatywne zdjęcie miało pokazywać się zaraz po najechaniu kursorem na pierwsze zdjęcie. Aby osiągnąć ten z pozoru prosty efekt musieliśmy posiłkować się dedykowanym skryptem JS.
Lista produktów i wyświetlanie drugiego zdjęcia produktu po najechaniu kursorem:
Podobne rozwiązanie zostało zastosowane, aby ukryć znak gwiazdki i informacji na temat opłaty za dostawę. Plentymarkets domyślnie na liście produktów dodaje informacje na temat dodatkowych kosztów dostawy. Niestety z poziomu konfiguracji systemu nie ma możliwości ukrycia tych informacji, dlatego kolejny raz musieliśmy się posiłkować dedykowanym skryptem.
Przed naszą edycją arkuszów stylów i po usunięciu zbędnych informacji z produktów:
Na stronie produktu znajduje się duże zdjęcie podglądowe produktu, niestety w systemie plentymarkets jedyne przybliżenie jakie istnieje to przybliżenie po naciśnięciu na zdjęcie. W ramach tworzenia projektu nasz klient wymagał szybkiego podglądu zdjęcia, ponieważ zależało mu na tym, aby klienci odwiedzający sklep mogli szybko oglądać detale produktu. Dzięki przygotowanemu przez nas skryptowi byliśmy w stanie stworzyć rozwiązanie, które umożliwiło przybliżanie konkretnego miejsca na zdjęciu produktu i skutecznie usprawniło sposób prezentacji produktu.
Rezultat:
Domyślnie system plentymarkets pozwala na mocno ograniczoną ilość miejsca na dedykowany kod CSS i Javascript. Można to osiągnąć za pomocą poniższego skryptu - jak widać nie należy on do najtrudniejszych:
let link = document.createElement(‘style’);
link.append(` Tutaj dodaj style `);
document.getElementsByTagName(‘head’)[0].appendChild(link);
Innym sposobem jest umieszczenie pliku w webspace naszego projektu.
Mimo kilku wyzwań napotkanych po drodze wynikających ze specyfiki i ograniczeń systemu Plentymarkets - udało się stworzyć w pełni działający, nowoczesny i przyciągający uwagę sklep. Efekt prac można zobaczyć na zdjęciach poniżej, a także na stronie case study: https://www.skmgp.com/pl/case-studies/krosno
Strona główna:
Oparcie sklepu o wbudowany system zarządzania treścią w Plentymarkets najlepiej sprawdza się przy sklepach z prostymi funkcjonalnościami. Jeśli system jest już wykorzystywany w firmie i jest potrzeba wejście na rynek e-commerce to takie rozwiązanie sprawdzi się doskonale. Przy bardziej zaawansowanych sklepach jego projektowanie może być utrudnione, uciążliwe i zbyt czasochłonne.
PlentyMarkets to system zarządzania e-commerce, który łączy funkcje sprzedaży, zarządzania treścią i sklepu internetowego. Został wybrany przez Krosno S.A. w celu szybkiego uruchomienia wielojęzycznego sklepu internetowego na rynkach międzynarodowych, wykorzystując zintegrowaną platformę, która przyspiesza wdrożenie.
PlentyMarkets oferuje zintegrowany system sprzedaży, wbudowane narzędzia tłumaczeniowe dla sklepów wielojęzycznych, szybką implementację w porównaniu z budowaniem od podstaw oraz przyjazny dla użytkownika interfejs, który umożliwia łatwą edycję bez dogłębnej wiedzy technicznej.
Typowe wyzwania obejmują ograniczony dostęp do kodu źródłowego, ograniczone możliwości kreatora układów, złożoną edycję CSS/JS, brak niektórych funkcji (takich jak sekcje akordeonowe) oraz trudności z integracją z narzędziami zewnętrznymi, takimi jak Google Analytics lub Tag Manager.
Rozwiązania niestandardowe można wdrożyć za pomocą dedykowanych skryptów CSS i JavaScript. Na przykład zmiany obrazu po najechaniu kursorem, powiększanie obrazu produktu, ukrywanie niechcianych elementów lub tworzenie funkcji akordeonu można osiągnąć bez modyfikowania podstawowego systemu.
PlentyMarkets najlepiej sprawdza się w przypadku firm, które już korzystają z tego systemu, lub sklepów o stosunkowo prostych funkcjach. Chociaż umożliwia szybkie wdrożenie i obsługę wielu języków, sklepy o zaawansowanych funkcjach mogą wymagać bardziej złożonych rozwiązań i dodatkowych prac programistycznych, aby osiągnąć pożądany wygląd i funkcjonalność.
Michał jest front-end developerem w SKM Group. Specjalizuje się w przekształcaniu projektów w responsywne interfejsy internetowe. Z pasją do kodowania, poświęca się tworzeniu przyjaznych dla użytkownika interfejsów. Michał specjalizuje się również w zarządzaniu stronami za pomocą CMS, takich jak Plentymarkets i Wordpress. Michał jest szczególnie zainteresowany zdobywaniem nowej wiedzy i stawianiem czoła nowym wyzwaniom.
Komentarze