Webasyst дизайн: Новые темы дизайна для Webasyst и Shop-Script

Leave a Comment / Разное / By /

Содержание

Темы дизайна для Webasyst и Shop-Script

  • SEO-топы и списки

    Инструмент по привлечению дополнительного трафика из поисковых систем.

  • Контроль рабочего времени

    Приложение «Статус» — отличный инструмент для учета рабочего времени и контроля работы на самоизоляции. Поможет следить за эффективностью всей команды и знать, кто и сколько работает, где бы сотрудники ни находились.

  • Инструменты маркетинга


    Анализ заказов по различным
    условиям и признакам

    • соберите заказы выходных дней
    • анализируйте заказы, сделанные на определенную сумму
    • следите за заказами разных категорий покупателей
    • ведите учет заказов определенных брендов
    или поставщиков

    70 условий для гибкой аналитики и эффективного маркетинга

  • Messenger

    Собери всех коллег в одном мессенджере.

    Командная работа начинается здесь.

  • Pocket Lists PRO

    Эффективная командная работа в Webasyst. Задачи, списки, канбан, назначение ответственных, типы и статусы задач, связь задач с заказами Shop-Script и многое другое — приложение Pocket Lists и плагин Pocket Lists PRO помогут автоматизировать работу.

    Порядок в делах — основа для роста.

  • Работа с поставщиками

    Если ваш интернет-магазин торгует со склада поставщика, то плагин «Обновление из прайсов поставщиков» поможет вам вовремя обновлять наличие и цену на сайте, основываясь на наличии артикула в прайс-листе поставщика.

    Подробнее

  • Webasyst CRM

    Удобный инструмент для управления базой клиентов и продажами

    • Удобная работа с контактами
    • Эффективное управление сделками
    • Интеграция с Shop-Script
    • Воронки продаж
    • Таймлайн по всем действиям
    • Интеграция с IP-телефонией
    • Автоматизация работы со счетами

  • Форма обратной связи

    Универсальное приложения для создания гибкой
    формы обратной связи на сайте, магазине, блоге
    и любых других приложениях

  • Автоопределение и выбор города

    Удобное оформление адреса доставки — больше заказов!

    Поднимите удобство работы со своим магазином —
    автоматически определив город покупателя и предоставив
    удобный инструмент для автозаполнения адреса доставки.

  • Google Покупки

    Экспорт товаров в формате XML для Google Merchant! Расширенные возможности создания фида Автоматическое обновление файла по CRON Интеграция с SEO-оптимизацией Поддержка SKU

    • Создание собственной темы дизайна для Shop-Script — Webasyst

    Тема дизайна для Shop-Script должна содержать следующий набор основных шаблонов витрины:

    • index.html (общая структура страниц витрины)
    • home.html (шаблон главной страницы витрины)
    • category.html (шаблон страниц с информацией о категории товаров)
    • product.html (шаблон страницы с информацией об одном товаре)
    • cart.html (шаблон страницы «Корзина»)
    • error.html (шаблон для отображения сообщений об ошибках, например, «Страница не найдена»)

    Поскольку работа интернет-магазина предполагает оформление заказа со указанием адресных данных, выбора способа доставки и оплаты, тема дизайна также должна содержать шаблоны соответствующих страниц. Для упрощения разработки вашей собственной темы дизайна можно полностью скопировать следующие шаблоны страниц оформления заказа из темы «Дефолт» (впоследствии их можно модифицировать по своему усмотрению):

    • checkout.html
    • checkout.contactinfo.html
    • checkout.shipping.html
    • checkout.payment.html
    • checkout.confirmation.html
    • checkout.success.html
    • checkout.error.html

    1. Формирование структуры темы дизайна

    Новую тему дизайна необходимо создавать в виде папки с произвольным именем на вашем компьютере. В ходе создания темы в эту папку будут сохраняться отдельные HTML-шаблоны и другие необходимые файлы (CSS, JavaScript + обязательный файл-манифест theme.xml).

    Тема дизайна витрины может формироваться отдельно — только для Shop-Script, либо в составе семейства тем оформления, имеющих сходные оформительские элементы и предназначенные для использования в нескольких разных приложениях Webasyst с целью создания общего внешнего вида для разных фронтендов в пределах одного сайта. Подробнее о разработке семейств тем дизайна читайте в статье «Родительские темы дизайна».

    2. Содержание основных шаблонов

    index.html

    Шаблон index.html формирует основную структуру страниц витрины с помощью элементов <DOCTYPE>, <html>, <head> и <body>.

    Внутри элемента <head> обычно подключаются CSS-стили и JavaScript-файлы.

    Внутри элемента <body> могут формироваться основное навигационное меню (например, с помощью метода {$wa->apps()}, как это сделано в теме дизайна «Дефолт»), боковые панели, нижняя панель («футер») и тому подобные структурные блоки страницы, общие для всех страниц витрины.

    Важно: для отображения динамически формируемой информации на витрине (в центральной части страницы) необходимо добавить в шаблон index.html переменную {$content}. В случае отсутствия этой переменной все страницы витрины окажутся одинаковыми, т. к. на них не будет отображаться динамически формируемое содержимое: списки товаров на главной странице, информация о конкретном товаре, списки товаров в категориях и т. п.

    home.html

    К шаблону home.html, предназначенному для отображения основной (обычно центральной) части главной страницы специальные требования не предъявляются — он может содержать списки товаров, ссылки на отдельные категории товаров, разнообразные рекламные тексты, видео-ролики и другие подобные материалы.

    category.html

    Свойства категории

    Шаблон category.html предназначен для отображения содержимого категории товаров.

    Описание, наименование, список подкатегорий, META-теги, URL страницы, количество товаров и другие свойства категории содержатся в переменной {$category} в виде элементов ассоциативного массива. Это значит, что для отображения, например, наименования категории необходимо добавить в шаблон category.html переменную {$category.name|escape} (модификатор |escape необходим для правильного отображения на витрине различных специальных символов, которые могут содержаться в названиях категорий, например, часто встречающегося символа «&»).

    Списки товаров

    Для формирования списка товаров следует использовать переменную {$products}, которая содержит массив элементов с информацией о товарах в этой категории. Для считывания отдельных элементов массива обычно используется цикл Smarty {foreach}…{/foreach}.

    Совет: код для отображения списка товаров, используемый в шаблоне category.html, может быть использован и на других страница витрины, например, на странице с результатами поиска, поэтому удобно вынести этот код в отдельный шаблон, назвав его, например, product-list.html. Подключить такой дополнительный шаблон в шаблоне category.html можно с помощью Smarty-функции {include}: 
    {include file='product-list.html'}

    В теме дизайна «Дефолт» для этой же цели используются 2 разных шаблона: list-table.html и list-thumbs.html ­— для формирования списков товаров с разным оформлением в разных местах витрины.

    Фильтры

    Другим ключевым элементом страниц категорий является фильтр товаров — веб-форма для поиска товаров в категории по указанным значениям характеристик. Список характеристик, выбранных для фильтрации в конкретной категории, содержится в переменной {$filters}. Для простоты разработки собственной темы дизайна рекомендуем скопировать из шаблона category.html темы «Дефолт» фрагмент кода, обозначенный комментарием <!— filtering by product features —>, в котором используется переменная {$filters}.

    product.html

    Шаблон product.html используется для формирования основного содержимого страницы товара. Обычно на этой странице отображаются наименование, описание, характеристики товара и кнопка «В корзину».

    Информация о товаре содержится в виде экземпляра класса shopProduct в переменной {$product}.

    Исходный код класса shopProduct находится в файле wa-apps/shop/lib/classes/shopProduct.class.php.

    Например, по аналогии с категориями, наименование товара можно отобразить на витрине с помощью конструкции {$product.name|escape}.

    О том, как разместить изображения товара в шаблоне витрины, читайте в статье «Эскизы изображений».

    Помимо отображения информации о товаре, важной функцией страницы товара является возможность добавить товар в корзину, чтобы затем перейти к оформлению заказа. Форма добавления товара в корзину может быть создана в виде тега <form>, данные которой должны отправляться методом POST на URL, возвращаемый конструкцией {$wa->getUrl(‘/frontendCart/add’)}.

    Артикулы, услуги, информация о складских остатках, рекомендуемые товары

    Эти элементы страницы товара требуют сравнительно сложного программирования с использованием Smarty и JavaScript, поэтому для первоначального ознакомления их реализацию будет полезно посмотреть в шаблоне product.html темы «Дефолт» и затем модифицировать нужным образом для адаптации к вашей собственной теме дизайна.

    cart.html

    Шаблон cart.html используется для отображения страницы со списком товаров, добавленных в корзину. Как правило, на такой странице можно изменить количество заказанных единиц товаров, удалить отдельные товары из корзины либо сразу перейти к оформлению заказа.

    Информация о текущей покупательской корзине содержится в переменной {$cart} в виде ассоциативного массива со следующими элементами:

    • items — список товаров, добавленных в корзину
    • total — общая сумма цен заказанных единиц товаров с учетом выбранных артикулов и вариантов услуг
    • count — общее количество заказанных единиц товаров

    Добавление функций автоматического пересчета стоимости заказа после изменения количества заказанных единиц и выбора вариантов услуг для отдельных товаров, а также обновления содержимого корзины при удалении товаров без перезагрузи страницы требует использования сравнительного большого объема JavaScript-кода. Поэтому при создании собственной темы дизайна предлагаем в качестве основы использовать реализацию страницы корзины из темы «Дефолт» и при необходимости ее доработать.

    error.html

    Если при запросе страницы витрины возникает ошибка (например, «Страница не найдена» или «Внутренняя ошибка сервера»), то для отображения информации об этом используется шаблон error.html. Переменные, доступные в этом шаблоне:

    • $error_message — сообщение об ошибке, генерируемое магазином
    • $error_code — код ответа сервера, например, 404 или 500

    3. Поддержка плагинов

    Базовые темы дизайна Shop-Script (например, тема «Дефолт») имеют встроенную поддержку плагинов. Эта поддержка заключается в том, что в шаблонах темы дизайна присутствуют специальные вставки (хуки), которые позволяют автоматически добавлять на витрину магазина дополнительное содержимое (например, список брендов товарной продукции и т. п.). Пример хука в шаблоне product.html: 

    <!-- plugin hook: 'frontend_product.menu' -->
{* @event frontend_product.%plugin_id%.menu *}
{foreach $frontend_product as $_}{$_.menu}{/foreach}

    Для того чтобы ваша тема дизайна поддерживала отображение дополнительного содержимого с помощью плагинов, скопируйте подобные фрагменты из одной из базовых тем дизайна (например, «Дефолт») в соответствующие шаблоны вашей собственной темы.

    4. CSS- и JavaScript-файлы

    В шаблонах темы дизайна могут подключаться CSS- и JavaScript-файлы фреймворка, а также собственные файлы, относящиеся только к этой теме. Ниже показано, как правильно подключать такие файлы в обоих случаях.

    Подключение общих файлов фреймворка

    Общие CSS- и JavaScript-файлы фреймворка находятся в директориях wa-content/css/ и wa-content/js/ соответственно. Для того чтобы подключить их в шаблоне темы дизайна, следует указывать URL этих директорий с учетом URL, по которому установлен фреймворк. Сделать это можно с помощью переменной {$wa_url}: 

    <link href="{$wa_url}wa-content/css/wa/wa-1.0.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/jquery.cookie.js"></script>

    Подключение собственных файлов темы

    Для подключения собственных CSS- и JavaScript-файлов темы необходимо в шаблонах указывать URL директории с файлами темы дизайна. Для этого рекомендуется использовать переменную {$wa_theme_url}: 

    <link href="{$wa_theme_url}style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_theme_url}script.js"></script>

    Подключаемые в таком примере файлы style.css и script.js следует добавить в папку со всеми остальными шаблонами темы.

    5. Создание файла-манифеста

    Для того чтобы Shop-Script воспринимал набор созданных шаблонов как составные части определенной темы дизайна, необходимо указать все файлы созданной вами темы в специальном файле-манифесте theme.xml. Пример файла-манифеста и описание его элементов смотрите в статье «Интеграция с приложением «Сайт»».

    Важно: идентификатор (id) вашей темы дизайна, указанный в файле-манифесте theme.xml, не должен совпадать с идентификаторами других тем, установленных в магазине!

    6. Загрузка на сервер

    Перед загрузкой файлов темы на сервер их необходимо вместе с файлом-манифестом запаковать в архив формата TAR.GZ. Упаковать нужно только файлы — без папки, в которой вы их создавали на вашем компьютере! Имя файла-архива не имеет значения. Архив необходимо добавить по ссылке «Загрузить тему» в разделе «Витрина».

    После загрузки архива выберите новую тему в настройках маршрутизации интернет-магазина, чтобы она стала использоваться на витрине.

    Как изменить дизайн сайта — Webasyst

    Чтобы изменить дизайн сайта, нужно выбрать другую тему дизайна или изменить существующую тему. Тема дизайна — это набор HTML-, CSS- и других файлов, формирующих внешний вид страниц сайта.

    1. Выбрать другую тему дизайна

    Выбрать другую тему дизайна нужно в настройках правил маршрутизации настраиваются в разделе «Структура» приложения «Сайт». Правила маршрутизации представляют собой разные разделы сайта, работающие при помощи разных приложений Вебасиста.


    Многие темы дизайна поддерживают несколько приложений Вебасиста, поэтому для разделов (правил маршрутизации) разных приложений можно выбрать темы дизайна с одинаковыми названиями. Темы дизайна для разных приложений с одинаковыми названиями выглядят похожим образом и называются семействами.


    2. Изменить тему дизайна

    Темы дизайна можно изменять самостоятельно: с помощью настроек или редактируя исходный код файлов.

    Настройки темы дизайна доступны в секции «Оформление». У каждой темы дизайна свой набор настроек, с их помощью можно редактировать надписи на главной странице, изменять цветовую гамму, выбрать другой тип главного меню, включить или отключить автоматическую загрузку длинных списков и т. д.

    Если доступных настроек недостаточно, вносите изменения в исходный код файлов темы (HTML и CSS) в секции «Шаблоны».

    Изменять исходный код файлов следует аккуратно. Ошибка может привести к порче внешнего вида вашего сайта. Изменения лучше проверять на копии сайта, установленной на резервном веб-сервере (например, на вашем личном компьютере).

    Как отменить все изменения в теме дизайна »
    Видео: как пользоваться редактором дизайна »

    как начать использовать — Webasyst

    Семейство тем дизайна «Гипермаркет» предназначено для использования в интернет-магазинах, созданных с помощью приложения Shop-Script. Поддерживаются также приложения «Сайт», «Блог», «Фото», «Хаб», «Поддержка», «Рассылки», которые используются как вспомогательные — для создания дополнительных разделов на витрине интернет-магазина и в личном кабинете покупателя.

    «Гипермаркет» лучше всего подходит для интернет-магазинов с большим ассортиментом товаров.

    Использование на разных устройствах

    Темы семейства «Гипермаркет» адаптированы для настольных компьютеров и планшетов. Для покупателей, использующих смартфоны, рекомендуется установить другую тему дизайна «Mobile» и выбрать ее в настройках поселений приложений в разделе «Структура» приложения «Сайт».

    Настройки дизайна

    В каждом из приложений для темы дизайна «Гипермаркет» есть страница настроек. В самом начале на ней перечислены настройки приложения «Сайт», потому что его тема является родительской для всего семейства.

    После этого общего набора, в нижней части страницы настроек доступны настройки отдельных приложений — в редакторе дизайна каждого из этих приложений.

    Пример для «Блога»

    Настройка главного меню

    Главное меню сайта настройте в разделе «Настройки → {$wa->apps()} меню» приложения «Сайт»:

    • выберите вариант «Все приложения», чтобы главное меню сформировалось автоматически на основании поселений приложений в разделе «Структура», или
    • выберите вариант «Настроить», чтобы сформировать состав главного меню вручную из любых ссылок с произвольными адресами и названиями.

    Настройка авторизации и личного кабинета

    Чтобы на витрине интернет-магазина была возможность зарегистрироваться и входить в личный кабинет, включите авторизацию в разделе «Личный кабинет» приложения «Сайт».

    Логически тема дизайна построена вокруг витрины интернет-магазина, поэтому удобнее всего выбрать Shop-Script в качестве приложения, ответственного за авторизацию и регистрацию посетителей сайта, в разделе «Личный кабинет → Настройки авторизации».

    Устройство тем дизайна

    Основные файлы семейства «Гипермаркет» — шаблон index.html и базовые CSS-стили — хранятся в теме дизайна приложения «Сайт» и используются темами остальных приложений.

    Блог Webasyst

    Сегодня мы выпускаем незаметное, но очень важное обновление фреймворка Webasyst (версия 1.14), в котором добавляем поддержку авторизации с помощью Webasyst ID.

    Что такое Webasyst ID?

    Webasyst ID — это аккаунт в Центре заказчика Webasyst, дополненный возможностью входа «через этот аккаунт» в ваш Webasyst в облаке или на любом хостинге.

    Это работает так же, как вход на разные сайты через Facebook, «Вконтакте», Google Account, Apple ID и т. д.

    Почему с Webasyst ID удобнее?

    Webasyst ID — это единый пароль для всех сервисов, сайтов и продуктов экосистемы Webasyst.

    Раньше у каждого пользователя Webasyst было минимум два аккаунта и пароля: один — в Центре заказчика, через который можно управлять своими покупками, обращаться в службу поддержки, публиковать сообщения на форуме поддержки и т. д., а второй — непосредственно в вашей панели управления Webasyst для работы с приложениями, управления своим сайтом, интернет-магазином и т. п.

    Наличие этих нескольких аккаунтов вызывало путаницу и непонимание у многих наших клиентов. Особенно у тех, кто впервые регистрируется в облаке и еще незнаком со всеми особенностями работы с нашими продуктами и сервисами.

    После этого обновления достаточно будет создать только один аккаунт — Webasyst ID (в Центре заказчика) и входить с его помощью во все установки Webasyst: в облаке или на ваших серверах, где бы они ни находились.

    Вход через Webasyst ID — по желанию

    Новая авторизация с помощью Webasyst ID является необязательной.

    Обычный способ входа в вашем Webasyst (на вашем сайте), которым вы привыкли пользоваться, останется доступным до тех пор, пока вы сами не захотите включить у себя вход через Webasyst ID в приложении «Настройки»:

    После включения эту настройку можно в любое время снова выключить, если вы решите временно не использовать Webasyst ID.

    Когда эта настройка включена, каждый сотрудник вашей компании (пользователь вашего Webasyst) сможет подключить свой профиль в приложении «Команда» к Webasyst ID.

    Мы будем включать авторизацию с помощью Webasyst ID по умолчанию для новых аккаунтов в облаке Webasyst, чтобы облегчить работу новым пользователям. Но ранее зарегистрированные аккаунты принудительно переводиться на новую схему авторизации сейчас не будут.

    У каждого сотрудника — свой личный Webasyst ID

    Важной особенностью нового способа входа является то, что Webasyst ID может быть не только у администратора (того, кто создал аккаунт в облаке или установил фреймворк Webasyst и покупает лицензии в «Инсталлере» на свое имя), но и каждый сотрудник компании. Это удобно в больших организациях, где разные отделы используют разные приложения, устанавливают плагины для своих приложений независимо друг от друга, обращаются в службу поддержки Webasyst по разным вопросам. С переходом на новую схему каждый сотрудник сможет делать это в рамках своего личного Webasyst ID без доступа к «общему» (корпоративному) Центру заказчика.

    Тут уместна такая аналогия: установка (или облачный аккаунт) Webasyst — это устройство, например, компьютер, смартфон, планшет. А Webasyst ID — это пользователь (физическое лицо, личность), который имеет к нему доступ с некоторыми правами.

    У одного пользователя может быть несколько таких «устройств» (т. е. он может иметь доступ к панелям управления разных Вебасистов), но теперь он сможет пользоваться ими всеми с одним и тем же паролем, который заодно подойдет и для любых взаимодействий с Webasyst, сервисами и продуктами, которые предоставляем мы и наши партнёры.

    Webasyst ID для партнеров, 2FA и многое другое — скоро!

    Этот первый релиз фреймворка с поддержкой Webasyst ID выглядит почти незаметным и позволяет «всего лишь» связать вход в панель управления вашего Webasyst с аккаунтом в Центре заказчика. Но этим внедрение Webasyst ID, конечно, не ограничится.

    Следующими шагами мы представим возможность авторизации с помощью Webasyst ID на любых сторонних сайтах и в мобильных приложениях. Это будет особенно полезно разработчикам Webasyst и партнерам-экспертам для предоставления поддержки своим пользователям. Авторизация (разумеется, с согласия пользователя!) позволит партнёру, в частности, быстро узнать своего клиента и получить актуальный статус лицензии приобретенного приложения, плагина или темы дизайна.

    Разработчики мобильных приложений смогут реализовать удобное подключение к API приложений Webasyst с помощью Webasyst ID.

    Затем появятся полноценная двухфакторная авторизация (2FA) для Webasyst ID и другие полезные функции, которые помогут сделать работу с Webasyst ещё более безопасной.

    Следите за анонсами в нашем блоге и на форуме разработчиков Webasyst!

    Тема дизайна «Дизайн со вкусом 2.0»

    Спасибо что выбрали нас! Вместе мы сделаем наш продукт лучше! С уважением, команда «Дизайн со вкусом».

    «Дизайн со вкусом 2.0 Responsive» — это современный и адаптивный шаблон для основных приложений Webasyst (сайт, интернет-магазин, хаб, фото, блог и рассылки), представленный профессиональной командой разработчиков «Дизайн со вкусом».

    Мы более 7 лет специализируемся на создании и обслуживании интернет магазинов. Интуитивно понятный интерфейс, качественный и удобный дизайн подходит для любой сферы деятельности. С нашей стороны мы гарантируем качественную поддержку, надежную работу шаблона, регулярные обновления в целях улучшения визуальных и функциональных требований.


    Полезные ссылки
    Инструкция по настройке ссылка
    Демо ссылка
    Варианты фона для слайдера товаров (паралакс) ссылка

    Почему вы должны выбрать нас?

    • Адаптация под любые устройства (технология Twitter Bootstrap).
    • Надежная и быстрая работа шаблона
    • Бесплатная оперативная поддержка и помощь в настройке магазина.
    • Регулярные бесплатные обновления, расширяющий функционал.
    • Большой выбор: темный или светлый дизайн, 2 ширины сайта, 50 текстур, 17 изображений на задний фон и 19 цветовых оформлений + также вы можете выбрать свой цвет.
    • Корректное отображение во всех популярных браузерах.
    • Тема разработана под приложения Webasyst (сайт, интернет-магазин, хаб, фото, блог и рассылки).

    Последние нововведения!
    • Новинка! Темная тема дизайна — посмотреть
    • Тема дизайна для приложения «Рассылки» и «Хаб»
    • Обратная связь. Как подключить ссылка
    • Виджеты комментирования ВКонтакте и Facebook
    • Новогодняя тема оформления! Включается дополнительно в настройках.
          • Шапочка деда мороза на логотипе компании
          • Новогодние стикеры
          • 2 новогодних paralax баннера
          • 7 новогодних подложек
    • Быстрый просмотр (опционально) по наведению на изображение.
    • Sidebar (левая боковая панель)
    • Дизайн плагина «Купить в 1 клик» ссылка
    • Настройка для плагина «Логотип категории» ссылка, а также его оформление
    • Вид отображения товаров плиткой или списком
    • Новое пользовательское меню
          • Недавно просмотренные товары
          • Сравнение
          • Избранное
    • Кнопки «Добавить/удалить» в избранное и в сравнение на странице каталога
    • Всплывающая корзина
    • Кнопка прокрутка вверх
    • Слайдер (слайдеров товаров или слайдер изображений)
    • Поделиться в социальных сетях + настройки дизайна к кнопкам поделиться
    • Вкладки на странице товара (описание, отзывы, характеристики)
    • Процент % скидки, для товаров с зачеркнутой ценой. Процент % высчитывается автоматически
    • Меню в несколько колонок
    • Сворачивание фильтров
    • Поддержка диапазонных фильтров
    Наша поддержка:

    Мы в соц. сетях, узнайвайте об акциях первыми, добавляйтесь:

    Подпишись на рассылку!

    Получайте новости о наших новых разработках и других акциях. Подробнее об акциях у нас в группе ссылка.

    Тема дизайна «InCart»

    Перейти в демо-магазин

     

    ВАША главная страница!

    Это всегда проблема, верно? Ведь главная страница сайта определяет отношение к нему у посетителя. А инструментов для её оформления обычно ни у кого нет. Мы придумали решение этой проблемы, которым гордимся. Это секционная система! Вы можете посмотреть на демо-магазине варианты этих секций. На своем сайте вы можете легко изменять их порядок так, как хочется вам, оставляя только те секции, которые вам нравятся и подходят. Со временем, по мере поступления предложений и идей, их список будет расти.

     

    4 варианта карточки товара

    3 варианта вида каталога

    Плиточный

    Подробный

    Список

     

    Шапка конструктор

    • 7 вариантов верхней части
    • 5 вариантов центральной части
    • 3 варианта оформления главного меню с возможность менять цвет.
    Хотите посмотреть поближе на нашем сайте?

     

    Адаптивен до мозга костей

    Мы гордимся адаптивностью дизайна, который смотрится прекрасно во всех устройствах. Для улучшения работы в мобильных браузерах применена технология mobile-first. Для качественного отображения на retina-дисплеях повсюду используется SVG, а не обычные картинки.

    Промо карточки

    Покажите вашим клиентам популярные товары или важную информацию в красивых блоках

     

    Горизонтальное или вертикальное меню

    • Несколько видов построения выпадающего меню
    • Возможность использовать изображения для категорий

    Удобная для пользователя прилипающая панель(отключаемо)

     

    Быстрый поиск и выпадающая корзина(отключаемы)

     

    Цветовая кастомизация

    Шаблон дает возмоность задать абсолютно любой цвет для главного меню

    Адаптация плагинов

    Обычно, устанавливая эти плагины, вы портите дизайн сайта, т.к. у каждого плагина своё оформление, которое не соответствует стилю вашего сайта. А некоторые требуют ваших познаний в HTML для установки. Мы решили эти проблемы за вас! Плагины из списка ниже стилизованы нами так, что они не смотрятся инородными. Со временем этот список будет пополняться.

    • Купить в 1 клик
    • Уведомление о поступлении
    • Бренды с картинками
    • Обратный звонок (lite)
    • Иконка, баннер и изображение категории
    • Картинка для записи блога

     

    Это всё?

    Конечно нет! Мы описали лишь малую часть того, на что вы можете не обратить внимания при просмотре демо-версии. Помимо этого InCart имеет:

    • Несколько видов отображения карточек товаров
    • Красивую анимацию многих элементов
    • Удобные настройки шаблона
    • Несколько вариантов вида страница товара
    • Валидный код верстки W3.org
    • Микроразметку schema.org для поисковиков
    • Набор встроенных плагинов. Сумма покупки всех платных аналогов была бы больше стоимости самого шаблона.

    Купить шаблон

    В случае возникновения вопросов или проблем, просим писать на почту [email protected]

    Блог Webasyst

    Платформа

    Webasyst была обновлена ​​до версии 1.8.0 .

    WYSIWYG и HTML-редакторы

    Мы сделали более комфортным и надежным редактирование страниц сайта, содержащих код Smarty и разнообразные теги HTML. Если вы иногда переключаетесь между режимами редактирования WYSIWYG и HTML, то есть несколько нововведений для вас.

    WYSIWYG редактор предупреждает о возможных изменениях HTML-кода

    Редактор WYSIWYG ожидает некоторой стандартной разметки HTML для правильного форматирования текста, вот как это работает.Если ваш HTML-код не соответствует его «ожиданиям», то редактор либо изменит ваши теги, либо удалит некоторые из них, оставив только текст.

    То же самое и раньше, но без предупреждения, что расстроило некоторых пользователей. Мы не можем заставить редактор «переварить» любого HTML19-кода , если не усложним его логику, потратив на это огромное количество времени. Поэтому мы просто добавляем предупреждение, появляющееся при каждом переходе из режима редактирования HTML в WYSIWYG, и запрашиваем ваше согласие на возможные автоматические изменения.

    Если вам нужно переключиться в редактор WYSIWYG, проверьте ваш HTML позже.

    WYSIWYG недоступно для страниц, содержащих теги Smarty

    Чтобы сделать логику визуального редактора простой, мы отключили ее для страниц с кодом Smarty. Если на вашей странице есть теги Smarty, редактор WYSIWYG не откроется и будет отображать только уведомление.

    Если вам нужно использовать Smarty на некоторых страницах, вам придется обойтись без WYSIWYG-редактора на этой странице.Визуальное форматирование текста останется доступным для любых других страниц без кода Smarty.

    Загрузка изображений в режиме HTML

    Чтобы добавить изображение на страницу, вы должны были переключиться в режим WYSIWYG, потому что не было никакой другой возможности для загрузки изображения. А переключение в режим WYSIWYG сломало ваши теги Smarty или заменило некоторые ваши HTML-теги, что было проблемой!

    Мы решили эту проблему, добавив кнопку загрузки изображений в режиме редактирования HTML.Теперь вам не нужно переключаться на WYSIWYG только для загрузки изображения.

    Мы добавили то, что вы просили

    • простых цветов в палитре
    • шрифт Verdana

    … и исправил ошибки, о которых вы сообщили

    • Отключена чрезмерная прокрутка страницы до фрагмента кода, найденного функцией поиска.
    • Исправлена ​​загрузка изображений с разными символами в именах файлов.
    • Убрано чрезмерное форматирование тега HTML