Variant select to buttons
(function($){
'use strict';
var parameterIds=['4','5','7'];
function initSizeButtons(){
if(!$('body').hasClass('type-product'))return;
parameterIds.forEach(function(id){
var $wrapper=$('.p-info-wrapper .detail-parameters .variant-list:has(#parameter-id-'+id+')');
if(!$wrapper.length)return;
var $select=$wrapper.find('#parameter-id-'+id);
if(!$select.length||$wrapper.find('.custom-parameter-buttons').length)return;
var $buttons=$('<div class="custom-parameter-buttons"></div>');
$select.find('option').each(function(){
var $option=$(this);
var value=$option.val();
var text=$.trim($option.text());
if($option.attr('data-choose')==='true'||value==='')return;
var variantKey=id+'-'+value;
var variantData=window.shoptet&&shoptet.variantsSplit&&shoptet.variantsSplit.necessaryVariantData?shoptet.variantsSplit.necessaryVariantData[variantKey]:null;
var $button=$('<button type="button" class="custom-parameter-button"></button>').attr('data-value',value).text(text);
if(variantData&&typeof variantData.isNotSoldOut==='boolean'){
$button.addClass(variantData.isNotSoldOut?'available':'unavailable');
}else{
var $availability=$('.availability-value .parameter-dependent').filter(function(){
return $(this).hasClass(variantKey);
});
if($availability.length){
var availabilityText=$.trim($availability.find('.availability-label').text());
$button.addClass(availabilityText==='Skladem'?'available':'unavailable');
}
}
$buttons.append($button);
});
if(!$buttons.children().length)return;
$select.hide().after($buttons);
function updateActiveButton(){
var currentValue=$select.val();
$buttons.find('.custom-parameter-button').each(function(){
var $button=$(this);
if($button.attr('data-value')===currentValue)$button.addClass('active');
else $button.removeClass('active');
});
}
$buttons.on('click','.custom-parameter-button',function(){
$select.val($(this).attr('data-value')).trigger('change');
updateActiveButton();
});
$select.on('change',updateActiveButton);
updateActiveButton();
});
}
$(document).ready(initSizeButtons);
$(document).on('ShoptetDOMPageContentLoaded ShoptetDOMPageMoreProductsLoaded',initSizeButtons);
})(jQuery);