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

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.733
    Симпатии:
    130.100
    Репутация:
    215
    Всем привет, в этой статье мы с вами займёмся созданием информационной страницы с сотрудниками нашего магазина (нашей фирмы), иногда такая информация бывает полезна покупателям.

    opencart-3-0-sotrudniki-02.jpg

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

    1. Подбираем фотографии наших сотрудников, я для примера взял вот такие картинки:
    man.png man-1.png man-2.png man-3.png man-4.png man-5.png woman.png woman-1.png woman-2.png

    Переходим на ftp переходим в папку: ../image/catalog, создаём папку sotrudniki (вы можете дать папке любое название, это название для примера) и закидываем наши фотографии в эту папку (можно и через файловый менеджер в админке), запоминаем название папки и названия и расширение фотографий.

    2. Откроем админку и переходим: Каталог –> Статьи –> Добавить и заполняем:
    • Название статьи: Сотрудники магазина
    • Мета-тег Title: Сотрудники магазина / Интернет магазин About-all.ru
    • Мета-тег Description: Команда нашего интернет магазина
    • Мета-тег Keywords: интернет магазин, сотрудники, команда сайта
    (P.S.Вы можете заполнить иначе)

    Ну а теперь основное, переходим к описанию, переключаемся на работу с исходным кодом (Иконка </>) и заполняем:

    Код:
    <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">тут список всех наших сотрудников</div>

    После этого у каждого нашего сотрудника персональная обёртка:

    Код:
    <div class="col-sm-12 sotrudnik-1">1 сотрудник</div>
    
    <div class="col-sm-12 sotrudnik-2">2 сотрудник</div>
    и т.д.

    И каждый сотрудник состоит из двух частей, в первой части у нас прописана фотография сотрудника:

    Код:
    <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>
    Вся личная информация сотрудника, у первых 2х сотрудников указана должность:

    Код:
    <p class="dolgnosti">Должность</p>
    У остальных эта строка отсутствует, но если вам нужно вы можете её создать.

    Смотрим какая ссылка образовалась во вкладке SEO, у меня это: sotrudniki-magazina, именно по этому адресу теперь доступна наша страница, давайте посмотрим что-же у нас с вами получилось:

    opencart-3-0-sotrudniki-01.jpg

    Как видим информация выводится, но выглядит как то не очень, нужно оформить, этим мы с вами и займёмся.

    3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

    Код:
    .sotrudniki {
    padding: 0px;
    margin: 5px;
    }
    .sotrudniki h3 {
    text-align: center;
    }
    .sotrudnik-1,
    .sotrudnik-2,
    .sotrudnik-3,
    .sotrudnik-4,
    .sotrudnik-5,
    .sotrudnik-6,
    .sotrudnik-7,
    .sotrudnik-8,
    .sotrudnik-9 {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    }
    .sotrudnik-1 {
    border: 2px solid #F44336;
    }
    .sotrudnik-2 {
    border: 2px solid #E91E63;
    }
    .sotrudnik-3 {
    border: 2px solid #9C27B0;
    }
    .sotrudnik-4 {
    border: 2px solid #673AB7;
    }
    .sotrudnik-5 {
    border: 2px solid #3F51B5;
    }
    .sotrudnik-6 {
    border: 2px solid #2196F3;
    }
    .sotrudnik-7 {
    border: 2px solid #03A9F4;
    }
    .sotrudnik-8 {
    border: 2px solid #00BCD4;
    }
    .sotrudnik-9 {
    border: 2px solid #009688;
    }
    .fio {
    font-size: 20px;
    padding-top: 10px;
    }
    .dolgnosti {
    font-size: 16px;
    }
    .contacts {
    font-size: 15px;
    }
    Смотрим на результат:

    opencart-3-0-sotrudniki-02.jpg
    Неплохо, но очень много пустого пространства, можно сделать несколько сотрудников в ряд + необходимо вывести ссылку на страницу в шапку магазина, это мы сделаем в следующей статье.
     
    Nes нравится это.