Подборка полезного кода, хуков для используемого шаблона Cs-cart
В CS-Cart используется шаблонизатор Smarty (https://www.smarty.net/docsv2/ru/what.is.smarty.tpl) и язык стилей LESS (подробнее тут: https://lesscss.org/functions/#color-operations и полный список доступных переменных лежит в design/themes/*используемая тема*/styles/data/file.less (в любом less файле в этой папке)). Они позволяют нам вести разработку более гибко.
Фронт много в чём настраивается через административную панель. Это касается и оформления. Но бывает этого не достаточно.
Pop-up окна стандартно закрываются только по нажатию на кнопку и esc. Чтобы улучшить юзабилити, можем добавить скрипт закрытия всплывающих окон путем нажатия вне области его блока:
<script>jQuery(function($){
$(‘body’).on(‘click’,’.ui-widget-overlay’, function() {
$(‘.ui-dialog’).filter(function () {
return $(this).css(«display») === «block»;
}).find(‘.ui-dialog-content’).dialog(‘close’);
});
});
</script>
Расширить кол-во кнопок во встроенном текстовом редакторе, редактируя скрипты:
/js/tygh/editors/
/js/lib/
Или же установка дополнительного бесплатного модуля «Полный CKEditor»
Чтобы вывести информацию под определенную витрину, используется данный код:
{if $order_info.company_id == 1}
{elseif $order_info.company_id == 2}
{/if}
Чтобы вывести информацию под определенную страницу или главную, используется данный код:
{assign var=»current_page_id» value=$smarty.request.page_id}
{if $runtime.controller==’index’ || $current_page_id == 123 || $current_page_id == 456}
{/if}
Чтобы вывести информацию под определенный язык сайта:
{if $smarty.const.CART_LANGUAGE == ‘uk’}ukr
{elseif $smarty.const.CART_LANGUAGE == ‘ru’}rus
{else}eng
{/if}
Пример скрипты бинотел getcall и calltracking добавление мультиязычности при базовом установленном укр:
{if $smarty.const.CART_LANGUAGE == ‘ru’}<script type=»text/javascript»>
// Локализация виджетов на сайте
window.BinotelGetCallSettings = {
language: ‘ru’
};
</script>
<script>
$(window).on(‘load’, function () {
// Проверяем, что язык страницы русский
if (‘{$smarty.const.CART_LANGUAGE}’ === ‘ru’) {
// Находим элемент с классом binct-phone-number-1
var phoneNumberElement = $(‘.binct-phone-number-1’);
// Получаем текущий текст элемента
var currentText = phoneNumberElement.html();
// Заменяем текст на нужный
phoneNumberElement.html(currentText.replace(‘Показати номер’, ‘Показать номер’));
}
});
</script>
<script type=»text/javascript»>
/*window.BinotelCallTracking = {
language: ‘ru’
};*/
</script>{/if}
Убрать цикличность ссылки логотипа с главной страницы:
<a href=»{«»|fn_url}» title=»{$logos.theme.image.alt}» {if $config.current_url==’index.php’ || $config.current_url==’index.php?sl=ru’}rel=»nofollow»{/if}>
{/if}
{include file=»common/image.tpl»
images=$logos.theme.image
class=»ty-logo-container__image»
image_additional_attrs=[«width» => $logos.theme.image.image_x, «height» => $logos.theme.image.image_y]
obj_id=false
show_no_image=false
show_detailed_link=false
capture_image=false
lazy_load=false
}
{if $logo_link}
</a>
{/if}
легкий скрипт кнопок поделиться jssocials, на замену яндекса в шаблоне responsive / templates / addons / social_buttons / providers / yandex.tpl:
<script src=»https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js»></script>
<link type=»text/css» rel=»stylesheet» href=»https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css» />
<link type=»text/css» rel=»stylesheet» href=»https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials-theme-flat.css» />
<script>
jQuery(document).ready(function($) {
$(«#shareIcons»).jsSocials({
showLabel: false,
showCount: false,
shares: [«email», «twitter», «facebook», «linkedin», «pinterest», «whatsapp», «viber», «messenger», «telegram»],
/*shares: [
{ share: «email», logo: «fas fa-envelope» },
{ share: «twitter», logo: «fab fa-twitter» },
{ share: «facebook», logo: «fab fa-facebook» },
{ share: «linkedin», logo: «fab fa-linkedin» },
{ share: «pinterest», logo: «fab fa-pinterest» },
{ share: «whatsapp», logo: «fab fa-whatsapp» },
//{ share: «viber», logo: «fab fa-viber» },
//{ share: «messenger», logo: «fab fa-facebook-messenger» },
{ share: «telegram», logo: «fab fa-telegram» }
],*/
iconSize: [12, 12] // Здесь вы можете установить размер иконок
});
});
</script>
вывод блока <div id=»shareIcons»></div>
возможно будет необходимо подключить и шрифт иконки font-awesome 4.7.0
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css» integrity=»sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==» crossorigin=»anonymous» referrerpolicy=»no-referrer» />
При оформлении заказа отключить автоматическое объединение полей Фамилия и Имя в одно поле
в шаблоне design/themes/responsive/templates/views/checkout/components/profile_fields.tpl
и заменить массив
{$name_field_names = [“firstname”, “lastname”, “s_firstname”, “s_lastname”, “b_firstname”, “b_lastname”]}
на
{$name_field_names = []}
Вывести информацию о заказе на странице спасибо:
<ul>
<li><strong>{__(«orderreference»)}: {$order_info.order_id}</strong></li>
<li><strong>{__(«phone»)}:</strong> {$order_info.phone}</li>
<li><strong>{__(«fullname»)}:</strong> {$order_info.firstname} {$order_info.lastname}</li>
<li><strong>{__(«email»)}:</strong> {$order_info.email}</li>
<li><strong>{__(«date»)}:</strong> {$order_info.timestamp|date_format:»%d.%m.%Y %H:%M»}</li>
<li><strong>{__(«order_total»)}:</strong> {include file=»common/price.tpl» value=$order_info.total}</li>
</ul>
Скрипт под Google отзывы для страницы спасибо после заказа, реализация пока что без передачи gtin:
<script src=»https://apis.google.com/js/platform.js?onload=renderOptIn» async defer></script>
{literal}
<script>
window.renderOptIn = function() {
window.gapi.load(‘surveyoptin’, function() {
window.gapi.surveyoptin.render(
{
// REQUIRED FIELDS
«merchant_id»: ВАШНОМЕР,
«order_id»: «{/literal}{$order_info.order_id}{literal}»,
«email»: «{/literal}{$order_info.email}{literal}»,
«delivery_country»: «UA»,
«estimated_delivery_date»: «{/literal}{$order_info.timestamp|date_format:»%Y-%m-%d»}{literal}»,
// OPTIONAL FIELDS
«products»: [{«gtin»:»{/literal}{$product.gtin nofilter}{literal}»}, {«gtin»:»{/literal}{$product.gtin}{literal}»}]
});
});
}
</script>
{/literal}
в данном случае лучше просто приобрести простенький модуль за 30$
Если вы не знаете что лежит в какой-то переменной, то можно легко узнать отпечатав её на экран. Для этого в любом месте в шаблоне добавляем {fn_print_r($var_name)}, где «var_name» — название нужной нам переменной.
Это всего лишь несколько примеров из нашей коллекции полезных скриптов. Помните, что Cs-Cart — это мощная платформа, и с правильными настройками она может работать так, как вам нужно. Надеемся, что эти советы и коды помогут вам сделать ваш сайт еще лучше! Делитесь в комментариях новыми полезными решениями, а так же сообщайте если какой-то код не работает.
Для расширения функционала вашего веб-сайта, оптимизации или веб-разработке нового интернет-магазина обращайтесь к нашим специалистам.