Instructions for using the platform

You can find tips on how to work with the system when expanding the sections for managing them, as well as when hovering over the icon

Briefly about the platform
For entrepreneurs and sellers

For entrepreneurs and sellers

On the Hotlist.biz platform, you can create a website or online store for free, issue an individual design, fill it with unique content (full HTML support). You will be able to upload files and use many built-in modules for your convenience. You will have your own sales statistics, tracking sources of orders, A/B testing, your own delivery methods, the ability to create a search filter (like on Yandex Market) for different groups of goods, create your own categories and producer headings, keep your blog, news feed, collect a base of e-mail subscribers, import/export goods and services, add managers to your site (shared access), create a customer base with individual discounts, use payment systems, download data from the site in xml format, create your own forms (Form), enable automatic data exchange with 1C and other trading programs and much, much more ...

For entrepreneurs and sellers

  • After registering your store/company in our catalog, you can add up to 300 products to it for free, while you can expand the limit of added products. (The limit up to 1000 products can be increased for free)
  • In the properties of a product, you can specify its price, currency for payment, warranty period, person responsible for the warranty, detailed description, image of the product, manufacturer, tabs with additional options, individual characteristics of the product, etc.
  • When registering a company or (if you did not connect a domain during registration, then) after adding the first 20 products, you will have the opportunity to change your own domain your own domain of the second and third levels ( Address.hotlist.biz). The domain can also be requested without adding 20 products, for free. By connecting a personal domain, you will have more opportunities to promote your store on the Internet.

    • On Hotlist.biz you can independently design your company's website or online store
    • You can create your own menus and the required number of pages.
    • You will be able to adjust and change the design of your site.
    • You can place HTML codes on the site
    • You will be able to blog and feed, as well as broadcast RSS feeds.
    • You will be able to upload your files, track orders, and communicate with the customer right on the site.

  • The company/User who posted the goods is solely responsible for the content of the description, prices and availability of goods, as well as for the veracity of the information provided to them.
  • Attention, it is forbidden to create duplicate enterprises/stores. For such a violation, the user`s profile and his businesses are permanently blocked
  • Be sure to specify the category corresponding to the product/service, otherwise the product will not be displayed in the general catalog. You can also request to disable the automatic addition of your products to the international catalog via the feedback form.
  • It is forbidden to add goods and services that violate the laws of your country.
Site Management
Admin Center/Admin Panel Site administration takes place in the Admin Center (Open Admin Center) or through the Admin panel, which is located on the left, after authorization on the site.
Login to administrator Login path for site administrator:

hotlist.biz/admin/


If you hide the authorization menu on the site, then to enter the administrator, it is enough to enter the path indicated above in the address bar.
Example of creating a link for user authentication
Share In order to allow another user to manage the site, you need to add a Manager and set access rights.
Main modules
Data type/pages

Pages


Page - a block located in the center of the site, in the content area, which can contain any HTML data (HTML, XHTML, JAVASCRIPT, CSS or others).

Ajax loading page content.

News


News - the same block as pages, but have a short description, which is displayed in the form of a list, with a link to view the full text of the news.

Ajax content loading news

Catalogue of articles


The article directory is the same block as the news, but it is possible to divide the article lists by Categories.
Lists of articles can be displayed not only within categories, but also generate your own lists.

Ajax loading article content

An example of Ajax script for loading your own list of articles

Example of Ajax loading an article in JSON format

Block/Menu


Block/Menu is a block where you can insert any HTML codes. You can also use a menu with predefined functions, such as shopping cart, search filter, bestsellers, latest articles, and others.

Block/Menu can be used to create your own website style/design. For example, you can create a Site Header, place the necessary elements in it (Logo, Contacts, Site navigation links, Search form, etc.) and write CSS for them styles in the design editor. Using blocks/menus, you can place scripts, including in meta tags, as well as enable/disable the display of this data on certain pages or devices. In most cases, you just need to use the Header/Header and Footer/Bottom of the site, as well as, for example, the left or right Block/Menu to place the search filter. You can place site scripts in one Block/Menu, and place it, for example, in Service tags.

The menu block can be located in 7 main parts of the site:
  • «Header» - site header block, It is displayed above the main content block, inside the «#hotengine-header» element.
  • «Bottom of the site (Footer)» - the block of the bottom of the site, It is displayed below the main content block, inside the «#hotengine-footer» element.
  • «Right» - the block is displayed on the right, next to the main block with a quote, and does not go beyond the content.
  • «Left» - the block is displayed on the left, next to the main block with the citation, and does not go beyond the content.

  • «Top» - the block is displayed at the top of the content, and does not go beyond its area.
  • «Bottom» - the block is displayed at the bottom of the content, and does not go beyond its area.

  • «Service tags before the Body tag (Header Meta)» - the block is located under the service Meta tags, and can be used to insert JavaScript, Meta-tags and other service data.

  • Class positions will be added to all menus, as well as a unique menu_id. Basic site block markup
    To create an extended version of the mobile menu (in the style of an application), use the «Mobile Menu Designer». The constructor allows you to create a multi-level menu, a pop-up «Search filter», and your own icons.



Shop


A store can contain an organized list of products with buttons for ordering it. The store provides a lot of additional data, division by manufacturer, Categories, types of goods, characteristics and other properties.

Please note that your products will additionally be located in our International catalog, as well as buyers will be able to leave feedback on the quality of your work.

Product lists can be displayed not only within categories, but also on pages, blocks/menus, articles. To do this, create a page, and in the text, add the code (Block/menu generator, slider with store products) or a list of categories, including in Blocks/Menu (Widget with store categories)

Category lists can be displayed on pages or blocks / menus. To do this, create a page or Block/Menu, and in the text, add the code from Widget with store categories


Ajax product loading

Ajax loading product reviews

An example of Ajax script for loading a list of products + «Generator of a list of products»

Ajax cart loading

An example of an Ajax script for loading a shopping cart on hovering the mouse cursor

Ajax loading a list of product card images

Ajax loading list of all categories in JSON format

Ajax loading product in JSON format


Form Form - a section of a document that allows the user to enter information for subsequent processing by the system. On the HotList.biz platform, you can create full-fledged forms, with the binding of names, id and class for the fields. Form data can be processed on our platform or sent to any other resource.

Ajax form loading (popup forms)

How to create a feedback form?
There are 3 ways to create a form.
  • 1) The most flexible way is to open the form builder and create a form with the required fields. All instructions are available in the form constructor.
  • 2) Create a functional page (feedback), upon opening which a standard feedback form will be displayed.
  • 3) Use a popup feedback form that is generated by the following code:

     Code: html
    <a class="hotengine-dialog-email" data-site="XXXX" href="javascript://">Write to us</a>
    


    class = "hotengine-dialog-email" - denotes that the button to pop up the feedback form, and rel = "XXXX" - site ID.
    XXXX replace with the ID of your site, which you can find out by hovering over the ADMIN PANEL button.

    You can also specify a name for the pop-up window, and the text on the "Close" button. To do this, add data-close-button = "Close" and data-title = "Feedback" to the link with the email class.
    The width and height of the window can be set using data-width = "600" and data-height = "640".
    The text of the buttons in the form can be set using the attributes data-send-button = "Send" and data-clear-button = "Clear"
    You can change the names of the input fields using CSS styles (the text is written in the form of content, before the after classes in css).
    Example

    /*FORM TEXT TITTLES*/

    html:lang(ru) .hotengine-form-feedback-text-title:after{ content:"Текст:"; }
    html:lang(en) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
    html:lang(uk) .hotengine-form-feedback-text-title:after{ content:"Текст:"; }
    html:lang(de) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
    html:lang(es) .hotengine-form-feedback-text-title:after{ content:"Texto:"; }
    html:lang(fr) .hotengine-form-feedback-text-title:after{ content:"Texte:"; }
    html:lang(kk) .hotengine-form-feedback-text-title:after{ content:"Мәтін:"; }
    html:lang(be) .hotengine-form-feedback-text-title:after{ content:"Тэкст:"; }
    html:lang(ro) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
    html:lang(tr) .hotengine-form-feedback-text-title:after{ content:"Metin:"; }
    html:lang(it) .hotengine-form-feedback-text-title:after{ content:"Testo:"; }
    html:lang(sk) .hotengine-form-feedback-text-title:after{ content:"Text:"; }
    html:lang(da) .hotengine-form-feedback-text-title:after{ content:"Tekst:"; }
    html:lang(pl) .hotengine-form-feedback-text-title:after{ content:"Tekst:"; }
    html:lang(zh) .hotengine-form-feedback-text-title:after{ content:"文本:"; }
    html:lang(hi) .hotengine-form-feedback-text-title:after{ content:"पाठ:"; }
    html:lang(ar) .hotengine-form-feedback-text-title:after{ content:"النص:"; }
    html:lang(pt) .hotengine-form-feedback-text-title:after{ content:"Texto:"; }
    html:lang(bn) .hotengine-form-feedback-text-title:after{ content:"টেক্সট:"; }

    html:lang(ru) .hotengine-form-feedback-yourname-title:after{ content:"Ваше имя:"; }
    html:lang(en) .hotengine-form-feedback-yourname-title:after{ content:"Your name:"; }
    html:lang(uk) .hotengine-form-feedback-yourname-title:after{ content:"Ваше ім'я:"; }
    html:lang(de) .hotengine-form-feedback-yourname-title:after{ content:"Ihr name:"; }
    html:lang(es) .hotengine-form-feedback-yourname-title:after{ content:"Su nombre:"; }
    html:lang(fr) .hotengine-form-feedback-yourname-title:after{ content:"Votre nom:"; }
    html:lang(kk) .hotengine-form-feedback-yourname-title:after{ content:"Сіздің атыңыз:"; }
    html:lang(be) .hotengine-form-feedback-yourname-title:after{ content:"Ваша імя:"; }
    html:lang(ro) .hotengine-form-feedback-yourname-title:after{ content:"Numele dvs.:"; }
    html:lang(tr) .hotengine-form-feedback-yourname-title:after{ content:"Adınız:"; }
    html:lang(it) .hotengine-form-feedback-yourname-title:after{ content:"Il tuo nome:"; }
    html:lang(sk) .hotengine-form-feedback-yourname-title:after{ content:"Vaše meno:"; }
    html:lang(da) .hotengine-form-feedback-yourname-title:after{ content:"Dit navn:"; }
    html:lang(pl) .hotengine-form-feedback-yourname-title:after{ content:"Twoje imię:"; }
    html:lang(zh) .hotengine-form-feedback-yourname-title:after{ content:"你的名称:"; }
    html:lang(hi) .hotengine-form-feedback-yourname-title:after{ content:"आपका नाम:"; }
    html:lang(ar) .hotengine-form-feedback-yourname-title:after{ content:"اسمك:"; }
    html:lang(pt) .hotengine-form-feedback-yourname-title:after{ content:"Seu nome:"; }
    html:lang(bn) .hotengine-form-feedback-yourname-title:after{ content:"আপনার নাম:"; }

    html:lang(ru) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваша фамилия:"; }
    html:lang(en) .hotengine-form-feedback-yoursoname-title:after{ content:"Your name:"; }
    html:lang(uk) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваше прізвище:"; }
    html:lang(de) .hotengine-form-feedback-yoursoname-title:after{ content:"Ihr name:"; }
    html:lang(es) .hotengine-form-feedback-yoursoname-title:after{ content:"Su nombre:"; }
    html:lang(fr) .hotengine-form-feedback-yoursoname-title:after{ content:"Votre nom:"; }
    html:lang(kk) .hotengine-form-feedback-yoursoname-title:after{ content:"Сіздің аты-жөні:"; }
    html:lang(be) .hotengine-form-feedback-yoursoname-title:after{ content:"Ваша прозвішча:"; }
    html:lang(ro) .hotengine-form-feedback-yoursoname-title:after{ content:"Numele dumneavoastră:"; }
    html:lang(tr) .hotengine-form-feedback-yoursoname-title:after{ content:"Adınız:"; }
    html:lang(it) .hotengine-form-feedback-yoursoname-title:after{ content:"Il tuo nome:"; }
    html:lang(sk) .hotengine-form-feedback-yoursoname-title:after{ content:"Vaše meno:"; }
    html:lang(da) .hotengine-form-feedback-yoursoname-title:after{ content:"Dit navn:"; }
    html:lang(pl) .hotengine-form-feedback-yoursoname-title:after{ content:"Imię i nazwisko:"; }
    html:lang(zh) .hotengine-form-feedback-yoursoname-title:after{ content:"你的名称:"; }
    html:lang(hi) .hotengine-form-feedback-yoursoname-title:after{ content:"आपका नाम:"; }
    html:lang(ar) .hotengine-form-feedback-yoursoname-title:after{ content:"اسمك:"; }
    html:lang(pt) .hotengine-form-feedback-yoursoname-title:after{ content:"O seu apelido:"; }
    html:lang(bn) .hotengine-form-feedback-yoursoname-title:after{ content:"আপনার নাম:"; }

    html:lang(ru) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш телефон:"; }
    html:lang(en) .hotengine-form-feedback-yourphone-title:after{ content:"Your phone:"; }
    html:lang(uk) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш мобільний телефон:"; }
    html:lang(de) .hotengine-form-feedback-yourphone-title:after{ content:"Ihr Telefon:"; }
    html:lang(es) .hotengine-form-feedback-yourphone-title:after{ content:"Su teléfono:"; }
    html:lang(fr) .hotengine-form-feedback-yourphone-title:after{ content:"Votre téléphone:"; }
    html:lang(kk) .hotengine-form-feedback-yourphone-title:after{ content:"Телефон:"; }
    html:lang(be) .hotengine-form-feedback-yourphone-title:after{ content:"Ваш тэлефон:"; }
    html:lang(ro) .hotengine-form-feedback-yourphone-title:after{ content:"Telefonul dvs.:"; }
    html:lang(tr) .hotengine-form-feedback-yourphone-title:after{ content:"Telefon:"; }
    html:lang(it) .hotengine-form-feedback-yourphone-title:after{ content:"Il telefono:"; }
    html:lang(sk) .hotengine-form-feedback-yourphone-title:after{ content:"Váš telefón:"; }
    html:lang(da) .hotengine-form-feedback-yourphone-title:after{ content:"Din telefon:"; }
    html:lang(pl) .hotengine-form-feedback-yourphone-title:after{ content:"Telefon:"; }
    html:lang(zh) .hotengine-form-feedback-yourphone-title:after{ content:"你的电话:"; }
    html:lang(hi) .hotengine-form-feedback-yourphone-title:after{ content:"अपने फोन:"; }
    html:lang(ar) .hotengine-form-feedback-yourphone-title:after{ content:"الهاتف:"; }
    html:lang(pt) .hotengine-form-feedback-yourphone-title:after{ content:"Seu telefone:"; }
    html:lang(bn) .hotengine-form-feedback-yourphone-title:after{ content:"আপনার ফোন:"; }

    html:lang(ru) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
    html:lang(en) .hotengine-form-feedback-youremail-title:after{ content:"Your e-mail:"; }
    html:lang(uk) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
    html:lang(de) .hotengine-form-feedback-youremail-title:after{ content:"Ihre e-mail:"; }
    html:lang(es) .hotengine-form-feedback-youremail-title:after{ content:"Su e-mail:"; }
    html:lang(fr) .hotengine-form-feedback-youremail-title:after{ content:"Votre e-mail:"; }
    html:lang(kk) .hotengine-form-feedback-youremail-title:after{ content:"Сіздің e-mail:"; }
    html:lang(be) .hotengine-form-feedback-youremail-title:after{ content:"Ваш e-mail:"; }
    html:lang(ro) .hotengine-form-feedback-youremail-title:after{ content:"Adresa de e-mail:"; }
    html:lang(tr) .hotengine-form-feedback-youremail-title:after{ content:"E-mail:"; }
    html:lang(it) .hotengine-form-feedback-youremail-title:after{ content:"Il tuo indirizzo e-mail:"; }
    html:lang(sk) .hotengine-form-feedback-youremail-title:after{ content:"E-mail:"; }
    html:lang(da) .hotengine-form-feedback-youremail-title:after{ content:"Din e-mail:"; }
    html:lang(pl) .hotengine-form-feedback-youremail-title:after{ content:"Twój e-mail:"; }
    html:lang(zh) .hotengine-form-feedback-youremail-title:after{ content:"你的电子邮件:"; }
    html:lang(hi) .hotengine-form-feedback-youremail-title:after{ content:"अपने ई-मेल:"; }
    html:lang(ar) .hotengine-form-feedback-youremail-title:after{ content:"البريد الإلكتروني:"; }
    html:lang(pt) .hotengine-form-feedback-youremail-title:after{ content:"Seu e-mail:"; }
    html:lang(bn) .hotengine-form-feedback-youremail-title:after{ content:"আপনার ই-মেইল:"; }

    html:lang(ru) .hotengine-form-feedback-youraddress-title:after{ content:"Ваш адрес:"; }
    html:lang(en) .hotengine-form-feedback-youraddress-title:after{ content:"Your address:"; }
    html:lang(uk) .hotengine-form-feedback-youraddress-title:after{ content:"Ваша адреса:"; }
    html:lang(de) .hotengine-form-feedback-youraddress-title:after{ content:"Ihre Adresse:"; }
    html:lang(es) .hotengine-form-feedback-youraddress-title:after{ content:"Su dirección:"; }
    html:lang(fr) .hotengine-form-feedback-youraddress-title:after{ content:"Votre adresse:"; }
    html:lang(kk) .hotengine-form-feedback-youraddress-title:after{ content:"Сіздің мекен-жайы:"; }
    html:lang(be) .hotengine-form-feedback-youraddress-title:after{ content:"Ваш адрас:"; }
    html:lang(ro) .hotengine-form-feedback-youraddress-title:after{ content:"Adresa:"; }
    html:lang(tr) .hotengine-form-feedback-youraddress-title:after{ content:"Adresi:"; }
    html:lang(it) .hotengine-form-feedback-youraddress-title:after{ content:"Indirizzo:"; }
    html:lang(sk) .hotengine-form-feedback-youraddress-title:after{ content:"Adresa:"; }
    html:lang(da) .hotengine-form-feedback-youraddress-title:after{ content:"Din adresse:"; }
    html:lang(pl) .hotengine-form-feedback-youraddress-title:after{ content:"Adres:"; }
    html:lang(zh) .hotengine-form-feedback-youraddress-title:after{ content:"你的地址:"; }
    html:lang(hi) .hotengine-form-feedback-youraddress-title:after{ content:"आपके पते की:"; }
    html:lang(ar) .hotengine-form-feedback-youraddress-title:after{ content:"العنوان الخاص بك:"; }
    html:lang(pt) .hotengine-form-feedback-youraddress-title:after{ content:"O seu endereço:"; }
    html:lang(bn) .hotengine-form-feedback-youraddress-title:after{ content:"আপনার ঠিকানা:"; }

    /*FORM TEXT TITTLES*/



Attention! The site provides the ability to create your own forms in automatic mode, as well as use pop-up windows to send the data necessary from the visitor. To do this, use the form builder.


Comments / Reviews Comments can be left on all types of pages. Comments have flexible settings, with the ability to specify them both to a specific section on the site, and to a separate page. It is possible to add "Rating" to the comments, as well as a Captcha security image. For product cards, a separate comment form has been implemented - reviews.

Ajax loading of comments

Ajax загрузка отзывов к товарам


Multilanding/Dynamic Pages Multilanding is the automatic change of the page content depending on the visitor's key request, the variables set in the advertisement or its location.

How to use Multilanding?


On the HotList.biz platform, you can configure Multilanding pages so that if a (part or complete) request matches, the content of entire blocks on the page (on pages, in products and in the menu) will change. The query can be search query data (automatically determined), as well as your own set GET variables. For example, when adding UTM tags in advertisements, you can use the "utm_term" tag, so the Multilanding page will be active for the "utm_term" GET variable. The data about the referral source is stored for no more than 24 hours. In this case, data on the source of referral through the affiliate program is stored for 120 days.


An example of working with the Block/Menu An example of using the Block/Menu to validate a site in the Webmaster Center.
To confirm the site in the webmaster center (for example Google or Yandex), you need to add <meta> the code.
To do this, create a Block/Menu, insert the required meta code and place it in the service tags. After which your site will be confirmed.
In the same way, you can create your own website header and footer. You can insert almost any HTML code into the menu.



An example of sharing categories and producers (additional categories) For each product, you can choose a heading (personal heading of your store), as well as a Manufacturer. Thus, one product can be in the list of the main category of the store, as well as in the heading Manufacturer *. For example, a Samsung phone may have two headings, the main one is "Smartphones" and the additional one is "Samsung". And also you can display in the main heading only products of a certain manufacturer **.

* - the heading "Manufacturer" can be replaced with the word you need.

We recommend to name the parent (first) heading "Store".


An example of creating a personal store category:
First, we recommend that you create a main category in which you will create subcategories.
Open store category editor in the Admin Center, and click "Add Category".
Select your site and click "OK".
Then enter a name (this will be the address for your category). For example, for the main category, create a group called "Store" named "store".
Done.

Similarly, you can manage Manufacturers (additional categories) categories.


** - In addition, if you need to open a list of products of a certain category, and a certain manufacturer, then it is enough to add the GET variable PRODUCER. It is enough to specify either the manufacturer's ID or its name in the variable. Example: "/pers_shop/water/?producer=bonaqua" In this case, a list of products within the "water" category will be shown, and for which the manufacturer is "bonaqua".



Site search
The search is carried out after submitting the form with the «search» variable. The data type for the search is specified using the path (page) to which the form is sent. To search for the «Product Catalog», the sending must be done to the page «/shop/».

How to add a search form to the Site Header?

In the Block/Menu located in the Site Header, you can add the following code:

 Code: html
<div align="center" id="hotengine-search_form_block" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="//{HOTENGINE-SC:site_url}/"/>
<form id="hotengine-search-searchinput" name="hotengine-search-searchinput" method="post" action="/ru/shop/" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="//{HOTENGINE-SC:site_url}/es/shop/?search={search}"/>
<label>
<input class="input" name="search" type="text" placeholder="Search..." id="hotengine-smart_search_input" value="" itemprop="query-input">
</label>
<label>
<button type="submit" class="search-button">Search</button>
</label></form>
</div>


The code immediately contains Microdata for Google. On the way to submit the form (//{HOTENGINE-SC:site_url}/es/shop/?search={search}) specified es language, you can change it.

Example:


CSS block style, replacing the submit button with an image:

 Code: css
#hotengine-search_form_block{
position: relative;
width:300px;
float: right;
z-index:2;
height: 41px;
margin:33px 0px 33px 10px;
}

#hotengine-search_form_block input{   
height: 20px;
vertical-align: middle;
border: 1px solid #e5e5e5;
padding: 0.15em;
width: 20.0em;
color:#9c9b9b;
height: 20px;
background: #fff;
padding: 0 13px;
height: 41px;
}
#hotengine-search_form_block input[type="text"]{
text-indent:4px;height: 39px;
}
#hotengine-search_form_block .search-button{
background:#41474c;
border-radius:0px;
vertical-align:middle;
display:block;
position:absolute;
top:0px;
right:0px;
border:none;
color:#fff;
width:41px; height:41px;
text-align:center;
font-size:12px;
line-height:25px; 
cursor:pointer; overflow:hidden; 
}
#hotengine-search_form_block .search-button:after{
content:""; width:41px; height:41px; display:block; position: absolute; right:0px; top:0px; 
background:none; background-color:#d6d6d6;
-webkit-mask:url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4KDTxwYXRoIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMjUgMmE1LjI1IDUuMjUgMCAxMDMuMTQ0IDkuNDU1bDIuMzI2IDIuMzI1YS43NS43NSAwIDEwMS4wNi0xLjA2bC0yLjMyNS0yLjMyNkE1LjI1IDUuMjUgMCAwMDcuMjUgMnpNMy41IDcuMjVhMy43NSAzLjc1IDAgMTE3LjUgMCAzLjc1IDMuNzUgMCAwMS03LjUgMHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgoNPC9nPgoNPC9zdmc+") center center no-repeat; 
-webkit-mask-size:20px;
}
#hotengine-search_form_block .search-button:hover:after{
	background-color:#fff;
}
#hotengine-search_form_block .search-button:active:after{ top:1px; }




Search Filter and Product Types (Product Features). In the product cards, you can specify characteristics that will be additionally displayed in the product description, as well as by which the search will then be carried out. To do this, first create a «Product Type».

Create Product Type and Product Attributes For example:
Create «Product Type» - «Sneakers».
«Characteristic» - we indicate several fields, «Multiple selection (Checkbox)» with the names: «Color», «Purpose», «Manufacturer».
After saving the field names, you will be able to fill in the possible options on the right.
Create values.
Color: White, Red, Green.
Purpose: Running, Basketball, Football.
Manufacturer: Adidas, Asics, Nike

Now in the product card in the «Parameters, price and variety» tab, specify «Product type» and specify the appropriate values.


Create a search filter for categories.
If you need to create a search filter, then in the section «My blocks/menus» create a «Functional menu» - «Search with Filter by product type».
This block will be displayed wherever you enable display.
In order for the required type of product to automatically open in a certain category, then in the text of the «Functional block/menu» you need to specify the ID of the corresponding type of product, and also add the text «autopath», so that when performing a search, it is carried out on the same page, rather than going to general site search.
For example, if the ID of the previously created product type was 1123, then the block/menu text would be «1123autopath».
Now specify the path where to display the block/menu with the search filter
«Enter the characters, upon detection of which, to display the block/menu:»
/category_name/
Where category_name is the name of the category, the path where it is located.
To hide the Search filter when viewing the product card in the item «Enter characters, upon detection of which do not show block/menu:» enter
.htm


Search filter example:

To hide the search box above the Product Type, in the Design Editor in Css Styles, add «.menu_position_left .hotengine-smart_search_input_label { display: none;}»

To hide the Product Type selection search box, in the Design Editor in CSS styles, add «.menu_position_left .shop_catalog_product_types_id_label { display: none;}»

.menu_position_left - means that we hide the fields in the Left block of the site.


To display the number of products with the specified parameters, you can use the («count») parameter when creating a Function Block/Menu with a search filter.
To hide undetected characteristics - «hideempty» (detailed on the Function Block/Menu creation page).
To display the visitor's selected search filter values at the top of the page, you can use the «checkedlist» parameter. This function can also be activated in the «Mobile Menu: Application» section under the «Search Filter» tab. It simplifies user access to selected search values, especially helpful when browsing the site on mobile devices or screens with lower resolution. The function only needs to be enabled once — either through the «checkedlist» parameter in the «My Blocks/Menu» - «Search Filter» section, or in the «Mobile Menu: Application» under the «Search Filter» tab.
Demo:
Value1 ×
Value2 ×
Demo 2:
Value 3 ×
Value4 ×
Create automatic descriptions. When using product types and features, you can create articles and use them to add to product cards. Descriptions will be added depending on the characteristics or category set for the product. Management and detailed instructions are available on the page «Store» - «Automatic descriptions».


An example of callback functions after executing Java Script The site uses many functions, after which you may need to execute your own scripts. For this, we have added a set of callback functions that are called after the execution of scripts, with a preliminary check for their existence.
For example, after adding a product to the cart, the callback_hotengine_cart_plus_after function is called if it exists

 Code: JavaScript
if(typeof(callback_hotengine_cart_plus_after) === "function"){ 
callback_hotengine_cart_plus_after(); 
}


To run your own script of the callback_hotengine_cart_plus_after function, you must create it.

 Code: JavaScript
function callback_hotengine_cart_plus_after(){
  // your script
}



A list of some of the Callback features:
callback_hotengine_ajax_load_products_list - after loading the product list (universal function in all cases of loading the product list with a script)
callback_hotengine_ajax_load_products - after loading the product list via the "Show more" button.
callback_hotengine_shop_products_list_div_button - after scrolling through the product list in the slide
callback_hotengine_shop_page_boughtwith_loaded($id) - after loading the "frequently bought with" list ($id-ID of loaded products)

Shop / Automatic description
callback_hotengine_shop_autodescription($type) - after displaying the automatic description ($type - html, ajax)
callback_hotengine_shop_autodescription_readmore($id,$job) - after loading expanded automatic description text ($job - show, hide, load)

Shop / Cart
callback_hotengine_cart_plus - after sending the request to add an item to the cart
callback_hotengine_cart_addresult($result,$item_id) - after adding an item to the cart, various result options ($result-result value. Values: "added" - added, "removed" - removed, "instock_smaller" - stock is less than the quantity added, "instock_smaller_exists" - stock is less than the quantity already in the cart)
callback_hotengine_cart_plus_after($items_in_cart) - after adding an item to the cart ($items_in_cart - number of items in the cart after completion)
callback_hotengine_cart_plus_after_boughtwith($ids) - after adding an item to the cart, the "frequently bought with" list is passed in the $ids variable
callback_hotengine_cart_plus_after_boughtwith_email($ids) - after adding an item to the cart, the "mailing list" is passed in the $ids variable (email distribution of other products)
callback_hotengine_cart_count_product_num - after selecting a product to change its quantity in the cart

Shop / Variant
callback_hotengine_shop_product_variaty_select - after selecting a variant
callback_hotengine_variety_change_price($price) - after selecting a variant and changing the price ($price - new price)
callback_hotengine_variety_change_sku($sku) - after selecting a variant and changing the SKU ($sku - new SKU)
callback_hotengine_variety_change_skuimage($img) - after selecting a variant if a new image is specified ($img - new image path)
callback_hotengine_variety_change_stock_count($stock) - after selecting a variant and changing the stock count ($stock - new stock count). This function does not initialize if not created, as it may not always be necessary to change the stock.
callback_hotengine_variety_require() - if no variant is selected, before the dialog box appears
callback_hotengine_variety_require_list($href) - if no variant is selected, before the dialog box appears when viewing the product list ($href - link to view the product card)

Shop / Favorite / Compare
callback_hotengine_favorite_addresult($result,$count_favorite) - after adding an item to favorites, various result options ($result-result value. Values: "added" - added, "removed" - removed; $count_favorite - number of items in favorites)
callback_hotengine_compare_plus() - after adding an item to the comparison list

Shop / Search
callback_hotengine_shop_catalog_product_types - after selecting the product type in the search filter

Shop / Stock
callback_hotengine_shop_product_stock_inform- after calling the "Notify about stock" window
callback_hotengine_shop_product_stock_inform_send - after sending the "Notify about stock" request

Shop / Delivery
callback_hotengine_loading_delivery_type - after selecting the delivery method
callback_hotengine_loading_delivery_type_finalvalues - after selecting the final delivery method

User
callback_hotengine_authorize_result($result) - function after user authorization ($result - execution result: 2-login or password error, 3-account is blocked, 4-activation required, 5-activation successful, 6-incorrect Captcha code)

Shop / Sell Statistic
callback_hotengine_statisticsell_printorder($a) - after calling the order print window. $a=1 - before displaying the window. $a=2 - after displaying the window.

Blog
callback_hotengine_blog_page_list_div_button - after scrolling through the article list in the slide

Dialog
callback_hotengine_dialog_email- after calling the feedback window
callback_hotengine_form_submit_result($a) - after submitting the form through dialog window. $a=0 - error. $a=1 - ok.

Mobile
callback_hotengine_mobilemenu_click($a,$href) - clicking links in the mobile menu. $a=0 - item links and top icons. $a=1 - subcategory links. $a=2 - after displaying the ajax content window.
callback_hotengine_mobilemenu_show - function of displaying the content of the mobile menu (to create the effect of appearance). By default $("#hotengine-mobile-outer").show(0); Example
Example of right to left emergence.
 Code: html
var $element = $("#hotengine-mobile-outer");
var elementWidth = $element.outerWidth();
$element.css({ right: -elementWidth, display: "block" }).animate({ right: 0 }, 500);




Ready scripts
You can implement most of the solutions using scripts (JavaScript). Some of them are described on the instructions page, some on the settings page. Additionally, you can find ready-made solutions on the page Scripts for use on sites.
Unloading XML/RSS/YMLUnloading is available in various formats, both abbreviated and extended data with product characteristics.
Available formats:
  • Sitemap.xml Sitemap with all data
  • XML Google Merchant (Extended & Reduced)
  • XML Yandex Market
  • CSV Price
  • JSON All store catalog data
  • Price for Hotline.ua +own margin
  • Price for Prom.ua +own margin
  • XML for Rozetka.ua +own margin

Generator and list of links available in admin panel - «XML/CSV/XLS/JSON»

Additionally, when unloading goods, you can specify sorting and filtering options by the following parameters:

  • sort_by - sorting
  • order_by - sorting
  • sort_instock_priority - sorting priority
  • price_from - price from
  • price_to - price to
  • producer - producer (one or more values, separated by commas)
  • stock - stock
  • collection - collection (one or more values, separated by commas)
  • pers_shop_cat_page_catid - store category ID (one or more values, separated by commas)

Parameters can be specified as a GET variable, after the main path to the XML file. For example "path.xml?producer=1" You can find out the value options on the product import page in the instructions.


Domains/Domain
Domain parking You can connect your personal top-level domain for free (for example: example.com).

To do this, specify our NS servers in your domain settings:
NS1.HOTLIST.BIZ
NS2.HOTLIST.BIZ

Or IP address 88.218.28.193 in «A» entry.

Then contact us via feedback form . In the request, specify the site to which you want to connect the domain *, and the address of this domain.

* - we do not sell domains, to connect your domain, you need to pre-register/purchase.

Domains in the .RU zone are currently not serviced.
SSL/HTTPS

SSL

SSL stands for Secure Socket Layer and is an Internet standard security technology that is used to provide an encrypted connection between a web server (site) and a browser. SSL certificate allows us to use the HTTPS protocol (after connecting the SSL certificate, your site will be opened not via HTTP, but via the HTTPS protocol).


What is HTTPS?

HTTPS (Hypertext Transport Protocol Secure) is a protocol that provides security and privacy when exchanging information between a site and a user's device. Site visitors expect that the data they provide will not fall into the hands of fraudsters. To protect the data that visitors leave on your site, start using the HTTPS protocol.



How to Connect an SSL Certificate


You can connect our SSL certificate when paying for hosting by selecting the checkbox «SSL Certificate».

Additionally, you can connect an SSL certificate for your domain after purchasing it from any registrar. The cost of connecting and using your certificate is $1 per month (minimum payment period - 12 months).

For an online store, a Comodo Positive SSL certificate is sufficient.

Pay for SSL Connection.


E-mail
Creating mailboxes on a parked domain After connecting the domain, you can use mail with the address of your site, for example mail@example.com.
You can connect the mail service Yandex, Mail.ru, Google.com and others to your domain.
For example, let's connect mail to Yandex.

Connecting corporate mail to Yandex.com 1)Go to the domain connection page https://pdd.yandex.com/domains_add/
2)Add your domain
3)Add MX and CNAME (according to the instructions from Yandex) or send us this data if the domain is parked on our NS server.
4)If you want to enable login via the web interface (mail.domain.com), then add the CNAME mail data domain.mail.yandex.net.
5) Create a TXT record with the value «v=spf1 redirect=_spf.yandex.net».
If you want to send messages not only from Yandex servers, specify additional servers in the following format: «v=spf1 ip4:IP-1 ip4:IP-2 ip4:IP-3 include:_spf.yandex.net ~all». Where IP-1, IP-2, IP-3 — are the IP addresses of additional servers.

Example in pictures part1
Example in pictures part2

After that you will be able to create many mailboxes with your domain.

To use your own SMTP server, specify the options you want above. Please note that to activate new mailboxes created on Yandex, you need to log in to the mailbox using the login-created mailbox and complete the registration of the mailing address.

br>
Connecting corporate mail to Mail.ru Instructions for connecting mail to Mail.ru.
Connecting corporate mail to Zoho.eu 1) Register https://www.zoho.eu/mail/
2) Select the appropriate tariff, for example 5GB - FREE, free
3) Add your domain @yourdomain. For verification, you will need to create a CNAME or TXT in the NS records of the domain. You can send the data and we will add it, or specify it yourself. It is desirable to send both TXT and CNAME data.
4) Add MX records with @ name or empty name.
Values in the table below:

Host/ Domain Address/ Mail Server/ MX Entries/ Value Priority
@/ Blank/ Domain name mx.zoho.eu. 10
@/ Blank/ Domain name mx2.zoho.eu. 20
@/ Blank/ Domain name mx3.zoho.eu. 50


5) In NS records of the domain, create a text record with the value "v=spf1 ip4:88.218.28.193 include:zoho.eu ~all"
6) Optionally, you can add DKIM Signature https://www.zoho.eu/mail/help/adminconsole/dkim-configuration.html
7) Create email addresses and users.
8) Specify the created mailbox as the SMTP server on the site.

SMTP server: smtp.zoho.eu
Port: 465
Security Type: SSL

Или
SMTP server: smtp.zoho.eu
Port: 587
Security Type: TLS

https://www.zoho.eu/mail/help/zoho-smtp.html.

Connection instructions at www.zoho.eu.
SMTP settings You can use your own SMTP server (RECOMMENDED) to send mail from your site. To do this, go to Settings, in the Mail tab and specify the SMTP server parameters.
Notifications
Viber Bot You can enable notification of new messages and orders from the site.

To connect to the channel with notification of new orders, you need to send hotlist_viber_key (where key is your key) to the channel https://viber.com/hotlistbiz. You can share this key and use it from different devices with Viber.
You can install the key in the «Settings», in the «Notifications» tab. In addition, you can use a key for Forms, which can be specified in the «Form Editor».

To disable notifications, you must either change the keys, or send DISABLE hotlist_key (where key is your site or form key) to Viber.
Telegram Bot You can enable notification of new messages and orders from the site.

To connect to the channel with notification of new orders, you need to send hotlist_telegram_key (where key is your key) to the channel https://t.me/hotlistbiz_bot. You can share this key and use it from various Telegram devices.
You can install the key in the «Settings», in the «Notifications» tab. In addition, you can use a key for Forms, which can be specified in the «Form Editor».

To disable notifications, you must either change the keys, or send DISABLE hotlist_key (where key is your site or form key) to Telegram.
Hidden data (System markup/Micro markup)
Special markup hotengine-marking This markup is contained on all pages (pages, store, article catalog, etc.), as well as in menu items where a list of data is used, for example, recent articles and news.

This markup contains the following data:
data-hotengine-marking-type = page type
data-hotengine-marking-timestamp = date the page was created
data-hotengine-marking-view = number of views

The data is required if you want to prohibit or display additional data on a specific page, with a specific page type, or if you need to display the number of views, or the date of the material (news, article, product). In addition, by inspecting this element, you can find the post ID (page, article or product), as well as other additional data.

If you need any more data in the markup, please let us know.

 Code: html

<span class="hotengine-marking" data-hotengine-marking-type="shop_catalog_page" data-hotengine-marking-timestamp="1422368197" data-hotengine-marking-view="6" data-hotengine-marking-shop_catalog_page_id="71111" data-hotengine-marking-shop_catalog_page_price="1" data-hotengine-marking-shop_catalog_page_price_currency="USD" data-hotengine-marking-shop_catalog_page_complectation="22323" data-hotengine-marking-video="https://youtu.be/tAyVrZ1jzC4">



In addition, when setting individual delivery parameters, more attributes are added:
data-hotengine-marking-delivery="xxx"
data-hotengine-marking-delivery_price="xxx"
data-hotengine-marking-delivery_note="xxx"


In the presence of dimensions and weight of the goods, the following attributes are added: data-hotengine-marking-shop_cat_page_deliv_width="XX"
data-hotengine-marking-shop_cat_page_deliv_height="XX"
data-hotengine-marking-shop_cat_page_deliv_length="XX"
data-hotengine-marking-shop_cat_page_deliv_units="XX"
data-hotengine-marking-shop_cat_page_deliv_weight="XX"
data-hotengine-marking-shop_cat_page_deliv_weight_units="XX"
data-hotengine-marking-shop_cat_page_deliv_capacity="XX"



An example script that checks a page for the markup object and page type «shop_catalog_page» (product card page).
 Code: html
var product_marking = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page']");
  if(typeof product_marking !== typeof undefined && product_marking !== false && product_marking !='undefined' && product_marking !=''){
 var product_id = product_marking.attr("data-hotengine-marking-shop_catalog_page_id");
  console.log("ID PRODUCT IS "+product_id);
}

If the page is defined as a product card, then we extract the product ID - data-hotengine-marking-shop_catalog_page_id.

Available page types:

Shop:
  • shop_catalog_page - product card
  • shop_catalog_page_incategory - product card on the list page *
  • shop_catalog_page_incategory_search - product card on the search result page
  • shop_catalog_page_cart_products_list - product card in the cart
  • pers_shop_catalog_category - store category
  • shop_catalog_category_collection - collection category, store
  • shop_catalog_category_producer - manufacturer, store category
  • shop_statistic_sale - sales statistics
  • shop_catalog_page_cart_bought_with - buy with the product (when viewing the basket)
Blog:
  • blog_catalog_page - article
  • blog_catalog_page_incategory - list of articles *
News:
  • news_catalog_page - news
  • news_catalog_page_incategory - news list *
  • news_catalog_page_incategory_menu - Block/Menu generated news list *

* - these list objects have micro-markup attributes added without using a separate hotengine-marking element.

An example of using markup ↓ (Post creation date display)
 Code: html
<!--HTML-start-->
<script>
//convert timestumo ti date
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec;
return time;
}
//add date to content
$(function(){ 
$("#hotengine-content-blog .hotengine-blog-page-list-block").each(function(){
$(this).find(".contenth_i").prepend('<div class="hotengine_add_date">'+timeConverter($(this).attr("data-hotengine-marking-timestamp"))+'</div>');
});
})
</script>
<!--HTML-end-->

This script finds the markup element, #hotengine-content-blog .hotengine-blog-page-list-block (an article from the list) and inserts a Date previously converted from TIMESTAMP by the timeConverter function to the beginning of the .contenth_i element.

An example of using markup for the Personal Account button ↓ (Login/Logout/My Orders)
 Code: html
<div class="auth_block"><noindex>
<a class="auth_login" rel="nofollow" href="/es/admin/">Personal Area</a>
<a class="auth_my_orders" rel="nofollow" href="/es/statistic_orders.htm">Мои заказы</a>
<a class="auth_logout" rel="nofollow" href="/?action=logout">Logout</a>
</noindex></div>

<style>
.auth_my_orders{ display:none!important; } 
.auth_logout{ display:none!important;  } 
[data-hotengine-marking-userid] .auth_login {display:none!important; }
[data-hotengine-marking-userid] .auth_logout{ display:inline-block!important; }
[data-hotengine-marking-userid] .auth_my_orders{ display:inline-block!important; }
</style>


													  
													  

This script contains links. The first is to the authorization page (.auth_login). The second is to the page with user orders (.auth_my_orders). Tray - Logout link (.auth_logout). Alternatively, you can create a registration link (/index.php?action=register).
After the user enters the site, using the CSS style and the [data-hotengine-marking-userid] attribute (which appears only if the user is authenticated), the .auth_login/My Account link is hidden and the .auth_my_orders/link is displayed My orders, as well as .auth_logout/Logout.





Also, the <HTML> for users, the data-hotengine-marking-userid markup is added, with the user ID.
If the user is added as a "Customer" with his own discount, then the data-hotengine-marking-user-group-discount tag is also added, with its size discounts.

 Code: html

<html lang="ru" data-hotengine-marking-userid="USERID" data-hotengine-marking-user-group-discount="-10%">  

Where:
ru - site language
USERID - user ID
10% - the size of the client's discount.


If a user is added to a Client Group, then the ID of the group to which he belongs is additionally indicated.
 Code: html

<html lang="ru" data-hotengine-marking-userid="XXXXX" data-hotengine-marking-user-group-discount="-20%" data-hotengine-marking-user-group-id="XXXXX">  




An example of additional markup in a product variety
 Code: html
<ul class="hotengine-shop-product-variety_select" size="1" data-vpid="XXXXX" >
<li value="0" title="Variety" >Variety</li>
<li value="XXXXXX" data-hotengine-variety-disable-add="1" data-hotengine-variety-pricechange="+10" data-hotengine-variety-stockcount="10" class="">Variety 1</li>
<li value="XXXXX" data-hotengine-variety-disable-add="0" data-hotengine-variety-pricechange="=500" data-hotengine-variety-stockcount="10" class="hotengine-shop-product-variety_hilight">Variety 2</li>
<li value="XXXXX" data-hotengine-variety-disable-add="0" data-hotengine-variety-pricechange="-110" data-hotengine-variety-stockcount="10" class="hotengine-shop-product-variety_hilight-selected">Variety 3</li>
</ul>

data-hotengine-variety-disable-add - on/off the ability to add a variety to the basket (1-forbid, 0-allow). When you click on a variety that is turned off for adding, nothing happens and the price of the product and the article does not change.

data-hotengine-variety-pricechange - price change data, you can use it to create highlighting price change data (using javascript).
data-hotengine-variety-stockcount - quantity in stock

CSS classes for elements:
.hotengine-shop-product-variety_hilight - selected object (on mouseover).

.hotengine-shop-product-variety_hilight-selected - the selected object that was clicked (active variant).

In addition, for all child elements of the block with the function of adding to the basket disabled [data-hotengine-variety-disable-add="1"], the stylization of the decorating and the normal cursor on hover are added.

Example of a label for a search query in a store
 Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="shop_catalog_page_incategory_search"
data-hotengine-marking-search="separate search query"
data-hotengine-marking-searchparam="?&search=search query full string (+ sorting and other data)"
data-hotengine-marking-sortparam="additional sorting data"
data-hotengine-marking-smart_search_price_from="price from"
data-hotengine-marking-smart_search_price_to="price to"
data-hotengine-marking-smart_search="search query when using search filter"
data-hotengine-marking-searchresult-num="55">

data-hotengine-marking-searchparam - a search query can be used to link to a page with a query.
data-hotengine-marking-searchresult-num - the number of products found for the entered query.

Example of a label in a store's store categories
 Code: html
<span class="hotengine-marking" 
data-hotengine-marking-type="pers_shop_catalog_category"
data-hotengine-marking-view="9999"
data-hotengine-marking-pers_shop_catalog_category_parent_id="222"
data-hotengine-marking-pers_shop_catalog_category_child_count="2"
data-hotengine-marking-pers_shop_catalog_page_count="999"
data-hotengine-marking-pers_shop_catalog_page_child_count="1299"
data-hotengine-marking-pers_shop_catalog_category_name="nameofcategory"
data-hotengine-marking-pers_shop_catalog_category_id="8342">

data-hotengine-marking-pers_shop_catalog_category_parent_id - Parent category ID
data-hotengine-marking-pers_shop_catalog_category_child_count - number of subcategories (only for this parent)
data-hotengine-marking-pers_shop_catalog_page_count - number of products in this category
data-hotengine-marking-pers_shop_catalog_page_child_count - number of products in this and child subcategories
data-hotengine-marking-pers_shop_catalog_category_name - personal category name.
data-hotengine-marking-pers_shop_catalog_category_id - personal category ID.
Similar markup is used for Manufacturers.

An example of finding a tag with a search query in a store
 Code: html
 Code:
<script type="text/javascript"><!--
  $(function(){
var $search = $('.hotengine-marking[data-hotengine-marking-type="shop_catalog_page_incategory_search"]');
  if (typeof $search !== typeof undefined && $search !== false && $search !== "undefined" && $search.length > 0){
  var $search_query = $search.attr("data-hotengine-marking-search");
  $("#hotengine-search-searchinput #hotengine-smart_search_input").val($search_query);
  }});
  //-->
  </script>

		  
data-hotengine-marking-search - search query


Besides, markup "data-hotengine -..." with additional data has been added to some blocks of the site.
For example, "data-hotengine-product-images-count" is the number of images for a product.

In the cart, the markings indicate the number of products, the total cost and the currency (data-hotengine-cart-count, data-hotengine-cart-total-price, data-hotengine-cart-currency)

Additional markup, «data-» implemented directly in markup elements, for example, element class="hotengine-categories-list-block" (category icon block) can contain markup: data-image="1" - there is a picture for the category, data-child-cat="7" - number of subcategories, data-child-items="5114" - The number of products in all internal headings, as well as the number of subcategories, data-ci="XX" - category ID. (data-ci - store categories, data-pci - manufacturer categories, data-cci - collection categories, data-bci - article catalog categories)

In the sales statistics, with a separate view of the order, micro-markup is also present.

An example of checking the presence of a markup element
 Code: html
var $catergory = $('.hotengine-marking[data-hotengine-marking-type="pers_shop_catalog_category"]');
if (typeof $catergory !== typeof undefined && $catergory !== false && $catergory !== "undefined" && $catergory.length > 0){
var $nemecat = $catergory.attr("data-hotengine-marking-pers_shop_catalog_category_name");
alert("Category name is "+$nemecat);
}
													  

Instructions for creating a sorting of goods in the store with an example

Use the link to automatically create Sort functional menu or fill in the Block/Menu following the instructions below:

Create a "Block/Menu" location "at the top".
Block/Menu Name: hotengine_sort_products
Block/Menu Header: hotengine_sort_products
Block/Menu Position: Top
Show Block/Menu on pages: everywhere
Enter characters to display Block/Menu when found: (No spaces)
/pers_shop/ /producer/ /collection/ /shop/

Enter characters to not display Block/Menu when found: (No spaces)
.htm
Текст меню:
 Code:
<form id="hotengine-sort-products-generated" name="hotengine-sort-products-generated" method="get" action="">
  <span>
  <label>
  <select name="sort_by" id="sort_by" onchange="this.form.submit()"> 
  <option value="ASC">Sort:</option>
  <option value="ASC">Ascending</option>
  <option value="DESC">Descending</option>
  </select>
  </label>
<label>
  <select name="order_by" id="order_by" onchange="this.form.submit()"> 
  <option value="5">Sort:</option>
  <option value="0">By item ID</option>
  <option value="4">By Name</option>
  <option value="1">By Date</option>
  <option value="2">By Price</option>
  </select>
  </label>

<label>
  <select name="NUM_ONPAGE" id="NUM_ONPAGE" onchange="this.form.submit()">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="50">50</option> 
  </select>
  </label>
  <input class="smart_search" name="smart_search" type="hidden" value="">
  <input class="search" name="search" type="hidden" value="">
  </span>
  </form> 
  
  <script type="text/javascript" src="/templates/scripts/hotengine-script-sort-shop-products.js"></script>


CSS style for the sorter (add CSS styles in the design editor):
 Code:
.hotengine_sort_products #menu_c .headm{ display:none; }
  .hotengine_sort_products #menu_c { border: none; background: none; text-align: right;}
.hotengine_sort_products #menu_c  select { 
  background: transparent; 
  padding: 5px 8px 5px 5px; 
  font-size: 12px;
  line-height: 1;
  border-radius: 2px;
  height: 24px;
  -webkit-appearance: none;
  overflow: hidden;
  background: url(/templates/styles/menu_arrow/arrow-down.svg) no-repeat 95%; background-size: 16px;
  }
  .hotengine_sort_products #menu_c select[name="NUM_ONPAGE"] { background:none;}
  @-moz-document url-prefix(){ 
  .hotengine_sort_products #menu_c select {
    padding:0px!important;
    background:none!important;

  }
  .menu_position_top_000000 #menu_c span:before{ content:"Сортировать:"; display:inline-block;  padding: 5px; font-size: 12px; }
}
  

Where 000000 needs to be replaced with the ID of the created menu with the sorting code.

Instructions for changing the message about an unselected variety

Variety selection error text:
A message about the need to select a type of product is implemented in the dialog box using a CSS element. You can replace labels in CSS styles:
 Code: СSS
html:lang(ru) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не выбрали разновидность товара."; }
html:lang(en) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"You did not select a complete set of goods."; }
html:lang(uk) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Вы не обрали різновид товару."; }
html:lang(pl) .hotengine-shop_cart_add_error_wrong_variety:after{ content:"Nie wybrałeś typu produktu."; }

In addition, before displaying the message, the callback function callback_hotengine_variety_require is called..
When viewing the list of products, before displaying the message, the callback function callback_hotengine_variety_require_list($href) is called, where the link to the product card is passed as $href.

An example of a function with a dialog box, which is the default and can be changed:
 Code: JavaScript
<script>
 function callback_hotengine_variety_require(){

 $("body").append('<div id="hotengine-shop_cart_add_error_wrong_variety"><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick=\'(function() { $("#hotengine-shop_cart_add_error_wrong_variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); return false; })();\'></a></div>');
  
  
  
hotengine_micromodal({
    id: "hotengine-shop-cart-add-error-wrong-variety",
    content: $("#hotengine-shop_cart_add_error_wrong_variety-data").html(),
    defaultWidth: $(window).width() > 410 ? "410px" : "90%",
	defaultHeight: "",
    minWidth: "290px",
    onCloseRemove: false,
	unsetContentHeight: true,
	onCloseEvent: function(){ $("#hotengine-shop-cart-add-error-wrong-variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); }
});
  
  return false; 
  }

 </script>



In the product parameters, you can specify a title above the list of varieties. The length of the header is added as a CSS class. For example, if the title is "Select Weight", then its length is 24 characters. The class hotengine-shop-product-variety-title_24 is specified accordingly. You can use either text or heading length above the variation. For example:
 Code: JavaScript
<script>												 
	function callback_hotengine_variety_require(){

if($(".hotengine-shop-product-variety-title_24").length > 0){
  $text = "You have not chosen the weight!";
  } else if($(".hotengine-shop-product-variety-title_38").length > 0){
  $text = "You have not chosen the quantity!";
  } else if($(".hotengine-shop-product-variety-title_26").length > 0){
  $text = "You have not chosen a color!";
  } else {
  $text = "You have not chosen a variety! ";
  }
 
 
 $("body").append('<div id="hotengine-shop_cart_add_error_wrong_variety"><b>'+$text+'</b><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" data-micromodal-close onclick=\'(function() { $("#hotengine-shop_cart_add_error_wrong_variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); return false; })();\'></a></div>');
  
  
  
hotengine_micromodal({
    id: "hotengine-shop-cart-add-error-wrong-variety",
    content: $("#hotengine-shop_cart_add_error_wrong_variety-data").html(),
    defaultWidth: $(window).width() > 410 ? "410px" : "90%",
	defaultHeight: "",
    minWidth: "290px",
    onCloseRemove: false,
	unsetContentHeight: true,
	onCloseEvent: function(){ $("#hotengine-shop-cart-add-error-wrong-variety,#hotengine-shop_cart_add_error_wrong_variety-data").remove(); }
});
  
  return false; 
  }


</script>
A similar function when viewing the list of products, callback_hotengine_variety_require_list($href), is supplemented with a link to the product card, and, accordingly, can be used in the displayed dialog.

Instructions for adding a link to product reviews/ratings


To create a link to the Rating icons in the list of products, you need to find all the items in the list, and add a link around the rating items.
Besides, after loading the list of products in the slider or using the "Show more" button, you need to add the link again (callback_hotengine_ajax_load_products and callback_hotengine_shop_products_list_div_button).
 Code: JavaScript
<script type="text/javascript">
  <!-- 
  $(function(){

$(".hotengine-shop-product-list-block .hotengine-shop-product-rating-block").each(function(){
  var $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
});

function callback_hotengine_ajax_load_products(){
  $(".hotengine-shop-products-list-content-append .hotengine-shop-product-list-block :not([.hotengine-shop-product-rating-block-url]) .hotengine-shop-product-rating-block").each(function(){
  var $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
  }

function callback_hotengine_shop_products_list_div_button(){
$(".hotengine-shop-products-list-content .hotengine-shop-product-list-block .hotengine-shop-product-rating-block").each(function(){
  var $urlr = $(this).parent().find(".hotengine-shop-product-read_more a").attr("href");
  $(this).wrap('<a class="hotengine-shop-product-rating-block-url" href="'+$urlr+'#tabs-review"></a>');
  });
  }
 
-->
  </script>



For the link object, you need to set a position, for example CSS:
 Code: JavaScript
.hotengine-shop-product-list-block .hotengine-shop-product-rating-block{ position:relative; display: block; bottom: 0px;}
	.hotengine-shop-product-list-block .hotengine-shop-product-rating-block-url{ position:relative; display: block; bottom: 1px;}
	


Additional blocks in the shopping cart: If a product has a wholesale price, then a SPAN element .hotengine-shop-product-price_opt_inform_block is created.
 Code: html
													  <span class="hotengine-shop-product-price_opt_inform_block"><span class="hotengine-shop-product-price_opt_inform_block_title"></span><span class="hotengine-shop-product-price_opt_inform_original_price">100</span><span class="hotengine-shop-product-price_opt_inform_original_price_opt">100</span></span>



.hotengine-shop-product-price_opt_inform_block_title - block with the text «Wholesale price » (can be changed through CSS styles, content).
.hotengine-shop-product-price_opt_inform_block - block with information about the discount
.hotengine-shop-product-price_opt_inform_original_price - price
.hotengine-shop-product-price_opt_inform_original_price_opt - wholesale price


If the product has a special order, then a SPAN element .hotengine-shop-product-price_sale_inform_block is created.
 Code: html
													  <span class="hotengine-shop-product-price_sale_inform_block"><span class="hotengine-shop-product-price_sale_inform_block_title"></span><span class="hotengine-shop-product-price_sale_inform_original_price">100</span><span class="hotengine-shop-product-price_sale_inform_original_price_old">120</span></span>



.hotengine-shop-product-price_sale_inform_block_title - block with the text «Promotional price» (can be changed through CSS styles, content).
.hotengine-shop-product-price_sale_inform_block - block with information about the discount
.hotengine-shop-product-price_sale_inform_original_price - price
.hotengine-shop-product-price_sale_inform_original_price_old - old product price (displayed only if the value is specified and is not equal to zero)


ShortCode (data autocorrect)
ShortCode (data autocorrect)
On all pages and Blocks/Menu, it is possible to automatically change the Code to Static data.
For each page, this data is unique, for example, it can be the ID of the page (article, product, page).

Below is a list of basic data for AutoCorrect.


{HOTENGINE-SC:current_page_id} - ID of the current page (article, page, product, news)
{HOTENGINE-SC:site_url} - Your site url (address)
{HOTENGINE-SC:lang} - Language of the opened page
{HOTENGINE-SC:site_tagline} - Site slogan
{HOTENGINE-SC:contacts} - Block with contacts
{HOTENGINE-SC:slide_menu_widget:XX} - Block with the Slide Menu widget
{HOTENGINE-SC:slider_widget:XX} - Block with Slider widget
{HOTENGINE-SC:smart_search_widget:PARAM} - Block with widget Search filter
{HOTENGINE-SC:mainmenu} - Main menu
{HOTENGINE-SC:langmenu} - language switching

{HOTENGINE-SC:user_nickname} - Username (if authorized)
{HOTENGINE-SC:user_id} - User ID (if he has performed authorization)
{HOTENGINE-SC:user_login} - User login (if he has performed authorization)
{HOTENGINE-SC:user_discount} - User discount
{HOTENGINE-SC:user_cahback} - Balance Cashback
{HOTENGINE-SC:user_group_id} - User group ID

{HOTENGINE-SC:shop_cart_menu} - shopping cart (Block/Menu Cart)
{HOTENGINE-SC:favorites} - link to selected products
{HOTENGINE-SC:shop_compare_menu} - comparison of goods
{HOTENGINE-SC:shop_cat_page_image} - The path to the product image (if the product page is open)
{HOTENGINE-SC:shop_cat_page_id} - Product ID (if the product page is open). You can also use {HOTENGINE-SC:current_page_id}
{HOTENGINE-SC:shop_cat_page_sku} - Product SKU (if the product page is open)
{HOTENGINE-SC:shop_cat_page_currency} - Product currency (abbreviated) (if the product page is open)
{HOTENGINE-SC:shop_cat_page_currency_iso} - Product currency (ISO) (if the product page is open)
{HOTENGINE-SC:shop_cat_page_price} - Product price (if the product page is open)
{HOTENGINE-SC:shop_cat_page_title} - Name of product
{HOTENGINE-SC:shop_cat_page_video} - Video URL (link to video)


{HOTENGINE-SC:pers_shop_cat_val_name} - Store category name (only within a category and a button in the list of subcategories)
{HOTENGINE-SC:pers_shop_cat_val_title} - Store category header title (only within the category and the button in the list of subcategories)
{HOTENGINE-SC:pers_shop_cat_val_id} - Store category ID (only within a category and a button in the list of subcategories)
{HOTENGINE-SC:shop_cat_producer_val_name} - Manufacturer's category name (only within a category and a button in the list of subcategories)
{HOTENGINE-SC:shop_cat_producer_val_id} - Manufacturer category ID (only within a category and a button in the list of subcategories)
{HOTENGINE-SC:shop_cat_collection_val_name} - Collection category name (only within the category and the button in the list of subcategories)
{HOTENGINE-SC:shop_cat_collection_val_id} - Collection category ID (only inside a category and a button in the list of subcategories)
{HOTENGINE-SC:blog_cat_val_name} - The name of the article directory category (only within the category and the button in the list of subcategories)
{HOTENGINE-SC:blog_cat_val_id} - Category ID of the article directory (only in the category button)

{HOTENGINE-SC:blog_cat_page_id} - Article ID (only in the article directory)
{HOTENGINE-SC:blog_cat_page_title} - Article title (only in the article directory)
{HOTENGINE-SC:blog_cat_val_id} - Category ID of the article directory (only within the category and the button in the list of subcategories)




For example, you can use this code to display the name of an authorized user on the site:
 Code: html
<span class="user_login_name">Welcome {HOTENGINE-SC:user_login}</span>


Or you can use this code to generate Meta data for social media (for example, Open Graph markup):
 Code: html
<meta property="og:image" content="{HOTENGINE-SC:shop_cat_page_image}"/>
<meta property="og:title" content="{HOTENGINE-SC:shop_cat_page_title}>



Example of creating a link to an authorized user profile:
 Code: html
https://hotlist.biz/{HOTENGINE-SC:lang}/users.php?p=user_profile&action=userprofile&userid={HOTENGINE-SC:user_id}

Languages
Multilingualism and search engines If you have multiple versions of a page in different languages or regions, help Google identify them. Then the search results will show those versions of your pages that are best suited to the user's language and region.
One way to implement multilingual sites is with the hreflang tag. An example of such a tag:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />

The multilingual function is implemented on various pages of the site (categories, pages, articles, product cards and others). For example, if you have added a product card in English, Belarusian, Russian and Ukrainian languages, then it is enough to specify the same value in all product cards in the «Product in other languages» cell, for example - «1». In this case, when opening a page in one of the languages, hreflang tags with links to pages in other languages will be added. It is recommended to use the ID of the first product card to avoid duplicate values and subsequent errors. For example, if you added the product «Sneakers», with the ID «12345», then adding a similar product in English, specify in the item «Product in other languages» - «12345».

The main selected language of the site will be marked with an additional hreflang="x-default" tag.
How to create a multilingual website? Create a page in one language, then the same page in another language, and fill in the «Page in other languages» field with the same value, for example, the ID of the first created page. Fill in articles and product cards in the same way. The site will automatically inform the search engine about the page in other languages, as well as about the main page (the main page will correspond to the main language of the site, which you can specify in the «Settings», «Start page» section).

To create headings of articles catalog or store, we recommend using the language prefix. For example, the heading «dress» can be created in other languages ​​using the prefix «dress_ua», «dress_de», «dress_fr» ...
It is possible to use the same path to a category in other languages, but when importing data, for example, a product, errors may occur, since the platform will not be able to recognize the language of the category to which it is added. Therefore, we recommend using prefixes in sections with headings, article catalog and online store. When using language prefixes as described above, the «Category in other languages» variable will be set automatically.

When creating product cards, the «SKU» must be unique, therefore in another language you can use, for example, your own endings «SKU_DE». If «Product in another language» is indicated, then when the basic data (cost, availability, new product, hit of sales, access) is changed, all product catalogs specified as an alternative version of the main product will also be updated.
«Search filter» and «Blocks/menus» can be used simultaneously for all languages, and separately specify the language in which to display it. For example, create a «Blocks/menu», Site header, and place it on all pages, specifying the language «English (en)». Such a block will be displayed everywhere only if the English version of the site is open. In the same way, you can create a header for other languages. If you need to place some code, then it is not necessary to create such a «Blocks/menu» for each language, you can specify the language «All», and the block will be displayed regardless of the language chosen by the visitor.
The language prefix on the Hotlist.biz platform is indicated at the beginning, for example, «/en/page.htm».
Quick translation of the product catalog on the site For quick store translation, you can use import/export via CSV/XLS, as well as Google Translate service for documents.
Store Categories
Export Store Categories. Change the «Previous» language value in the language cell to the «NEW» language value, and also translate the titles and descriptions (for example, using the Google Translate service for documents, after saving the file in XLSX). In this case, the «Language» of all child categories will be the same as the language of the main category to which they are added. Therefore, for the main category (whose parent is «main») it is important to change the value of the «Language» cell to «NEW LANGUAGE». To eliminate possible errors during the subsequent import of goods, we recommend using unique names, or adding a new category «_NEW LANGUAGE» to the «name». For example, «category_en» where «en» is the new language being added.

You must save the file in «XLS» or «CSV» format before importing. After importing, check that the language of the new categories is appropriate. If for some reason the wrong language is specified, then change the language of the main category of your catalog to which they are added, in the «Store» - «Store Categories» section. For all child subcategories, the language will also be replaced. If there are not many categories, then you can copy the categories, replacing the language and name in them, in the «Store» - «Store Categories» section.


Adding products Perform the export of goods in the «Store» - «Export of goods» section. Check the «Upload all» checkbox. Uncheck the «Do not export products that are not in stock» checkbox, and also check the «Export categories without transliteration» checkbox - to simplify the selection of categories of products to be translated. Translate the file using Google Translate for Documents after saving the file in XLSX. Use formulas to add «_language» to the categories, or replace their names with the newly created categories. Move the «ID» column values to the «Products in Other Languages» column. Be sure to remove the values for the «ID» column so you don't overwrite existing products. And also replace the «Product Code», for example, by adding «_language» in the same way using formulas, since products with the same «ID» or «Product Code» will be overwritten.
Perform the import, In the section «Shop» - «Import goods». You can quickly fill in the correspondence of cells by clicking «Fields from the file, specify the correspondence» - «Fill in the selection of correspondence fields according to the export file (fields «Unload all»)».

In addition, to create the correct markup for search engines, as well as redirect between products in different languages, in the products of the main language, export and re-import by copying the value of the «ID» cell into the «Products in other languages» column. (In this case, you can import only one cell «Product in other languages» and specify the ID or «Product code» by which products to be overwritten will be found). Thus, both new and previously created products will have identical meaning «Product in other languages».
Multilingualism and language selection menu You can place the short code {HOTENGINE-SC: langmenu} and specify the list of available languages in the site settings or place the code from the example below.
The code from the example below generates a button for switching to alternative languages, and if an alternative language version is specified for a page/article/product card, then it will be used.


1) Paste the Css code into the Design Editor, in the CSS tab.
2) Add JavaScript to the block/menu displayed on all pages.
3) Paste the code of the drop-down list of languages into the block/menu where you want to place it, for example, into the site header.
4) Remove unnecessary languages from the block (class hotengine-shop-select-language-val)



Language selection menu code:
 Code: html
  <span class="hotengine-shop-select-language-box">
  <span class="hotengine-shop-select-language" data-lang="es"></span>
  <span class="hotengine-shop-select-language-values">
  <a class="hotengine-shop-select-language-val" data-lang="be"></a>
  <a class="hotengine-shop-select-language-val" data-lang="de"></a>
  <a class="hotengine-shop-select-language-val" data-lang="en"></a>
  <a class="hotengine-shop-select-language-val" data-lang="es"></a>
  <a class="hotengine-shop-select-language-val" data-lang="fr"></a>
  <a class="hotengine-shop-select-language-val" data-lang="kk"></a>
  <a class="hotengine-shop-select-language-val" data-lang="pl"></a>
  <a class="hotengine-shop-select-language-val" data-lang="ru"></a>
  <a class="hotengine-shop-select-language-val" data-lang="uk"></a>
  </span>
  </span>

CSS styles:
 Code: CSS style
/*LANGUAGE BLOCK*/
.hotengine-shop-select-language-box { display:inline-block; width:71px; height:auto; overflow:hidden; border:1px solid transparent;  line-height:30px; position:relative; z-index:1000; }
.hotengine-shop-select-language { display:block; width:100%; text-align:center; cursor:pointer; }
.hotengine-shop-select-language-values { display:block; width:100%; vertical-align: top; position:absolute; background:rgba(255, 255, 255, 0.80); }
.hotengine-shop-select-language-box:hover{ overflow:visible;}
.hotengine-shop-select-language-values:hover .hotengine-shop-select-language-val{ position:relative; }
.hotengine-shop-select-language-val { width:auto; display:block; margin:0px; vertical-align:top; cursor:pointer; text-align:center; color:inherit; text-decoration:none; }
.hotengine-shop-select-language-val:hover {background:inherit;color:inherit;}


.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="ru"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="ru"]:after { content: "RU"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="en"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="en"]:after { content: "EN"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="uk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="uk"]:after { content: "UA"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="de"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="de"]:after { content: "DE"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="es"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="es"]:after { content: "ES"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="fr"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="fr"]:after { content: "FR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="kk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="kk"]:after { content: "KK"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="be"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="be"]:after { content: "BE"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="ro"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="ro"]:after { content: "RO"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="tr"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="tr"]:after { content: "TR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="it"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="it"]:after { content: "IT"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="sk"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="sk"]:after { content: "SK"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="da"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="da"]:after { content: "DA"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="pl"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="pl"]:after { content: "PL"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="zh"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="zh"]:after { content: "ZH"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="hi"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="hi"]:after { content: "HI"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="ar"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="ar"]:after { content: "AR"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="pt"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="pt"]:after { content: "PT"; }

.hotengine-shop-select-language-box .hotengine-shop-select-language[data-lang="bn"]:after,
.hotengine-shop-select-language-box .hotengine-shop-select-language-val[data-lang="bn"]:after { content: "BN"; }

/*LANGUAGE BLOCK*/

The file is automatically uploaded on the site if the available languages are specified:
 Code: JavaScript
<script type="text/javascript" src="/templates/scripts/hotengine-script-language.js"></script>

File content
Changing text elements on the site
Multilingualism and replacement of standard labels Most of the labels and elements on the site are displayed using CSS pseudo-elements. For example, an element with the class .hotengine-form-feedback-yourname-title has a pseudo-element with text.
The text is split using the parent lang attribute of the html element.

Example:
html:lang(ru) .hotengine-form-feedback-yourname-title:after{ content:"Ваше имя:"; }
html:lang(en) .hotengine-form-feedback-yourname-title:after{ content:"Your name:"; }
html:lang(uk) .hotengine-form-feedback-yourname-title:after{ content:"Ваше ім'я:"; }
html:lang(de) .hotengine-form-feedback-yourname-title:after{ content:"Ihr name:"; }
html:lang(es) .hotengine-form-feedback-yourname-title:after{ content:"Su nombre:"; }
html:lang(fr) .hotengine-form-feedback-yourname-title:after{ content:"Votre nom:"; }
html:lang(kk) .hotengine-form-feedback-yourname-title:after{ content:"Сіздің атыңыз:"; }
html:lang(be) .hotengine-form-feedback-yourname-title:after{ content:"Ваша імя:"; }
html:lang(ro) .hotengine-form-feedback-yourname-title:after{ content:"Numele dvs.:"; }
html:lang(tr) .hotengine-form-feedback-yourname-title:after{ content:"Adınız:"; }
html:lang(it) .hotengine-form-feedback-yourname-title:after{ content:"Il tuo nome:"; }
html:lang(sk) .hotengine-form-feedback-yourname-title:after{ content:"Vaše meno:"; }
html:lang(da) .hotengine-form-feedback-yourname-title:after{ content:"Dit navn:"; }
html:lang(pl) .hotengine-form-feedback-yourname-title:after{ content:"Twoje imię:"; }
html:lang(zh) .hotengine-form-feedback-yourname-title:after{ content:"你的名称:"; }
html:lang(hi) .hotengine-form-feedback-yourname-title:after{ content:"आपका नाम:"; }
html:lang(ar) .hotengine-form-feedback-yourname-title:after{ content:"اسمك:"; }
html:lang(pt) .hotengine-form-feedback-yourname-title:after{ content:"Seu nome:"; }
html:lang(bn) .hotengine-form-feedback-yourname-title:after{ content:"আপনার নাম:"; }


How can you translate the entire site?
When creating a multilingual site, specify the language in the created content (page, menu, categories ...)
And use paths with the language at the beginning, /ru/ /en/ ...
The main language will be the one specified when registering the site.
When adding goods, the language is determined in accordance with the category to which it is added.
You can replace most of the elements on the site using CSS styles and pseudo-elements.
Inscriptions about the quantity of goods
html:lang(en).hotengine-shop-product-price_for-lang-1:after{ content:"piece";}
Substitute a number, lang-1, where 1 stands for the selected unit of measure and (en) stands for the language.

List of values:
  • 1 - piece;
  • 2 - 100 pcs;
  • 3 - 1000 pcs;
  • 4 - for 1 package;
  • 38 - for 100 grams;
  • 5 - 1 kg;
  • 6 - 1000 kg;
  • 39 - 1 lb;
  • 7 - 1 m 2 ;
  • 8 - for 1 meter;
  • 9 - for 1 km;
  • 10 - per set;
  • 11 - in 1 hour;
  • 12 - in 1 day;
  • 13 - in 1 month;
  • 14 - for 1 year;
  • 15 - per hundred square meters;
  • 16 - per acre;
  • 17 - per Hectare;
  • 18 - per plot;
  • 19 - per object;
  • 30 - for 1 ml;
  • 31 - for 1 liter;
  • 32 - for 1 km 3 ;
  • 33 - for 1 m 3 ;
  • 34 - for 1 dm 3 ;
  • 35 - for 1 cm 3 ;
  • 36 - for 1 mm 3 ;
  • 37 - for 1 hl;

Translating Buttons with JavaScript Some elements are implemented without pseudo classes and CSS elements. For example, such an element as the "Submit" button in the shopping cart. Javascript can be used to translate such an element.
 Code: JavaScript
 <script>
$(document).ready(function(){ $("#hotengine-shop-cart-form .hotengine-form-submit input[type='submit']").val('Send order'); });
</script>
  

Read more ...
For example, in this case we are changing the text of the form submit button. The code must be placed on the page where the button is located. To do this, you need to create a functional page - a shopping cart. And paste the code shown in the example into the text of the page.
Search filter translation You can use one search filter for multiple languages. This will simplify the process of import / export of goods and filling the site.
Translation is carried out using the tool Translation of characteristic values.

You can also translate using JavaScript. However, with such an XML translation, the characteristics will be uploaded to MarketPlac's in one language.
Показать
For example, consider a translation from English to German.
In this case, to upload XML to MarketPlace use the main language of the search filter.
Show

Create a «Block/Menu» and place it on pages where the search filter is enabled.
For example, in the item «Enter characters upon detection of which to display Block/Menu:» specify:
/de/shop/
/de/pers_shop/

An example of translation of strings, as well as the «Apply button».
 Code: js
<script>
  $(function(){
var $dict =  {
  'Colour': 'Farbe',
  'Blue': 'Blau',
  'Green': 'Grün',
  'Black': 'Schwarz'
  }
 
$.each($dict, function(txtorig, txtnew){
  $("#shop_catalog_product_types_id_ajax .product_types_valuebox_checkbox span:contains('"+txtorig+"')").html(txtnew);
  $("#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block_title:contains('"+txtorig+"')").html(txtnew);
  $(".shop_catalog_product_properties_block .shop_catalog_product_types_block_title:contains('"+txtorig+"')").html(txtnew);
  $(".shop_catalog_product_properties_block .product_types_valuebox_checkbox:contains('"+txtorig+"')").html(txtnew);
  });
setTimeout(() => {
  $(".hotengine-smart_search_submit_button").find("input").val("Anwenden");
  $("#searchinp_smart_search .button").val("Anwenden");
}, 100);
 
});
  </script>
      

An example of a translation with word rewriting:
 Code: js
<script>
  $(function(){
var $dict =  {
  'Colour': 'Farbe',
  'Blue': 'Blau',
  'Green': 'Grün',
  'Black': 'Schwarz'
  }
 
$.each($dict, function(txtorig, txtnew){
$("#shop_catalog_product_types_id_ajax").html(function() { return $(this).html().replace(txtorig, txtnew);  });
});
setTimeout(() => {
  $(".hotengine-smart_search_submit_button").find("input").val("Anwenden");
  $("#searchinp_smart_search .button").val("Anwenden");
}, 100);
 
});
  </script>
      

Likewise, you can add other languages and new words by placing the code on the appropriate language versions of the site.
Promotions (countdown timer in the store) Translation on the example of a timer. The products provide the ability to automatically create a countdown timer. When adding a product, click the "Promotional item" checkbox, and in the block that appears, click "Turn on timer". Set the expiration date for the timer. After the specified period has expired, you can set an action, for example, delete a share, or change the price ...

How can I change the labels in the timer?
Using CSS styles, you can replace words in the timer. To do this, for example, in the product, insert the css html code:
 Code: css
<style type="text/css">
<!--

/ * inscription left to end * /

html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
   content:"дней";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
   content:"часов";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
   content:"минут";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
   content:"секунд";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
   content:"осталось до конца акции!";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
   content:"Акция завершена!";
}


html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
   content:"days";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
   content:"hours";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
   content:"minute";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
   content:"seconds";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
   content:"left before the end of the campaign!";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
   content:"Сampaign complete!";
}


html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-day:after{
    content:"dni";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-hourse:after{
    content:"godziny";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-minute:after{
    content:"minuty";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-seconds:after{
    content:"sekundy";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-left:after{
    content:"pozostało do końca promocji!";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-description-akciya-countdown-l-done:after{
    content:"Ackia ukończona!";
}






html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"дней";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"часов";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"минут";
}
html:lang(ru) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"секунд";
}




html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"days";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"hours";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"minute";
}
html:lang(en) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"seconds";
}



html:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"днів";
}
html:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"годин";
}
html:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"хвилин";
}
html:lang(uk) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"секунд";
}


html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-days:after{
   content:"dni";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-hours:after{
   content:"godziny";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-minutes:after{
   content:"minuty";
}
html:lang(pl) #hotengine-shop-product-description-akciya-countdown-block .hotengine-shop-product-akciya-countdown-numbers-seconds:after{
   content:"sekundy";
}


-->
</style>


lang(en) or lang(ru) - this is the language for which the corresponding inscription will be, and then the block itself is set for which the inscription will be changed.


How to use Timer on other pages? Insert the following code to use our countdown counter:
 Code: js

<div id="hotengine-shop-product-description-akciya-countdown-block"><div id="hotengine-shop-product-description-akciya-countdown"></div><div class="hotengine-shop-product-akciya-countdown-numbers"><span class="hotengine-shop-product-akciya-countdown-numbers-days"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-hours"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-minutes"><i></i></span><span class="hotengine-shop-product-akciya-countdown-numbers-seconds"><i></i></span></div><span class="hotengine-shop-product-description-akciya-countdown-l-left"></span></div>
													  
<script type="text/javascript" src="/modules/jquery.cookie/jquery.cookie.min.js"></script>
<link rel="stylesheet" type="text/css" href="/templates/javascript_timer_countdown/hotengine_timer_countdown.css" />
<script src="/templates/javascript_timer_countdown/hotengine_timer_countdown.js"></script>
<script async="true" type="text/javascript">
<!--
$(function(){


    var timerperiod = 5*12*60*60*1000; // timer period, in the example 5 days 12 hours (5 * 12 ...) (for example, here the date is constantly shifting, i.e. the current date + XX days.)

	// cookies last visit (to take away the time of the last visit)
	if($.cookie("cookie_lastvisit_countdown_timer") && $.cookie("cookie_lastvisit_countdown_timer")!="null"){ 
	  var cookie_lastvisit_minus = (new Date()).getTime() - $.cookie("cookie_lastvisit_countdown_timer");
	} else {
	  var cookie_lastvisit_minus = 0; 
	}
	 var checkdate = timerperiod-cookie_lastvisit_minus; // to check the date of the last visit and the end of the promotion
	 if(checkdate>0){ counterdisable = false; } else { var cookie_lastvisit_minus = 0; counterdisable = true; };

	 var cookie_lastvisit_countdown_timerv = new Date().getTime() - cookie_lastvisit_minus;
	 $.cookie("cookie_lastvisit_countdown_timer", cookie_lastvisit_countdown_timerv, {expires:  null, path: "/"}); 
	// cookies last visit (to take away the time of the last visit)

	ts = (new Date()).getTime() + timerperiod - cookie_lastvisit_minus; //set the end date of the promotion
	hotengine_inittimer("hotengine-shop-product-description-akciya-countdown-block", new Date(ts));
	
});


//-->
</script>





To change the labels of the counter, open the style file /templates/javascript_timer_countdown/hotengine_timer_countdown.css, copy its code, and paste it into the page to change the labels.
Modifying site blocks and design editor
The main blocks of the site and ways to change the design

The main blocks of the site

ID and Class of the main blocks of the site.





#hotengine-wrapper

#hotengine-header

GRID *
#hotengine-content-container
.hotengine-wrap-container-side-left .menu_position_top .hotengine-wrap-container-side-right
#hotengine-content
.hotengine-wrap-container-side-center
«page type»


.menu_position_buttom


#hotengine-footer


* - The main internal block with content is implemented using CSS Grid:
CSS Grid
 Code: CSS
/*CONTENT GRID*/

#hotengine-content-container { display: grid;
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns:0% 1fr 0%;
  margin:0 auto; width:100%;
}

#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns: auto 1fr auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-left container-center";
  grid-template-columns: auto 1fr;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto;
}

.hotengine-wrap-container-side-center { grid-area: container-center; vertical-align:top; margin:0 auto; width:100%;}
.hotengine-wrap-container-side-left   { grid-area: container-left; vertical-align:top; margin:0 auto; width:auto; max-width:270px;  }
.hotengine-wrap-container-side-right  { grid-area: container-right; vertical-align:top; margin:0 auto; width:auto; max-width:270px; }

.menu_position_top { display:block;    width:100%;  }
.menu_position_buttom { display:block; width:100%; }

@media (max-width:767px){
#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-center container-left container-right";
  grid-template-columns: 1fr auto auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-center container-left";
  grid-template-columns: 1fr auto ;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto ;
}
}
/*CONTENT GRID*/

data-hasside - an additional attribute of the #hotengine-content-container element, which indicates the presence of a left and right block.
  • [data-hasside="left"] - left block/menu is present
  • [data-hasside="right"] - right block/menu is present
  • [data-hasside="both"] - there is a left and right block/menu


Inside these blocks, the content you created, or the menu, will be located.
Each «page typeы» highlighted by the corresponding block, with the assignment of a specific ID.
For example:
  • Pages - #hotengine-content-page
  • News - #hotengine-content-news
  • Article Directory - #hotengine-content-blog
  • Product catalog - #hotengine-content-shop
  • Product catalog (manufacturers) - #hotengine-content-shop
  • Product catalog (collection) - #hotengine-content-shop

This block is created inside the #hotengine-content element

Also, on category pages where there is a child list of pages, a class is added:
  • Product catalog - .hotengine-content-shop-category
  • Product catalog (collection) - .hotengine-content-shop-collection
  • Product catalog (manufacturer) - .hotengine-content-shop-producer
  • Article Directory - .hotengine-content-blog-category
  • News directory - .hotengine-content-news-category

In addition, an additional block is created for Blocks/Menus of news or articles list:
Last articles menu - #hotengine-content-menu-lastblogpost
Latest news menu #hotengine-content-menu-lastnewspost
How to change the site design You can change the site design in the Design Editor. With its help, you can set the basic colors of elements, the size and position of some elements, change the Header of the site and more.
Using the mouse pointer, you can change the height of the site header, the size of the logo, the position of the main menu and the slogan.


How to Create Your Own Website Header Design?


Create a Block/Menu with a location in the Header and place the necessary elements in it. For example, a Div with a phone number, and a Div with an inscription about the company (do not forget to assign them the appropriate class or id, for subsequent reference to them according to the specified values).
Open the design editor, set the position and design properties to the created elements in CSS styles.
In the same way, you can create any graphic elements on the site and place them in the places you need.

How do I reset a design? To restore the default value, open the Design Editor and delete the current value for the desired element, or click on the "Restore default value" button.
CSS styles You can use CSS to style any elements on the site. To select an element, right-click on the element, and "Inspect Element". Copy the ID or Class of the object and paste it into the «Css Styles» tab in the design editor.

If you are using a plugin template, then its styles take less precedence than some of the above values. Before using the pluggable template, we recommend that you first return the default design value.

Default css styles: CSS file Main site blocks

Templating For now, we use special markup for elements, labeled "hotengine-" classes, an ordered display structure for elements, and hidden data. Almost all labels on the site are implemented using CSS after elements.
If the displacement and positioning of elements cannot be done using CSS, then you can use Javascript and move objects around the page.
Changing the position of some elements using Javascript.
 Code: html
<script type="text/javascript">
  $(function(){
  var newproducer = $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").html();
if(typeof newproducer !== typeof undefined && newproducer !== false && newproducer !='undefined' && newproducer !=''){
  $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").hide();
  $(".hotengine-shop-product-sku-box").after('<span class="hotengine-shop-product-producer">'+newproducer+'</span>');
 }
});
</script>


In this example, we check if the manufacturer is specified. If the manufacturer is specified, then hide it and place it after the "SKU" field.

"Wrapping" elements with Javascript.
 Code: html
<script type="text/javascript">
  $(function(){
  $(".element").wrap("<div class='new'></div>");

});
</script>

As a result, the object with the element class will be "wrapped" in a div with the class "new" (<div class="new"><span class="element"></span></div>)

Templates In addition to basic styles in the design editor, you can install ready-made templates.
Template Catalog - https://templates.hotlist.biz/en/
Editor The platform provides an HTML editor TynyMce, through which you can design pages, product cards, articles and blocks/menus. The editor implements the insertion of images, and ready-made «Codes» to display the headings of the store, the list of products, the list of articles, on any pages. Built-in codes allow you to insert, for example, on the home page, a list of specific products with specified parameters (product list generator is a separate instruction).
Statistics
Google Analytics:
You can enable visitor tracking using Google Analytics at Settings, in the Statistics/Google Analytics tab.


How to use it?


Tracking tags will send standard e-commerce events for Google Analytics 4 or Google Tag Manager. In addition, on the checkout or form submission page, you can additionally set your own conversion codes.
Event Descriptions:
Google Analytics 4
Google Tag Manager
In addition, you can implement passing your own tags using JavaScript, Short codes and Micromarking hotengine-markers, that allow you to replace dynamic data.

  • add_to_cart - adding a product to the cart
  • add_to_wishlist - adding a product to favorites
  • begin_checkout - checkout start
  • purchase - successful checkout
  • remove_from_cart - remove an item from the cart
  • search - site search
  • select_item - product variety selection
  • generate_lead - send data via form
  • sign_up - registration
  • view_cart - view cart
  • view_item - view item card

    Additional variables:

    • Page type - ecomm_pagetype
    • Product ID - ecomm_prodid
    • Total value of goods - ecomm_totalvalue
Facebook Pixel:
 Идентификатор отслеживания Facebook Pixel можно указать в общих настройках сайта, во вкладке «Статистика». Пиксель будет передавать данные о посещении страниц (PageView), события добавления товара в корзину (AddToCart), просмотр товара (ViewContent), начало (InitiateCheckout) и завершение оформления заказа (Purchase). Стоимость товара формируется в USD по курсу вашего сайта.

Кроме того, вы можете создать блок меню для генерации пикселя с данными о товаре самостоятельно.
Инструкция

Внимание! При создании кода пикселя не через настройки сайта, обязательно нужно предварительно добавлять основной код пикселя. Для этого создайте блок/меню с основным кодом пикселя и расположите в служебных тегах, отображаемом на всех страницах. При этом в общих настройках сайта, код пикселя указывать не нужно. Если код пикселя в основных настройках указан, то код Products Merchant Facebook на сайте уже установлен.

Блок меню для генерации пикселя с данными о товаре


Создайте блок/меню со следующим кодом:
 Code:
<script>
fbq('track', 'ViewContent', {
content_name: '{HOTENGINE-SC:shop_cat_page_title}',
content_ids: ['{HOTENGINE-SC:shop_cat_page_id}'],
content_type: 'product',
value: {HOTENGINE-SC:shop_cat_page_price},
currency: '{HOTENGINE-SC:shop_cat_page_currency_iso}'
});
</script>


Показывать Блок/Меню на страницах:Только на страницах Магазина
Введите символы, при обнаружении которых отображать Блок/Меню:htm
Введите символы, при обнаружении которых не отображать Блок/Меню:cart



Если необходимо добавить событие после отправки заявки через Форму, то после текста об успешной отправки данных добавьте следующий код:
 Code: html
<script>
fbq('track', 'Purchase');
</script>

Referral tails:
    The site can use Referral Tails. When ordering goods or sending a letter through feedback, data about the source of the referral to your site will be added to the letter. Also when using UTM endings (URL Builder) this data will be added to letter.
    In addition to the standard linker data, the source can be divided into groups, which are used in sales statistics to separate sources and more conveniently calculate conversions. The group value can be set using the GET variable "hotengine_referral_group". If no value is specified and utm_source is specified, then it will be used to specify the hotengine_referral_group.
    Data about the referral source can be hidden by the visitor's browser settings or by using the secure protocol of the source site. In addition, you can additionally group orders using the "shop_cart_statistic_group" variable in the link, or manually after placing the order.

    You can enable Referral Tails on the Settings page, in the Statistics tab.

    Example of a link with UTM markup:
    https://hotlist.biz/?utm_source=google&utm_medium=cpc&utm_term=slova&utm_content=soderjimoe&utm_campaign=nazvnie

    An example of a link with Yandex Direct auto-markup and UTM markup:
    https://hotlist.biz/?utm_source=yandex_{source_type}&utm_medium=cpc&utm_term={keyword}&utm_campaign=id:{campaign_id}&utm_content=ad:{ad_id}|gbid:{gbid}|phrase:{phrase_id}|param1:{param1}|position_type:{position_type}|position:{position}|source:{source}|source_type:{source_type}|param2:{param2}
    Complete instruction

    An example of a link with Google Adwords auto-markup, and UTM markup:
    https://hotlist.biz/?utm_source=google_adwords_{network}&utm_medium=cpc&utm_term={keyword}&utm_campaign={campaignid}&utm_content=creative:{creative}|from:{ifsearch:search}{ifcontent:content}|matchtype:{matchtype}|adgroupid:{adgroupid}|feeditemid:{feeditemid}|targetid:{targetid}|device:{device}|adposition:{adposition}|placement:{placement}|network:{network}|param1:{param1}|param2:{param2}
    Complete instruction

Integration with «1C» or CRM
Automatic export on order / POST order data in JSON formatYou can enable automatic export when ordering in the site settings, in the «Store» tab, specifying the path for sending data.
A POST request will be sent to the specified address, with all the information about the order, including the contact information of the customer, and the list of goods. Contact details and order information will be sent in JSON format by POST request.
For example, in «1c», you can implement receiving orders through «HTTP service»->«SiteExchange» -> «POSTData»

After placing an order, a POST request will be sent to the above address, with the following data:
 Code: JSON
array (
  'ORDER' => 
  array (
    'form_name' => 'NAME',
    'form_soname' => 'SONAME',
    'form_phone' => 'PHONENUMBER123',
    'form_email' => 'email@email.com',
    'add_info_addres' => 'FLAT',
    'form_address' => 'ADDRESS',
	'form_delivery_select' => 'Extend ADDRESS (Selected)',
	'form_delivery_select_storehouse' => 'Extend PICKUP POINT (Selected)',
	'form_address1' => 'Extend ADDRESS (Region)',
	'form_address2' => 'Extend ADDRESS (City)',
	'form_address3' => 'Extend ADDRESS (Street)',
	'form_address4' => 'Extend ADDRESS (Home number)',
	'form_address5' => 'Extend ADDRESS (Flat)',
	'form_address6' => 'Extend ADDRESS (Branch number)',
    'form_text' => 'ADD TEXT',
    'post' => '1596538754',
    
    'lang' => 'ru',
    
    'form_delivery' => '',
    'form_delivery_country_code' => '',
    'order_id' => 'XXXXX',
    'user_id' => XXXX,
    'order_discount' => '',
    'order_hash' => '55d4ed2ed42b2c116d9927c2b2ce7fef',
    'time' => 1596538769,
    'delivery' => '',
    'delivery_id' => 0,
    'abtesting' => 0,
    'referral_group' => '',
    'group' => '',
    'referral_url' => 'https://hotlist.biz/....',
    'referral_utm' => '',
    'site_id' => '10954',
    'site_url' => 'hotlist.biz',
    'transaction_id' => 'XXXXX',
    'value' => 2264,
    'currency' => 'UAH',
    'shipping' => '0',
    'items' => 
    array (
      0 => 
      array (
        'id' => '284430',
        'name' => 'Adidas Originals Streetball Trainers FX9701 (42)',
        'sku' => '200976_42',
        'sku_parent' => '200976',
        'variant' => '42 ',
        'category' => 'sport_shoes',
        'quantity' => '1',
        'price' => '686',
        'currency' => 'UAH',
        'complectation_id' => '409151',
      ),
      1 => 
      array (
        'id' => '284436',
        'name' => 'Shoe bag with pocket Kite Education College',
        'sku' => '200982',
        'sku_parent' => '200982',
        'variant' => '',
        'category' => 'bags_for_shoes',
        'quantity' => '1',
        'price' => '736',
        'currency' => 'UAH',
        'complectation_id' => 0,
      ),
      2 => 
      array (
        'id' => '284438',
        'name' => 'ASICS Gel-Venture 8 Gs Trainers (43)',
        'sku' => '200984_43',
        'sku_parent' => '200984',
        'variant' => '43 ',
        'category' => 'sport_shoes',
        'quantity' => '1',
        'price' => '842',
        'currency' => 'UAH',
        'complectation_id' => '409154',
      ),
    ),
  ),
)


If after sending a request, your service returns JSON data with the content «Number» or «crm_order_id», then an external order number will be added to the order.
Automatic export of sales statistics/POST order data in JSON formatYou can enable automatic export of sales statistics in the site settings, in the «Store» tab, specifying the path for sending data.
A POST request will be sent to the specified address, with all the order data that is changed in the Sales Statistics. The information will be transmitted by POST request in JSON format.
For example, in 1c you can implement receiving orders through the «HTTP service»->«SiteExchange» -> «POSTData»
In addition, you can enable external access to your statistics by specifying the «Key to access sales statistics».

After changing the order status, a POST request will be sent to the above address in JSON format, with the following data:
 Code: JSON
	   array (
  'ORDER' = 
array (
    'shop_cart_statistic_crm_order_id' = '123',
    'shop_cart_statistic_product_price' = '2264',
    'shop_cart_statistic_product_currency' = '5',
    'shop_cart_statistic_discount' = '',
    'shop_cart_statistic_discount_before' = '',
    'shop_cart_statistic_product_price_before' = '2264',
    'shop_cart_statistic_product_currency_before' = '5',
    'shop_cart_statistic_selldone_datestump_unsted' = '0',
    'shop_cart_statistic_selldone' = '0',
    'shop_cart_statistic_status_pay' = '0',
    'shop_cart_statistic_allow_online_pay' = '0',
    'shop_cart_statistic_selldone_from_seller' = '0',
    'shop_cart_statistic_delivery_status' = '0',
    'shop_cart_statistic_products_preview' = '',
    'shop_cart_statistic_admin_note' = '',
    'shop_cart_statistic_delivery_selected_id_before' = '3482',
    'shop_cart_statistic_delivery_selected_id' = '3482',
    'shop_cart_statistic_delivery_track_id' = '',
    'shop_cart_statistic_delivery_track_id_link' = '',
    'shop_cart_statistic_byer_name' = 'NAME SONAME',
    'shop_cart_statistic_byer_phone' = 'PHONENUMBER123',
    'shop_cart_statistic_byer_address' = 'ADDRESS',
    'shop_cart_statistic_byer_address_eform0' => 'Extend ADDRESS (Selected)',
    'shop_cart_statistic_byer_address_eform1' => 'Extend ADDRESS (Region)',
    'shop_cart_statistic_byer_address_eform2' => 'Extend ADDRESS (City)',
    'shop_cart_statistic_byer_address_eform3' => 'Extend ADDRESS (Street)',
    'shop_cart_statistic_byer_address_eform4' => 'Extend ADDRESS (Home number)',
    'shop_cart_statistic_byer_address_eform5' => 'Extend ADDRESS (Flat)',
    'shop_cart_statistic_byer_address_eform6' => 'Extend ADDRESS (Branch number)',
    'shop_cart_statistic_byer_email' = 'email@email.com',
	'shop_cart_statistic_byer_paymentmethod_selected' => 'PaymentMethod (Selected)',
    'shop_cart_statistic_group' = '',
    'shop_cart_statistic_referral_group' = '',
    'shop_cart_statistic_referral_url' = 'http://hotlist.biz',
    'shop_cart_statistic_referral_utm' = '',
    'shop_cart_statistic_site_manager_id_operator_current' = '1',
    'cat_page_extend_1c_exportsalestat' = 'http://hotlist.biz/',
    'buyer_id' = '1',

    'manager_id_operator' = '0',
    'order_products' = '284430,284436,284438',
    'order_products_article' = '200976_42|200982|200984_43',
    'order_products_num' = '1,1,1',
    'order_products_complectationid' = '409151,407678,409154',
    'order_products_prices' = '686,736,842',
    'order_products_currency' = 'UAH,UAH,UAH',
    'order_products_titles' = 'Adidas Originals Streetball Trainers FX9701|Shoe bag with pocket Kite Education College|ASICS Gel-Venture 8 Gs Trainers',
    'order_products_complectation_titles' = '42||43',
    'order_products_prices_without_discount' = ',,',
    'post' = '1596578917',
    'shop_cart_statistic_product_sendto_userid' = '1',
    'Save' = 'Save',
    'order_id' = 63738,
    'order_discount' = '',
    'time' = 1596578927,
    'delivery' = NULL,
    'delivery_id' = '3482',
    'referral_group' = '',
    'group' = '',
    'referral_url' = 'http://hotlist.biz/ru/pers_shop/sport_shoes/284438.htm',
    'referral_utm' = '',
    'site_url' = 'hotlist.biz',
    'transaction_id' = 63738,
    'crm_oder_id' = '123',
    'value' = '2264',
    'currency' = 'UAH',
    'items' = 
    array (
      0 = 
      array (
        'id' = '284430',
        'name' = 'Adidas Originals Streetball Trainers FX9701',
        'sku' = '200976_42',
        'variant' = '42',
        'quantity' = '1',
        'price' = '686',
        'currency' = 'UAH',
        'complectation_id' = '409151',
        'price_without_discount' = '',
      ),
      1 = 
      array (
        'id' = '284436',
        'name' = 'Shoe bag with pocket Kite Education College',
        'sku' = '200982',
        'variant' = '',
        'quantity' = '1',
        'price' = '736',
        'currency' = 'UAH',
        'complectation_id' = '407678',
        'price_without_discount' = '',
      ),
      2 = 
      array (
        'id' = '284438',
        'name' = 'ASICS Gel-Venture 8 Gs Trainers',
        'sku' = '200984_43',
        'variant' = '43',
        'quantity' = '1',
        'price' = '842',
        'currency' = 'UAH',
        'complectation_id' = '409154',
        'price_without_discount' = '',
      ),
    ),
  ),
)

'shop_cart_statistic_selldone' - '3', transaction status // 0 - Not processed, 1 - Order in processing, 3 - Processed, 2 - Canceled, 5 - Canceled (Out of stock), 6 - Canceled (Refused), delete - Delete order completely
'shop_cart_statistic_status_pay' - '0', Order status // 0-Not specified, 1 - Paid online, not verified, 4 - Paid online and verified, 2 - Paid, 3 - Prepaid, 5 - Awaiting payment
'shop_cart_statistic_selldone_from_seller' - '1', Customer status // 0 - Not processed, 1 - Processing, 3 - Sent/Processed, 2 - Canceled
'shop_cart_statistic_admin_note' - 'Note to the administrator',
'shop_cart_statistic_delivery_status' - '0', '0 - Not specified, 1 - Delivered, 2 - Not delivered, 3 - Awaiting dispatch, 4 - Delivered to the courier, 5 - On the way, 6 - Sent to the post office, 7 - Sent to the recipient's address, 8 - Delivered to the post office, 9 - Delivered to the recipient's address'
'shop_cart_statistic_crm_order_id' - 'XXX', 'External order code (for use in third party CRMs)'

You can get more information on the fields in the statistics of sales, when editing an order.

When changing goods in the order, a JSON request is sent with a list of items, as well as the order number:
 Code: JSON
	  array (
  'ORDER' = 
  array (
    'order_id' = 63738,
    'time' = 1596589307,
    'transaction_id' = 63738,
    'crm_oder_id' = '123',
    'value' = 2264,
    'currency' = 'UAH',
    'items' = 
    array (
      0 = 
      array (
        'id' = '284430',
        'name' = 'Adidas Originals Streetball Trainers FX9701',
        'sku' = '200976_42',
        'variant' = '42',
        'quantity' = '1',
        'price' = '686',
        'currency' = 'UAH',
        'complectation_id' = '409151',
      ),
      1 = 
      array (
        'id' = '284436',
        'name' = 'Shoe bag with pocket Kite Education College',
        'sku' = '200982',
        'variant' = 'XX',
        'quantity' = '1',
        'price' = '736',
        'currency' = 'UAH',
        'complectation_id' = '407678',
      ),
      2 = 
      array (
        'id' = '284438',
        'name' = 'ASICS Gel-Venture 8 Gs Trainers',
        'sku' = '200984_43',
        'variant' = '43',
        'quantity' = '1',
        'price' = '842',
        'currency' = 'UAH',
        'complectation_id' = '409154',
      ),
    ),
  ),
)
Access to sales statistics/JSON
Specify the key to access the sales statistics in the settings, in the tab «Store». If you need to access sales statistics by an external application, then you can execute (POST/GET or AJAX) a request to the address «/ajax.php?statistic_sell»

In this case, you must specify the key in the request, with MD5 encryption. For example, if you have specified the key «123», then in the request it will be т «202cb962ac59075b964b07152d234b70».

In this case, the request will look like this: : «/ajax.php?statistic_sell&key=202cb962ac59075b964b07152d234b70»
In the request, you can specify data for sorting or searching (GET/POST parameters), which can be taken on your sales statistics page in the admin center (/page.php?p=statistic_sell&mystat). Sorting and selection of parameters is carried out by GET/POST request, for example, «&sort_dateperiod=1week» means that sales statistics for the week will be displayed.

The data is displayed in JSON format.

Please note that if you use the page requests that are open to visitors, they will be able to access your sales statistics using your key.
Access to the price list of the store/Full unloading of the price list in CSV
Specify the key to access the price list of the store in the settings, in the tab «Store». Full unloading of the price list is located at «/csv_export_products.csv»

In this case, you must specify the key in the request, with MD5 encryption. For example, if you have specified the key «123», then in the request it will be «202cb962ac59075b964b07152d234b70».

In this case, the request will look like this: «/csv_export_products.csv?key=202cb962ac59075b964b07152d234b70»
In the request, you can specify data for sorting and selecting fields, which can be taken on your export page in the admin center (/page.php?p=submit_catalog_page&subpage&export_from_shop). Sorting and selection of parameters is carried out by a GET/POST request, for example, «&export_product_access=export_product_access means that it will unload a field with data on product access.

Data is displayed in CSV format.

The upload file is cached to reduce the load and is updated once a day. You can delete the cache using the «Clear XML/CSV upload cache» button.

Example: https://blog.hotlist.biz/csv_export_products.csv?key=202cb962ac59075b964b07152d234b70
Website promotion and SEO
Website Promotion Additional functions have been created on our platform, for SEO website promotion, for example, you can automatically add the words you need to all products of a certain category. In addition, by distributing your RSS feed on the sites of RSS-Aggregators, you can get a large number of free links for free, with constant updates.

More information about advertising and promotion methods is described on this page https://hotlist.biz/es/ user_guide_seo.html

We recommend that you enable "language-specific forwarding". This feature helps to avoid duplicate start page (duplicates are bad for SEO). Due to the fact that the domain.com start page and the domain.com/es/ language-bound page are the same page, we recommend enabling 301 redirects to the language-bound page. This can be done in the Admin Center, Settings, Start Page.
Access to the site
Access to the site You can restrict access to the site in the «Settings», in the «About site» tab.

If you plan to use your own domain, we recommend that you restrict access to the site on a temporary basis, and after purchasing a domain, open it.

If you need to Delete a site/Company information, then open the page for changing information about the Site/Company, and at the bottom, check the box "Delete site and all data" or "Remove site" After some time, information about the company/site will disappear from the search engine results.
Caching
Caching Thanks to caching, users who revisit your site spend less time loading pages. Cache headers should apply to all cached static resources, not just some of them (like images). Cached resources include JavaScript and CSS files, graphics and other files (multimedia content).

Cache of multimedia files

According to the recommendations from the Search Engines, as well as for the convenience of visitors, we Enabled on your site «Data Compression&кaquo;, as well as Caching of graphic files and JavaScripts. The caching period of these files – one week.  

If you upload a new image on top of the old one, you will see the old image until the browser cache is cleared. Each browser has its own way of clearing the cache. For example, in Chrome, you need to press «CTRL+F5» to force a cleanup. in a browser window on your site.

Server cache

In addition, to speed up the work of sites, we also implemented caching of some text data, which is cleared automatically when it changes. However, if you changed the content of the page/product/article/menu, but the changes were not displayed on the page, then you need to forcibly clear the cache using the link in the «Clear cache« admin panel on the page in which the changes were not displayed.

Maintaining the site and clearing the cache

The site caches data such as «Product variety», «Promotions» (including a timer), «RSS/XML/CSV» uploads, the number of products in a category. To clear the «RSS/XML/CSV» cache, select in the Admin Panel «XML/CSV/XLS/JSON» - «Clear cache of XML/CSV uploads».

To recalculate varieties, the number of goods in categories and clear the cache of Promotions, go to «Settings», «Store» and at the bottom of the list in the item «Recalculation of goods and categories» select the necessary parameters for recalculation and service.
This procedure is recommended to be done after a large update of data in the store, changing categories, adding and changing or deleting a large number of varieties, adding and changing categories, transferring a product to other categories, or if the timer expires in promotions.
Terms of use
The site administration does not carry out trading activities and is not responsible for the quality of the services/goods sold within Hotlist.biz. The users who added them are responsible for all posted goods and services.
Contacts: https://hotlist.biz/en/feedback.html