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

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ę.

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.

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.

  4. Zapisz wprowadzone ustawienia.

  5. 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ę „informacje dodatkowe”.

  6. 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;
            }
        }
    }

  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;
  }
  }
}
  • Czy artykuł był pomocny ?
  • Tak   Nie
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Program partnerski AZ.pl
Program partnerski> Certyfikaty SSL
Program partnerski: Domeny .pl
Program partnerski: Hosting WWW
Poczta e-mail w AZ.pl
Poczta Webmail
Konfiguracja programu pocztowego
Obsługa kont e-mail w panelu
OX Business - poczta dla firmy
Akademia AZ.pl
Popularne pytania
Rejestracja usług
Faktury i płatności
Obsługa panelu klienta
Logowanie i zmiana hasła
Użytkownicy panelu klienta
Konto i rozliczenia
Domeny
Hosting
Listy mailingowe
WebFTP
Serwery VPS
Skrzynki e-mail
Strony WWW (Kreator WWW)
Nowy Certyfikaty SSL
Pomoc i kontakt
Obsługa domeny internetowej
Obsługa hostingu WWW
Automatyczna instalacja CMS
Obsługa serwerów VPS
Zarządzanie VPS
Serwery VPS
Produkty i usługi
Bezpieczeństwo
G Suite - Poczta dla firm
Terminal płatniczy SumUp
Asystent AZ
Reklama internetowa
Poczta Xchange Pro
Tworzenie stron WWW
Sklep internetowy AZ.pl
RODO w sklepie internetowym
Panel sklepu
Produkty
Zamówienia
Klienci
Konfiguracja
Zamówienia i płatności
Opcje produktów
Promocja sklepu
Integracje
Systemy aukcyjne
Inne integracje
Porównywarki cen
Integracje partnerów
Inne zagadnienia
Modyfikacja wyglądu
Raporty i statystyki
Kwestie techniczne
Porady
Dodatki (Partnerzy + Store Manager)
Store Manager
Office 365
Fakturowanie
SEO rankingCoach
Kreator stron WWW
Hosting WordPress
Regulacje RODO
Pozostałe

jak się zalogowaćjak zmienić hasłojak sprawdzić pocztękonfiguracja pocztyftp

lub