Перейти к содержимому


Никита Панин

Регистрация: 21 авг. 2018
Offline Активность: 06 апр. 2021 10:37
-----

Мои темы

Кнопка "оплатить" Без Перехода В Корзину

17 Февраль 2021 - 11:02

Сделаем кнопку "Оплатить", в карточке товара,  без принудительного перехода в корзину.

Перейдём в раздел Сайт - Редактор шаблонов - в шаблоне "main.js" найдём :
// Добавление товара в корзину
function AddCart() {
$('.goodsToCartFromCompareForm, .goodsListForm').off('submit').submit(function() {

и заменим на :
// Добавление товара в корзину
function AddCart() {
$('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListForm').off('submit').submit(function() {

Поиск Товаров По Магазину

09 Февраль 2021 - 11:54

Добавим форму поиска в наш шаблон.

Для этого перейдём в раздел Сайт -- Редактор шаблонов -- в шаблоне "HTML" найдём блок кода (ctrl + f):
</div>
</div>

{% IF index_page %}
<div class="slideshow-dots">

и перед найденным блоком кода вставим :
<!-- Поиск -->
<div class="header-search _header-mobile col-lg-4 col-md-4" id="headerSearch">
<div class="search">
<form id="search_mini_form" class="search-form" action="{QUICK_SEARCH_URL}" method="get" title="Поиск по магазину">
<input type="hidden" name="goods_search_field_id" value="0">
<input required type="text" name="q" value="" class="input search-string search-input" placeholder="Поиск по магазину..." autocomplete="off">
<button type="reset" title="Очистить" class="search-reset">
<span class="header-searchIcon"><i class="fal fa-times"></i></span>
</button>
<button type="submit" title="Искать" class="search-submit">
<span class="header-searchIcon"><i class="fal fa-search"></i></span>
</button>
</form>
<div id="search-result" style="display: none;">
<div class="inner">
<div class="result-category"></div>
<div class="result-goods"></div>
</div>
</div>
</div>
</div>
<!-- /Поиск -->

далее перейдём в файл main.js и добавим (в самый конец) :
// Форма поиска ( Сразу же помечаем объект поиска, как инициализированный, чтобы случайно не инициализировать его дважды.)
function SearchFieldInit(obj) {
// Блок в котором лежит поле поиска
obj.f_search = obj.find('.search-form');
// Если поля поиска не нашлось, завершаем работу, ничего страшного.
if(0 == obj.f_search.length) {
return false;
}
// Поле поиска товара
obj.s_search = obj.f_search.find('.search-input');
// Обнуление данных в форме поиска
obj.s_reset = obj.f_search.find('.search-reset');
// Проверка на существование функции проверки поля и действий с ним
if(typeof(obj.SearchFieldCheck) != 'function') {
console.log('function SearchFieldCheck is not found in object for SearchFieldInit', {status: 'error'});
return false;
// Проверка, сколько полей поиска нам подсунули за раз на инициализацию
} else if(1 < obj.f_search.length) {
console.log('function SearchFieldInit must have only one search object', {status: 'error'});
return false;
}
// Создаём функцию которая будет отвечать за основные действия с полем поиска
obj.__SearchFieldCheck = function (isAfter) {
// Если в поле текста есть вбитые данные
if(obj.s_search.val().length) {
obj.f_search.addClass('search__filled');
} else {
obj.f_search.removeClass('search__filled');
}
// При нажатии клавиши данных внутри поля ещё нет, так что проверки вернут информацию что менять поле не нужно, хотя как только операция будет завершена данные в поле появятся. Поэтому произведём вторую проверку спустя 2 сотых секунды.
if(typeof( isAfter ) == "undefined" || !isAfter) {
setTimeout(function() { obj.__SearchFieldCheck(1); },20);
}else{
return obj.SearchFieldCheck();
}
}
// Действия с инпут полем поиска
obj.s_search.click(function(){
obj.__SearchFieldCheck();
}).focus(function(){
obj.f_search.addClass('search__focused');
obj.__SearchFieldCheck();
}).blur(function(){
obj.f_search.removeClass('search__focused');
obj.__SearchFieldCheck();
}).keyup(function(I){
switch(I.keyCode) {
// игнорируем нажатия на эти клавишы
case 13: // enter
case 27: // escape
case 38: // стрелка вверх
case 40: // стрелка вниз
break;

default:
obj.f_search.removeClass('search__focused');
obj.__SearchFieldCheck();
break;
}
}).bind('paste', function(e){
obj.__SearchFieldCheck();
setTimeout(function() { obj.__SearchFieldCheck(); },20);
}).bind('cut', function(e){
$('#search-result').hide();
$('#search-result .inner .result-item').remove();
obj.__SearchFieldCheck();
});
//Считываем нажатие клавиш, уже после вывода подсказки
var suggestCount;
var suggestSelected = 0;

function keyActivate(n){
var $links = $('#search-result .result-item a');
$links.eq(suggestSelected-1).removeClass('_active');

if(n == 1 && suggestSelected < suggestCount){
suggestSelected++;
}else if(n == -1 && suggestSelected > 0){
suggestSelected--;
}
if( suggestSelected > 0){
$links.eq(suggestSelected-1).addClass('_active');
}
}
obj.s_search.keydown(function(I){
switch(I.keyCode) {
// По нажатию клавиш прячем подсказку
case 27: // escape
$('#search-result').hide();
return false;
break;
// Нажатие enter при выделенном пункте из поиска
case 13: // enter
if(suggestSelected){
var $link = $('#search-result .result-item').eq(suggestSelected - 1).find('a');
var href = $link.attr('href');
if(href){
document.location = href
} else {
$link.trigger('click')
}
return false;
}
break;
// делаем переход по подсказке стрелочками клавиатуры
case 38: // стрелка вверх
case 40: // стрелка вниз
I.preventDefault();
suggestCount = $('#search-result .result-item').length
if(suggestCount){
//делаем выделение пунктов в слое, переход по стрелочкам
keyActivate(I.keyCode-39);
}
break;
default:
suggestSelected = 0;
break;
}
});

// Кнопка обнуления данных в форме поиска
obj.s_reset.click(function(){
obj.s_search.val('').focus();
$('#search-result').hide();
$('#search-result .inner .result-item').remove();
})
// Проверка данных в форме после инициализации функционала. Возможно браузер вставил туда какой-либо текст, нужно обработать и такой вариант
obj.__SearchFieldCheck();
}
// Аналог php функции.
function htmlspecialchars(text) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
function substr(str,start,len){str+='';var end=str.length;if(start<0){start+=end;}end=typeof len==='undefined'?end:(len<0?len+end:len+start);return start>=str.length||start<0||start>end?!1:str.slice(start,end);}
function md5(str){var xl;var rotateLeft=function(lValue,iShiftBits){return(lValue<<iShiftBits)|(lValue>>>(32-iShiftBits));};var addUnsigned=function(lX,lY){var lX4,lY4,lX8,lY8,lResult;lX8=(lX&0x80000000);lY8=(lY&0x80000000);lX4=(lX&0x40000000);lY4=(lY&0x40000000);lResult=(lX&0x3FFFFFFF)+(lY&0x3FFFFFFF);if(lX4&lY4){return(lResult^0x80000000^lX8^lY8);}
if(lX4|lY4){if(lResult&0x40000000){return(lResult^0xC0000000^lX8^lY8);}else{return(lResult^0x40000000^lX8^lY8);}}else{return(lResult^lX8^lY8);}};var _F=function(x,y,z){return(x&y)|((~x)&z);};var _G=function(x,y,z){return(x&z)|(y&(~z));};var _H=function(x,y,z){return(x^y^z);};var _I=function(x,y,z){return(y^(x|(~z)));};var _FF=function(a,b,c,d,x,s,ac){a=addUnsigned(a,addUnsigned(addUnsigned(_F(b,c,d),x),ac));return addUnsigned(rotateLeft(a,s),B);};var _GG=function(a,b,c,d,x,s,ac){a=addUnsigned(a,addUnsigned(addUnsigned(_G(b,c,d),x),ac));return addUnsigned(rotateLeft(a,s),B);};var _HH=function(a,b,c,d,x,s,ac){a=addUnsigned(a,addUnsigned(addUnsigned(_H(b,c,d),x),ac));return addUnsigned(rotateLeft(a,s),B);};var _II=function(a,b,c,d,x,s,ac){a=addUnsigned(a,addUnsigned(addUnsigned(_I(b,c,d),x),ac));return addUnsigned(rotateLeft(a,s),B);};var convertToWordArray=function(str){var lWordCount;var lMessageLength=str.length;var lNumberOfWords_temp1=lMessageLength+8;var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1%64))/64;var lNumberOfWords=(lNumberOfWords_temp2+1)*16;var lWordArray=new Array(lNumberOfWords-1);var lBytePosition=0;var lByteCount=0;while(lByteCount<lMessageLength){lWordCount=(lByteCount-(lByteCount%4))/4;lBytePosition=(lByteCount%4)*8;lWordArray[lWordCount]=(lWordArray[lWordCount]|(str.charCodeAt(lByteCount)<<lBytePosition));lByteCount++;}
lWordCount=(lByteCount-(lByteCount%4))/4;lBytePosition=(lByteCount%4)*8;lWordArray[lWordCount]=lWordArray[lWordCount]|(0x80<<lBytePosition);lWordArray[lNumberOfWords-2]=lMessageLength<<3;lWordArray[lNumberOfWords-1]=lMessageLength>>>29;return lWordArray;};var wordToHex=function(lValue){var wordToHexValue="",wordToHexValue_temp="",lByte,lCount;for(lCount=0;lCount<=3;lCount++){lByte=(lValue>>>(lCount*8))&255;wordToHexValue_temp="0"+lByte.toString(16);wordToHexValue=wordToHexValue+wordToHexValue_temp.substr(wordToHexValue_temp.length-2,2);}
return wordToHexValue;};var x=[],k,AA,BB,CC,DD,a,b,c,d,S11=7,S12=12,S13=17,S14=22,S21=5,S22=9,S23=14,S24=20,S31=4,S32=11,S33=16,S34=23,S41=6,S42=10,S43=15,S44=21;str=this.utf8_encode(str);x=convertToWordArray(str);a=0x67452301;b=0xEFCDAB89;c=0x98BADCFE;d=0x10325476;xl=x.length;for(k=0;k<xl;k+=16){AA=a;BB=b;CC=c;DD=d;a=_FF(a,b,c,d,x[k+0],S11,0xD76AA478);d=_FF(d,a,b,c,x[k+1],S12,0xE8C7B756);c=_FF(c,d,a,b,x[k+2],S13,0x242070DB);b=_FF(b,c,d,a,x[k+3],S14,0xC1BDCEEE);a=_FF(a,b,c,d,x[k+4],S11,0xF57C0FAF);d=_FF(d,a,b,c,x[k+5],S12,0x4787C62A);c=_FF(c,d,a,b,x[k+6],S13,0xA8304613);b=_FF(b,c,d,a,x[k+7],S14,0xFD469501);a=_FF(a,b,c,d,x[k+8],S11,0x698098D8);d=_FF(d,a,b,c,x[k+9],S12,0x8B44F7AF);c=_FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);b=_FF(b,c,d,a,x[k+11],S14,0x895CD7BE);a=_FF(a,b,c,d,x[k+12],S11,0x6B901122);d=_FF(d,a,b,c,x[k+13],S12,0xFD987193);c=_FF(c,d,a,b,x[k+14],S13,0xA679438E);b=_FF(b,c,d,a,x[k+15],S14,0x49B40821);a=_GG(a,b,c,d,x[k+1],S21,0xF61E2562);d=_GG(d,a,b,c,x[k+6],S22,0xC040B340);c=_GG(c,d,a,b,x[k+11],S23,0x265E5A51);b=_GG(b,c,d,a,x[k+0],S24,0xE9B6C7AA);a=_GG(a,b,c,d,x[k+5],S21,0xD62F105D);d=_GG(d,a,b,c,x[k+10],S22,0x2441453);c=_GG(c,d,a,b,x[k+15],S23,0xD8A1E681);b=_GG(b,c,d,a,x[k+4],S24,0xE7D3FBC8);a=_GG(a,b,c,d,x[k+9],S21,0x21E1CDE6);d=_GG(d,a,b,c,x[k+14],S22,0xC33707D6);c=_GG(c,d,a,b,x[k+3],S23,0xF4D50D87);b=_GG(b,c,d,a,x[k+8],S24,0x455A14ED);a=_GG(a,b,c,d,x[k+13],S21,0xA9E3E905);d=_GG(d,a,b,c,x[k+2],S22,0xFCEFA3F8);c=_GG(c,d,a,b,x[k+7],S23,0x676F02D9);b=_GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);a=_HH(a,b,c,d,x[k+5],S31,0xFFFA3942);d=_HH(d,a,b,c,x[k+8],S32,0x8771F681);c=_HH(c,d,a,b,x[k+11],S33,0x6D9D6122);b=_HH(b,c,d,a,x[k+14],S34,0xFDE5380C);a=_HH(a,b,c,d,x[k+1],S31,0xA4BEEA44);d=_HH(d,a,b,c,x[k+4],S32,0x4BDECFA9);c=_HH(c,d,a,b,x[k+7],S33,0xF6BB4B60);b=_HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);a=_HH(a,b,c,d,x[k+13],S31,0x289B7EC6);d=_HH(d,a,b,c,x[k+0],S32,0xEAA127FA);c=_HH(c,d,a,b,x[k+3],S33,0xD4EF3085);b=_HH(b,c,d,a,x[k+6],S34,0x4881D05);a=_HH(a,b,c,d,x[k+9],S31,0xD9D4D039);d=_HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);c=_HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);b=_HH(b,c,d,a,x[k+2],S34,0xC4AC5665);a=_II(a,b,c,d,x[k+0],S41,0xF4292244);d=_II(d,a,b,c,x[k+7],S42,0x432AFF97);c=_II(c,d,a,b,x[k+14],S43,0xAB9423A7);b=_II(b,c,d,a,x[k+5],S44,0xFC93A039);a=_II(a,b,c,d,x[k+12],S41,0x655B59C3);d=_II(d,a,b,c,x[k+3],S42,0x8F0CCC92);c=_II(c,d,a,b,x[k+10],S43,0xFFEFF47D);b=_II(b,c,d,a,x[k+1],S44,0x85845DD1);a=_II(a,b,c,d,x[k+8],S41,0x6FA87E4F);d=_II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);c=_II(c,d,a,b,x[k+6],S43,0xA3014314);b=_II(b,c,d,a,x[k+13],S44,0x4E0811A1);a=_II(a,b,c,d,x[k+4],S41,0xF7537E82);d=_II(d,a,b,c,x[k+11],S42,0xBD3AF235);c=_II(c,d,a,b,x[k+2],S43,0x2AD7D2BB);b=_II(b,c,d,a,x[k+9],S44,0xEB86D391);a=addUnsigned(a,AA);b=addUnsigned(b,BB);c=addUnsigned(c,CC);d=addUnsigned(d,DD);}
var temp=wordToHex(a)+wordToHex(B)+wordToHex(c)+wordToHex(d);return temp.toLowerCase();}
function utf8_encode(argString){var string=(argString+'');var utftext="";var start,end;var stringl=0;start=end=0;stringl=string.length;for(var n=0;n<stringl;n++){var c1=string.charCodeAt(n);var enc=null;if(c1<128){end++;}else if(c1>127&&c1<2048){enc=String.fromCharCode((c1>>6)|192)+String.fromCharCode((c1&63)|128);}else{enc=String.fromCharCode((c1>>12)|224)+String.fromCharCode(((c1>>6)&63)|128)+String.fromCharCode((c1&63)|128);}
if(enc!==null){if(end>start){utftext+=string.substring(start,end);}
utftext+=enc;start=end=n+1;}}
if(end>start){utftext+=string.substring(start,string.length);}
return utftext;}
function rand(min,max){var argc=arguments.length;if(argc===0){min=0;max=2147483647;}else if(argc===1){throw new Error('Warning: rand() expects exactly 2 parameters, 1 given');}return Math.floor(Math.random()*(max-min+1))+min;}
// Получить md5 хэш
function GenMd5Hash () {
return substr(md5(parseInt(new Date().getTime() / 1000, 10)),rand(0,24),8);
}
// Живой поиск
$(function() {
// Навигационная таблица над таблицей с данными
var searchBlock = $('.search');
var options = {
target: 'form.store_ajax_catalog',
url: '/admin/store_catalog',
items_target: '#goods',
last_search_query: '',
};
// По этому хэшу будем обращаться к объекту извне
var randHash = GenMd5Hash();
// Если объекта со списком ajax функций не существует, создаём её
if(typeof(document.SearchInCatalogAjaxQuerySender) == 'undefined') {
document.SearchInCatalogAjaxQuerySender = {};
}
// Поле поиска обновилось, внутри него можно выполнять любые действия
searchBlock.SearchFieldCheck = function () {
// Отменяем выполнение последнего запущенного через таймаут скрипта, если таковой был.
if(typeof(document.lastTimeoutId) != 'undefined') {
clearTimeout(document.lastTimeoutId);
}
document.lastTimeoutId = setTimeout("document.SearchInCatalogAjaxQuerySender['" + randHash + "']('" + htmlspecialchars(searchBlock.s_search.val()) + "');", 300);
}
// Отправляет запрос к серверу с задачей поиска товаров
document.SearchInCatalogAjaxQuerySender[randHash] = function (old_val) {
var last_search_query_array = [];

// sessionStorage is available
if (typeof sessionStorage !== 'undefined') {
try {
if(sessionStorage.getItem('lastSearchQueryArray')){
last_search_query_array = JSON.parse(sessionStorage.getItem('lastSearchQueryArray'));

// Находим соответствие текущего запроса с sessionStorage
var currentSearch = $.grep(last_search_query_array, function (item){
return item.search_query == old_val
})[0]

if(currentSearch){
showDropdownSearch(JSON.parse(currentSearch.content));

return;
}
} else {
sessionStorage.setItem('lastSearchQueryArray', '[]')
}
} catch(e) {
// sessionStorage is disabled
}
}

// Если текущее значение не изменилось спустя 300 сотых секунды и это значение не то по которому мы искали товары при последнем запросе
if(htmlspecialchars(searchBlock.s_search.val()) == old_val && searchBlock.s_search.val().length > 1) {
// Запоминаем этот запрос, который мы ищем, чтобы не произвводить повторного поиска
options['last_search_query'] = old_val;
// Добавляем нашей форме поиска поле загрузки
searchBlock.f_search.addClass('search__loading');
// Собираем параметры для Ajax запроса
var
params = {
'ajax_q' : 1,
'goods_search_field_id' : 0,
'q' : options['last_search_query'],
},
// Объект со значением которого будем в последствии проверять полученные от сервера данные
search_field_obj = searchBlock.s_search;
// Аяксом отправляем запрос на поиск нужных товаров и категорий
$.ajax({
type: "POST",
cache: false,
url: searchBlock.f_search.attr('action'),
data: params,
dataType: 'json',
beforeSend: function(){
searchBlock.find('.search-submit .header-searchIcon').html('<i class="fal fa-circle-notch fa-spin"></i>')
},
success: function(data) {
// Если набранный запрос не соответствует полученным данным, видимо запрос пришёл не вовремя, отменяем его.
if(search_field_obj.val() != old_val) {
return false;
}

// Записываем в sessionStorage
if (typeof sessionStorage !== 'undefined') {
try {
sessionStorage.setItem('lastSearchQueryArray', JSON.stringify(last_search_query_array))

// Находим соответствие текущего запроса с sessionStorage
var currentSearch = $.grep(last_search_query_array, function (item){
return item.search_query == old_val
})[0]
//Если такого запроса ещё не было запишем его в sessionStorage
if(typeof currentSearch == 'undefined'){
// Добавляем в массив последних запросов данные по текущему запросу
last_search_query_array.push({
search_query: old_val,
content: JSON.stringify(data)
})
sessionStorage.setItem('lastSearchQueryArray', JSON.stringify(last_search_query_array))
}
} catch(e) {
// sessionStorage is disabled
}
}
// Показываем результаты на основе пришедших данных
showDropdownSearch(data);

// Убираем информацию о том что запрос грузится.
searchBlock.f_search.removeClass("search__loading");
searchBlock.find('.search-submit .header-searchIcon').html('<i class="fal fa-search"></i>')
console.log('andAJAX')
}
});
}else{
$("#search-result").removeClass('_active').hide();
}

function showDropdownSearch(data){
// Отображение категорий в поиске
if(data.category.length!=undefined && data.category.length>0){
$(".result-category .result-item").remove();
$("#search-result").removeClass('_active').hide();
for(с=0; с < data.category.length; с++){
// Проверка наличия изображения
if (data.category[с].image_icon == null) {
data.category[с].image_icon = '/design/no-photo-icon.png'
} else {
data.category[с].image_icon = data.category[с].image_icon;
}
// Отображаем результат поиска
$("#search-result").addClass('_active').show();
$("#search-result .inner .result-category").append('<div class="result-item" data-id="'+ data.category[с].goods_cat_id +'"><a href="'+ data.category[с].url +'"><img src="'+ data.category[с].image_icon +'" class="goods-image-icon" /><span>'+ data.category[с].goods_cat_name +'</span></a></div>');
}
}else{
$(".result-category .result-item").remove();
$("#search-result").removeClass('_active').hide();
}
// Отображение товаров в поиске
if(data.goods.length!=undefined && data.goods.length>0){
$(".result-goods .result-item").remove();
$("#search-result").removeClass('_active').hide();
for(i=0; i < data.goods.length; i++){
// Проверка наличия изображения
if (data.goods[i].image_icon == null) {
data.goods[i].image_icon = '/design/no-photo-icon.png'
} else {
data.goods[i].image_icon = data.goods[i].image_icon;
}
// Отображаем результат поиска
$("#search-result").addClass('_active').show();
if(i <= 4 ){
$("#search-result .inner .result-goods").append('<div class="result-item" data-id="'+ data.goods[i].goods_id +'"><a href="'+ data.goods[i].url +'"><img src="'+ data.goods[i].image_icon +'" class="goods-image-icon" /><span>'+ data.goods[i].goods_name +'</span></a></div>');
}

// Если последняя итерация цикла вставим кнопку "показать все"
if(i == data.goods.length - 1){
$("#search-result .inner #show-wrap").remove();

var $showAllBtn = $('<a>').text('Все результаты').addClass('show-all').click(function(){$('.search-form').submit();})
var $showAllWrap = $('<div>').attr('id', 'show-wrap').addClass('result-item').append($showAllBtn)

$("#search-result .inner .result-goods").append($showAllWrap)
}
}
}else{
$(".result-goods .result-item").remove();
$("#search-result").removeClass('_active').hide();
}
// Скрываем результаты поиска если ничего не найдено
if((data.category.length + data.goods.length) > 0){
$("#search-result").addClass('_active').show();
// console.log("show");
}else{
$("#search-result").removeClass('_active').hide();
// console.log("hide");
}

if((data.category.length) > 0){
$(".result-category").show().addClass('_visible');
}else{
$(".result-category").hide().removeClass('_visible');
}

if((data.goods.length) > 0){
$(".result-goods").show();
}else{
$(".result-goods").hide();
}
}
}
SearchFieldInit(searchBlock);

});


и на конец стилизуем нашу форму, для этого перейдём в файл main.css и добавим в самый конец :
/** Поиск **/
.header .header-search .search {position: relative}
.header .header-search #header .header-right .search {display: inline-block;position: relative;vertical-align: middle;width: 100%;height: auto;margin: 0;z-index: 1;border-bottom: 1px solid #dce4e9}
.header .header-search .search .search-icon {display: none;width: 25px;text-align: center}
.header .header-search .search #search_mini_form {display: inline-block;vertical-align: middle;position: relative;width: 100%}
.header .header-search .search #search_mini_form .search-string {font-size: 13px;color: #21293c;width: 100%;max-width: 100%;margin: 0;line-height: 20px;padding-right: 90px}
.header .header-search .search #search_mini_form .search-string:focus + .search-reset{opacity:1;}
.header .header-search .search #search_mini_form .search-reset,
.header .header-search .search #search_mini_form .search-submit {position: absolute;top: 0;right: 0;height: 42px;padding: 0 15px;font-size: 16px;}
.header .header-search .search #search_mini_form .search-reset {right: 46px;opacity: 0;-webkit-transition: opacity .3s ease;transition: opacity .3s ease}
.header .header-search .search #search_mini_form input::-webkit-input-placeholder {color: #b1bfc8}
.header .header-search .search #search_mini_form input::-moz-placeholder {color: #b1bfc8}
.header .header-search .search #search_mini_form input:-ms-input-placeholder {color: #b1bfc8}
.header-searchBtn {position: absolute;top: 0;right: 0;height: 40px;padding: 0 15px;font-size: 16px}
.header .header-search .search #search_mini_form .header-searchIcon {color: #4c1e8a}
.header .header-search .search #search_mini_form .header-searchIcon:hover {color: #ff0098;}
@media (max-width: 991px) {.header .header-search .search {padding: 15px}}
/** Поисковая выдача **/
#search-result {display: none;position: absolute;width: 100%;margin-top: 5px;padding: 5px 15px 5px 15px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);border: 2px solid #dce4e9;background-color: #fff;color: #777;z-index: 3}
#search-result._active {visibility: visible;opacity: 1;-webkit-transform: translate(0,0);transform: translate(0,0)}
#search-result .inner .result-category {width: 40%;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;padding-right: 10px}
#search-result .inner .result-category._visible + .result-goods {border-left: 1px solid #dce4e9}
#search-result .inner .result-category img {display: none}
#search-result .inner .result-goods {width: 60%;height: 100%;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;padding: 0 10px}
#search-result .inner .result-category a {font-weight: 700}
#search-result .inner {overflow:hidden;display: -webkit-box;display: -ms-flexbox;display: flex}
#search-result .inner .result-item {width: 100%;line-height: 20px;padding: 10px 0}
#search-result .inner .result-item a {width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center}
#search-result .inner .result-item a:hover,
#search-result .inner .result-item a._active {color: #ff0098}
#search-result .inner .result-item a img {max-width: 40px;max-height: 40px;margin-right: 15px}
@media (max-width: 991px) {#search-result {width: calc(100% - 30px)}}
#headerSearch {margin: 0 auto;float: none;}
.header .header-search .search #search_mini_form .search-string {border: 1px solid #02c1f5;}
.header .header-search .search #search_mini_form {border: 1px saddlebrown;}
#headerSearch {padding-bottom: 10px;}

Мультиязычность С Помощью Google Translate

05 Февраль 2021 - 12:26

Можно имитировать мультиязычность сайта с помощью Google Translate, через переключение флажков. Выглядит это следующим образом :

Прикрепленный файл  Безымянный1.png   691,55К   12 Количество загрузок:

Данная реализация, подходит для всех шаблонов, поддерживающих cookie (практически для всех) .

Для этого перейдём в раздел Сайт  ---> Редактор шаблонов ---> в шаблоне "НTML" найдём :

</head>

и перед найденной строкой добавим :

<script src="js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>

далее найдём строку :

<body>

и после найденной строки, вставим (блок в котором выводятся флажки) :

<div class="language">
<img src="{ASSETS_IMAGES_PATH}lang__ru.png" alt="ru" data-google-lang="ru" class="language__img">
<img src="{ASSETS_IMAGES_PATH}lang__en.png" alt="en" data-google-lang="en" class="language__img">
<img src="{ASSETS_IMAGES_PATH}lang__de.png" alt="de" data-google-lang="de" class="language__img">
<img src="{ASSETS_IMAGES_PATH}lang__uk.png" alt="uk" data-google-lang="uk" class="language__img">
</div>

далее перейдём в файл forall.js и добавим (в самый конец) :

const googleTranslateConfig = {
lang: "ru",
};

function TranslateInit() {

let code = TranslateGetCode();
// Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
$('[data-google-lang="' + code + '"]').addClass('language__img_active');

if (code == googleTranslateConfig.lang) {
// Если язык по умолчанию, совпадает с языком на который переводим
// То очищаем куки
TranslateClearCookie();
}

// Инициализируем виджет с языком по умолчанию
new google.translate.TranslateElement({
pageLanguage: googleTranslateConfig.lang,
});

// Вешаем событие клик на флаги
$('[data-google-lang]').click(function () {
TranslateSetCookie($(this).attr("data-google-lang"))
// Перезагружаем страницу
window.location.reload();
});
}

function TranslateGetCode() {
// Если куки нет, то передаем дефолтный язык
let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
return lang.substr(-2);
}

function TranslateClearCookie() {
$.cookie('googtrans', null);
$.cookie("googtrans", null, {
domain: "." + document.domain,
});
}

function TranslateSetCookie(code) {
// Записываем куки /язык_который_переводим/язык_на_который_переводим
$.cookie('googtrans', "/auto/" + code);
$.cookie("googtrans", "/auto/" + code, {
domain: "." + document.domain,
});
}

и в конце добавим иконки флагов на сайт, для этого распакуем данный архив :
Прикрепленный файл  language.zip   3,2К   6 Количество загрузок:

и добавим на сайт все изображения из архива
Прикрепленный файл  Безымянный23.png   6,71К   12 Количество загрузок:

Facebook Pixel Code. Добавление Цели На Кнопку Оформить Заказ Для Отслеживания Конверсий.

04 Февраль 2021 - 19:40

Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:

<!-- /END Конец основных скриптов которые лучше не удалять -->

перед найденной строкой вставьте Ваш код пикселя.

Далее зайдите в раздел Сайт-->Редактор шаблонов-->Быстрый заказ и найдите:

<form action="{CART_URL}" method="post" id="cart-content">

замените на:

 <form action="{CART_URL}" onsubmit="fbq('track', 'order_completed');" method="post" id="cart-content">


Более подробную информацию по отслеживанию конверсии в Facebook Pixel можно найти здесь.

Наличие товара "Под заказ" и кнопка "Заказать"

01 Февраль 2021 - 16:46

Реализуем наличие товара "Под заказ" и отображение кнопки "Заказать", при остатке товара 999.

Для этого перейдём в раздел Сайт --> Редактор шаблонов --> в шаблоне "Товар" найдём (ctrl + f) :

<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Наличие товара: <span><font color="#03b335">В наличии</font></span></div>

и заменим на :
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 || GOODS_MOD_REST_VALUE=999 %}style="display:none;"{% ENDIF %}>Наличие товара: <span><font color="#03b335">В наличии</font></span></div>
<div class="available-true-zakaz" {% IF GOODS_MOD_REST_VALUE !=999 %}style="display:none;"{% ENDIF %}>Наличие товара: <span><font color="#03b335">Под заказ</font></span></div>

тем самым мы добавляем новую строку "Под заказ" и добавляем условие для строки "В наличии", если остаток товара 999 , то скрываем "В наличии".

далее найдём :
<!-- Добавление товара в Корзину -->
<div class="add-to-box f-fix {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}add-to-form{% ENDIF %}" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>

и заменим на :
<a href="#show-callback" class="zakaz button" {% IF GOODS_MOD_REST_VALUE != 999 %}style="display:none;"{% ENDIF %} title="Cделать заказ">Заказать</a>
<!-- Добавление товара в Корзину -->
<div class="add-to-box f-fix {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}add-to-form{% ENDIF %}" {% IF GOODS_MOD_REST_VALUE=0 || GOODS_MOD_REST_VALUE=999 %}style="display:none;"{% ENDIF %}>

тем самым мы добавляем кнопку "Заказать" и добавляем условие для кнопки "Купить", если остаток товара 999 , то скрываем кнопку "Купить".

далее в конец данного шаблона "Товар" добавим :
<script>
$(function() {
$(".zakaz").fancybox();
})
</script>
<div id="show-callback" style="display:none;">
<form method="post" action="{CALLBACK_URL}" class="callbackForm2" enctype="multipart/form-data">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[Название товара]" value="{GOODS_NAME}" />
<input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/>
<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
{ANTISPAM_CODE}
{% IF FORM_NOTICE %}<div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE}</div>{% ENDIF %}
<input id="callback_person1" class="inputText callback_person1 required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Представьтесь, пожалуйста" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off" />
<input id="callback_phone1" class="inputText callback_phone1 required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Введите номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off" />
<div class="pp">Нажимая на кнопку отправить, Вы соглашаетесь с <a href="#">правилами обработки данных</a></div>
{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
</form>
</div>

тем самым мы добавляем форму, открывающаяся при нажатии на кнопку "Заказать" и вешаем скрипт на данную кнопку.

далее перейдём в файл main.js и найдём :
// Есть ли товар есть в наличии
if(modificationRestValue>0) {
goodsAvailableTrue.show();
goodsAvailableFalse.hide();
// Если товара нет в наличии

и заменим на :
// Есть ли товар есть в наличии
if(modificationRestValue>0) {
// Если остаток товара 999
if (modificationRestValue==999) {
// Скрываем кнопку купить
$(".product-view .add-to-box.f-fix.add-to-form").hide();
// Показываем строку "Наличие: под заказ" и кнопку "Заказать"
$(".available-true-zakaz, a.zakaz.button").show();
// Скрываем строку "Наличие: в наличии"
goodsAvailableTrue.hide();
// Если остаток товара не равен 999
} else {
// Показываем кнопку купить
$(".product-view .add-to-box.f-fix.add-to-form").show();
// Скрываем строку "Наличие: под заказ" и кнопку "Заказать"
$(".available-true-zakaz, a.zakaz.button").hide();
//Показываем строку "Наличие: в наличии"
goodsAvailableTrue.show();
}
goodsAvailableFalse.hide();
// Если товара нет в наличии

тем самым при выборе модификации в карточке товара, будет отображаться нужное "Наличие товара" с соответствующей кнопкой.

далее перейдём в файл main.css и добавим (в самый конец) :
a.zakaz.button {background: #09afe7;font-size: 16px;}

тем самым корректируем внешний вид нашей кнопки "Заказать".