Opencart 3.x - Создаём Страницу Сотрудники Магазина (2 Часть)

Тема в разделе "Модули и дополнения", создана пользователем admin, 12 июл 2018.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.681
    Симпатии:
    122.397
    Репутация:
    215
    В этой статье мы с вами доработаем страницу преимуществ нашего магазина и выведем ссылку на эту страницу в шапку нашего магазина.

    opencart-sotrudniki-2-03.jpg

    Список задач на сегодня:
    1. Работаем с кодом (HTML модуль)
    2. Работаем со стилями (CSS)
    3. Работаем с кодом (TWIG файл)
    Приступим:

    1. Страница контактов получилась довольно длинной и на неё много пустого пространства, поэтому я решил её немного оптимизировать и вывести сотрудников колонками, этим мы сейчас и займёмся, откроем админку и переходим:

    Каталог – Статьи – Сотрудники магазина – Редактировать

    Переключаемся на вид код (</>) и вместо этого кода (1-89):

    Код:
    <div class="row sotrudniki">
    <h3>Руководство</h3>
    <div class="col-sm-12 sotrudnik-1">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-12 sotrudnik-2">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Менеджеры</h3>
    <div class="col-sm-12 sotrudnik-3">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-12 sotrudnik-4">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-12 sotrudnik-5">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-3.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Техническая поддержка</h3>
    <div class="col-sm-12 sotrudnik-6">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-4.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-12 sotrudnik-7">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-12 sotrudnik-8">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Служба доставки</h3>
    <div class="col-sm-12 sotrudnik-9">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-5.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    вставляем этот:

    Код:
    <div class="row sotrudniki">
    <h3>Руководство</h3>
    <div class="col-sm-6 sotrudnik-1">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-6 sotrudnik-2">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Менеджеры</h3>
    <div class="col-sm-4 sotrudnik-3">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-4 sotrudnik-4">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-4 sotrudnik-5">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-3.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Техническая поддержка</h3>
    <div class="col-sm-4 sotrudnik-6">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-4.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-4 sotrudnik-7">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <div class="col-sm-4 sotrudnik-8">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    <h3>Служба доставки</h3>
    <div class="col-sm-6 sotrudnik-9">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-5.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    (P.S.мы просто задали вместо col-sm-12, col-sm-6 и col-sm-4)

    Смотрим результат:

    opencart-sotrudniki-2-01.jpg
    Выглядит не очень, приведём всё к одному виду + добавим отступы между сотрудниками:

    Код:
    <div class="row sotrudniki">
    <h3>Руководство</h3>
    <div class="col-sm-12">
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-1">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-2">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="dolgnosti">Должность</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    </div>
    <h3>Менеджеры</h3>
    <div class="col-sm-12">
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-3">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-4">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-5">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-3.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    </div>
    <h3>Техническая поддержка</h3>
    <div class="col-sm-12">
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-6">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-4.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-7">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-1.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-8">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/woman-2.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    </div>
    <h3>Служба доставки</h3>
    <div class="col-sm-12">
    <div class="col-sm-4">
    <div class="col-sm-12 sotrudnik-9">
    <div class="col-sm-4">
    <img src="image/catalog/sotrudniki/man-5.png" class="img-responsive">
    </div>
    <div class="col-sm-8">
    <p class="fio">Ф.И.О.</p>
    <p class="contacts">Контакты</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    Смотрим результат:

    opencart-sotrudniki-2-02.jpg
    Отлично получилось, но шрифты Ф.И.О. и контактов теперь слишком крупны, необходимо немного уменьшить, этим мы сейчас и займёмся.

    2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (мы вставляли их в конец файла):

    Код:
    .fio {
    font-size: 20px;
    padding-top: 10px;
    }
    .dolgnosti {
    font-size: 16px;
    }
    .contacts {
    font-size: 15px;
    }
    вставим эти:

    Код:
    .fio {
    font-size: 16px;
    padding-top: 10px;
    }
    .dolgnosti {
    font-size: 15px;
    }
    .contacts {
    font-size: 14px;
    }
    (P.S.Вы можете задать и иные размеры + добавить цвет, тень, подчёркивание)

    3. Откроем файл ../catalog/view/theme/default/template/common/header.twig и после этих строк (46-47):

    Код:
    <li><a href="oplata"><i class="fa fa-angle-right" aria-hidden="true"></i> Оплата</a></li>
    <li><a href="delivery"><i class="fa fa-angle-right" aria-hidden="true"></i> Доставка</a></li>
    добавим эту:

    Код:
    <li><a href="sotrudniki-magazina"><i class="fa fa-angle-right" aria-hidden="true"></i> Сотрудники магазина</a></li>
    Чистим в админке и в браузере кэш и смотрим что у нас получилось:

    opencart-sotrudniki-2-03.jpg
     
    фдлщк нравится это.