Блог о создании и продвижении сайтов
Стандартный блок клавиш карточки товара в OpenCart состоит из 3-х кнопок: "Купить", "В сравнение" и "Закладки".
При проектировании простых интернет - магазинов на этой системе управления, не предусматривающих наличие личного кабинета и функции сравнения, возникает необходимость удалить эти кнопки, т. к. они попросту не нужны.
Давайте разберём, как это сделать на примере дефолтного шаблона OpenCart.
Очень часто возникает необходимость сделать так, чтобы какой - либо скрипт не срабатывал на устройствах с маленькой диагональю экрана или низким разрешением, таких, как смартфоны и планшеты.
Почему? Потому что некоторые скрипты некорректно отрабатывают на мобильных устройствах, мешая пользователям просматривать контент на сайте, поэтому возникает необходимость отключить javascript на этих девайсах.
Как же это сделать?
Для того, чтобы отключить javascript при нужном разрешении экрана в разделе <head> необходимо прописать такую функцию:
где
Адаптивный дизайн ("резиновая" верстка) - одно из основных требований к современному сайту. С развитием цифровых технологий и появлением на рынке мобильных устройств смартфонов и планшетов адаптивный дизайн стал одним из ключевых требований при разработке любого веб - ресурса.
Так что же такое адаптивность? Давайте рассмотрим на конкретном примере.
Допустим, у нас есть сайт со стандартной разметкой, представляющий собой хедер, боковые сайдбары, блок контента и футер (рис.1).
Читать далее
В этом примере мы создадим простое горизонтальное меню для сайта при помощи html и css.
Для этого сначала сделаем html - разметку нашего будущего меню:
Отлично. После того, как разметка готова, необходимо задать меню необходимые свойства посредством css.
Для этого пропишем следующий код:
Модальные (всплывающие) окна - один из самых популярных и востребованных инструментов практически на любом сайте. Формы обратной связи, новости портала, инфо-блоки о скидках, акциях и предложениях - это лишь малая часть того, для чего используются модальные окна на современных веб - ресурсах.
Очень часто в блогах и интернет-магазинах можно встретить диалоговые окна, всплывающие при заходе посетителя на страницу, при его уходе с неё, или же появляющиеся через определённый промежуток времени. Все они хорошо повышают конверсию сайта при грамотной настройке, и в следующий статьях я обязательно подробно о них расскажу.
В этой же статье рассмотрим, как подключить модальное окно на сайт, которое появляется при нажатии на ссылку. А делать мы это будем с помощью фреймворка Twitter Bootstrap.
Читать далее
Для того, чтобы поменять значок корзины в CMS Opencart, необходимо:
Для начала через админ-панель открываем файл cart.twig, расположенный по адресу: дизайн→редактор шаблона→common→cart.twig и находим в строке 2 такой код:
рис.1 cart.twig
Многие при создании интернет - магазина на OpenCart сталкиваются с необходимостью перенести корзину в место, отличное от того, где она расположена изначально. В нашем примере рассмотрим, как перенести её в верхнее меню хедера стандартного шаблона OpenCart.
Для того, чтобы перенести корзину OpenCart в верхнее меню, открываем в админ-панели файл header.twig, расположенный по адресу дизайн→редактор шаблона→common→header.twig и находим в строке 77 такой код:
рис 1. header.twig
Ещё одна вещь, которую мне предстояло решить в процессе создания магазина - это удаление лишней информации из футера сайта.
Подвал OpenCart перегружен различными ссылками на страницы тех. помощи и информацией об акциях, скидках, купонах и т.д.
Удалить всё ненужные строчки, как и добавить свои, можно через файл footer.twig. расположенный в панели управления по адресу: дизайн→редактор шаблона→common→footer.twig.
Допустим, если вам нужно убрать информацию о сертификатах, партнёрской программе и производителях, то удаляем (а лучше комментируем, вдруг понадобятся), эти строки:
Аналогично поступаем с другими ненужными пунктами, не забывая сохранять изменения.
Так получилось, что срочно возникла необходимость создать интернет-магазин на OpenCart.
При этом практического опыта работы с этой CMS до начала проектирования сайта у меня не было.
В арсенале были знания css3 и html5, немного php и javascript, а из популярных систем управления я был знаком только с joomla.
Но отступать было некуда — задача была поставлена и рабочий процесс закипел.
Первая проблема, с которой я столкнулся, это добавление информации о магазине (адреса, телефоны и т.д.) в шапку сайта.
После непродолжительных поисков контроллера, отвечающего за вывод шапки в OpenCart, в файловой структуре на хостинге был найден файл header.twig, который, как выяснилось, необходимо править не через сервер, а через админ-панель.
Там он расположен по адресу: дизайн→редактор шаблона→common→header.twig.
Открываем файл в редакторе, и в нужном месте вставляем следующий код:
Выровнять текст по странице и задать размер шрифта можно, прописав соответствующий код в css-файле, расположенном по адресу:
../public_html/catalog/view/theme/default/stylesheet, где «default» — название вашей темы.
Или прописать необходимые параметры прямо в header.twig через <p style="font-size:00px; margin-left:00px;"> и т.д.
Так же через header.twig можно отредактировать верхнее меню, перенести строку поиска и корзину, но об этом в следующих статьях.