БЛОГОДЖУМЛА - БЛОГ О ДЖУМЛА

Делаем красивый выбор валюты - select с картинками

  • Категория: Virtuemart 1
  • Автор:
  • Просмотров: 15000

 Хочу рассказать Вам как сделать в интернет магазине красивый выбор валюты.

Мне кажется, именно такие мелочи показывают качество Вашего магазина, и даже может быть "продают" товар.

Вот так это выглядит в закрытом состоянии:

Выбор валюты - select с картинками

А вот как если щёлкнуть по валюте:

Выбор валюты - select с картинками раскрытое состояние

 

Мучить мы будем, разумеется, модуль 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 и мы просто показываем нужный.

Внимание!!! Мои расширения продаются только на сайтах beagler.ru и joomext.ru
Только при покупке на сайтах beagler.ru и joomext.ru я гарантирую помощь в установке, техподдержку и обновления.
При покупке моих расширений на каких-либо других сайтах я никакой ответственности не несу, техподдержку и обновления не предоставляю, отсутствие в расширениях вирусов, бэкдоров, шеллов и т.д. не гарантирую!
Остерегайтесь подделок
Back to top

Отправка заказа. Пожалуйста, подождите ...

Спасибо за заказ! Мы свяжемся с Вами в ближайшее время

Возникла проблема с отправкой заказа. Пожалуйста, попробуйте еще раз..

Пожалуйста, заполните все поля формы перед отправкой.