FUNKCJONALNY SKLEP INTERNETOWY W OPARCIU O PLENTYMARKETS

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.

PRZEDSTAWIENIE KLIENTA - KROSNO S.A.

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.

DLACZEGO PLENTYMARKETS?

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:

• zintegrowany system sprzedaży - sklep jest bezpośrednio połączony z wszystkimi modułami systemu Plentymarkets.
• szybkość implementacji - zbudowanie sklepu w oparciu o ten system jest znacznie szybsze niż tworzenie go od podstaw, co oszczędza czas i zasoby.
• wbudowany system tłumaczeń - system plentymarkets oferuje wbudowane narzędzia do tłumaczenia, co ułatwia tworzenie wielojęzycznych wersji sklepu i wspiera ekspansję na rynki zagraniczne.
• łatwość zmian - dzięki prostemu interfejsowi systemu plentymarkets, dokonywanie drobnych edycji w sklepie jest stosunkowo łatwe i nie wymaga znaczących nakładów czasowych.

IMPLEMENTACJA SKLEPU - PRAKTYCZNE WSKAZÓWKI

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:

• Brak możliwości bezpośredniej edycji kodu źródłowego sklepu
• Brak funkcjonalności akordeonu
• Utrudniona konfiguracja sklepu - nieintuicyjny interfejs i rozmieszczenie ustawień
• Ograniczone możliwości kreatora wyglądu sklepu - bez znajomości języka HTML oraz Javascript nie jest możliwa edycja wszystkich wizualnych elementów sklepu
• Błędy kreatora wyglądu sklepu
• Utrudniona edycja plików CSS i Javascript
• Mała ilość pluginów do sklepu
• Utrudniona integracja z zewnętrznymi serwisami (np. Google Analytics, Google Tag Manager)
• Długi czas aktualizacji sklepu po dokonanych zmianach

‍

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.

‍

BRAK FUNKCJONALNOŚCI AKORDEONU

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.

‍

‍

WYŚWIETLANIE ALTERNATYWNEGO OBRAZU PRODUKTU PO NAJECHANIU KURSOREM

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:

‍

ZNAK GWIAZDKI PO CENIE PRODUKTU

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:

‍

‍

PRODUCT IMAGE ZOOMING

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:

‍

‍ Sposób na szybką edycję plików CSS/JS i zwiększenie dostępnego limitu znaków dla dedykowanych skryptów.

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.

‍

JAK STWORZENIE SKLEPU NA PLENTYMARKETS WPŁYNĘŁO NA SZYBKOŚĆ I JAKOŚĆ PRAC

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.