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

My articles Add article Export articles Import articles

Widget Generator

Articles widget

«Widget» is an interactive block of data for placement on a website. The widget can be generated using a special short code («ShortCode») which may include additional parameters. The generated code can be inserted into pages or Blocks/Menu.

How to insert a generated menu?

You can use the automatic replacement code by entering [MENU:blog_page_slider:htmlonly:cat_id-0:site-0:start-0:on_page-10]
You can fill in the list of values using the «Videjt with Articles» generator.
You can insert the generated menu code into blocks/menus or pages.
Attention! If you use several menus on one page, you do not need to insert the JavaScript and CSS style again.
By default, this JavaScript and CSS style is already embedded in the standard set of functions of your store. You can re-insert the code only if you need to change its design or functions.

The following parameters can be used in the code:

:cat_id- - category ID (only articles from this category will be displayed)
:site- - ID of your site, but inside your site you can not use
:on_page- - Number of articles displayed in the slider
:start- - slider start page, number from which to start browsing products. For example, if a page displays 6 articles and the starting number is 2, then articles from 6 to 12 will be displayed.
:description - Show short description
:repeat - repeat slides after the article list ends
:random - Show without ordering by ID
:one - Scroll one article only
:blog_id - article 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)
:order_by- - Sorting. 0 - by Date, 1 - By ID, 4 - By name
:sort_by- - Sorting. ASC - Ascending, DESC - Descending
:append - add new data at the end
:swipe - Add a swipe effect on touch (works only if :append and :carousel are not specified)
Instructions (required)
Attention! For this script to work, the following script must be installed on the page: <script src="/templates/scripts/hotengine-script-blog-list-base-slider-swipe.js"></script>
This parameter is activated if the main block with the list of articles (class="hotengine-blog-page-list-div") has the data-swipe="1" attribute (in the widget, this is done using the :swipe code). The script activates the forward or back scroll button.
:add-javascript - if this parameter is not added, it will only a list of articles (without javscript and css styles, which 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 the 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.

Attention! If you use several menus on one page, then you do not need to re-insert Java Script and CSS style.
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 article list:
Block generator with articles can be downloaded 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_blog.php». You can specify additional properties for displaying articles in the request. You can find a list of all possible values above. For correct display of articles, you need to add HTML wrapper and parent elements, as well as buttons for rewinding/continuing the list of articles (scrolling forward/backward). An example of such a wrapper and passing parameters is shown here - An example of loading a list of articles and passing parameters via AJAX/POST/GET.

Preview menu with articles

Preview

Code

Java Script

<span class="loading-spin"></span></div>`;
                const loader = contentDiv.querySelector(`.hotengine-blog-page-list-div-loading`);
                setTimeout(() => { if (loader) loader.style.opacity = "1"; }, 10);

const cacheParam = window.location.search.includes(`cacheclear`) ? `&cacheclear` : ``;
                const encodedParam = param.includes(`%3A`) ? param : encodeURIComponent(param);

fetch(`/ajax_get_list_blog.php?c=${c}&n=${n}${cacheParam}¶m=${encodedParam}`, {
                    method: `GET`,
                    credentials: `same-origin`,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    signal: (() => { const controller = new AbortController(); setTimeout(() => controller.abort(), 20000); return controller.signal; })()
                })
                .then(response => response.text())
                .then(data => {
                    if (loader) {
                        loader.style.opacity = "0";
                        setTimeout(() => {
                            loader.remove();
                            contentDiv.innerHTML = data;

contentDiv.querySelectorAll(`script`).forEach(oldScript => {
                                const newScript = document.createElement(`script`);
                                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                                oldScript.parentNode.replaceChild(newScript, oldScript);
                            });

if (typeof window.callback_hotengine_blog_page_list_div_button === `function`) {
                                window.callback_hotengine_blog_page_list_div_button();
                            }
                        }, 300);
                    }
                })
                .catch(() => {
                    if (loader) loader.remove();
                });
            }
        }
    });
})();
</script>

The script for loading the next and previous articles in the menu must be inserted either into some menu that opens on all pages of the site (for example, in the header or in the menu where you paste the generated HTML menu code).

CSS стиль

.hotengine-blog-page-list-content {
display:block;
position:relative;
}

.hotengine-blog-page-list-div { display:inline-block; max-width:90%;  }

.hotengine-blog-page-list-div-button {   position:absolute; z-index:2; 
  display:inline-block; width:32px; height:32px; top:0px;
 }
 
 .hotengine-blog-page-list-content { display:block;     margin: 0px 32px 0px 44px;}
 .hotengine-blog-page-list-content b { font-size:inherit; font-weight:inherit; text-align:left; display:block;}
 .hotengine-blog-page-list-content .hotengine-blog-content-read-more { text-align:right;}
 .hotengine-blog-page-list-content .footh { display:none; }

.hotengine-blog-page-list-div-button-right { right:0px;  margin:99px 5px 0px 0px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) -32px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-left {  left:0px; width:32px; height:32px; margin:99px 0px 0px 5px;
  background:url(/img/icon/shop/hotengine-shop-products-list-next-prev.png) 0px -32px  no-repeat;
 }
 
 .hotengine-blog-page-list-div-button-right:hover {  cursor:pointer;
  background-position:-32px 0px;
 }

.hotengine-blog-page-list-div-button-left:hover { cursor:pointer; 
  background-position:0px 0px;
 }

</style>

CSS код вставляйте в design editor, to the CSS styles tab, after removing "<style type="text/css">" at the beginning, and </style> at the end. If the code is not used in the CSS style editor, then the code can be installed without changes. .hotengine-blog-categories-menu-active {- highlighting the active item in the menu. Replace "color:red;" to your preferred color or style.

Show split code for menu