Выбор валюты OpenCart AJAX: как быстро добавить переключатель без перезагрузки

В современном онлайн‑магазине каждый посетитель ожидает мгновенной реакции сайта. Особенно это касается переключения валюты: пользователь не хочет ждать перезагрузки страницы, чтобы увидеть цены в своём номинале. В этой статье мы разберём, как реализовать выбор валюты OpenCart AJAX — динамическую валютную панель, которая обновляет все цены на лету. Это не только повышает удобство, но и улучшает показатели конверсии и SEO, так как поисковые роботы видят актуальные цены без дополнительных запросов.

Разбор задачи

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

• Сохранение выбранной валюты в сессии.
• Обновление цен и формата валюты в реальном времени.
• Минимальное влияние на скорость загрузки.
• Универсальность: работает на всех страницах шаблона.

Пошаговое решение

1. Создаём небольшую форму с выпадающим списком валют и кнопкой «Поменять».

2. Добавляем обработчик события change на поле выбора валюты, который отправляет AJAX‑запрос к контроллеру OpenCart.

3. В контроллере обновляем сессию и recalculating prices, возвращаем JSON‑объект с новыми данными.

4. На клиенте парсим ответ и заменяем все элементы, содержащие цены, используя селекторы, которые OpenCart генерирует автоматически (например, .price).

5. Сохраняем выбранную валюту в cookie, чтобы при переходе на другую страницу пользователь видел обновлённые цены без дополнительного действия.

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

Рабочий код

// В файле catalog/controller/common/currency.php
public function index() {
    // Получаем список валют и текущую выбранную
    $this->load->model('localisation/currency');
    $currencies = $this->model_localisation_currency->getCurrencies();
    $this->data['currencies'] = $currencies;
    $this->data['currency'] = $this->session->data['currency'];
    $this->response->setOutput($this->load->view('common/currency', $this->data));
}

public function set() {
    if (isset($this->request->post['currency'])) {
        $currency = $this->request->post['currency'];
        $this->session->data['currency'] = $currency;
        // Отправляем новые цены в кеш (если используется кеш)
        $this->response->setOutput(json_encode(['success' => true]));
    }
}

// В файле catalog/view/javascript/common.js (или отдельный JS)
$(document).on('click', '.currency-select', function(e){
    e.preventDefault();
    var cur = $(this).data('code');
    $.ajax({
        url: 'index.php?route=common/currency/set',
        type: 'POST',
        data: {currency: cur},
        dataType: 'json',
        success: function(json){
            if (json.success){
                // Обновляем все элементы, содержащие цены
                $('.price').each(function(){
                    var price = $(this).data('price');
                    // Пример: price содержит объект с ценами в разных валютах
                    $(this).text(price[cur]);
                });
                // Обновляем заголовок валюты
                $('#currency-selector').text(cur);
            }
        }
    });
});

/* Стили для переключателя */
.currency-select{cursor:pointer;padding:5px 10px;border:1px solid #ccc;border-radius:3px;}
.currency-select:hover{background:#f0f0f0;}

Типичные ошибки

• Не обновляем кеш: если в магазине включён кеш, после смены валюты цены остаются прежними, пока не обновится кеш.
• Несогласованность данных: данные цены в JSON должны содержать ключи для каждой валюты, иначе возникнут undefined.
• Ошибки в пути AJAX: если путь к контроллеру неверен, запрос вернёт 404 и переключатель не сработает.
• Отсутствует обработка ошибок AJAX: пользователь не видит, что что‑то пошло не так.

FAQ

Как быстро добавить переключатель валюты в шаблон?

Вставьте блок с классом currency-select в нужном месте, передайте data-code и привяжите к нему скрипт. Убедитесь, что в catalog/view/theme/yourtheme/template/common/currency.tpl подключены необходимые стили и JS.

Можно ли кешировать результаты AJAX?

Да, но нужно добавить заголовок Cache-Control: no-cache в ответ и обновлять кеш в контроллере, чтобы цены всегда были актуальны.

Что делать, если цены не меняются после переключения?

Проверьте, что объект price содержит нужные валюты и что селекторы .price действительно находятся в DOM. Также убедитесь, что скрипт не конфликтует с другими JS‑библиотеками.

Заключение

Внедрение AJAX‑переключателя валюты повышает удобство пользователя и снижает нагрузку на сервер.

Чек‑лист

• Подключён контроллер common/currency и метод set.
• JS‑обработчик привязан к .currency-select и отправляет AJAX‑запрос.
• JSON‑ответ содержит статус и обновлённые цены.
• Кеш очищается после смены валюты.
• Отображаются цены в выбранной валюте без перезагрузки.