Tutorial: tworzenie e-sklepu na OpenCart

Pomagając przyjacielowi z jego sklepem na OpenCart postanowiłam stworzyć użyteczny podręcznik dla osób, którzy chcieliby założyć własny e-sklep. System OpenCart stanie się idealnym wyborem dla ludzi, które nie mają wystarczająco dużo doświadczenia w zakresie tworzenia i prowadzenia stron komercyjnych.

Jako firma z dość dużym katalogiem szablonów e-commerce, staramy się pokazać naszym klientom,że tworzenie własnego sklepu jest łatwe. Po prostu przyjrzyj się do naszych najlepszych szablonów OpenCart.


Fooder - szablon OpenCart dla pizzerii z systemem zamawiania online

 Demo Pobierz


 Сar Audio - responsywny szablon OpenCart

 Demo Pobierz


Modern Furniture - responsywny szablon OpenCart na temat Meble i wyposażenie wnętrz

 Demo Pobierz


Fresh Food - szablon OpanCart dla e-sklepu spożywczego z zdrową i ekologiczną żywnością

 Demo Pobierz

Otóż dla tego tutorial wybrałam szablon dla pizzerii. Posiada n bardzo apetyczny design, który od razu przyciąga do siebie uwagę. Więc, teraz nadszedł czas aby przejść do dostosowywania szablonu.


Jak zaninstalować OpenCart CMS

Otwórz dowolną przeglądarkę i wprowadź ścieżkę katalogu OpenCart w pasku adresu przeglądarki (na przykład: http://nazwa_twojej_domeny/opencart/). Zostanie wyświetlona strona instalacji OpenCart:

  1. Licencja na instalację
  2. Etap wstępny
  3. Konfiguracja
  4. Gotowe!

Licencja na instalację

Sprawdź umowę licencyjną OpenCart i kliknij przycisk Kontynuuj, jeśli się z nią zgadzasz.


Etap wstępny

W drugim kroku OpenCart sprawdzi, czy ustawienia hostingu odpowiadają wymaganiam systemu i czy uprawnienia do plików i folderów są poprawne.


Konfiguracja

Na etapie konfiguracji należy podać dane dotyczące bazy danych. Baza danych MySQL została utworzona w trakcie przygotowywania, teraz należy podać:

  • serwer bazy danych;
  • nazwę bazy danych;
  • nazwę użytkownika bazy danych.

Jeśli istnieją jakieś problemy z danymi o bazie danych, skontaktuj się z dostawcą usług hostingowych.

Należy również dodać administratora dla swojego e-sklepu. Wprowadź nazwę użytkownika, hasło i adres e-mail administratora. Wprowadzone dane będą używane do logowania do zaplecza sklepu.


Gotowe!

Jest to ostatni krok instalacji systemu OpenCart. Dalej są 2 warianty: przejść do strony lub  do panelu administracyjnego OpenCart.

Ważne: Należy usunąć folder "install" z serwera. Nie będziesz mógł wejść do sklepu, dopóki ten folder będzie na serwerze.

Instalacja została zakończona. Aby otworzyć stronę sklepu, wpisz nazwę domeny w pasku adresu przeglądarki. Aby uzyskać dostęp do panelu administracyjnego OpenCart, wpisz nazwa_domeny/admin.


Jak zainstalować szablon OpenCart

Jeśli masz już gotowy sklep OpenCart i chciałbyś zaktualizować jego wygląd za pomocą szablonu, użyj następującej metody instalacji.

  1. Aby zainstalować szablon OpenCart, musisz przesłać pliki na serwer. Rozpakować na komputerze archiwum "themeXXX (update) .zip", który znajduje się w folderze OpenCart.
  2. Następnie załaduj rozpakowane pliki do katalogu głównego instalacji OpenCart. Może sprawdzić wideo instrukcje dotyczące przesyłania plików na serwer.
  3. Otwórz witrynę za pomocą dowolnej przeglądarki i dodaj /install na końcu adresu URL witryny w pasku adresu przeglądarki (naprzykład, http://nazwa_twojej_domeny/opencart/install).
  4. Kliknij przycisk Kontynuuj.
  5. Wejdź do panelu admina, przejdź do zakładki Extensions > Extension Installer i prześlij pliki archiwum themeXXX(extensions). Kiedy wszystkie pliki zostały przesłane, przejdź do zakładki Extensions > Modifications i naciśnij przycisk odświeżania w prawym górnym kącie ekranu.
  6. W następnym kroku przejdź do zakładki System > Settings, dalje przejdź do karty Store i wybierz szablon themeXXX w polu Templaten.

Jak zainstalować moduły OpenCart

Proces instalacji modułu obejmuje kilka kroków. Przejdź do panelu administracyjnego (dodając /admin do adresu URL witryny w pasku adresu w przeglądarce) — http://www.twojastrona.com/admin).

Przejdź do zakładki Extensions > Extensions.

Wybierz moduły z rozwijanego menu z typami rozszerzeń.

Zobaczysz listę zainstalowanych i gotowych do zainstalowania modułów. Jeśli obok dowolnego modułu znajduje się przycisk Odinstaluj, oznacza to, że moduł jest już zainstalowany.

Ustawienia modułu można modyfikować, klikając przycisk Edytuj.

Klikając przycisk Instaluj, rozpocznie się proces instalacji modułu.

Aby usunąć moduł, należy kliknąć przycisk Odinstaluj, aby moduł został usunięty.

Po zakończeniu instalacji należy skonfigurować moduł. Ustawienia mogą się różnić w zależności od konkretnego modułu, ale pole Status jest takie samo dla wszystkich - pole umożliwia włączenie/wyłączenie modułu.

Aby dodać moduł do określonej strony, należy przejść do listy stron.

Przejdź do zakładki Design > Layout w menu bocznym.

Na liście stron wybierz stronę, w której chcesz umieścić moduł i kliknij Edytuj.

Zobaczysz listę modułów i pozycji modułów, które zostały już dodane do strony.

Dostępne są następujące pozycje modułów (odpowiednio do kolejności wyświetlania):

  1. Header Top (pod nagłówkiem);
  2. Column-left (lewy panel boczny);
  3. Column-right (prawy panel boczny;
  4. Content-top;
  5. Content-bottom;

W polu Sort Order są wyświetlane kolejności wyświetlania modułów przypisanych do tej samej pozycji. Aby dodać moduł do strony, kliknij w przycisk Dodaj moduł. Wybierz wymagany moduł i pozycję modułu, a następnie kliknij w przycisk Zapisz. Instalacja modułu została zakończona.

Dostępne ustawienia:

  • Module Name — nazwa modułu;
  • Width — szyrokość zdjęcia modułu;
  • Height — wysokość zdjęcia modułu;
  • Blur — włączyć/wyłączyć efekt rozmycia zdjęcia, gdy jego rozmiar jest za mały;
  • Direction — określa kierunek ruchu paralaksy. Normal - przewijanie paralaksy przesuwa się w przeciwnym kierunku, Inverse - równolegle do niego;
  • Speed — ustala stosunek prędkości dla paralaksy w stosunku do szybkości bazowej. Wartość: od 0 do 2;
  • Status — status modułu (włączony/wyłączony).

Jak włączyć Megamenu

Moduł TM Megamenu umożliwia tworzenie złożonych menu. Zapewnia możliwość wyświetlania pojedynczego elementu (bez podmenu), elementu z podmenu i elementu z wieloliniowym i wielokolumnowym blokiem podmenu. Ten moduł może być wyświetlany w różnych pozycjach, ale z tą samą zawartością.

Aby włączyć megamenu, przejdź do strony Extensions> Modules> TM Megamenu, kliknij w przycisk Edytuj obok odpowiedniej pozycji i wybierz opcję Enabled w nowym oknie.


Jak skonfigurować Megamenu

Elementy Megamenu. Główne pozycje w głównym menu.

Tutaj zaczyna się edycja Megamenu. Aby edytować parametry megamenu, otwórz panel administracyjny witryny i przejdź do strony Extensions > Modules > TM Megamenu > TM Megamenu jak na poniższym zrzucie ekranu. Na następnej stronie będziesz mógł dodawać, usuwać i edytować pozycje menu.

Kliknij jeden z elementów menu, aby rozpocząć edycję. Wypełnij następujące pola:

Typ menu — regularne/megamenu;

Dla opcji 'Custom':

  • Menu title — etykieta menu;
  • Menu link — link do menu;
  • Show megamenu — do wyświetlania megamenu;

Dla opcji "Show megamenu"(3) ustaw "Yes" i wypełnij następujące dodatkowe pola:

  • Columns count — liczba kolumn;
  • Columns per row — liczba kolumn na wiersz;
  • Background image — zdjęcie tła;
  • Background image width — szerokość zdjęcia tła;
  • Background image height — wysokość zdjęcia tła;

Po wypełnieniu pola "Columns coun" dostępne są następujące opcje: "Column N". Wypełnij karty:

  • Column width — szerokość kolumny;
  • Columns content — zawartość kolumny;
  • Categories(Products) limit — maksymalna liczba kategorii lub produktów do wyświetlenia w kolumnie;
  • Module — nazwa modułu do wyświetlenia;
  • Category name — nazwa kategorii;
  • Show Category name — nazwa kategorii do wyświetleni;

Dla opcji 'Category':

  • Menu item submenu type — typ podmenu;

Po wybraniu typu "Megamenu" w polu "Menu Item type", dostępne są następujące dodatkowe ustawienia megamenu:

  • Columns count — number of columns;
  • Columns per row — number of columns per row;
  • Background image — zdjęcie tła;
  • Background image width — szerokość zdjęcia tła;
  • Background image height — wysokość zdjęcia tła;

Po wypełnieniu pola "Columns coun" dostępne są następujące opcje: "Column N". Wypełnij karty:

  • Column width — szerokość kolumny;
  • Columns content — zawartość kolumny;
  • Categories(Products) limit — maksymalna liczba kategorii lub produktów do wyświetlenia w kolumnie;
  • Module — nazwa modułu do wyświetlenia;

Jak zmienić logo w szablonie OpenCart

Przejdź do zakładki Extensions > Extensions.

Wybierz moduły z rozwijanego menu z typami rozszerzeń.

Znadjdź moduł Logo.  Naciśnij przycisk edycji, aby skonfigurować moduł.

Zostaniesz przeniesiony do okna ustawień:

Dostępne ustawienia:
  • Module Name — nazwa modułu;
  • Width — do ustawienia szerokośi zdjęć w pikselach;
  • Height — do ustawienia wysokośi zdjęć w pikselach;
  • Status — status modułu (włączony/wyłączony).

Jak stworzyć układ i nim zarządzać

Przejdź do zakładki Extensions > Extensions.

Wybierz moduły z rozwijanego menu z typami rozszerzeń.

Zndjź sekcję TemplateMonster Layout Builder. Naciśnij przycisk edycji, aby skonfigurować istniejący moduł.

Zostaniesz przeniesiony do okna ustawień:

Podstawowe ustawienia modułu:
  • Status — status modułu (Włączony/Wyłączony);
  • Module Name — nazwa modułu;
  • Module Class — klasa modułu;
  • Module ID — numer ID modułu.

Aby utworzyć nowy układ, naciśnij przycisk New Layout View.

Moduł posiada kilka przycisków, które ułatwiają edycję:

  • Naciśnij Dodaj kolumnę. Po kliknięciu w przycisk będziesz mógł dodawać wiersze. Ta opcja zawiera kilka sekcji:
  1. Po dodaniu kolumny wstaw wiersz. Aby dodać wiersze, naciśnij przycisk Dodaj wiersz. Ilość kolumn w wierszu jest nieograniczona i można dodawać dowolną ilość kolumn. Szerokość kolumn można ustawić zaraz po ich dodaniu za pomocą funkcji Przeciągnij i upuść, przeciągając prawą krawędź kolumny.
  2. Przycisk Usuń umożliwia usuwanie niepotrzebnych kolumn.
  3. Po kliknięciu w przycisku Edytuj zostanie wyświetlone okno z dużym narzędziem dostosowywania, które pozwala na zmianę stylu kolumn/wierszy. Może pomóc w ustawianiu tła i zmianie wartości marginesów dla bloków.
  4. Po dodaniu kolumn należy wypełnić je przez treści (moduły). Aby dodać moduł, naciśnij przycisk Dodaj widżet i wybierz pożądany element z rozwijanego menu. Skonfigurować moduł można z pomocą narzędzia Layout Builder, naciskając w przycisk "Edytuj" w bloku modułu.
  • Użyj przycisku Usuń, aby usunąć kolumnę, której nie potrzebujesz.
  • Przycisk Edytuj umożliwia dostosowanie stylu kolumn. Mówiłam o tym powyżej.
  • Duplikat to doskonałe narzędzie umożliwiające duplikowanie kolumn bez konieczności ich ręcznego kopiowania.
  • Opcja sortowania umożliwia zmianę kolejności kolumn.

Po skonfigurowaniu wszystkich wierszy, kolumn i modułów zapisz moduł Builder i wyświetl je w jednej z pozycji na stronie domowej e-sklepu.


Jak skonfigurować koszyk

Moduł koszyka to rozszerzenie umożliwiające wyświetlanie koszyka na stronie.

Przejdź do zakładki Extensions > Extensions.

Wybierz moduły z rozwijanego menu z typami rozszerzeń.

Znajdź moduł TemplateMonster Cart (Koszyk). Naciśnij przycisk edycji, aby skonfigurować istniejący moduł.

Zostaniesz przeniesiony do okna ustawień:

Aby wyłączyć moduł, wybierz opcję Wyłącz z listy rozwijanej Opcje statusu.


Jak zarządzać linkami w stopce

  1. Przejdź do zakładaki Extensions > Extensions.
  2. Wybierz moduły z rozwijanego menu z typami rozszerzeń.
  3. Znajdź seksję TM Footer Link. Naciśnij przycisk edycji, aby skonfigurować istniejący moduł.
  4. Zostaniesz przeniesiony do okna ustawień:
  • Module Name — nazwa modułu;
  • Links Group — wybierz grupę linków, które chciałbyś wyświetlać w stopce;
  • Status — określia status modułu (włączony/wyłączony).
Front-end:

  • Module name — TM Footer Links Information;
  • Links group — informacja;
  • Status — włączony.

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: 
How to Create an OpenCart Store
.

P.S. I pamiętaj, że osiągnąć sukcesu w biznesie można i bez posiadania e-sklepu. Sprawdź nasz katalog premium szablonów aby wybrać podstawę dla przyszlej strony biznesowej!



Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.