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

Widget Generator

Store categories 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.Run the «Widget Generator with Store Categories»How to insert a generated menu?
  • 1) You can use the auto-replace code by entering [MENU: shop_categories: vertical: products]

    You can use the following parameters in your code:
    • :vertical - vertical menu
    • :horizontal - horizontal menu (You can also display inside pages as blocks with different nesting levels. An additional style to the block can be specified by specifying the ID- "hotengine-categories-lists-horizontal")
    • :dropdown - dropdown menu on hover
    • :full - expanded list of categories
    • :list - a standard list of subcategories (displays the same list of subcategories as on the page of the main selected start-X category. When using list, only the start-X parameter is used)
    • :treelevel-X - Where X is the nesting level of the category. For example, if you need to place only the main categories and their child headings without entering their subsequent subcategories, then you can use the value "2"
    • :products - Show the number of products within a category
    • :dataattr - Add data-markup with category information (ID, number of child categories, number of products)
    • :googlenav - Add google markup (itemprop name and url)
    • :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 categories (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 menu, but want the categories to be inserted automatically. Then you need to insert JavaScript, CSS code, and shortcode [MENU ...]
    • :start-X - where X is the ID of the category to start with.
      This parameter is useful if you have the "Store" category first and subcategories in it. Then you can skip showing your main Store category in the menu.
    • :id- - create a DIV object with the specified ID, inside which the menu will be inserted. Can be used to customize the menu

    If you use the generator with the code [MENU: shop_categories ... then you do not need to update your menu values ​​when updating the number of products and categories.
    For example, in the end your embed code will look like this - [MENU: shop_categories: vertical: products], this means that a menu with your categories will be generated, vertical, indicating the number of products inside rubrics.
  • 2) You can insert the generated menu code manually. To do this, create Block/Menu, positioned on the left or right, and paste the code into it, written below. All fields must be inserted.

    If you insert the code manually, when you change the number of categories, you need to update the list in your generated menu as well. To do this, you only need to update the list of values, the code of the "HTML menu code" area.

  • Attention! If you use several menus on one page, then you do not need to re-insert Java Script and CSS style.

Generate vertical menu with personalized categories or paste as code [MENU:shop_categories:vertical]

Generate a vertical menu with categories and the number of products in them or paste as code [MENU:shop_categories:vertical:products]

Generate horizontal menu with custom categories or paste as code [MENU:shop_categories:horizontal]

Generate a horizontal menu with categories and the number of products in them or paste as code [MENU:shop_categories:horizontal:products]

Generate a horizontal hover dropdown menu with categories or paste as code [MENU:shop_categories:dropdown]

Generate a horizontal dropdown menu on hover with categories and the number of products in them or paste as code [MENU:shop_categories:dropdown:products]

Generate a list of all categories (full HTML list) or paste as code [MENU:shop_categories:full]

Generate a list of all categories (full HTML list) and quantity of products or paste as code [MENU:shop_categories:full:products]
Run the «Widget Generator with Store Categories»
JSON (?)