Documentation for webmasters

Table of Contents

The graphical themes in SOTESHOP are based on the Bootstrap framework. To make changes to the graphical theme, you need an FTP client and a text editor. We recommend Filezilla and Sublime Text for these purposes.

Example change - Adding a bar to the header

The change is intended to place a telephone number bar at the very top of the argentorwd theme header. The theme modification is performed on the FTP server on which the store is located.

  1. Add your own graphical theme from the administrative panel. See how to create a theme
  2. Copy the header file to your graphical theme.
    • Create a directory in /core/apps/frontend/templates/theme/ called theme15.
    • Copy the _header.html file from the base theme /core/apps/frontend/templates/theme/argentorwd/ to the created directory
  3. Change the html file of the header in your theme. At the beginning of the file paste:

    <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. Add an image to your theme.
    • Create a directory /images/frontend/theme/theme15
    • Copy the image file phone.png to the created directory.
  5. Change the CSS style of your theme.After creating the theme, the system created a css file in /css/frontend/theme/temat15.css.
    Add to it:

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

  6. See the result

Caching systems are used in the store and it is best to view the store in developer mode while working. After work is finished, it is necessary to clear the cache and fast cache.

HTML Files

Copy the files to your own theme directory, which is the basis of your graphic theme in the panel. If you don't find the file there, copy it from the responsive theme. This is the base theme.
Copy only those files that you change.

HTML Template

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

{include_stylesheets minify="true"}

Changing to false turns off merging of css files.

{include_javascripts minify="true"}

Changing to false turns off merging of js files.

{include_file id="_fonts"}

Fonts

/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

Column Layout

Depending on the choice in the panel in layout configurationFor a two-column layout, the file

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

is used, and for a one-column layout

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

{include_file id="_header"}

Header -> more

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

Navigation path

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

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

Category tree

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

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

Product filters on the list

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

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

Products in news

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

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

Product groups

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

The parameter

product_group

has the following values: PROMOTION, SALES, RECOMMEND, MAIN_PAGE which corresponds to the type of product group: Promotions, Sales, Recommendations, Home page.

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

Informational boxes added to the left column group. The template of one box is located in

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

Calling a single box in any HTML file is:

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

moj_boks is the identifier for the box edition in the administrative panel.

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

Trusted Shops widget

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

{include_file id="_footer"}

Footer -> more

Header

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

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

Horizontal categories

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

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

Basket preview

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

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

My account

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

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

Language selection

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

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

Currency selection

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

{include_file id="_search"}

Search field

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

Footer

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

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

Social links

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

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

Link Groups

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

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

Copyright

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

Home Page

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

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

Blog

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

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

Text on Home Page

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

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

Categories on Home Page

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

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

Products on Home Page

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

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

Banners on Home Page

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

Product List

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

{$title}

Category, product group or manufacturer name

{$image}

Category or manufacturer image

{$description}

Category or manufacturer description

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

Subcategories

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

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

Producer filters

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

{$sort}

Sorting

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

{$product_list}

Products on the list

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

{$pager}

Pagination

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

Product card

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

{$name}

Product name

{$photo.big}

Product photo

{$photos}

Photo gallery

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

{$product_review}

Adding a review

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

{$code}

Product code

{$man_code}

Manufacturer code

{$producer_name}

Manufacturer name

{$weight}

Weight

{$weight_unit}

Weight unit

{$execute_time}

Execution time

{$availability}

Availability

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

{$stock}

Stock

{$uom}

Unit of measure

{$product_question}

Questions

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

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

Product options

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

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

Product quantity

{$price_catalogue} - {$price_catalogue_brutto}

Catalog price netto - brutto

{$price_discount} - {$price_discount_brutto}

Discount value netto - brutto

{$price_discount_percent}

Percentage discount value

{$price_net} - {$price_brutto}

Net price - brutto

{$old_price_net} - {$old_price_brutto}

Old net price - brutto

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

PayPal Express payment

{$description}

Short description

{$description_long}

Full description

{$product_attributes}

Attributes

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

Information page

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

{$content_name}

Page title

{$content}

Page content

404 pages

404 product, category, manufacturer:

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

404 website page:

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

404 all other pages:

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

CSS and Images

CSS

After creating a theme from the panel, the system will add the name_theme.css file to the path

/css/frontend/templates/theme/name_theme/

, if other files need to be changed, copy them from the base theme directory.

Images

Images should be placed in

/images/frontend/theme/name_theme/

To then use as a source in the code
<img src="{image_path image='phone.png'} />

How to add an additional product group type?

To add your own product group type, create a file called user_product_group.yml and add it to the store structure in the /core/apps/backend/modules/stProductGroup/config/ directory. The file should contain:

product_group:
    MY: My group
    SYMBOL: Name displayed in the panel
The above content of the file adds two groups.
The call of the product group on the html theme file is e.g.:
{st_get_component module="stProduct" component="productGroup" params="product_group=SYMBOL"}

SOTE YouTube

Stay up to date with the latest SOTESHOP program updates. Subscribe to the SOTE YouTube channel.