Редактируем клавишу "купить" в OpenCart 5/5 (2)

Стандартный блок клавиш карточки товара в OpenCart состоит из 3-х кнопок: "Купить", "В сравнение" и "Закладки".

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

Давайте разберём, как это сделать на примере дефолтного шаблона OpenCart.

Читать далее


Как отключить java - скрипт при определённом разрешении экрана? 5/5 (1)

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

Почему? Потому что некоторые скрипты некорректно отрабатывают на мобильных устройствах, мешая пользователям просматривать контент на сайте, поэтому  возникает необходимость отключить javascript на этих девайсах.

Как же это сделать?

Для того, чтобы отключить javascript при нужном разрешении экрана в разделе <head> необходимо прописать такую функцию:

<script type="text/javascript">
{
if (screen.width > 700) document.write ('<script type="text/javascript" src="ваш_скрипт.js"></sc' + 'ript>');
}
</script>

где

  •  screen.width > 700 - разрешение, при котором будет происходить отключение скрипта.
  •  src="ваш_скрипт.js" - путь до нужного вам скрипта на сервере.

 

 


Адаптивный дизайн сайта 5/5 (1)

адаптивный дизайн сайта

Как сделать сайт адаптивным?

Адаптивный дизайн ("резиновая" верстка) - одно из основных требований к современному сайту. С развитием цифровых технологий и появлением на рынке мобильных  устройств смартфонов и планшетов адаптивный дизайн стал одним из ключевых требований при разработке любого веб - ресурса.

Так что же такое адаптивность? Давайте рассмотрим на конкретном примере.

Допустим, у нас есть сайт со стандартной разметкой, представляющий собой  хедер, боковые сайдбары, блок контента и футер (рис.1).
Читать далее


Горизонтальное css - меню для сайта

css меню

В этом примере  мы создадим простое горизонтальное меню для сайта при помощи html и css.

Для этого сначала сделаем html - разметку нашего будущего меню:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Отлично. После того, как разметка готова, необходимо задать меню необходимые свойства посредством css.

Для этого пропишем следующий код:

<style>
ul{width:700px;margin:0 auto;}
li{display:inline-block;border:1px solid rgb(95, 79, 17);padding:10px 20px;margin-right:5px;background:coral;color:white;text-transform:uppercase;}
li:hover{background:orange;color:black;}
a{color:white;text-decoration:none}
</style>

Читать далее


Модальное окно на Bootstrap 4/5 (2)

модальное окно на bootstrap

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

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

В этой же статье рассмотрим, как подключить модальное окно на сайт,  которое появляется при нажатии на ссылку. А делать мы это будем с помощью фреймворка Twitter Bootstrap.
Читать далее


Как поменять значок корзины Open Cart? 5/5 (2)

Как поменять стандартный значок корзины Open Cart?

Для того, чтобы поменять значок корзины в CMS Opencart, необходимо:

  1. Загрузить на сервер вашу иконку.
  2. Прописать путь к ней в нескольких файлах.

Для начала через админ-панель открываем файл cart.twig, расположенный по адресу: дизайн→редактор шаблона→common→cart.twig и находим в строке 2 такой код:

<i class="fa fa-shopping-cart"></i>.

cart.twig

рис.1 cart.twig

Читать далее


Как перенести корзину в Open Cart? 4/5 (1)

Переносим корзину в верхнее меню OpenCart

Многие при создании интернет - магазина на OpenCart сталкиваются с необходимостью перенести корзину в место, отличное от того, где она расположена  изначально. В нашем примере рассмотрим,  как перенести её в верхнее меню хедера стандартного шаблона OpenCart.

Для того, чтобы перенести корзину OpenCart в верхнее меню, открываем в админ-панели файл header.twig, расположенный по адресу дизайн→редактор шаблона→common→header.twig и находим в строке 77 такой код:

 <div class="col-sm-3">{{ cart }}</div>

перенести корзину open cart

рис 1.  header.twig

Читать далее


Как удалить ссылки из футера OpenCart?

Чистим футер OpenCart от лишних ссылок

Ещё одна вещь, которую мне предстояло решить в процессе создания магазина - это удаление лишней информации из футера сайта.
Подвал OpenCart перегружен различными ссылками на страницы тех. помощи и информацией об акциях, скидках, купонах и т.д.
Удалить всё ненужные строчки, как и добавить свои, можно через файл footer.twig. расположенный в панели управления по адресу:  дизайн→редактор шаблона→common→footer.twig.
Допустим, если вам нужно убрать информацию о сертификатах, партнёрской программе и производителях, то удаляем (а лучше комментируем, вдруг понадобятся), эти строки:

<!--<li><a href="{{ manufacturer }}">{{ text_manufacturer }}</a></li>
<li><a href="{{ voucher }}">{{ text_voucher }}</a></li>
<li><a href="{{ affiliate }}">{{ text_affiliate }}</a></li>-->

Аналогично поступаем с другими ненужными пунктами, не забывая сохранять изменения.

Читать далее


Как добавить адреса и телефоны в шапку OpenCart?

Так получилось, что срочно возникла необходимость создать интернет-магазин на OpenCart.
При этом практического опыта работы с этой CMS до начала проектирования сайта у меня не было.
В арсенале были знания css3 и html5, немного php и javascript, а из популярных систем управления я был знаком только с joomla.
Но отступать было некуда — задача была поставлена и рабочий процесс закипел.

Первая проблема, с которой я столкнулся, это добавление информации о магазине (адреса, телефоны и т.д.) в шапку сайта.

После непродолжительных поисков контроллера, отвечающего за вывод шапки в OpenCart, в файловой структуре на хостинге был найден файл header.twig, который, как выяснилось, необходимо править не через сервер, а через админ-панель.
Там он расположен по адресу: дизайн→редактор шаблона→common→header.twig.

Открываем файл в редакторе, и в нужном месте вставляем следующий код:

<p class="adress">
Адрес нашего магазина: ул.Опенкартова 3
<br>
т. 8-911-567-7890
</p>

Выровнять текст по странице и задать размер шрифта можно, прописав соответствующий код в css-файле, расположенном по адресу:
../public_html/catalog/view/theme/default/stylesheet, где «default» — название вашей темы.

Или прописать необходимые параметры прямо в header.twig через <p style="font-size:00px; margin-left:00px;"> и т.д.

Так же через header.twig можно отредактировать верхнее меню, перенести строку поиска и корзину, но об этом в следующих статьях.