Замена(кастомизация) стандартного выпадающего списка c ddslick

У каждого дизайнера есть мечта - сделать идеальный дизайн сайта. Главное не ему не стоит забывать о возможностях верстки).

Каждый из вас когда-нибудь замечал, насколько скучны и однотипны выпадающие списки (кроме Mac OS X). Непорядок. Надо сделать красиво.

Для реализации нам потребуется: ddslick, jquery, css и немного мозгов. Как удобно, что всем доступен наш плагин по подключению различных библиотек jQuery - его легко найти на Magento Connect.

Приступим:

1. Подключаем ddslick & jquery. Это можно сделать за 5 секунд в панели управления (если стоит наш плагин :) ), или подключить другим способом, например через xml

2. Инициализируем ddslick:

jQuery('#custom-currency-selector').ddslick();

Если вам нужно задать какие-то параметры скрипта - то вписываем их в {}

Важно! скрипт должен инициализироваться после инициализации jQuery

Правим css - и наслаждаемся красотой.

Но вдруг всплывает маленькая проблемка - если у селектов были заданы onclick - то они пропали (так как ddslick полностью меняет контент селектора).

Как же быть? Написать скрипт на jQuery, который будет при клике на селект переходить по атрибуту value?

А вот и нет! Внешний скрипт не поможет (он банально не будет работать), т.к. ddslick не любит, когда вмешиваются. Поэтому придется работать с callback.

В итоге получается такой скрипт (для селектора выбора валюты в Magento шириной 45 пикселей):

jQuery(function(){
    var $count = 0;
    jQuery('#custom-currency-selector').ddslick({
        width:45,
        onSelected: function(data){
            $count += 1;
            if ($count > 1){
                var $href=jQuery('.dd-selected-value').attr('value');
                window.location.href = $href;
            }
        }
    });
});

Первый вызов (при инициализации скрипта) пропускаем - он нам не нужен, а то получится, что при заходе будет сразу редирект :(

Готово. Теперь и выбор валюты выглядит чудненько, и редирект работает.