Скрипты для платформы

Скрипты для платформы SaaS Hotlist.biz CMS
Инструкция по использования скриптов
Вы можете скопировать код для вставки файла скрипта или код скрипта, и вставить в Блок/Меню на вашем сайте. Все скрипты рекомендуется вставлять в один блок/меню. Расположить блок/меню можно в «Служебные теги перед тегом Body (Header Meta)», «Шапка сайта (Header)» или «Низ сайта (Footer)».


Всплывающее окно
Инструкции, пример, а также автоматическая генерация всплывающих окон доступны по этой ссылке: Генератор всплывающих окон

[Пример кнопки - всплывающее окно с видео]

Всплывающее окно с формой
Инструкции, пример, а также автоматическая генерация всплывающих окон с формой доступны по этой ссылке: Генератор всплывающих окон с формой

Замена текста о выборе разновидности
Сообщение о необходимости выбрать разновидность товара реализовано в диалоговом окне при помощи CSS элемента. Заменить надписи вы можете в CSS стилях:
 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."; }


Для того, чтобы заменить сообщение о не выбранной разновидности, в карточке товара, необходмо добавить код функции callback_hotengine_variety_require (если не выбрана разновидность, перед вызовом диалогового окна сообщение). Функция запускается в случае, когда не выбрана разновидность.

В карточке товара укажите текст «Заголовок разновидности». В зависимости от текста изменяется значение для класса «.hotengine-shop-product-variety-title». Например, в случае, если указан текст «Выберите вес:», то класс заголовка будет «.hotengine-shop-product-variety-title_24». Проверить класс при изменении значений вы можете просмотрев исходный код страницы, после указания заголовка разновидности.

Код замены текста:
 Code: html
<script type="text/javascript"> 
  <!-- 
  function callback_hotengine_variety_require(){

if($(".hotengine-shop-product-variety-title_24").length > 0){
  $text = "Вы не выбрали вес!";
  } else if($(".hotengine-shop-product-variety-title_38").length > 0){
  $text = "Вы не выбрали количество!";
  } else if($(".hotengine-shop-product-variety-title_26").length > 0){
  $text = "Вы не выбрали цвет!";
  } else {
  $text = "Вы не выбрали разновидность!";
  }

 $("body").append('<div id="hotengine-shop_cart_add_error_wrong_variety"><b align="center" style="display:block;">'+$text+'</b><a class="hotengine-shop_cart_add_error_wrong_variety-btn-close" onclick=\\'return $("#hotengine-shop_cart_add_error_wrong_variety").dialog("close").remove();\\'></a></div>');

  
  $("#hotengine-shop_cart_add_error_wrong_variety").dialog({
  width: $(window).width() > 420 ? 410 : "90%",
  minWidth: "300px",
  modal: true,
  stack: true,
 sticky: true,
  title: "",
  close: function(){ $(this).remove(); },
  open: function(){
  $(document).on("click",".ui-widget-overlay",function(){
  $("#hotengine-shop_cart_add_error_wrong_variety").dialog("close").remove();
  })
  return false; 
  }
  });
  
  return false; 
  }
  -->
  </script>

Всплывающее окно будет содержать указанный текст в переменной $text.

Аналогичная функция при просмотре списка товаров, callback_hotengine_variety_require_list($href), дополнена ссылкой на карточку товара, и соответственно может быть использована в отображаемом диалоге.

Сообщения после авторизации или активации аккаунта
Для того, чтобы создать всплывающее окно с сообщением о статусе авторизации или активации, необходимо создать функцию callback_hotengine_authorize_result


callback_hotengine_authorize_result($result) - функция после авторзиации пользователя ($result -рузальтат выполнения: 1-успешно, 2-ошибка логина или пароля, 3-аккаут заблокирован, 4-необходима активация,5-Активация прошла успешно,6-Не верный код Captcha)

Пример стандартной функции, которая будет вызвана при отсутствии вашей собственной функции:
/templates/scripts/hotengine-script-callback_hotengine_authorize_result.js
Текстовые сообщения загружаемые при помощи CSS стилей:
/templates/styles/hotengine-script-callback_hotengine_authorize_result.css

Сопутствующие товары в корзине / с товаром покупают

Ajax загрузка списка товаров:
Генератор блока с товарами можно загрузить при помощи GET/POST/AJAX запроса. Для этого необходимо выполнить запрос с вашего сайта (вашего домена) на страницу «/ajax_get_list_shop.php». В запросе можно указать дополнительные свойства для отображения товаров. Список всех возможных значений вы можете узнать на странице «Виджет с товарами магазина». Для корректного отображения стиля списка товаров, необходимо добавить HTML оболочку и родительские элементы, а также кнопки для перематывания/продолжения списка товаров (прокрутка вперед/назад). Пример такой оболочки показан в скрипте ниже.


При просмотре корзины создается элемент микроразметки, который содержит список "С товаром покупают". Список таких товаров можно отобразить во всплывающем окне или в виде блока с товарами.
Включите микроразметку "С товаром покупают" при просмотре корзины, в настройках сайта, во вкладке "Магазин".
Разместите один из вариантов отображения списка с товарами на странице "cart_send" - [Корзина / Форма заказа из корзины], в тексте страницы.

Код добавления списка под кнопкой "Продолжить покупки":
 Code: html
<script type="text/javascript"><!--
  $(function(){ 
  if(!$("#hotengine-shop-cart-form").length){
  //check bought with values 
  $product_in_cart = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page_cart_products_list']");
  $bought_with_all = '';
$product_in_cart.each(function(){
  if(typeof $product_in_cart !== typeof undefined && $product_in_cart !== false && $product_in_cart !='undefined' && $product_in_cart !=''){
  var $boughtwith = $(this).attr("data-hotengine-marking-boughtwith");
  
  if(typeof $boughtwith !== typeof undefined && $boughtwith !== false && $boughtwith !='undefined' && $boughtwith !='' && $boughtwith.length > 0){
  if($bought_with_all!=''){ $bought_with_all += ','; }
  $bought_with_all += $boughtwith;
  }
  
  
  
  }
});
  //check bought with values 

if($bought_with_all!=''){   //we have a sku or id list

 $product_in_cart_id = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page_cart_products_list']");
var $shop_catalog_page_remove = [];
$product_in_cart.each(function(){
  if(typeof $product_in_cart !== typeof undefined && $product_in_cart !== false && $product_in_cart !='undefined' && $product_in_cart !=''){
  
  $shop_catalog_page_remove.push($(this).attr("data-hotengine-marking-shop_catalog_page_id"));
  $shop_catalog_page_remove.push($(this).attr("data-hotengine-marking-shop_catalog_page_sku"));
  $site_id = $(this).attr("data-hotengine-marking-site_id");
  }
  });

var $bought_with_all = $bought_with_all.split(',');
$bought_with_all = $.grep($bought_with_all, function(value){
  return $.inArray(value, $shop_catalog_page_remove) < 0;
  });

$bought_with_all.filter(Boolean);
if($bought_with_all.length>0){
var $bought_with_all = $bought_with_all.join(',')
//USING LIST OF BOUGHT WITH AS PRODUCT LIST 

 var $onpage = "20";
  var $param = ':shop_products_slider:htmlonly:products_id-'+$bought_with_all+':site-'+$site_id+':start-0:on_page-'+$onpage+':description:button-cart:id-hotengine-shop-products-list-boughtwith';
  $('.hotengine-shop-cart_continue_link').after('<div id="hotengine-shop-products-list-boughtwith" style="display:none;"><div class="hotengine-shop-products-list-div" data-hotengine-shop-products-list-param="'+$param+'" data-product_limits="'+$onpage+'"><span class="hotengine-shop-products-list-div-button-left hotengine-shop-products-list-div-button hotengine-shop-products-list-right" data-site-id="'+$site_id+'" data-product_limits_start_n="0"></span><span class="hotengine-shop-products-list-content"></span><span class="hotengine-shop-products-list-div-button-right hotengine-shop-products-list-div-button, hotengine-shop-products-list-right" data-site-id="'+$site_id+'" data-product_limits_start_n="0"></span></div></div>');
 
 
  $("#hotengine-shop-products-list-boughtwith .hotengine-shop-products-list-content").load("/ajax_get_list_shop.php?get&c="+$site_id+"&n=0&onpage="+$onpage+"&param="+$param , function(){

$(".hotengine-shop-products-list-content-loading").hide("fast", function(){ 
  $(".hotengine-shop-products-list-content-loading").remove(); 
  }); 

  
  if($("#hotengine-shop-products-list-boughtwith .hotengine-shop-products-list-content").is(':not(:empty)') && $("#hotengine-shop-products-list-boughtwith .hotengine-shop-products-list-content .hotengine-shop-product-list-block-empty").length < 0){
  $("#hotengine-shop-products-list-boughtwith").show(); 
    if(typeof(callback_hotengine_shop_products_list_div_button) === "function"){ 
    callback_hotengine_shop_products_list_div_button(); 
    }
  }
  
  }); 


//USING LIST OF BOUGHT WITH AS PRODUCT LIST 
} //if($bought_with_all.length>0){
} //if($bought_with_all!=''){
}
});
  //--></script>




Список будет отображаться только в случае, когда обнаружены сопутствующие товары.
#hotengine-shop-products-list-boughtwith - укажите стиль для блока со списком товаров.
:append - отображать кнопку "Показать еще" внизу (добавье :append перед :button-cart)
Для отображения кнопки внизу, добавьте к "hotengine-shop-products-list-right" class "hotengine-shop-products-list-append", а также hotengine-shop-products-list-div-append к class`у hotengine-shop-products-list-div


Пример CSS стиля:
 Code: CSS

#hotengine-shop-products-list-boughtwith:before{ content:"С выбранными товарами покупают:"; display:block; text-align:center; line-height:30px;}
#hotengine-shop-products-list-boughtwith {margin-top:50px;}





Код всплывающего окна со списком:
 Code: html
<script type="text/javascript"><!--
  $(function(){ 
if(!$("#hotengine-shop-cart-form").length){
  //check bought with values 
  $product_in_cart = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page_cart_products_list']");
var $bought_with_all = '';
$product_in_cart.each(function(){
  if(typeof $product_in_cart !== typeof undefined && $product_in_cart !== false && $product_in_cart !='undefined' && $product_in_cart !=''){
  var $boughtwith = $(this).attr("data-hotengine-marking-boughtwith");
  
  if(typeof $boughtwith !== typeof undefined && $boughtwith !== false && $boughtwith !='undefined' && $boughtwith !='' && $boughtwith.length > 0){
  if($bought_with_all!=''){ $bought_with_all += ','; }
  $bought_with_all += $boughtwith;
  }
  
  
  
  }
});
  //check bought with values 

if($bought_with_all!=''){   //we have a sku or id list

 $product_in_cart_id = $(".hotengine-marking[data-hotengine-marking-type='shop_catalog_page_cart_products_list']");
var $shop_catalog_page_remove = [];
$product_in_cart.each(function(){
  if(typeof $product_in_cart !== typeof undefined && $product_in_cart !== false && $product_in_cart !='undefined' && $product_in_cart !=''){
  
  $shop_catalog_page_remove.push($(this).attr("data-hotengine-marking-shop_catalog_page_id"));
  $shop_catalog_page_remove.push($(this).attr("data-hotengine-marking-shop_catalog_page_sku"));
  $site_id = $(this).attr("data-hotengine-marking-site_id");
  }
  });

var $bought_with_all = $bought_with_all.split(',');
$bought_with_all = $.grep($bought_with_all, function(value){
  return $.inArray(value, $shop_catalog_page_remove) < 0;
  });

$bought_with_all.filter(Boolean);
if($bought_with_all.length>0){
var $bought_with_all = $bought_with_all.join(',')
//USING LIST OF BOUGHT WITH AS PRODUCT LIST 
 var $width='800'; //winodw width at start
  var $product_width = '350'; //product width
  if($width>$(window).width()){ 
  $width = $(window).width()-30; //resize to window widrth 
  };
  var $onpage = Math.round($width/$product_width);  //count product on one window
  var $param = ':shop_products_slider:htmlonly:products_id-'+$bought_with_all+':site-'+$site_id+':start-0:on_page-'+$onpage+':description:button-cart:auto_width:id-hotengine-shop-products-list-boughtwith';
if (typeof $bought_with_all !== typeof undefined && $bought_with_all !== false && $bought_with_all !== "undefined" && $bought_with_all.length > 0 && $bought_with_all!=""){
  var $title = "С выбранными товарами покупают:";
  $("body").append('<div id="hotengine-bought_with-window"><div id="hotengine-shop-products-list-boughtwith"><div class="hotengine-shop-products-list-div" data-hotengine-shop-products-list-param="'+$param+'" data-product_limits="'+$onpage+'"><span class="hotengine-shop-products-list-div-button-left hotengine-shop-products-list-div-button" data-site-id="'+$site_id+'" data-product_limits_start_n="0"></span><span class="hotengine-shop-products-list-content"></span><span class="hotengine-shop-products-list-div-button-right hotengine-shop-products-list-div-button" data-site-id="'+$site_id+'" data-product_limits_start_n="0"></span></div></div><br/><a class="hotengine-bought_with-window-btn-close" onclick=\'return $("#hotengine-bought_with-window").dialog("close").remove();\'></a></div>');
$("#hotengine-shop-products-list-boughtwith .hotengine-shop-products-list-content").load("/ajax_get_list_shop.php?get&c="+$site_id+"&n=0&onpage="+$onpage+"&param="+$param , function(){
$(".hotengine-shop-products-list-content-loading").hide("fast", function(){ 
  $(".hotengine-shop-products-list-content-loading").remove(); 
  }); 

if ($("#hotengine-bought_with-window .hotengine-shop-products-list-content .hotengine-shop-product-list-block span").length > 2){
  $("#hotengine-bought_with-window").dialog({
  width: $width+"px",
  minWidth: $width+"px",
  modal: true,
  stack: true,
  sticky: true,
  title: $title,
  close: function(){ $(this).remove(); },
  open: function(){
  $(document).on("click",".ui-widget-overlay",function(){
  $("#hotengine-bought_with-window").dialog("close").remove();
    if(typeof(callback_hotengine_shop_products_list_div_button) === "function"){ 
     callback_hotengine_shop_products_list_div_button(); 
    }
  })
  }
  });
  
  } else { $("#hotengine-bought_with-window").hide(0);}
  
  }); 
  }


//USING LIST OF BOUGHT WITH AS PRODUCT LIST 
} //if($bought_with_all.length>0){
} //if($bought_with_all!=''){
}
});
  //--></script>



Окно будет всплывать только в случае, когда обнаружены сопутствующие товары.

.hotengine-bought_with-window-btn-close - укажите стиль для кнопки закрытия окна (отображается под списком товаров в окне).

Пример CSS стиля:
 Code: CSS

.hotengine-bought_with-window-btn-close:before{ content:"Закрыть";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);  }




Список «С товаром покупают» дополнительно отображается и при просмотре карточки товара. Если вам необходимо сделать всплывающее окно или список товаров, отображаемый только в корзине, то используйте «Список товаров для рассылки». В таком случае замените «data-hotengine-marking-boughtwith» на «data-hotengine-marking-boughtwith-email»

Код всплывающего окна со списком после добавления товара в корзину (callback_hotengine_cart_plus_after_boughtwith):

Функция callback_hotengine_cart_plus_after_boughtwith вызывается после добавления товара в корзину и содержит значение списка "с товаром покупают".

 Code: html
<script type="text/javascript"><!--
function callback_hotengine_cart_plus_after_boughtwith($bought_with_all){
if($bought_with_all!=''){   //we have a sku or id list
  //USING LIST OF BOUGHT WITH AS PRODUCT LIST 
  var $width='800'; //winodw width at start
  var $product_width = '350'; //product width
  if($width>$(window).width()){ 
  $width = $(window).width()-30; //resize to window widrth 
  };
  var $onpage = Math.round($width/$product_width);  //count product on one window
  var $param = ':shop_products_slider:htmlonly:products_id-'+$bought_with_all+':start-0:on_page-'+$onpage+':description:button-cart:auto_width:id-hotengine-shop-products-list-boughtwith';
 var $title = "С выбранными товарами покупают:";
  $("body").append('<div id="hotengine-bought_with-window"><div id="hotengine-shop-products-list-boughtwith"><div class="hotengine-shop-products-list-div" data-hotengine-shop-products-list-param="'+$param+'" data-product_limits="'+$onpage+'"><span class="hotengine-shop-products-list-div-button-left hotengine-shop-products-list-div-button"  data-product_limits_start_n="0"></span><span class="hotengine-shop-products-list-content"></span><span class="hotengine-shop-products-list-div-button-right hotengine-shop-products-list-div-button" data-product_limits_start_n="0"></span></div></div><br/><a class="hotengine-bought_with-window-btn-close" onclick=\'return $("#hotengine-bought_with-window").dialog("close").remove();\'></a></div>');
  $("#hotengine-shop-products-list-boughtwith .hotengine-shop-products-list-content").load("/ajax_get_list_shop.php?n=0&onpage="+$onpage+"&param="+$param , function(){
  $(".hotengine-shop-products-list-content-loading").hide("fast", function(){ 
  $(".hotengine-shop-products-list-content-loading").remove(); 
  }); 

  if ($("#hotengine-bought_with-window .hotengine-shop-products-list-content .hotengine-shop-product-list-block span").length > 2){
  $("#hotengine-bought_with-window").dialog({
  width: $width+"px",
  minWidth: $width+"px",
  modal: true,
  stack: true,
  sticky: true,
  title: $title,
  close: function(){ $(this).remove(); },
  open: function(){
  $(document).on("click",".ui-widget-overlay",function(){
  $("#hotengine-bought_with-window").dialog("close").remove();
     if(typeof(callback_hotengine_shop_products_list_div_button) === "function"){ 
      callback_hotengine_shop_products_list_div_button(); 
     }
  })
  }
  });
  
  }
  
  }); 
  

//USING LIST OF BOUGHT WITH AS PRODUCT LIST 
} //if($bought_with_all!=''){
  }
//--></script>

Функцию callback_hotengine_cart_plus_after_boughtwith можно заменить на callback_hotengine_cart_plus_after_boughtwith_email, для отображения такого же списка но для email рассылки (E-mail рассылка других товаров).

Окно будет всплывать только в случае, когда обнаружены сопутствующие товары.

.hotengine-bought_with-window-btn-close - укажите стиль для кнопки закрытия окна (отображается под списком товаров в окне).

Пример CSS стиля:
 Code: CSS

.hotengine-bought_with-window-btn-close:before{ content:"Закрыть";}
.hotengine-bought_with-window-btn-close {
  display:block;
  background:none;
  width:110px;
  line-height:38px;
  height: auto;
  padding: 0px 0px;
  white-space:nowrap;
  background: #4f86b1;
  cursor: pointer;
  transition-delay: 0;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  text-shadow:1px 1px 1px rgba(1, 39, 106, 1);
  color: #fff!important;
  text-decoration: none;
  margin:-10px auto 0px auto;
  text-align: center;
}
.hotengine-bought_with-window-btn-close:hover { background:#24689E; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);  }





Функция после добавления товара в корзину. Оповещение о размере скидки покупателя

Функция callback_hotengine_cart_plus_after вызывается после добавления товара в корзину. В данном примере реализовано оповещение о размере скидки покупателя, если она есть. Данные берутся из микроразметки data-hotengine-cart-discount в корзине.

 Code: html
<script type="text/javascript">
  <!--
  function callback_hotengine_cart_plus_after(){
  var $stick_cart = $(".hotengine-shop-cart-sticker-cart-cart");
  if (typeof $stick_cart !== typeof undefined && $stick_cart !== false && $stick_cart !== "undefined" && $stick_cart.length > 0){
  var $your_discount = $stick_cart.attr("data-hotengine-cart-discount");
  if($your_discount!='' && $your_discount!= undefined){ $("#cart").after('<span class="hotengine-your_discount">'+$your_discount+'</span>'); }
  }
  }
$(function(){
  callback_hotengine_cart_plus_after();
  });
  -->
  </script>

Для того, чтобы оповщение вызывалось не только после добавления товара в корзину, необходимо продублировать скрипт проверки наличия микроразметки о скидке. Для примера это реализовано при помощи дополнительного вызова функции callback_hotengine_cart_plus_after(); без добавлени товара в корзину.

Пример CSS стиля:
 Code: CSS
.hotengine-your_discount  { 
    white-space: nowrap;
    position: absolute;
    margin-top: -32px;
    right: 47px;
    background: #f00;
    color: #fff;
    border-radius: 50px 50px 0px 50px;
    line-height: 30px;
    width: 50px;
    opacity: 0.9;
    text-align: center;
  }






Загрузка списка статей с помощью Javascript

Ajax загрузка списка статей:
Генератор блока со статьями можно загрузить при помощи GET/POST/AJAX запроса. Для этого необходимо выполнить запрос с вашего сайта (вашего домена) на страницу «/ajax_get_list_blog.php». В запросе можно указать дополнительные свойства для отображения статей. Список всех возможных значений вы можете узнать на странице «Виджет со статьями». Для корректного отображения статей, необходимо добавить HTML оболочку и родительские элементы, а также кнопки для перематывания/продолжения списка статей (прокрутка вперед/назад). Пример такой оболочки показан в скрипте ниже.




 Code: html
<div class="blog-page-list-AJAXLOAD">
</div>
<script type="text/javascript"><!--
  $(function(){ 
  $blog_marking = $(".hotengine-marking[data-hotengine-marking-type='blog_catalog_page']");
  if(typeof $blog_marking !== typeof undefined && $blog_marking !== false && $blog_marking !='undefined' && $blog_marking !=''){
  
  $site_id = 'XXXX';
  $blog_cat_id = $blog_marking.attr("data-hotengine-marking-blog_cat_page_catid");

 var $onpage = "4"; 
  var $param = ':blog_page_slider:htmlonly:cat_id-'+$blog_cat_id+':site-'+$site_id+':start-0:on_page-'+$onpage+':description:append:id-hotengine-blog-page-list-AJAXLOAD';
  $('.blog-page-list-AJAXLOAD').html('<div id="hotengine-blog-page-list-AJAXLOAD" style="display:none;"><div class="hotengine-blog-page-list-div hotengine-blog-page-list-div-append" data-hotengine-blog-page-list-param="'+$param+'" data-blog_limits="'+$onpage+'"><span class="hotengine-blog-page-list-div-button-left hotengine-blog-page-list-div-button hotengine-blog-page-list-append" data-site-id="'+$site_id+'" data-blog_limits_start_n="0"></span><span class="hotengine-blog-page-list-content"></span><span class="hotengine-blog-page-list-div-button-right hotengine-blog-page-list-div-button hotengine-blog-page-list-append" data-site-id="'+$site_id+'" data-blog_limits_start_n="0"></span></div></div>');
  
  
  $("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content").load("/ajax_get_list_blog.php?c="+$site_id+"&n=0&onpage="+$onpage+"&param="+$param , function(){
$(".hotengine-blog-page-list-content-loading").hide("fast", function(){ 
  $(".hotengine-blog-page-list-content-loading").remove(); 
  }); 
  
  
  if($("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content").is(':not(:empty)')  && $("#hotengine-blog-page-list-AJAXLOAD .hotengine-blog-page-list-content .hotengine-blog-product-list-block-empty").length < 0){
  $("#hotengine-blog-page-list-AJAXLOAD").show(); 
  }
  
  }); 

 
  }
});
  //--></script>


Данный код загружает статьи, как при помощи "Генератора блока/меню, слайдер со статьями". В данном скрипте загрузка происходит с заменой родителькой категории списка статей, который определяется при помощи микроразметки.
XXXX - ID сайта.
$onpage - количество статей на одной странице (слайде)
$blog_cat_id - категорий каталога, которая в примере указывается при помощи микроразметки из данный открытой статьи.
.blog-page-list-AJAXLOAD - Блок в который загружаются статьи.


Загрузка статьи с помощью Javascript в JSON формате

Скрипт загрузки статьи в JSON формате

Данные статьи доступны по запросу /ajax.php?json&blog_cat_p=XX

  • XX - ID статьи

Запрос работает только с указанием вашего домена, например http://example.com/ajax.php?json&blog_cat_p=0


 Code:
<script type="text/javascript">
function decodeHtml(str)
  {
  var map =
  {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;#039;': "'"
  };
  return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
  }
$(function(){
  $.getJSON("/ajax.php?json&blog_cat_p=14673", function(blog){
   if(Object.keys(blog).length > 0){ 
    // full parameters console.log(blog);
    console.log(decodeHtml(blog.blog_cat_page_title_inpage));
    console.log(decodeHtml(blog.blog_cat_page_description));
    console.log(decodeHtml(blog.blog_cat_page_text));
    console.log(decodeHtml(blog.blog_cat_page_datestamp));
   } 
  });
});
</script>


Стилизация поискового фильтра (скрытие списка значений при нажатии)

Если вам необходимо сделать скрытие/раскрытие значений поискового фильтра, то вы можете использовать скрипт из примера ниже. Скрипт записывает ID блока со списком значений в Cookies и отображает/скрывает его в соответствии с выбранным пользователем вариантом.
Внимание! Для использования поискового фильтра, сначала создайте «Тип продукта» и укажите значения для вида характеристики. Данный скрипт рекомендуется использовать для «Множественного значения».



 Code: html
<script><!--
  /*FILTER STYLE*/
  $(function(){
$("#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block").each(function(){
 if ($.cookie("scptbt"+$(this).attr("data-id"))){ 
  $(this).find(".shop_catalog_product_types_block_title").addClass("scptbt_ishidden");
  $(this).find(".shop_catalog_product_types_block_value").css({"max-height":"0px"});
  }
  })

$(document).on('click','#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block_title',function(){
  var thise = $(this);
  var sptelem = $(this).next(".shop_catalog_product_types_block_value");
  if(sptelem.outerHeight() < 1){
  sptelem.css({"max-height":"unset"});
  thise.removeClass("scptbt_ishidden");
  if ($.cookie("scptbt"+thise.parent().attr("data-id"))){ $.cookie('scptbt' + thise.parent().attr("data-id"), null, {expires: null, path: '/'});	}
  } else {
  sptelem.css({"max-height":"0px"}); 
  thise.addClass("scptbt_ishidden");
  $.cookie('scptbt' + thise.parent().attr("data-id"), true, {expires: null, path: '/'}); 
  }
  
  
  })

})
  /*FILTER STYLE*/
  --></script>


Css стиль для заголовка (иконка):

 Code: css
#search_smart_hotengine-search_form_block .shop_catalog_product_types_block_title:after{

position: relative;
    content: "";
    display: inline-block;
    top: -2px;
    left: 10px;
    width: 8px;
    height: 5px;

background: url(/templates/styles/menu_arrow/arrow-down.svg) no-repeat center center; background-size: 15px; opacity: 0.3;
}
.scptbt_ishidden:after{
 transform: rotate(270deg);
}



Создание собственной сортировки списка товаров

Если вам необходимо создать собственную форму сортировки товаров, то это можно сделать при помощи передачи GET переменных. Ниже найдете инструкцию по сохранению выбранной сортировки в COOKIES, а также пример по реализации сортировки. Для быстрого создания сортировки вы можете использовать «Функциональное меню» - «Сортировка товаров». В меню будет вставлена поисковая форма, а также базовые поля для сортировки.


Доступные следующие GET параметры для собственной сортировки:
«order_by»:
  • 0 - по id товара
  • 1 - по дате добавления товара
  • 2 - по цене товара
  • 4 - по наименованию товара
  • 5 - по приоритету товара

«sort_by»:
  • 0 - По убыванию (DESC)
  • 1 - По возрастанию (ASC)

«sort_instock_priority»: (сортировка по приоритету, товары в наличии выше чем товары не в наличии)

  • 0 - не учитывать параметр
  • 1 - сначала товары в наличии и под заказ, потом те, которых нет в наличии. Далее учитываются параметры сортировки, указанные выше.
  • 2 - сначала товары которых нет в наличии.

«price_from» - цена от
«price_to» - цена до
«producer» - производитель (id или наименование производителя)
«collection» - коллекция (id или наименование коллекции)
«search» - поисковый запрос
«smart_search» - данные поискового запроса из поискового фильтра

Кроме того значения, которые учитываются если указано не пустое значение (Например «1»):
«shop_sale» - акционные,
«shop_new_goods» - новинки,
«shop_bestsellers» - хиты продаж,
«shop_discount» - скидка,
«shop_reduced_price» - Цена снижена,
«order_by_param» - дополнительный параметр с произвольным значением, для создания собственного списка сортировка по названию или значению.

При обнаружении GET переменной «sort_by» в адресе открытой страницы, данные сортировки будут установлены соответственно этим значениям. Если открыта страница со списком товаров, то значения будут заполнены из ссылки элемента «.hotengine-pagination-current». Кроме того, при открытии страницы с сортировкой будут созданы COOKIE для запоминания выбранных пользователем параметров. Скрипт, выполняющий данную функцию, который также устанавливается при создании фукнционального меню сортировки, расположен по адресу /templates/scripts/hotengine-script-sort-shop-products.js.

Рассмотрим пример по созданию сортировки с собственными значениями.

Это можно сделать при помощи дополнительного параметра «order_by_param», при выборе которого будут изменяться значения полей «order_by», «sort_by» и других.
Установим одно поле (#order_by_param) с выбором вариантов , а также оставим количество отображаемых товаров.


Создайте "Блок/Меню", расположение "вверху".
Имя Блока/Меню: hotengine_sort_products
Заголовок Блока/Меню: hotengine_sort_products
Положение Блока/Меню: вверху
Показывать Блок/Меню на страницах: везде
Введите символы, при обнаружении которых отображать Блок/Меню: (Без пробелов)
/pers_shop/ /producer/ /collection/ /shop/

Введите символы, при обнаружении которых не отображать Блок/Меню: (Без пробелов)
.htm
Текст меню:
 Code:
<form id="hotengine-sort-products-generated" name="hotengine-sort-products-generated" method="get" action="">
 <span>

<label>
<select name="order_by_param" id="order_by_param">
<option value="none">Сортировать</option>
<option value="lowtohight">От дешевых к дорогим</option>
<option value="highttolow">От дорогих к дешевым</option>
<option value="new">Новинки</option>
<option value="sales">Акционные</option>
<option value="date">По Дате</option>
</select>
</label>

<div class="hidden">
<select name="shop_new_goods" id="shop_new_goods"><option value=""><option value="1"></select>
<select name="shop_sale" id="shop_sale"><option value=""><option value="1"></select>

 <label>
 <select name="sort_by" id="sort_by"> 
 <option value="ASC">Сортировать:</option>
 <option value="ASC">По возрастанию</option>
 <option value="DESC">По убыванию</option>
 </select>
 </label>
<label>
 <select name="order_by" id="order_by"> 
 <option value="5">Сортировать:</option>
 <option value="0">По ID товара</option>
 <option value="4">По Наименованию</option>
 <option value="1">По Дате</option>
 <option value="2">По Цене</option>
 </select>
 </label>
</div>
<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>
$(function(){
$(document).on("change","#order_by_param",function(){
if($(this).val()=="lowtohight"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("2").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("ASC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true); 
} else if($(this).val()=="highttolow"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("2").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true); 
} else if($(this).val()=="date"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true); 
} else if($(this).val()=="sales"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("1").prop('selected',true); 
} else if($(this).val()=="new"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("1").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("DESC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("1").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true); 
} else if($(this).val()=="none"){
$('#hotengine-sort-products-generated select[name="order_by"]').val("5").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="sort_by"]').val("ASC").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_new_goods"]').val("").prop('selected',true); 
$('#hotengine-sort-products-generated select[name="shop_sale"]').val("").prop('selected',true); 
}
$(this).closest("form").submit();
});
});
</script>

 <script type="text/javascript" src="/templates/scripts/hotengine-script-sort-shop-products.js"></script>


 


CSS стиль для сортировка (добавить в редакторе дизайна в CSS стили):
 Code:
.menu_position_top_000000 #menu_c .headm{ display:none; }
.menu_position_top_000000 #menu_c { border: none; background: none; text-align: right;}
.menu_position_top_000000 #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;

 }
 .menu_position_top_000000 #menu_c select[name="NUM_ONPAGE"] { background:none;}
 .menu_position_top_000000 #menu_c span:before{ content:"Сортировать:"; display:inline-block; padding: 5px; font-size: 12px; }
 
 @-moz-document url-prefix(){ 
 .menu_position_top_000000 #menu_c select {
  padding:0px!important;
  background:none!important;

 }

}
 

Где 000000 нужно заменить на ID созданного меню с кодом сортировки.



При изменении поля «order_by_param» будут изменены значения сортировки и выполнена отправка формы. В Форме добавлены поля сортировки, в том числе «Новинки» и «Акция». Поля скрыты, так как визуально будет использоваться только отдельный список «order_by_param» и количество отображаемых товаров. После отправки формы, Значения будут сохранены в COOKIE.

Загрузка корзины при наведении курсора

Если вам необходимо отображать содержимеое корзины при наведении на иконку корзины, то вы можете включить параметр «Краткий + Содержимое при наведении» в «Настройках», во вкладке «Магазин» - «Оформление корзины». Или выполнить GET обращение по адресу «/ajax.php?cart&load_cart_ajax»
JavaScript отображения содержимого корзины:

 Code:
<script type="text/javascript" src="/templates/scripts/hotengine-script-cart-hover-block.js"></script>


CSS стиль:
 Code:
/*CART HOVER BLOCK*/
#hotengine-cart_menu-hover-block{position:absolute; z-index:99; background:#fff; color:#444; border:1px solid #C7C7C7; padding:20px; display:block; width:50%; display:none; text-align:left;}
#hotengine-cart_menu-hover-block:before{ content:""; height:15px; width:100%; display:block; position:absolute; top:-10px; left:0px; z-index:99999;  }
#hotengine-cart_menu:hover + #hotengine-cart_menu-hover-block{ display:block; }
#hotengine-cart_menu-hover-block:hover{display:block; }
#hotengine-cart_menu-hover-block .hotengine-cart_menu-hover-block-close:after {
    content: "x";
    background: rgb(255,255,255);
    background: radial-gradient(circle,rgba(255,255,255,0) 0%,rgba(182,182,182,1) 100%);
    oveflow: hidden;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 14px;
    text-align: center;
    color: #656565;
    cursor: pointer;
    opacity: 0.8;
    font-size: 9px;
}
/*CART HOVER BLOCK*/

Скрипт отображает дополнительный блок в случае обнаружения товаров в корзине и наведении курсора мыши на «#hotengine-cart_menu» (корзину в блоке/меню сайта).




Дочерние изображения карточки товара

Загрузка списка изображений товара

Для каждой карточки товара можно получить список вложенных изображений в JSON формате. Для этого необходимо выполнить запрос на страницу «/ajax.php?get_shop_images=PATH», где PATH - путь к любому изображению товара или ID товара.

Загрузка списка изображений товара во всплывающей галерее Colorbox:

Для добавления иконки, при нажатии на которую будет всплывать галерея colorbox, с прокруткой всех доступных в товаре изображений, Добавьте следующий скрипт в Блок/Меню:
 Code:
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-load-images-product.js"></script>


CSS стиль иконки:
 Code:
/*CHILD IMAGES SHOW POPUP IN SHOP LIST*/
.hotengine-shop-product-img-load-list {
    background: url(/templates/styles/mobile/search.png) no-repeat center center;
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 5;
    background-size: contain;
}
/*CHILD IMAGES SHOW POPUP IN SHOP LIST END*/

Отображать дочерние изображения в списке товаров с кнопками прокрутки списка с изображениями:

Если вам необходимо отображать дочерние изображения в списке товаров, то включите параметр «Вложенные изображения в списке товаров» в настройках магазина, во вкладке «Просмотр товара/Вкладки». Добавьте следующий скрипт в Блок/Меню:
 Code:
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-images-child-in-list.js"></script>


CSS стиль:
 Code:
/*CHILD IMAGES SHOW IN SHOP LIST*/
.hotengine-imgchenge { position:absolute; z-index:2; padding:4px; font-size:20px; display:inline-block;  background: #858585;
    color: #fff;
    border-radius: 50%;
    height: 20px;
    width: 20px; line-height:20px; top: 50%; cursor:pointer; margin:-10px 5px 5px 5px; opacity:0;}
.hotengine-imgchenge-left {left:0px;} 
.hotengine-imgchenge-left:after{content:"<";}
.hotengine-imgchenge-right {right:0px;} 
.hotengine-imgchenge-right:after{content:">";}
.hotengine-shop-product-list-block:hover .hotengine-imgchenge{ opacity:1; -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;}
/*CHILD IMAGES SHOW IN SHOP LIST END*/

Если товар содержит дочерние изображения, то скрипт отображает кнопки для их прокрутки, вперед и назад.

Отображать дочерние изображения в списке товаров: Замена изображения при наведении курсора:

Если вам необходимо отображать дочернее изображение при наведении курсора в списке товаров, то включите параметр «Вложенные изображения в списке товаров» в настройках магазина, во вкладке «Просмотр товара/Вкладки». Добавьте следующий скрипт в Блок/Меню:
 Code:
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-shop-images-child-in-list-hover.js"></script>


Скрипт выпадающего меню

Скрипт выпадающего меню (по умолчанию)

По умолчанию вы можете настроить способ отображения дочерних пунктов Главного меню. Это можно сделать в «Редакторе дизайна», во вкладке «Главное меню», или при изменении пунктов главного меню в разделе «Мои Блоки/Меню».

При изменении параметров, к элементу «id="hotengine-mainmenu"» будут добавляться соответствующие классы.

  • «.hotengine-mainmenu-dropdown-default» - выпадающие пункты по умолчанию
  • «.hotengine-mainmenu-categories-popup» - всплывающее окно с пунктами меню на всю ширину страницы
  • «.hotengine-mainmenu-categories-column» – выпадающие окно с пунктами меню на всю ширину страницы
Для корректного использования скриптов к элементам списка, содержащим подпункты, присвоен класс «.hotengine-mainmenu-dropdown».
Выключив данные скрипты в параметрах Главного меню или удалив приведенные выше классы, вы можете установить собственный код событий или CSS стили при наведении.

Ниже приведены примеры скриптов, которые активируют данные выпадающие подпункты для главного меню, и встроены по умолчанию.

Выпадающее меню по умолчанию
 Code:
<script type="text/javascript">
$(function(){
if(!$(".hotengine-mainmenu-categories-popup").length && !$(".hotengine-mainmenu-categories-column").length && $(".hotengine-mainmenu-dropdown-default").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){ 
if(typeof $hotengine_mainmenu_categories_dropdown == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-dropdown.js"); 
}
}
});
</script>

Всплывающее окно
 Code:
<script type="text/javascript">
$(function(){
if($(".hotengine-mainmenu-categories-popup").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){
if(typeof $hotengine_mainmenu_categories_popup == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-popup.js");
}
}
});
</script>

Выпадающее окно
 Code:
<script type="text/javascript">
$(function(){
if($(".hotengine-mainmenu-categories-column").length && $("#hotengine-mainmenu .hotengine-mainmenu-dropdown").length){ 
if(typeof $hotengine_mainmenu_categories_popup_column == "undefined"){
$.getScript("/templates/scripts/hotengine-script-mainmenu-categories-popup-column.js"); 
}
}
});
</script>
Скрипт после загрузки Автоматических описаний

Скрипт добавления кнопки «Купить» после загрузки Автоматических описаний в карточке товара

Если вы используете автомаические описания в сокращенном виде, то после нажатия «Читать далее» можно добавить кнопку «Купить», а также цену.
После загрузки текста будет выполнена callback функция «callback_hotengine_shop_autodescription_readmore».

 Code:
<script type="text/javascript">
function callback_hotengine_shop_autodescription_readmore($id,$job){ 
  if($job=="load"){
 var clone = $(".hotengine-shop-product-offerdetails .hotengine-shop-product-cart_icon").clone();
  var priceblock = $(".hotengine-shop-product-offerdetails .hotengine-shop-product-price_box").clone();
  $(".hotengine-store-autodescription-block .hotengine-store-autodescription-list-block[data-hotengine-marking-id=\""+$id+"\"] .hotengine-store-autodescription-fulltext").append([priceblock,clone]);
  
  }
}
</script>
Json загрузка товаров

Скрипт загрузки карточки товара в JSON формате

Данные карточек товаров доступны по запросу /ajax.php?json&shop_products

При выгрузке товаров можно указать параметры сортировки и фильтрации по следующим параметрам:
  • id - ID карточки товара (одно или несколько значений, через запятую).
  • pers_shop_cat_page_catid - ID категории магазина (одно или несколько значений, через запятую)
  • producer – производитель (одно или несколько значений, через запятую)
  • collection - коллекция (одно или несколько значений, через запятую)
  • sort_by – сортировка
  • order_by – сортировка
  • sort_instock_priority – сортировка приоритет
  • price_from – цена от
  • price_to – цена до
  • stock - наличие

Запрос работает только с указанием вашего домена, например http://example.com/ajax.php?json&shop_products&id=0


 Code:
<script type="text/javascript">
function decodeHtml(str)
  {
  var map =
  {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;#039;': "'"
  };
  return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
  }
$(function(){
  $.getJSON("/ajax.php?json&shop_products&id=12345,12346", function(offers){
   if(Object.keys(offers).length > 0){ 
    // full parameters console.log(offers);
    $.each( offers.offers, function(z, items){ 
      $.each(items, function(i, item){ 
        console.log(decodeHtml(item.description)); //show description with htmldecode
        console.log(decodeHtml(item.text)); //show text with htmldecode
      });
    });
   } 
  });
});
</script>
Скрытие/Отображение характеристик в описании товара

Скрытие/Отображение характеристик в описании товара

В карточке товара доступно отображение Харктеристик. Блок может содержать длинный список, поэтому вы можете использовать скрипт для скрытия части характеристик. Для этого создайте Блок/Меню и вставьте следующий скрипт:
 Code:
<script type="text/javascript" defer src="/templates/scripts/hotengine-script-hide-properties.js"></script>

Скрпит можно изменить, указав количество полей для отображения по умолчанию. Для этого скопируйте Скрипт из файла и вставьте в Блок/Меню.

CSS стиль кнопки:
 Code:
/*SHOW/HIDE PROPERTIES*/
.shop_catalog_product_properties_block_showblock{text-align:left; margin-bottom:40px;}
.shop_catalog_product_properties_block_showblock:before{
    content: "Показать все характеристики"!important;
    white-space: nowrap;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    height: auto;
    border-radius:0px;
    margin: 5px auto 5px auto;
    font-size: 15px;
    padding: 4px 4px;
    border-bottom: 1px dashed #666666;
    margin-left:19px;
    display: inline-block;
}
html:lang(en) .shop_catalog_product_properties_block_showblock:before{
    content: "Show all characteristics"!important;
}
html:lang(ru) .shop_catalog_product_properties_block_showblock:before{
    content: "Показать все характеристики"!important;
}
html:lang(uk) .shop_catalog_product_properties_block_showblock:before{
    content: "Показати всі характеристики"!important;
}

html:lang(en) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Hide"!important;
}
html:lang(ru) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Скрыть"!important;
}
html:lang(uk) .shop_catalog_product_properties_block_showblock.visible:before{
    content: "Приховати"!important;
}

.shop_catalog_product_properties_block_showblock:hover:before{
    color:#008fc3;
    border-color: #008fc3;
}
/*SHOW/HIDE PROPERTIES END*/