Only the users are allowed to enter the Central Administration. Login

Widget Generator

Shop item widget

«Widget» is an interactive block with data for placement on the site. The widget can be generated using a special shortcode («ShortCode»), which may contain additional parameters.How to insert a generated menu?

1) You can use the auto-replacement code by entering [MENU:shop_products_slider:htmlonly:pers_cat_id-0:cat_id-0:site-0:start-0:on_page-3:description:button-cart:lazy-0:bestseller:sale]

You can use the following parameters in your code:

:cat_id- - category ID hotlist.biz general catalog (only products from this category of the general catalog will be displayed)
:pers_cat_id- - category ID (only products from this category of your catalog will be displayed). Several values are allowed, separated by commas.
:subcategoriesproduct - Show products of all subcategories.
:site- - ID of your site, but inside your site it is possible not to use
:producer- - producer ID (only products from this category of producers, your catalog will be displayed. Several values are possible, separated by commas.
:producer_country- - country of manufacture (products only from this country of manufacture will be displayed. Text value).
:collection- - collection ID (only products from this category - collection, your catalog will be displayed). Several values are allowed, separated by commas.
:product_type- - Product type ID (only products of the specified type will be displayed. Several values are allowed, separated by commas.
:on_page- - The number of products displayed in the slider, the recommended number is 3
:start- - slider start page, number from which to start browsing products. For example, if the page displays 6 products, and the starting number is 2, then products from 6 to 12 will be displayed.
:button-cart - Show add to cart button
:button-compare - Show add to compare button
:description - Show a short description of the product
:rating-stars - Show Star Rating
:favorite-icon - Show Favorite Icon
:variety - Show Variety (only with paid hosting)
:random - Show without ordering by ID
:one - Scroll through one product only
:bestseller - Show only Bestsellers
:discount - Show only discounted products
:sale - Show only promotional products
:stock- - Stock (specify only certain stock status)
:new-products - Show only products marked as New
:reduced-price - Show only products marked as Reduced Price
:recently-viewed-products - Recently viewed products
:favorite-products - Favorite products
:search- - search query (text search by goods) [may be specified with a separation by the symbol «~» - is equivalent to the specification «AND»] or [may be specified with a separation by the symbol «||» - tantamount to clarifying «OR»]
:products_id- - product id (separated by commas, no spaces)
:lang- - the language of the displayed articles (if not specified, the language of the open page will be used)
:products_synonyms- - products Synonyms (word synonym )
:lazy - accelerated loading of images. 0 - On, 1 - Off. By default, the value from the general store settings is used if the lazy parameter is not specified
:order_by- - Sorting. 0 - By Item ID, 4 - By Product Name, 5 - By Priority, 1 - By Date, 2-By Price
:sort_by- - Sorting. ASC - Ascending, DESC - Descending
:price_from- - Price from
:price_to- - Price before
:repeat - repeat slides after the product list ends
:auto_width - Auto-width (the number of displayed cards changes)

:append - add new data at the end of CSS style when using the append parameter↓

In order for the button to add the remaining products under the list to be displayed at the bottom, you need to add the following css style. #product_list - id of the product block.

Code:CSS

#product_list #product_list .hotengine-shop-products-list-div-button-right:after{ content:'\2026'; color:#b5b5b5; font-family:Arial, Helvetica, sans-serif;}


#product_list .hotengine-shop-products-list-div-button-left {
    display:none!important;
}

:carousel - experimental owl-carousel function, scrolling with touch swipe support * Changing parameters↓

By default, the window size is determined using Javascript.
You can specify many additional parameters, the list of which is available here:Docs Options.
To set the parameter, use the template:
:carousel-autoplayTimeout-1000
:carousel-autoplaySpeed-5000
:carousel-autoplay-true
and so on (:carousel-PARAMETER-VALUE).

Alternatively, the option can be specified using the JavaScript attribute carousel -...
data-carousel-autoplayTimeout = "1000"
data-carousel-autoplaySpeed = "250"
data-carousel-autoplay = "true"
and so on (data-carouserl-PARAMETER = "value")

You can also extend the slider on top of the platform's standard slider using JavaScript.
Create a standard slider using the [MENU ... code and add .hotengine-shop-products-list-div-append class hotengine-shop-products-list-carousel to the block.
Example:

Code:JavaScript

<script>
  $(function(){
 if($(window).width()<900){ //if the window size is less than 900px.
  $(".hotengine-shop-products-list-div-append").addClass("hotengine-shop-products-list-carousel"); //add carousel
  $nw = $(window).width()-60; 
  $("#stones_product_list").css("width",$nw)
  $(window).on("resize", function(){
  $nw = $(window).width()-60; 
  $("#stones_product_list").css("width",$nw)
  
  })
  }
  
  });</script>

:htmlonly - only a list of products (no javscript and css styles that you need to insert yourself beforehand).
This option is useful if you want to create your own style for the slider. In this case, you need to insert JavaScript, CSS code, and a short code [MENU ...]
:id- - bind the ID to the main DIV. Can be used to customize the slider area

2) You can insert the generated menu code manually. To do this, create a Block/Menu, with a position at the top or bottom, and paste the code into it, written below. You can also paste the code inside the page. All fields must be inserted.

By default, this JavaScript and CSS style is already embedded in the standard set of functions of your store. You can only re-insert the code if you need to change its design or functionality. You don`t need to re-insert JavaScript code and CSS style.

Ajax loading the list of products:
The block generator with products can be loaded using a GET/POST/AJAX request. To do this, you need to make a request from your site (your domain) to the page «/ajax_get_list_shop.php». In the request, you can specify additional properties for displaying products. You can find a list of all possible values above. For the correct display of the style of the list of products, you need to add an HTML wrapper and parent elements, as well as buttons for rewinding/continuing the list of products (scrolling forward/backward). An example of such a wrapper and passing parameters is shown here - An example of loading a list of products and passing parameters via AJAX/POST/GET.

Show split code for menu
Or paste as code [MENU:shop_products_slider:pers_cat_id-0:cat_id-0:button-cart:lazy-0:repeat:site-0:start-0:on_page-3:description:bestseller:sale]
Be sure to replace the numbers 0 - with the values you want.