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

В прошлой статье мы с вами создали блок обратной связи в админке нашего интернет магазина, а сегодня мы выведем кнопку обратной связи с выпадающим списком на витрину нашего магазина сделанного на CMS OpenCart 4.1.

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

</body></html>

вставим эти:

<div class="dropup-center dropup fixed-bottom feedback">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        {{ icon_feedback }}{{ text_feedback }}
    </button>
    <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>
</div>

2. Откроем файл: ../public_html/catalog/controller/common/footer.php и после этой строки:

$data['powered'] = sprintf($this->language->get('text_powered'), $this->config->get('config_name'), date('Y', time()));

вставим эти:

// Button Feedback
$data['icon_feedback'] = html_entity_decode($this->config->get('config_icon_feedback'), ENT_QUOTES, 'UTF-8');
$data['text_feedback'] = html_entity_decode($this->config->get('config_text_feedback'), ENT_QUOTES, 'UTF-8');
$data['text_fb_phones'] = html_entity_decode($this->config->get('config_fb_phones'), ENT_QUOTES, 'UTF-8');
$data['icon_phone1'] = html_entity_decode($this->config->get('config_icon_phone1'), ENT_QUOTES, 'UTF-8');
$data['phone1'] = html_entity_decode($this->config->get('config_phone1'), ENT_QUOTES, 'UTF-8');
$data['text_phone1'] = html_entity_decode($this->config->get('config_text_phone1'), ENT_QUOTES, 'UTF-8');
$data['tooltip_phone1'] = html_entity_decode($this->config->get('config_tooltip_phone1'), ENT_QUOTES, 'UTF-8');
$data['icon_phone2'] = html_entity_decode($this->config->get('config_icon_phone2'), ENT_QUOTES, 'UTF-8');
$data['phone2'] = html_entity_decode($this->config->get('config_phone2'), ENT_QUOTES, 'UTF-8');
$data['text_phone2'] = html_entity_decode($this->config->get('config_text_phone2'), ENT_QUOTES, 'UTF-8');
$data['tooltip_phone2'] = html_entity_decode($this->config->get('config_tooltip_phone2'), ENT_QUOTES, 'UTF-8');
$data['icon_phone3'] = html_entity_decode($this->config->get('config_icon_phone3'), ENT_QUOTES, 'UTF-8');
$data['phone3'] = html_entity_decode($this->config->get('config_phone3'), ENT_QUOTES, 'UTF-8');
$data['text_phone3'] = html_entity_decode($this->config->get('config_text_phone3'), ENT_QUOTES, 'UTF-8');
$data['tooltip_phone3'] = html_entity_decode($this->config->get('config_tooltip_phone3'), ENT_QUOTES, 'UTF-8');
$data['text_fb_email'] = html_entity_decode($this->config->get('config_fb_email'), ENT_QUOTES, 'UTF-8');
$data['icon_email1'] = html_entity_decode($this->config->get('config_icon_email1'), ENT_QUOTES, 'UTF-8');
$data['email1'] = html_entity_decode($this->config->get('config_email1'), ENT_QUOTES, 'UTF-8');
$data['text_email1'] = html_entity_decode($this->config->get('config_text_email1'), ENT_QUOTES, 'UTF-8');
$data['tooltip_email1'] = html_entity_decode($this->config->get('config_tooltip_email1'), ENT_QUOTES, 'UTF-8');
$data['icon_email2'] = html_entity_decode($this->config->get('config_icon_email2'), ENT_QUOTES, 'UTF-8');
$data['email2'] = html_entity_decode($this->config->get('config_email2'), ENT_QUOTES, 'UTF-8');
$data['text_email2'] = html_entity_decode($this->config->get('config_text_email2'), ENT_QUOTES, 'UTF-8');
$data['tooltip_email2'] = html_entity_decode($this->config->get('config_tooltip_email2'), ENT_QUOTES, 'UTF-8');
$data['icon_email3'] = html_entity_decode($this->config->get('config_icon_email1'), ENT_QUOTES, 'UTF-8');
$data['email3'] = html_entity_decode($this->config->get('config_email3'), ENT_QUOTES, 'UTF-8');
$data['text_email3'] = html_entity_decode($this->config->get('config_text_email3'), ENT_QUOTES, 'UTF-8');
$data['tooltip_email3'] = html_entity_decode($this->config->get('config_tooltip_email3'), ENT_QUOTES, 'UTF-8');
$data['text_fb_dah'] = html_entity_decode($this->config->get('config_fb_dah'), ENT_QUOTES, 'UTF-8');
$data['icon_dah1'] = html_entity_decode($this->config->get('config_icon_dah1'), ENT_QUOTES, 'UTF-8');
$data['day_dah1'] = html_entity_decode($this->config->get('config_day_dah1'), ENT_QUOTES, 'UTF-8');
$data['hours_dah1'] = html_entity_decode($this->config->get('config_hours_dah1'), ENT_QUOTES, 'UTF-8');
$data['tooltip_dah1'] = html_entity_decode($this->config->get('config_tooltip_dah1'), ENT_QUOTES, 'UTF-8');
$data['icon_dah2'] = html_entity_decode($this->config->get('config_icon_dah2'), ENT_QUOTES, 'UTF-8');
$data['day_dah2'] = html_entity_decode($this->config->get('config_day_dah2'), ENT_QUOTES, 'UTF-8');
$data['hours_dah2'] = html_entity_decode($this->config->get('config_hours_dah2'), ENT_QUOTES, 'UTF-8');
$data['tooltip_dah2'] = html_entity_decode($this->config->get('config_tooltip_dah2'), ENT_QUOTES, 'UTF-8');
$data['icon_dah3'] = html_entity_decode($this->config->get('config_icon_dah1'), ENT_QUOTES, 'UTF-8');
$data['day_dah3'] = html_entity_decode($this->config->get('config_day_dah3'), ENT_QUOTES, 'UTF-8');
$data['hours_dah3'] = html_entity_decode($this->config->get('config_hours_dah3'), ENT_QUOTES, 'UTF-8');
$data['tooltip_dah3'] = html_entity_decode($this->config->get('config_tooltip_dah3'), ENT_QUOTES, 'UTF-8');
$data['text_fb_social'] = html_entity_decode($this->config->get('config_fb_social'), ENT_QUOTES, 'UTF-8');
$data['icon_social1'] = html_entity_decode($this->config->get('config_icon_social1'), ENT_QUOTES, 'UTF-8');
$data['link_social1'] = html_entity_decode($this->config->get('config_link_social1'), ENT_QUOTES, 'UTF-8');
$data['icon_social2'] = html_entity_decode($this->config->get('config_icon_social2'), ENT_QUOTES, 'UTF-8');
$data['link_social2'] = html_entity_decode($this->config->get('config_link_social2'), ENT_QUOTES, 'UTF-8');
$data['icon_social3'] = html_entity_decode($this->config->get('config_icon_social3'), ENT_QUOTES, 'UTF-8');
$data['link_social3'] = html_entity_decode($this->config->get('config_link_social3'), ENT_QUOTES, 'UTF-8');
$data['icon_social4'] = html_entity_decode($this->config->get('config_icon_social4'), ENT_QUOTES, 'UTF-8');
$data['link_social4'] = html_entity_decode($this->config->get('config_link_social4'), ENT_QUOTES, 'UTF-8');
$data['icon_messenger1'] = html_entity_decode($this->config->get('config_icon_messenger1'), ENT_QUOTES, 'UTF-8');
$data['link_messenger1'] = html_entity_decode($this->config->get('config_link_messenger1'), ENT_QUOTES, 'UTF-8');
$data['icon_messenger2'] = html_entity_decode($this->config->get('config_icon_messenger2'), ENT_QUOTES, 'UTF-8');
$data['link_messenger2'] = html_entity_decode($this->config->get('config_link_messenger2'), ENT_QUOTES, 'UTF-8');
$data['icon_messenger3'] = html_entity_decode($this->config->get('config_icon_messenger3'), ENT_QUOTES, 'UTF-8');
$data['link_messenger3'] = html_entity_decode($this->config->get('config_link_messenger3'), ENT_QUOTES, 'UTF-8');
$data['icon_messenger4'] = html_entity_decode($this->config->get('config_icon_messenger4'), ENT_QUOTES, 'UTF-8');
$data['link_messenger4'] = html_entity_decode($this->config->get('config_link_messenger4'), ENT_QUOTES, 'UTF-8');

P.S. — все строки из админки преобразуются в html код, благодаря чему мы можем отображать наши иконки, использовать html теги и т.д.

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