Dokumentacja dla webmasterów

Temat graficzne w SOTESHOP bazują na frameworku Bootstrap. Do zmian w temacie graficznym potrzebny klient FTP oraz edytor tekstów. Polecamy do tych celów Filezilla i Sublime Text.

Przykładowa zmiana - Dodanie belki do nagłówka

Zmiana ma na celu umieszczenie paska z numerem telefonu na samej górze nagłówka w temacie argentorwd. Modyfikacja tematu przeprowadzana jest na serwerze FTP, na którym znajduje się sklep.

  1. Dodaj własny temat graficzny z panelu administracyjnego. Zobacz jak stworzyć temat
  2. Przekopiuj plik nagłówka do swojego tematu graficznego.
    • Utwórz katalog w /core/apps/frontend/templates/theme/ o nazwie temat15.
    • Przekopiuj plik _header.html z tematu bazowego /core/apps/frontend/templates/theme/argentorwd/ do utworzonego katalogu
  3. Zmień plik html nagłówka w swoim temacie.
    4. Na początek pliku wklej:

    <div class="container">
      <div id="top" class="text-right">
        <img src="{image_path image='phone.png'}" width="14" height="14" alt="phone" />
        <b>61 800 000</b>
      </div>
    </div>

  4. Dodaj obrazek do swojego tematu.
    • Stwórz katalog /images/frontend/theme/temat15
    • Przekopiuj plik obrazka phone.png do utworzonego katalogu.
  5. Zmień style css swojego tematu
    6. Po utworzeniu tematu, system stworzył plik css w /css/frontend/theme/temat15.css.
    Dodaj do niego:

    #top {background: #ececec; padding: 5px 10px; border: 1px solid #ddd;}
    #top img {margin-right: 5px; position: relative; top: -1px;}

  6. Zobacz rezultat
    7. W sklepie zasotosowane są systemy cachujące i najlepiej podczas pracy podgladać sklep w trybie developerskim. Po zakończonej pracy należy wyczyścić pamięć podręczną i fast cache.

Pliki HTML

Kopiuj pliki do własnego katalogu z tematu, na którego bazie został stworzony Twój temat graficzny w panelu. Jeśli nie znajdziesz tam pliku, skopiuj z tematu responsive. Jest to bazowy temat.
Kopiuj tylko te pliki, które zmieniasz.

Szablon html

/core/apps/frontend/templates/theme/nazwa_tematu/base.html

{include_stylesheets minify="true"}

Zmiana na false wyłącza scalanie plików css.

{include_javascripts minify="true"}

Zmiana na false wyłącza scalanie plików js.

{include_file id="_fonts"}

Czcionki

/core/apps/frontend/templates/theme/nazwa_tematu/_fonts.html

{st_get_component module="stGoogleAnalyticsFrontend" component="standard"}

Google Analytics

/plugins/stGoogleAnalytics/modules/stGoogleAnalyticsFrontend/templates/theme/nazwa_tematu/google_standard.html

Układ kolumnowy

W zależności od wyboru w panelu w konfiguracji układu dla układu dwukolumnowego jest wykorzystywany plik

/core/apps/frontend/templates/theme/nazwa_tematu/two_column.html

, a dla układu jednokolumnowego

/core/apps/frontend/templates/theme/nazwa_tematu/one_column.html

{include_file id="_header"}

Nagłówek -> więcej

{st_get_component module="stNavigationFrontend" component="breadcrumbs"}

Ścieżka nawigacyjna

/plugins/stNavigationPlugin/modules/stNavigationFrontend/templates/theme/nazwa_tematu/breadcrumbs.html

{st_get_component module="stCategoryTree" component="vertical"}

Drzewo kategorii

/plugins/stCategoryTreePlugin/templates/theme/nazwa_tematu/vertical.html

{st_get_component module="stProduct" component="filters"}

Filty produktów na liście

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/filters.html

{st_get_component module="stProduct" component="new"}

Produkty w nowościach

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_new.html

{st_get_component module="stProduct" component="productGroup" params="product_group=PROMOTION"}

Grupy produktów

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_group.html

Parametr

product_group

ma następujące wartości: PROMOTION, SALES, RECOMMEND, MAIN_PAGE co odpowiada typowi grupie produktów: Promocje, Wyprzedaże, Polecamy, Strona główna.

{st_get_component module="stBoxFrontend" component="boxGroup" params="box_group=LEFT"}

Boksy informacyjne dopisane do grupy lewa kolumna. Szablon jednego boksu znajduje się w

/plugins/stBoxPlugin/modules/stBoxFrontend/templates/theme/nazwa_tematu/box_single.html

Wywołanie pojedyńczego boksu w dowolnym pliku html to:

{st_get_component module="stBoxFrontend" component="boxSingle" params="webmaster_id=moj_boks"}

moj_boks to identyfikator z edycji boksu w panelu adminsitracyjnym.

{st_get_component module="stTrustedShopsFrontend" component="showRatingWidget"}

Widżet Trusted Shops

/plugins/stTrustedShopsPlugin/modules/stTrustedShopsFrontend/templates/theme/nazwa_tematu/trusted_shops_show_rating_widget.html

{include_file id="_footer"}

Stopka -> więcej

Nagłówek

/core/apps/frontend/templates/theme/nazwa_tematu/_header.html

{st_get_component module="stCategoryTree" component="horizontal"}

Kategorie poziome

/core/apps/plugins/stCategoryTreePlugin/templates/theme/nazwa_tematu/horizontal.html

{st_get_component module="stBasket" component="show"}

Podgląd koszyka

/core/apps/frontend/modules/stBasket/templates/theme/nazwa_tematu/show.html

{st_get_component module="stUser" component="loginStatus"}

Moje konto

/core/apps/frontend/modules/stUser/templates/theme/nazwa_tematu/user_login_status.html

{st_get_component module="stLanguageFrontend" component="choose"}

Wybór języka

/plugins/stLanguagePlugin/modules/stLanguageFrontend/templates/theme/nazwa_tematu/choose.html

{st_get_component module="stCurrencyFrontend" component="pickCurrency"}

Wybór waluty

/plugins/stCurrencyPlugin/modules/stCurrencyFrontend/templates/theme/nazwa_tematu/pick_currency.html

{include_file id="_search"}

Pole wyszukiwania

/core/apps/frontend/templates/theme/nazwa_tematu/_search.html

Stopka

/core/apps/frontend/templates/theme/nazwa_tematu/_footer.html

{st_get_component module="stSocialLinksFrontend" component="show"}

Linki społecznościowe

/plugins/stSocialLinksBackend/modules/stSocialLinksFrontend/templates/theme/nazwa_tematu/show.html

{st_get_component module="stWebpageFrontend" component="footerWebpage"}

Grupy linków

/plugins/stWebpagePlugin/modules/stWebpageFrontend/templates/theme/nazwa_tematu/webpage_footer

{st_get_component module="stFrontendMain" component="copyright" params="open='$open'"}

Copyright

/core/apps/frontend/modules/stFrontendMain/templates/theme/nazwa_tematu/copyright.html

Strona główna

/core/apps/frontend/modules/stFrontendMain/templates/theme/nazwa_tematu/main_index.html

{st_get_component module="stBlogFrontend" component="index"}

Blog

/plugins/stBlogPlugin/modules/stBlogFrontend/templates/theme/nazwa_tematu/blog_box.html

{st_get_component module="stFrontendMain" component="mainText"}

Tekst na stronie głównej

/core/apps/frontend/modules/stFrontendMain/main_text.html

{st_get_component module="stProduct" component="treeMain"}

Kategorie na stronie głównej

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_tree_main.html

{st_get_component module="stProduct" component="productGroup" product_group="MAIN_PAGE"}

Produkty na stronie głównej

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_main.html

{st_get_component module="stSlideBannerFrontend" component="show"}

Banery na stronie głównej

/core/plugins/stSlideBannerPlugin/modules/stSlideBannerFrontend/templates/theme/nazwa_tematu/slide_banner_show.html

Lista produktów

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_list.html

{$title}

Nazwa kategorii, grupy produktów lub producenta

{$image}

Zdjęcie kategorii lub producenta

{$description}

Opis kategorii lub producenta

{st_get_component module="stCategoryTree" component="horizontalChildren" category=$category limit=5}

Podkategorie

/plugins/stCategoryTreePlugin/modules/stCategoryTree/templates/theme/nazwa_tematu/horizontal_children.html

{st_get_component module="stProduct" component="producerFilter"}

Filtry producentów

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/producer_filter.html

{$sort}

Sortowanie

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_sort.html

{$product_list}

Produkty na liście

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_list_long.html

{$pager}

Stronicowanie

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_pager.html

Karta produktu

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_show_default.html

{$name}

Nazwa produktu

{$photo.big}

Zdjęcie produktu

{$photos}

Galeria zdjęć

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_image_gallery.html

{$product_review}

Dodanie recenzji

/core/apps/frontend/modules/stReview/templates/theme/nazwa_tematu/review_show_stars.html

{$code}

Kod produktu

{$man_code}

Kod producenta

{$producer_name}

Nazwa producenta

{$weight}

Waga

{$weight_unit}

Jednostka wagi

{$execute_time}

Czas realizacji

{$availability}

Dostępność

/plugins//stAvailabilityPlugin/modules/stAvailabilityFrontend/templates/theme/nazwa_tematu/availability.html

{$stock}

Stan magazynowy

{$uom}

Jednostka miary

{$product_question}

Zapytania

/plugins/stQuestionPlugin/modules/stQuestionFrontend/templates/theme/nazwa_tematu/question_show_question.html

{basket_product_options product="$instance" namespace="product-card"}

Opcje produktu

/plugins/stProductOptionsPlugin/modules/stProductOptionsFrontend/templates/theme/nazwa_tematu/option_view_select.html

{basket_add_quantity product="$instance" namespace="product-card" size="4" label="Ilość:"}

Ilośc produktu

{$price_catalogue} - {$price_catalogue_brutto}

Cena katalogowa netto - brutto

{$price_discount} - {$price_discount_brutto}

Wartośc rabatu netto - brutto

{$price_discount_percent}

Procentowa wartość rabatu

{$price_net} - {$price_brutto}

Cena netto - brutto

{$old_price_net} - {$old_price_brutto}

Stara cena netto - brutto

{paypal_checkout_express_add_link product="$instance" namespace="product-card"}

Płatność PayPal Express

{$description}

Opis skrócony

{$description_long}

Opis pełny

{$product_attributes}

Atrybuty

/plugins/appProductAttributesPlugin/modules/appProductAttributeFrontend/templates/theme/nazwa_tematu/list.html

Strona informacyjna

/plugins/stWebpagePlugin/modules/stWebpageFrontend/templates/theme/nazwa_tematu/webpage_show.html

{$content_name}

Tytuł strony

{$content}

Zawartośc strony

Strony 404

404 produktu, kategorii, producenta:

/core/apps/frontend/modules/stProduct/templates/theme/nazwa_tematu/product_not_found.html

404 strony www:

core/plugins/stWebpagePlugin/modules/stWebpageFrontend/templates/theme/nazwa_tematu/webpage_list.html

404 wszystkich innych stron:

/core/plugins/stErrorPlugin/modules/stErrorFrontend/templates/theme/nazwa_tematu/error_error_404.html

CSS i Obrazki

CSS

Po utworzeniu tematu z panelu system doda plik nazwa_tematu.css do ścieżki

/css/frontend/templates/theme/nazwa_tematu/

, jeśli jest potrzeba zmiany innych plików skopiuj je z katalogu tematu bazowego.

Obrazki

Obrazki należy umieścić w

/images/frontend/theme/nazwa_tematu/

Aby potem wykorzystać jako żródło w kodzie
<img src="{image_path image='phone.png'} />

Jak dodać dodatkowy typ grupy produktów?

Aby dodać własny typ grupy produktów należy utworzyć plik o nazwie user_product_group.yml i dodać go do struktury sklepu w katalogu /core/apps/backend/modules/stProductGroup/config/ plik powinien zawierać:

product_group:
    MY: Moja grupa
    SYMBOL: Nazwa wyświetlana w panelu
Powyższa treść pliku dodaje dwie grupy.
Samo wywołanie grupy produktów po stronie pliku html tematu to np.:
{st_get_component module="stProduct" component="productGroup" params="product_group=SYMBOL"}

Opis wdrożenia grafiki

Spis treści

SOTE YouTube

Bądź na bieżąco z nowościami programu SOTESHOP. Subskrybuj kanał SOTE na YouTube.

Polecane artykuły na blogu