Обратная связь на CMS OpenCart 4.1. (3 часть)

В прошлой статье мы с вами вывели на витрину блок обратной связи нашего интернет магазина (CMS OpenCart 4.1), но выглядит она пока ещё печально, что и не удивительно — в первую очередь нужно было вывести информацию, а потом уже видя её, можно работать над внешним видом, этим мы с вами сегодня и займёмся.

1. Откроем файл: ../public_html/catalog/view/template/common/footer.twig и вместо этой строки:

<div class="dropup-center dropup fixed-bottom feedback">

вставим эту:

<div class="dropup-center dropup fixed-bottom feedback d-flex justify-content-end">

2. Откроем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла вставим эти строки:

.feedback .btn {
    margin-right: 20px;
    min-width: 240px;
    background: #1E88E5;
    font-size: 16px;
    border-radius: 10px 10px 0 0; 
}
.feedback .btn .fa-solid {
    padding-right: 10px;
    font-size: 18px;
}

.feedback .show {width: 240px;}

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

Теперь поработаем над внешним видом выпадающего списка, добавляем ниже эти строки:

.fb-phone,
.fb-mail {
    text-align: center;
}
.fb-phone i,
.fb-mail i { 
    color: #1e88e5;
}
.fb-phone .text_phone,
.fb-mail .text_phone{
    color: #9E9E9E;
    margin:0;
}
.fb-dah i {
    color: #f00;
}
.fb-social i {
    color: #1e88e5;
    font-size: 40px;
}
.fb-social i:hover {
    color: #000;
}

Чистим кеш смотрим результат:

Видим косяки вёрстки — текст группируется в левой части, иконки и текст нужно раздвинуть, блоки разделить между собой, отлично — задача ясна, делаем. 🙂

3. Откроем файл: ../public_html/catalog/view/template/common/footer.twig и вместо этих строк:

<ul class="dropdown-menu">
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fb-phone">
                {{ icon_phone1 }}{{ phone1 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone1 }}</p>
            </div>
            <div class="fb-phone">
                {{ icon_phone2 }}{{ phone2 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone2 }}</p>
            </div>
            <div class="fb-phone">
                {{ icon_phone3 }}{{ phone3 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone3 }}</p>
            </div>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fb-mail">
                <a href="mailto:{{ email1 }}">{{ icon_email1 }}{{ email1 }}</a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email1 }}</p>
            </div>
            <div class="fb-mail">
                <a href="mailto:{{ email2 }}">{{ icon_email2 }}{{ email2 }}</a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email2 }}</p>
            </div>
            <div class="fb-mail">
                <a href="mailto:{{ email3 }}">{{ icon_email3 }}{{ email3 }}</a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email3 }}</p>
            </div>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fb-dah">
                {{ icon_dah1 }}{{ day_dah1 }}{{ hours_dah1 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
            <div class="fb-dah">
                {{ icon_dah2 }}{{ day_dah2 }}{{ hours_dah2 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
            <div class="fb-dah">
                {{ icon_dah3 }}{{ day_dah3 }}{{ hours_dah3 }}
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto">
            <div class="fb-social">
               <div class="col-sm-12">
                <a href="{{ link_social1 }}">{{ icon_social1 }}</a>
                <a href="{{ link_social2 }}">{{ icon_social2 }}</a>
                <a href="{{ link_social3 }}">{{ icon_social3 }}</a>
                <a href="{{ link_social4 }}">{{ icon_social4 }}</a>
               </div>
               <div class="col-sm-12">
                <a href="{{ link_messenger1 }}">{{ icon_messenger1 }}</a>
                <a href="{{ link_messenger2 }}">{{ icon_messenger2 }}</a>
                <a href="{{ link_messenger3 }}">{{ icon_messenger3 }}</a>
                <a href="{{ link_messenger4 }}">{{ icon_messenger4 }}</a>
               </div>
            </div>
        </div>
    </li>
</ul>

вставляем эти:

<ul class="dropdown-menu">
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="col-sm-12">
            <div class="fb-phone">
                {{ icon_phone1 }}<span>{{ phone1 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone1 }}</p>
            </div>
            <div class="fb-phone">
                {{ icon_phone2 }}<span>{{ phone2 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone2 }}</p>
            </div>
            <div class="fb-phone">
                {{ icon_phone3 }}<span>{{ phone3 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_phone3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_phone3 }}</p>
            </div>
        </div>
    </li>
    <hr>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="col-sm-12">
            <div class="fb-mail">
                <a href="mailto:{{ email1 }}">{{ icon_email1 }}<span>{{ email1 }}</span></a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email1 }}</p>
            </div>
            <div class="fb-mail">
                <a href="mailto:{{ email2 }}">{{ icon_email2 }}<span>{{ email2 }}</span></a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email2 }}</p>
            </div>
            <div class="fb-mail">
                <a href="mailto:{{ email3 }}">{{ icon_email3 }}<span>{{ email3 }}</span></a>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_email3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
                <p class="text_phone">{{ text_email3 }}</p>
            </div>
        </div>
    </li>
    <hr>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="col-sm-12">
            <div class="fb-dah">
                {{ icon_dah1 }}<span>{{ day_dah1 }}</span><span>{{ hours_dah1 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah1 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
            <div class="fb-dah">
                {{ icon_dah2 }}<span>{{ day_dah2 }}</span><span>{{ hours_dah2 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah2 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
            <div class="fb-dah">
                {{ icon_dah3 }}<span>{{ day_dah3 }}</span><span>{{ hours_dah3 }}</span>
                <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ tooltip_dah3 }}"><i class="fa-solid fa-circle-exclamation"></i></span>
            </div>
        </div>
    </li>
    <hr>
    <li class="list-group-item d-flex justify-content-between align-items-start">
        <div class="col-sm-12">
            <div class="fb-social">
               <div class="col-sm-12">
                <a href="{{ link_social1 }}">{{ icon_social1 }}</a>
                <a href="{{ link_social2 }}">{{ icon_social2 }}</a>
                <a href="{{ link_social3 }}">{{ icon_social3 }}</a>
                <a href="{{ link_social4 }}">{{ icon_social4 }}</a>
               </div>
               <div class="col-sm-12">
                <a href="{{ link_messenger1 }}">{{ icon_messenger1 }}</a>
                <a href="{{ link_messenger2 }}">{{ icon_messenger2 }}</a>
                <a href="{{ link_messenger3 }}">{{ icon_messenger3 }}</a>
                <a href="{{ link_messenger4 }}">{{ icon_messenger4 }}</a>
               </div>
            </div>
        </div>
    </li>
</ul>

Чистим кеш и смотрим:

4. Откроем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и вместо этих строк:

.fb-phone,
.fb-mail {
    text-align: center;
}
.fb-phone i,
.fb-mail i { 
    color: #1e88e5;
}
.fb-phone .text_phone,
.fb-mail .text_phone{
    color: #9E9E9E;
    margin:0;
}
.fb-dah i {
    color: #f00;
}
.fb-social i {
    color: #1e88e5;
    font-size: 40px;
}
.fb-social i:hover {
    color: #000;
}

вставляем эти:

.fb-phone,
.fb-mail,
.fb-dah,
.fb-social {
    text-align: center;
}
.fb-phone span,
.fb-mail span,
.fb-dah span {
    padding: 0 5px;
}
.fb-dah span+span {
    padding-left: 0
}
.fb-phone i,
.fb-mail i { 
    color: #1e88e5;
}
.fb-phone .text_phone,
.fb-mail .text_phone{
    color: #546E7A;
    margin:0;
}
.fb-dah i {
    color: #f00;
}
.fb-social i {
    color: #1e88e5;
    font-size: 40px;
}
.fb-social i:hover {
    color: #000;
}

Чистим кеш и проверяем:

Вот теперь всё отлично, так и оставим. 😉

P.S. — В следующей статье мы доработаем нашу форму — встроим ссылки на номера телефонов, иконки подсказок перенесём в админку (можно будет задавать разные + если сейчас убрать информацию иконка подсказки остаётся, не продумал сразу этот момент), ну и подумаю, может ещё стоит встроить общие заголовки для блоков — телефонов, почт, дням и часам работы и соц сетям-мессенджерам.

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

На сегодня всё, до новых встреч.