Jak dodać dodatkowe moduły podczas finalizacji zamówienia?


Informacje oraz dyskusje na temat sklepów internetowych. Kopalnia wiedzy o usługach: eSklep oraz eSklep Premium

Podczas wprowadzania ustawień sklepu, jego wyglądu oraz struktury, bardzo często korzystasz z modułów, czyli elementów z treścią i/lub obrazkami, które możesz umieszczać na poszczególnych podstronach sklepu (np. tylko na ekranie podsumowania zamówienia).

Korzystając z ustawień Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Moduły możesz stworzyć widok w postaci układu podstawowego, powielanego dla każdej z podstron sklepu (strona główna, karta produktu, kategoria, koszyk i blog), ale możesz także utworzyć dla każdej z nich inną indywidualną strukturę.

Kliknij tutaj, aby dowiedzieć się więcej o wyglądzie sklepu i jego konfiguracji.

W ten sposób strona główna będzie zawierała tylko niezbędne informacje potrzebne do zakupu, karta produktu zostanie dodatkowo wyposażona w moduły wyświetlające np. produkty polecane, promocje, dodatkowe kategorie, a w Koszyku klient skupi się tylko na finalizacji zamówienia. Dodatkowe moduły nie będą rozpraszały jego uwagi.

W tym artykule skupimy się na modułach wyświetlanych podczas finalizacji zamówienia, czyli podczas czterech kroków, które realizowane się w koszyku. Domyślnie, moduł dodany do strony Koszyk (Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Moduły) będzie wyświetlany na wszystkich ekranach składających się na realizacje zamówienia, aż do jego opłacenia.

W artykule dot. dodawania modułu do ekranu podsumowania zamówienia pokazaliśmy, w jaki sposób dodać moduł do konkretnego kroku składania zamówienia, czyli do kroku trzeciego o nazwie “Podsumowanie”. Poniżej przedstawiamy konfigurację, którą można zastosować wyświetlając lub blokując wyświetlanie dodatkowego modułu dla poszczególnych kroków zamówienia (wszystkich czterech).

Dodatkowy moduł może być zastosowany do wyświetlenia w podsumowania zamówienia dodatkowych elementów, np.: linki do plików i regulaminów, zdjęcia, teksty oraz inne informacje przydatne w poszczególnych krokach składania zamówienia.

Poradnik wideo: Jak zmienić wygląd sklepu: dodawanie i zarządzanie modułami?

Jak dodać dodatkowy moduł / informację do podsumowania zamówienia?

  1. Przejdź do sekcji Konfiguracja > Wygląd > Aktywny styl graficzny i wybierz sekcję Moduły.

  2. Kliknij przycisk dodaj moduł, aby utworzyć nowy moduł w sklepie.

  3. Uzupełnij parametry modułu tak, jak na załączonym poniżej zrzucie ekranu.

    Sugerujemy skorzystać z HTML ID w postaci “order-summary-page”. Nazwa podana w polu HTML ID jednak może być dowolna, np. “moduldodatkowy”. Zapamiętaj wpisaną w tym miejscu nazwę, będzie ona konieczna przy dalszej konfiguracji.

    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Dodaj moduł - Uzupełnij parametry modułu

  4. Zapisz wprowadzone ustawienia.

    1. Wróć teraz do sekcji Moduły, włącz (zaznacz) sekcję Koszyk, a następnie dodaj nowy moduł (Dostępne moduły –> złap i przeciągnij utworzony wcześniej moduł z listy). W poniższym przykładzie dodatkowy moduł ma nazwę “Facebook – Lubię to”.

  5. Zapisz ustawienia.

Wprowadzanie własnego kodu CSS

W poniższym przykładzie dowiesz się jak wyświetlić dodatkowy moduł tylko w trzecim kroku realizacji zamówienia w koszyku (czyli w podsumowaniu):

  1. Po umieszczeniu dodatkowego modułu na podstronie Koszyk, przejdź teraz do sekcji Własny styl CSS (odnajdziesz ją po lewej stronie ekranu) i wklej poniższy kod. Po wklejeniu kodu, okno zawierać będzie informacje jak na załączonym zrzucie ekranu.

    HTML ID wstawianego modułu zostało nazwane w naszym przykładzie order-summary-page, nazwa ta (czyli podana w polu HTML ID) musi zostać użyta we wklejanym kodzie CSS.
    .box_custom {
        &#order-summary-page {
            display: none;
        }
    }
    .shop_basket_step3 {
        .box_custom {
            &#order-summary-page {
                display: block;
            }
        }
    }

    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Koszyk - Własny styl CSS - Wklej skopiowany kod

  2. Zapisz wprowadzone zmiany.

    Powyższa konfiguracja spowoduje wyświetlenie dodatkowego modułu tylko i wyłącznie w 3 kroku składania zamówienia, czyli w podsumowaniu.

Własny kod CSS dla poszczególnych kroków składania zamówienia

Poniżej prezentujemy kody, które odpowiadają za wyświetlanie dodatkowego modułu w poszczególnych krokach składania zamówienia.

  • Fragment kodu odpowiadający za styl modułu:
    .box_custom {
      &#order-summary-page {
      display: none;
      }
    }
    Jeśli ustawimy display: none, moduł nie będzie wyświetlany na stronie Koszyk,
    Jeśli ustawimy display: block, moduł będzie wyświetlany na stronie Koszyk.
    Koszyk obejmuje stronę z produktami dodanymi do koszyka oraz 4 kroki zamówienia.
  • Fragment kodu odpowiedzialny za wyświetlanie modułu w kroku 1:
    .shop_basket {
      .box_custom {
      &#order-summary-page {
      display: block;
      }
      }
      }
    
  • Fragment kodu odpowiedzialny za wyświetlanie modułu w kroku 2:
    .shop_basket_address {
      .box_custom {
      &#order-summary-page {
      display: block;
      }
      }
      }
    
  • Fragment kodu odpowiedzialny za wyświetlanie modułu w kroku 3:
    .shop_basket_step3 {
      .box_custom {
      &#order-summary-page {
      display: block;
      }
      }
      }
    
  • Fragment kodu odpowiedzialny za wyświetlanie modułu w kroku 4:
    .shop_basket_done {
      .box_custom {
      &#order-summary-page {
      display: block;
      }
      }
      }
    
Podsumowując, po dodaniu dodatkowego modułu na stronie koszyka, należy zdefiniować we “Własnym stylu CSS”, w których miejscach dodatkowy moduł ma być wyświetlany. Parametr display: block dodajemy, jeśli dodatkowy moduł ma być wyświetlany na podstronie koszyka. Natomiast parametr display: none dodajemy, jeśli dodatkowy moduł ma być ukryty na danej podstronie koszyka.

Przykład kodu wklejonego do Własny styl CSS

W poniższym przykładzie dodatkowy moduł będzie wyświetlany na drugim oraz czwartym kroku zamówienia.

Dodatkowy moduł został wyłączony z widoku na wszystkich podstronach za pomocą parametru display: none. W dalszej części kodu ustawiliśmy za pomocą parametru display: block, aby moduł był dostępny w drugim (shop_basket_address) oraz czwartym (shop_basket_done) kroku zamówienia. Dodatkowo za pomocą parametru display: none wyłączyliśmy  moduł w kroku trzecim (shop_basket_step3). W utworzonym kodzie pominęliśmy krok pierwszy (nie definiując dla niego żadnego stylu) – przez co moduł nie będzie wyświetlany przy tym kroku.

.box_custom {
  &#order-summary-page {
  display: none;
  }
}
.shop_basket_address {
  .box_custom {
  &#order-summary-page {
  display: block;
  }
  }
}
.shop_basket_step3 {
  .box_custom {
  &#order-summary-page {
  display: none;
  }
  }
}
.shop_basket_done {
  .box_custom {
  &#order-summary-page {
  display: block;
  }
  }
}

Załóż własny sklep internetowy

Nieważne co i jak chcesz sprzedawać. eSklep od home.pl to idealne narzędzie do prowadzenia sprzedaży w Internecie.


  • Czy artykuł był pomocny ?
  • Tak   Nie
Szukaj
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Najczęściej zadawane pytania
Dodatkowe narzędzia hostingu
Statystyki serwera (nowe)
Połączenie SSH
Statystyki serwera (stare)
WebFTP
Autoinstalator
Kontrola wersji (SVN)
Listy mailingowe
Poczta home.pl
Obsługa poczty webmail
Programy pocztowe
Nowa platforma home.pl
Częste pytania
Bezpieczeństwo
Instalacje
Panel klienta
Domeny
Hosting
Serwer Apache
Bazy danych
Certyfikaty SSL
Zamawianie SSL
Instalacja i konfiguracja SSL
Poczta e-mail
WordPress Hosting SSD
Dodatki od partnerów
Poprzednia platforma home.pl
Certyfikaty SSL
Zamawianie certyfikatów SSL
Konfiguracja i instalacja SSL
Panel home.pl
Informacje podstawowe
Pulpit
Usługi
Płatności
Profil
Centrum Pomocy
Operacje w Panelu home.pl
Serwery
WebFTP
Informacje podstawowe
Konfiguracja serwerów
Serwery Unix
Serwery Windows
Obsługa baz danych
phpMyAdmin (MySQL)
phpPgAdmin (PgSQL)
myLittleAdmin (MSSQL)
Sklep internetowy eSklep
Panel usługi eSklep
RODO w sklepie internetowym
Panel sklepu internetowego
Pierwsze kroki
Promocja sklepu
Sprzedaż
Pierwsze uruchomienie
Dodatki od partnerów
Asortyment
Klienci
Integracje
Inne integracje
Systemy aukcyjne
Baza produktów
Aplikacje
App store
Aplikacja mobilna
Marketing
Modyfikacja wyglądu
Dokumentacja
Dla deweloperów
Style graficzne
Inne zagadnienia
Raporty i statystyki
Zawartość
Filmy instruktażowe
Konfiguracja sklepu
Rozliczenia i dokumenty
Faktury
Zmiana danych (cesja)
Rozliczenia i płatności
Dokumenty do pobrania
Produkty i usługi
Kreator Stron WWW
eCommerce
Moduły
Ustawienia
Szablony
Nawigacja
Publikacja i dodatki
Szybki start
Prestahosting
Profesjonalne usługi IT
Certyfikaty SSL
Przywracanie danych
Udostępnienie logów
Operacje na plikach i bazach danych
WordPress
Terminal płatniczy SumUp
Wordpress hosting SSD
Domeny
Informacje podstawowe
Rejestracja / opłacanie
Konfiguracja domen
Transfer domen
Giełda domen
Dodatki do domen
Serwery VPS
Skrzynki e-mail
Microsoft Exchange
Cloud Email Xchange
Obsługa skrzynek w Panelu home.pl
Jak zarejestrować Personal email lub Business email?
Bezpieczeństwo
eKsięgowość
Reklama internetowa
Reklama Allegro Ads
Tworzenie stron WWW
Contact LEADer
Reklama banerowa Google
Zakupy Google
Google Ads (AdWords)
eKampanie Google
SEMSTORM
Pozycjonowanie
rankingCoach
Baza wiedzy
Facebook
Systemy CMS
Internet w praktyce
Przydatne programy
Konfiguracja programów FTP
Zagadnienia techniczne
.htaccess
mod_rewrite
Kursy i specyfikacje
Kurs HTML
Kurs PHP
Kurs SQL
Rejestracja usług
RODO w home.pl
English
Control Panel
Webmail
FTP
Office 365
WordPress
SSL
Aplikacje w marketplace
SimplySign
SiteLock - ochrona WWW
Dropsuite Email Backup
CCleaner
Antywirus Kaspersky
Dropbox - dysk w chmurze
Płatności PayU
Programy antywirusowe AVAST
Office 365
AVG PC TuneUp
Reklama na start
Google AdWords
Zareklamuj stronę WWW na Facebook
Cloud Email Xchange
Brand24
Microsoft OneDrive
FreshMail.pl
Tłumaczenia online
G Suite - poczta Gmail
Program prowizyjny
Acronis Backup
Informacje podstawowe
Ustawienia dodatkowe
Panel użytkownika
Panel administratora
lub