Хочу рассказать Вам как сделать в интернет магазине красивый выбор валюты.
Мне кажется, именно такие мелочи показывают качество Вашего магазина, и даже может быть "продают" товар.
Вот так это выглядит в закрытом состоянии:
А вот как если щёлкнуть по валюте:
Мучить мы будем, разумеется, модуль mod_virtuemart_currencies. А точнее файл /modules/mod_virtuemart_currencies/mod_virtuemart_currencies.php
Такой внешний вид можно придать элементу select только с использованием JavaScript, но ведь это нас не остановит?
Мы используем великолепную библиотеку Jquery. Наш скрипт сам скроет модуль и покажет нужную красивую картинку.
Открываем файл и немного меняем форму. Вместо
<form action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" method="post">
Пишем
<form action="<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>" method="post" name="currencies">
Имя нам необходимо, чтобы при выборе валюты скрипт мог "засабмитить" форму.
Также необходимо изменить сам select. Вместо
echo $ps_html->selectList( 'product_currency', $GLOBALS['product_currency'], $currencies, 1, '', 'style="width:130px;"' );
Пишем:
echo $ps_html->selectList( 'product_currency', $GLOBALS['product_currency'], $currencies, 1, '', 'onChange="currencies.submit()" style="width:130px;"', 'divselect' );
где "'divselect" - будет id нашего select-а. Для того чтобы он появился немного меняем виртовский вывод select-а. Открываем файл /administrator/components/com_virtuemart/classes/ps_html.php и находим в самом начале функцию selectList и меняем её. Вместо
function selectList($name, $value, &$arr, $size=1, $multiple="", $extra="") {
$html = '';
if( empty( $arr ) ) {
$arr = array();
}
$html = "<select class=\"inputbox\" name=\"$name\" size=\"$size\" $multiple $extra>\n";
while (list($key, $val) = each($arr)) {
$selected = "";
if( is_array( $value )) {
if( in_array( $key, $value )) {
$selected = "selected=\"selected\"";
}
}
else {
if(strtolower($value) == strtolower($key) ) {
$selected = "selected=\"selected\"";
}
}
$html .= "<option value=\"$key\" $selected>$val";
$html .= "</option>\n";
}
$html .= "</select>\n";
return $html;
}
Пишем
function selectList($name, $value, &$arr, $size=1, $multiple="", $extra="", $id="") {
$html = '';
if( empty( $arr ) ) {
$arr = array();
}
if ($id!='') $id='id="'.$id.'"';
$html = "<select $id class=\"inputbox\" name=\"$name\" size=\"$size\" $multiple $extra>\n";
while (list($key, $val) = each($arr)) {
$selected = "";
if( is_array( $value )) {
if( in_array( $key, $value )) {
$selected = "selected=\"selected\"";
}
}
else {
if(strtolower($value) == strtolower($key) ) {
$selected = "selected=\"selected\"";
}
}
$html .= "<option value=\"$key\" $selected>".shopMakeHtmlSafe($val);
$html .= "</option>\n";
}
$html .= "</select>\n";
return $html;
}
Далее убираем кнопку - скрипт будет срабатывать просто при выборе валюты, лишний клик по кнопке не нужен. Убираем
<input class="button" type="submit" name="submit" value="<?php echo 'Change Currency' ?>" />
На этом этапе можете сохранить все файлы и проверить - у формы появилось name, у селекта - id. Валюта меняется при выборе.
Теперь навешиваем JavaScript. Идем в самый конец файла mod_virtuemart_currencies.php , где закрывается фома </form> и грузим Jquery:
<?php
$document =& JFactory::getDocument();
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
Причем, сам Jquery закачивать себе на сайт не будем - гораздо удобнее взять его с гугла.
Весь текст нашего скрипта мы присвоим переменной $js, а потом с помощью
$document->addScriptDeclaration($js);
разместим скрипт в head нашей страницы.
В первую очредь - включаем бесконфликтный режим, чтобы наш скрипт не воеовал с другими скриптами:
$js="jQuery.noConflict();
Далее все наши функции должны быть обернуты в
jQuery(function(){
});
Теперь напишем функцию, отрисовывающую красивый select:
function redesign(select, addclass) {
addclass = typeof(addclass) != 'undefined' ? addclass : '';
jQuery(select).wrap('<div class=\"sel_wrap ' + addclass + '\"/>');
var sel_options = '';
var selected_option = false;
jQuery(select).children('option').each(function() {
if(jQuery(this).is(':selected')){
selected_option = jQuery(this).index();
}
sel_options = sel_options + '<div id= \"sel_option_'+jQuery(this).val()+'\" class=\"sel_option\" value=\"' + jQuery(this).val() + '\"><span>' + jQuery(this).html() + '</span></div>';
});
var sel_imul = '<div class=\"sel_imul\">\
<div class=\"sel_selected\">\
<div id= \"sel_option_selected_'+jQuery(select).children('option').eq(selected_option).val()+'\" class=\"selected-text\"><span>' + jQuery(select).children('option').eq(selected_option).html() + '</span></div>\
<div class=\"sel_arraw\"></div>\
</div>\
<div class=\"sel_options\">' + sel_options + '</div>\
</div>';
jQuery(select).before(sel_imul);
}
И сразу вызовем её
redesign('#divselect');
Далее добавим обработку мышиного клика по дивам:
jQuery('.sel_imul').live('click', function() {
jQuery('.sel_imul').removeClass('act');
jQuery(this).addClass('act');
if (jQuery(this).children('.sel_options').is(':visible')) {
jQuery('.sel_options').hide();
}
else {
jQuery('.sel_options').hide();
jQuery(this).children('.sel_options').show();
}
});
jQuery('.sel_option').live('click', function() {
var tektext = jQuery(this).html();
jQuery(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);
jQuery(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').attr('id', 'sel_option_selected_'+jQuery(this).attr('value'));
jQuery(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
jQuery(this).addClass('sel_ed');
var tekval = jQuery(this).attr('value');
tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
jQuery(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
if (jQuery(this).val() == tekval) {
jQuery(this).attr('selected', 'select');
}
});
document.currencies.submit();
});
var selenter = false;
jQuery('.sel_imul').live('mouseenter', function() {
selenter = true;
});
jQuery('.sel_imul').live('mouseleave', function() {
selenter = false;
});
jQuery(document).click(function() {
if (!selenter) {
jQuery('.sel_options').hide();
jQuery('.sel_imul').removeClass('act');
}
});
Где "document.currencies.submit();" - отправляет форму.
Для того чтобы мы могли навесить флажки валют - скрипт делает для каждого дива с валюты свой id, например - sel_option_UAH, если валюта уже выбрана - sel_option_selected_UAH.
Теперь добавляем CSS в template.css шаблона:
.sel_wrap{height:25px}
.sel_wrap select{display:none}
.sel_imul{width:200px}
.sel_imul .sel_selected{position:relative;padding:0 0 0 14px}
.sel_imul.act .sel_selected{}
.sel_imul .sel_options{
background:#474747;overflow:auto;position:absolute;width:186px;display:none;z-index:10;padding:7px 0 7px 14px;
-moz-box-shadow:0 3px 7px #555;-webkit-box-shadow:0 3px 7px #555;box-shadow:0 3px 7px #555}
.sel_options .sel_option, .selected-text{background-image:url(../images/flasg.png);padding:0 0 0 27px;line-height:27px;color:#FFF;background-repeat:no-repeat;cursor:pointer}
.selected-text span {border-bottom:1px dotted #FFF}
.sel_options .sel_option:hover span {border-bottom:1px solid #FFF}
#sel_option_USD, #sel_option_selected_USD {background-position:0 -48px}
#sel_option_EUR, #sel_option_selected_EUR {background-position:0 -73px}
#sel_option_RUB, #sel_option_selected_RUB {background-position:0 1px}
#sel_option_UAH, #sel_option_selected_UAH {background-position:0 -23px}
Нюанс - все флаги лежат у нас в одном файле - /images/flasg.png и мы просто показываем нужный.