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

Каждый из вас когда-нибудь замечал, насколько скучны и однотипны выпадающие списки (кроме 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;
            }
        }
    });
});


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

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