Woocommerce select attributi dettaglio prodotto
2016 - 09 - 06
Grazie a jQuery possiamo interagire e trasfomare il <select>
WordPress con il plugin Woocommerce è una buona soluzione per un piccolo e-shop/e-commerce, spesso però nel dettaglio prodotto abbiamo diverse necessità.
Woocommerce gestisce gli attributi delle variabili in <select> questo script permette di convertire quest ultimo in una lista <ul> <li>, per rendere più friendly la vendita, ad esempio nella visualizzazione di tutte le taglie:
$('select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('<div class="select"> </div>');
$this.after('<div class="select-styled"> </div>');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
var $list = $('', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
//console.log($this.val());
});
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
