cs cart добавить код в head
Настройки страницы макета¶
Чтобы задать настройки страницы макета, перейдите на страницу Дизайн → Макеты, выберите нужную страницу макета и нажмите на изображение шестеренки рядом с именем.
У любой страницы макета есть следующие настройки:
Страница — определенная страница или тип страниц на витрине, которые используют эту страницу макета. Выберите тип страницы. Также можно выбрать Другое и задать страницу вручную.
Это значение подставится после index.php?dispatch= и указывает на определенную страницу. Например, index.php?dispatch=checkout.cart ведет на страницу с содержимым корзины; index.php?dispatch=checkout.checkout ведет на страницу оформления заказа.
Название — название страницы макета (отобразится в панели администратора).
Название страницы — отобразится в заголовке вкладки браузера.
Мета-описание — содержимое мета-тега (описание страницы).
Мета-ключевые слова — содержимое мета-тега (ключевые слова страницы).
По умолчанию — если поставить флажок, эта страница макета станет страницей по умолчанию. Тогда содержимое контейнеров Верхняя панель, Заголовок и Подвал будет использоваться на других страницах макета.
Позиция — положение страницы в списке страниц макета.
После редактирования настроек нажмите кнопку Сохранить.
У некоторых страниц макета могут быть дополнительные вкладки, например, Категории или Товары. Эти вкладки позволяют связать страницу макета с определенными товарами и категориями.
Как добавить код или скрипт на страницы CS-Cart¶
В статье вы узнаете, как добавлять свой код на страницу сайта. Мы разберём один пример и расскажем о подводных камнях, которые могли бы возникнуть в других случаях.
Допустим, нам надо добавить на ВСЕ страницы сайта такой код:
Этот код подходит для экспериментов — когда вы зайдёте на страницу, то сразу же увидите, работает ли он. Так можно проверять, на каких страницах код есть, а на каких его нет. Но добавлять именно такой скрипт лучше не у себя, а на демо-сайте или тестовой установке — всплывающее окно на каждой странице очень мешает совершать покупки.
Добавляем код в или в конкретное место страницы¶
Отключите визуальный редактор текстов. В нём удобно писать статьи блога и описания товаров, но он может убрать из кода что-нибудь “лишнее”, и код перестанет работать. Даже если работать в режиме правки кода (обычно это кнопка <> в редакторе), то в следующий раз при редактировании и сохранении блока часть кода может пропасть.
В меню Настройки → Внешний вид замените HTML-редактор по умолчанию на Не использовать и сохраните изменения.
В нашем случае нужно добавить код на все страницы. Проще всего это сделать на странице макета по умолчанию. Если мы добавим блок в Верхнюю панель, Заголовок или Подвал (лучший вариант, т.к. там изначально блоков нет), то код добавится везде.
Не все страницы макета используют Верхнюю панель, Заголовок и Подвал от страницы по умолчанию. Например, на странице оформления заказа убрано всё, кроме главного содержимого. У вас в магазине могут быть и другие подобные страницы. Добавьте на них блок отдельно.
Бывают другие ситуации, когда код нужно добавить не везде, а на всех товарах или статьях блога. Тогда нужно выбрать соответствующую страницу макета (например, “Товары”) и добавить блок там. Если блок нужен только конкретному товару, то по умолчанию его лучше выключить. Вы сможете его включить на вкладке Макеты на странице редактирования нужного товара.
При создании нового блока вам придётся выбрать его тип. Есть два типа блоков, которые можно использовать для вставки кода:
В большинстве случаев достаточно блока с типом HTML блок. В них можно вставлять текст или скрипты наподобие JavaScript из начала статьи. Именно этот блок мы рекомендуем использовать. А для продавцов в маркетплейсе это единственный способ ( если они могут редактировать макеты ).
Ещё есть HTML блок с поддержкой Smarty. Он полезен, когда вы хотите получить какие-то данные из самого CS-Cart, используя функции.
Вставьте ваш код на вкладке Контент и сохраните изменения. Обратите внимание, что содержимое блока зависит от языка.
При создании блока его содержимое продублируется для всех языков, которые у вас есть.
Если вы потом захотите изменить код, то не забудьте при редактировании блока на вкладке Контент поставить галку Для всех языков. Иначе содержимое блока будет зависеть от языка, который выберет пользователь.
(опционально) CS-Cart переносит скрипты в конец кода страницы. Скрипт из этой статьи вызывает окно браузера, и местоположение окна не зависит от места скрипта в коде страницы. Но если вы добавляете какой-то объект (карту или баннер), то можете обнаружить его не там, где находится блок, а в самом низу страницы.
Добавляем код в ¶
Если вы добавляете код на страницу макета по умолчанию, то можете поставить галку Скопировать на остальные страницы. Так вы сможете быстро добавить код на все страницы сайта, без необходимости править каждую страницу макета.
Top panel and header
Следующим этапом будет создание создание и расположение блоков в Top panel and Header containers.
Будем изменять Layout по-умолчанию.
Правка Макетов (Layouts)
Поменяем блоки Currencies и Languages местами как на макете. Это можно сделать с помощью drag-and-drop, взять блок Languages и перетащить за Currencies.
Также нужно добавить блок о Доставке.
Создадим grid шириной равное 3 и расположем его после grid c логотипом.
Добавим следующий код для блока:
Остальные блоки остаим как есть.
На макете не представлен функционал Профиль пользователя, но он важен для пользователя. Поэтому блок оставим как есть.
Вот что получилось:
Создание стилей для Top panel and Header
В Cs-Cart для изменения фона container, цвет ссылок, текста используется Visual editor и Styles(ex. Presets).
Чтобы активировать Visual editor, на странице themes, рядом с темой нажмем кнопку Visual editor.
Добавление стилей CSS
Будем добавлять в этот файлы наши стили.
Начнем с Валют(Currencies).
По-умолчанию, 3 валюты отображаются в ряд. С уменьшением экрана, появляется выпадающий список.
Чтобы сделать сразу выпадающий список, нужно в настройках блока для “Минимальное кол-во элементов для отображения в выпадающем списке.” (Minimal number if items to be placed in a dropdown list). поставить значение 1.
Название и символ валюты можно задать в настройках валюты Администрирование / Валюты(Administration / Currencies).
По макету символ валюты не выводится, его надо удалить из шаблона.
Быстрый способ найти шаблон, с помощью поиска по файлам классов, которые используются в разметке.
Определить, какие классы используются, можно с помощью DevTools для Chrome или Firebug для Firefox.
CSS стили кэшируются. Чтобы кэш очищался автоматически, нужно включить настройку “Обновлять кэш автоматически” (Rebuild cache automatically) на странице Темы (Themes) в административной панели.
За вывод символа валюты отвечает код:
Удалим его из шаблона.
Другой способ определения шаблона, использовать иерархию подключения шаблонов.
Подлкючение шаблона определяется в схеме app/schemas/block_manager/blocks.php
За вывод валюты в выпадающем списке отвечает код:
Top panel and header¶
Следующим этапом будет создание создание и расположение блоков в Top panel and Header containers.
Будем изменять Layout по-умолчанию.
Правка Макетов (Layouts)¶
Поменяем блоки Currencies и Languages местами как на макете. Это можно сделать с помощью drag-and-drop, взять блок Languages и перетащить за Currencies.
Также нужно добавить блок о Доставке.
Создадим grid шириной равное 3 и расположем его после grid c логотипом.
Добавим следующий код для блока:
Остальные блоки оставим как есть.
На макете не представлен функционал Профиль пользователя, но он важен для пользователя. Поэтому блок оставим как есть.
Вот что получилось:
Создание стилей для Top panel and Header¶
В Cs-Cart для изменения фона container, цвет ссылок, текста используется Visual editor и Styles(ex. Presets).
Чтобы активировать Visual editor, на странице themes, рядом с темой нажмем кнопку Visual editor.
Добавление стилей CSS¶
Будем добавлять в этот файлы наши стили.
Начнем с Валют(Currencies).
По-умолчанию, 3 валюты отображаются в ряд. С уменьшением экрана, появляется выпадающий список.
Чтобы сделать сразу выпадающий список, нужно в настройках блока для “Минимальное кол-во элементов для отображения в выпадающем списке.” (Minimal number if items to be placed in a dropdown list). поставить значение 1.
Название и символ валюты можно задать в настройках валюты Администрирование / Валюты(Administration / Currencies).
По макету символ валюты не выводится, его надо удалить из шаблона.
Быстрый способ найти шаблон, с помощью поиска по файлам классов, которые используются в разметке.
Определить, какие классы используются, можно с помощью DevTools для Chrome или Firebug для Firefox.
CSS стили кэшируются. Чтобы кэш очищался автоматически, нужно включить настройку “Обновлять кэш автоматически” (Rebuild cache automatically) на странице Темы (Themes) в административной панели.
За вывод символа валюты отвечает код:
Удалим его из шаблона.
Другой способ определения шаблона, использовать иерархию подключения шаблонов.
Подкючение шаблона определяется в схеме app/schemas/block_manager/blocks.php
За вывод валюты в выпадающем списке отвечает код:
Размещение кодов в блоках head и body
На некоторых сайтах для размещения различных кодов (счетчиков, информеров, пикеслей ретаргетинга, кодов Google Analytics и Яндекс.Метрики и т.д.) предусмотрены отдельные блоки для вставки.
Данные блоки позволяют буквально в несколько кликов вставить нужный код, без правки шаблонов сайта.
Рассмотрим, как они работают.
Шаг 1
Раскройте меню «Настройки» и перейдите к пункту «Настройки сайта».
Шаг 2
На открывшейся странице в разделе «Блоки сайта» слева вы сможете найти блоки «Блок с кодом head» и «Блок с кодом body».
Обратите внимание!
Шаг 3
Теперь, если вам необходимо вставить какой-либо код в тег head, просто нажмите на данный блок в списке, вставьте в открывшемся окне код и сохраните изменения (аналогично с тегом body).
Примеры:
У меня в «Настройках сайта» нет таких блоков. Что делать?
Не все сайты предусматривают описанные выше блоки. Если у вас в системе управления их нет, то вставить код вы можете следующим образом:
В открывшемся списке шаблонов выберите шаблон «Главная.Верх»;
