Я пытаюсь изменить модуль prestashop, который позволяет отображать группы атрибутов по блокам: если продукт имеет более одной группы атрибутов, отображается первый блок.После выбора одного атрибута этой группы отображается вторая группа.Если группа атрибутов имеет цвет, мне нужно отобразить ее во всплывающем окне.Я добавил этот код в конец js-файла модуля:
$(document).ready(function(e) {
$('.input-color').on('mouseover', function(e){
let color = $(this).parent().find('.color').css('background-color');
let image = $(this).parent().find('.color').css('background-image');
console.log(color, 'this');
if(color) {
$('#cover-background').show().css({'background-color': color,'width': '400px', 'height': '400px',
'margin': '0 auto', 'position': 'absolute', 'z-index': 99, 'left': '-60%', 'top': '40%'});
}
if(image) {
$('#cover-background').show().css({'background-image': image,'width': '400px', 'height': '400px',
'margin': '0 auto', 'position': 'fixed', 'z-index':999, 'left': '20%', 'top':'30%'});
}
});
$('.input-color').on('mouseout', function(e){
$('#cover-background').hide();
});
});
И div с id = cover-background. Всплывающее окно отлично работает для первой группы атрибутов.Но после нажатия на один из атрибутов onmouseover не работает.Вы можете увидеть это здесь: http://decoelem2.kamilane.odns.fr/16-15976-table-basse-relevable-extensible-bessy.html (нажмите кнопку PERSONNALISER для отображения первой группы)
Код для отображения блока (это только часть всего кода модуля):
$output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
<input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
<span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
title="' + attributes[l] + '">\n\
<span class="sr-only">' + attributes[l] + '</span>\n\
' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
</span>\n\
</li>';
}
}
Я могу отправить файл или весь модуль, если вам это нужно.
Большое спасибо за вашу помощь!
[править] Вот все функции(Думаю):
function generate_html_content_bloc(first, id_group, id_group_next)
{
$output = '';
class_sup = '';
for (j in fa_groups) { //on parcourt les groupes d'attributs
groupName_id = 'fa_group_' + j;
groups = fa_groups[j];
name_group = groups['name'];
y = j.replace('g_', '');
if (!first && id_group_next != j){
if(array_key_exists(j, tread_group)){
$(".product-variants").append(tread_group[j]);
}
continue;
}
$output += '<div id="field_' + j + '" class="clearfix product-variants-item">';
$output += '<span class="control-label"><strong>Choisissez : </strong>' + name_group + ' </span><br />';
attributes = groups['attributes']; //On a ici le tableau des attributs pour le groupe
if (groups['group_type'] == 'radio') {
$output += '<ul id="group_' + j + '" class="radio_btn_list radio_btn_list_' + j + '">';
$output += '<li id="li_list_0_' + j + '" class="input-container pull-xs-left float-xs-left hide-element ' + class_sup + ' attr_disabled">\n\
<input id="g_radio_0' + j + '" class="input-radio attribute_radio g_radio_' + j + '" type="radio" data-product-attribute="' + y + '" \n\
name="group[' + y + ']" value="0" checked="checked" title="' + not_avialable + '" disabled="true">\n\
<span class="radio-label radio-label-desabled"> </span>\n\
</li>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<li id="radio_' + k + '" class="input-container pull-xs-left float-xs-left' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' attr_disabled"' : '') + '">\n\
<input type="radio"' + ((fa_gray_radio && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : '') + ' id="g_radio_' + j + '_' + k + '" \n\
class="input-radio attribute_radio g_radio_' + j + '" data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 0);" />\n\
<span class="radio-label">' + attributes[l] + '</span>\n\
</li>';
}
$output += '</ul>';
} else if (groups['group_type'] == 'color') {
$output += '<ul id="group_' + j + '" class="clearfix">';
$output += '<li id="li_list_0_' + j + '" class="float-xs-left pull-xs-left input-container color_' + j + ' selected hide-element ' + class_sup + '">\n\
<input id="color_0_' + j + '" class="input-color" type="radio" data-product-attribute="' + j + '" name="group[' + y + ']" \n\
value="0" checked="checked" disabled="true">\n\
<span class="color_select color texture" style="background-image: url(' + fa_col_img_dir + 'croix.png)" title=""></span>\n\
</li>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<li class="float-xs-left pull-xs-left input-container color_' + k + ((/*(sizecolors && fa_colors[k]['value'] == '') ||*/ (fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)) ? ' fl_color_unavalable_li' : '') + '">\n\
<input id="color_' + k + '_' + j + '" class="input-color" type="radio"' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" title="' + not_avialable + '"' : ' title="' + attributes[l] + '"') + ' \n\
data-product-attribute="' + y + '" name="group[' + y + ']" \n\
value="' + k + '" onclick="set_selected_n(\'' + j + '\', ' + k + ',\'' + fa_key_val[j] + '\', 1);">\n\
<span ' + ((sizecolors && fa_colors[k]['value'] != '') ? 'class="color_select color" style="background-color: ' + fa_colors[k]['value'] + ';"' : '') + '\n\
' + ((sizecolors && fa_colors[k]['value'] == '') ? 'class="color_select color texture" style="background-image: url('+fa_colors[k]['img']+')"' : '') + '\
title="' + attributes[l] + '">\n\
<span class="sr-only">' + attributes[l] + '</span>\n\
' + ((fa_gray_color && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? '<span title="' + not_avialable + '" class="disabled"></span>' : '') + '\n\
</span>\n\
</li>';
}
} else if (groups['group_type'] == 'select') {
$output += '<select class="form-control form-control-select" name="group[' + y + ']" data-product-attribute="' + y + '" id="group_' + j + '" \n\
onchange="set_selected_n(\'' + j + '\', this.value,\'' + fa_key_val[j] + '\', 2);">';
$output += '<option value="0" selected="selected" id="li_list_0_' + j + '">' + name_select + '</option>';
for (var k in attributes) {
l = k;
k = k.replace('k_','');
if (!fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock)
continue;
else if(!first && allowBuyWhenOutOfStock && displaydecoop && !in_array(k, attri_int_dec)) //on supprime les déclinaison non existantes
continue;
$output += '<option value="' + k + '"' + ((fa_gray_select && in_array(k, attribNotInStockWith) && !allowBuyWhenOutOfStock) ? ' disabled="true" class="fa_disabled"' : '') + '>' + attributes[l] + '</option>';
}
$output += '</select>';
}
$output += '<span class="attribute-arrow-right arrow-'+groups['group_type']+' group_' + j + ' displaynone icon icon-arrow-right'+(((fa_attr_all && (id_group_next == j/* || first_first*/)) ? ' arrow-right-show' : ''))+'"><i class="material-icons">arrow_forward</i></span>';
if(fa_attr_all && first_first)
first_first = false;
if(first || !fa_attr_all)
$output += '</div>';
if (first && !fa_attr_all) //si c'est lors du chargement et que c'est l'option bloc par bloc, on s'arrete à la premiere boucle
return $output;
if (!first && fa_attr_all){/*On affiche le résultat quand nous sommes en tout les blocs*/
$('#field_' + id_group+' .attribute-arrow-right.group_'+ id_group).removeClass('arrow-right-show');
$('#field_' + j).html($output);
$output = '';
}
}
if (first || !fa_attr_all)/*On retourne le résultat quand nous sommes en bloc par bloc*/
return $output;
}