27 марта 2015 г.

Рубль, что это? Криптовалюта? Заговор мирового правительства? А он точно деревянный? Не знаю, вопросов к нему всегда много, но могу точно сказать, что он не тонет, а для выживания и этого хватит. Есть у России планы сделать рубль альтернативной мировой валютой, амбициозные планы однако, но благородные. Попытки предпринимались неоднократно, достаточно почитать историю развития самого рубля.

Но чтобы хоть как-то покорить мир, рубль должен быть узнаваемым - иметь уникальное обозначение наравне с долларом. Впервые реальная попытка придать этому смысл была в 2007-м году. Придумали и утвердили официально, а уже на практике столкнулись с проблемами отображения и печати. О том, насколько успешно сегодня продвигается идея рубля как мировой валюты, можно, в некоторой степени, судить по использованию нового знака рубля в интернет-магазинах. Честно говоря, статистика не утешительна, но процесс идёт. Попробуем и мы внести свой маленький вклад в развитие этого процесса.

В этой статье речь пойдёт о том, как самостоятельно внедрить в OpenCart знак рубля. Для начала нам потребуются шрифты со знаком рубля. Вариантов в сети уже достаточно, но следует помнить, что отдельные шрифты на всю таблицу кодировки символов могут занимать некоторый объём. А с учётом того, что устаревшие версии браузеров (об этом ниже ещё будет сказано) воспринимают не все типы шрифтов, то приходится подключать несколько разных по типу файлов, что в конечном итоге сказывается на скорости загрузки сайта на медленных каналах связи. Живущие в мегаполисах владельцы магазинов, особенно розничных сетей, об этом не задумываются и перегружают интерфейс своего магазина "техническим" контентом. В результате чего, объём загруженного сайта - от мегабайта и выше, что уже само по себе является признаком дурного тона (в веб-дизайне). Поэтому лучше использовать ограниченные шрифты, необходимые только для отображения конкретных символов, в данном случае - знаков рубля.

Необходимые ссылки на ресурсы представлены, можно приступить к пошаговой реализации нашего решения.
  1. В файле ./catalog/view/theme/default/stylesheet/stylesheet.css прописываем подключение выбранного шрифта и стиль знакоместа в общем виде:

    @font-face {
        font-family: "RublTT";
        src: url('RublTT.ttf') format(''truetype');
        font-weight: normal;
        font-style: normal;
    }


    .ruble-sign {
        font-family: "RublTT";
        font-size: 1.1em;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        display: inline;
    }
  2. В начале файла ./catalog/view/javascript/common.js добавляем следующий код:

    function addRubleSign() {
    $('.price, #cart-total, #total, .total, .mini-cart-total, .option', ':contains(ք)').html(function(i,val) {
        return val.replace(/ք/g,'<span class=\'ruble-sign\'>i</span>');
    });
    }

    2.1 В этом же файле после строки $(document).ready(function() { добавляем строку вызова функции:  addRubleSign();

    2.2 Здесь же, найти $('#cart').load('index.php?route=module/cart #cart > *'); и заменить на $('#cart').load('index.php?route=module/cart #cart > *', function(){  addRubleSign(); });
  3. В панели администрирования OpenCart в разделе Локализация -> Валюты для рубля символ справа необходимо задать как ք (можно скопировать отсюда).
Это решение, по части типа шрифта, рассчитано на современные версии браузеров. Если необходима кроссбраузерная поддержка, включая устаревшие версии браузеров, то первый пункт необходимо переработать согласно  вашим предпочтениям и статье Bulletproof @font-face syntax.

Из недостатков представленного решения стоит отметить видимую задержку обновления знака рубля, а также недоступность этого обновления для модулей, использующих асинхронные запросы типа Ajax. В последнем случае необходимо прописывать вызов функции addRubleSign(); во всех скриптах JavaScript, где есть вывод продуктов с ценами в динамическом виде.
* * *

Для тех, кто не хочет тратить время и вносить какие-либо изменения в существующий код, есть готовое решение в виде модуля OpenCart Rouble Symbol. Автору удалось найти альтернативный способ отображения (почти мгновенного) символа рубля без описанных выше доработок. При этом общий объём подгружаемых шрифтов не превышает 5 килобайт (!).

Backend
Рисунок 1. Административный интерфейс модуля OpenCart Rouble Symbol.

Поддерживаются браузеры следующих версий: Internet Explorer 9+, Opera 12+, Firefox 10+, Chrome 16+, Safari 5+. Теоретически должны поддерживаться и более ранние версии браузеров IE и Firefox (проверить на всех не представляется возможным). Если какой-то браузер не сможет подгрузить шрифт, то по умолчанию будет показана латинская строчная буква p.

Frontend
Рисунок 2. Результат работы модуля OpenCart Rouble Symbol.

Модуль можно приобрести на общих основаниях, стоимость 150 руб. Дополнительная информация предоставляется автором через страницу обратной связи или в комментариях ниже (по части функциональности).

0 comments:

Отправить комментарий

  • RSS
  • Twitter
  • Youtube