SaaS platform for e-commerce
No tienes acceso a esta página. Si no ha recibido la autenticación, entonces hazlo - Iniciar sesión

HTML Widgets

HTML Widgets«Widget HTML» - is a set of independent HTML elements to be inserted into the pages of the site.Additional blocks of ready-made elements and icons are available when editing pages by clicking the «Block Library» button or on the Block Library page


Accordion

  • Accord 1

    The accordion is an interface that allows the user to show and hide content by clicking on the headings.

  • Accord 2

    The accordion is an interface that allows the user to show and hide content by clicking on the headings.

  • Accord 3

    The accordion is an interface that allows the user to show and hide content by clicking on the headings.



To insert this block, copy the code from the field below and paste it on the required page:


Tabs
Tabs are an interface that allows the user to switch between and display different content by clicking on the headings.
Tabs are an interface that allows the user to switch between and display different content by clicking on the headings. #2
Tabs are an interface that allows the user to switch between and display different content by clicking on the headings. #3
Tabs are an interface that allows the user to switch between and display different content by clicking on the headings. #4



To insert this block, copy the code from the field below and paste it on the required page:


Titles

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Title 7




Для використання цього стилю, додайте код з поля нижче, у редактор дизайну у вкладку CSS стилі:


Callback block
Llámanos y obtén una consulta gratis
o
enviar una solicitud
Enviar solicitud









To insert this block, copy the code from the field below and paste it on the required page:

For example, you can create a Block/Menu and place it in the Footer of the site.
Replace phone numbers. If using only one number, remove the callblock_block_phone2 line.
Replace XXX with your form ID, in the button text: data-dialog-form_id="XXX".


Comments / Feedback Slide
Page and data
- Search



Responsive
Autoplay & navigation




Stars, author & date position






To insert this block, copy the code from the field below and paste it on the required page:

This widget allows you to load Comments/Reviews in JSON format. The page type and ID are set in the element with the class "html_widget_reviews_ajax_load_comments". Additional settings: data-items (reviews per block), data-responsive (JSON breakpoints, e.g. {"1000":{"items":2,"navPosition":"sides"},"600":{"items":1}}), data-autoplay, data-autoplay-timeout. The widget style and script can be changed by downloading files from "/templates/html_widgets/html_widget_reviews/".

Button «Add review»

Inserting a form to add a review can be implemented using a script that responds to clicking an element with the class "html_widget_reviews_ajax_load_comments_form". In this way, you can use the feedback widget on any page, as well as display a form for adding a comment when you click on an element. To activate the form on page load, without clicking on html_widget_reviews_ajax_load_comments_form, you can add <script>document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(`.html_widget_reviews_ajax_load_comments_form`).forEach(el => el.click()); });</script>


Offers mosaic - Search



Product name 1

Product Description 1. A description of the properties of the product or offer. The text block needs to be changed.

Show more
Product name 2

Product Description 2. A description of the properties of the product or offer. The text block needs to be changed.

Show more
Product name 3

Product Description 3. A description of the properties of the product or offer. The text block needs to be changed.

Show more
To insert this block, copy the code from the field below and paste it on the required page:

This method requires manually selecting products to display. If you want to automatically and quickly create a similar product list, use the «Product Widget» and enable the option «Split the block into two parts». The mosaic effect is created using the CSS style
«.hotengine-shop-products-mosaic-sides .hotengine-shop-product-list-block:nth-child(even) { flex-direction: row-reverse; }».


Google Reviews
«This module allows you to add reviews about your company to the website.

To use the widget, you need to configure the Google «Api Key» and «PlaceID». This can be done in the «Settings» section, under the «Comments and Social Plugins» tab, in the "Google Reviews" section.
»
To insert this block, copy the code from the field below and paste it on the required page:


Google Reviews demo


Google Reviews + Owl Carousel



Google Reviews + Owl Carousel demo

Google Reviews + Owl Carousel demo + Auto Responsive


Googe Places Manual

Additional Attributes


Attributes are specified in the HTML code of the «#google-place-reviews» block, for example, «data-reviews-per-page="5" data-min-rating="3" data-reviews_sort="newest" data-orderby="date_desc" data-orderby2="id_asc"».
  • data-reviews-per-page — the number of reviews displayed on one page.
    Example: data-reviews-per-page="10" (shows 10 reviews per page).
  • data-min-rating — the minimum rating (from 1 to 5) a review must have to be displayed.
    Example: data-min-rating="4" (only reviews with a rating of 4 and above will be shown).
  • data-reviews_sort — sorting of reviews requested from Google.
    Available values:
    - newest — shows the newest reviews.
    - most_relevant — shows the most relevant reviews (according to Google).
    Example: data-reviews_sort="newest" (loads the latest reviews).
  • data-orderby — sorting of reviews loaded from the database.
    Available values:
    - rating_asc — rating in ascending order.
    - rating_desc — rating in descending order.
    - date_asc — date in ascending order (oldest first).
    - date_desc — date in descending order (newest first).
    - id_asc — ID in ascending order.
    - id_desc — ID in descending order.
    Example: data-orderby="date_desc" (sorts by date, newest reviews first).
  • data-orderby2 — secondary sorting (data-orderby and data-orderby2 values are used together).
    Used similarly to data-orderby.
    Example: data-orderby="date_desc" data-orderby2="id_asc" (sorts first by date, then by ID).
SpoilerA spoiler is a page or text element that initially hides part of the information and expands when clicked. We implemented the spoiler using CSS only, without any additional scripts.

Show / Hide
Hidden text: BooStore.pro is a platform for creating and managing websites and online stores.


Built-in default spoiler style
Code: CSS
/*default spoiler css */
details.spoiler summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.2em;
  cursor: pointer;
}
details.spoiler summary::-webkit-details-marker {
  display: none; 
}
details.spoiler.spoiler-icon summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
details.spoiler.spoiler-icon summary::after {
  content: "\25B6"; 
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}
details.spoiler.spoiler-icon[open] summary::after {
  content: "\25BC"; 
}
/*STYLE FORM END */
To insert this block, copy the code from the field below and paste it on the required page:
Price range swiper - Price range selection slider in the search filterPrice Range Swiper is a slider for selecting a price range (from and to) in the search filter, with "From" and "To" handles displayed at the top of the search form.


To install this code, follow these steps:

  1. Copy the JavaScript code.
  2. Create a menu block and paste the copied code into it.
  3. Specify the required parameters in the script loading attributes (currency «$, €, br., ₽, ₴, тг., zł», price range).

To connect the styles:

  1. Copy the CSS style below.
  2. Paste it into the design editor under the «CSS styles» tab.

To insert this block, copy the code from the field below and paste it on the required page:

Для використання цього стилю, додайте код з поля нижче, у редактор дизайну у вкладку CSS стилі: