DEV Community

Makarov
Makarov

Posted on

How to refactor for js

Hello, there is a poorly written product price change function that takes into account many different conditions. It is worth refactoring, as the function itself is poorly readable. Tell me where and what is better to read or what practices to use. Here is the function for clarity (sorry in advance):
`function changePrice($this = null) {
if ($this == null) {
var rel_price = $('.all_colors_preview.active#rel_colors').find('.item.active .price').attr('data-price'),
option_price = $('.all_colors_preview.active#option_colors').find('.item.active .option-price').val(),
prefix = $('.all_colors_preview.active#option_colors').find('.item.active .option-price-prefix').val(),
price_current = $('.price_wrapper .price_current'),
option_sizes = $('.option_size.active'),
quantity = Number($('#inner .quantity_val').text());
} else {
var rel_price = $this.find('#rel_colors.active .item.active .price').attr('data-price'),
option_price = $this.find('#option_colors.active .item.active .option-price').val(),
prefix = $this.find('#option_colors.active .item.active .option-price-prefix').val(),
price_current = $('.price_wrapper .price_current'),
option_sizes = $this.find('.option_size.active'),
quantity = Number($this.find('.quantity_val').text());
}

if (!quantity) {
quantity = Number($('#inner .quantity_val').text());
}

var current = Number(price_current.attr('data-original-price'));

if (rel_price != '' && rel_price != undefined) {
price_current.attr('data-update-price', rel_price);
updated = Number(price_current.attr('data-update-price')) * quantity;
updated = String(updated).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')
price_current.text(updated + ' ₽');
} else if (option_price != '' && option_price != undefined && prefix != '') {
if (prefix == '+') {
update_price = current + Number(option_price);
} else {
update_price = current - Number(option_price);
}

price_current.attr('data-update-price', update_price);
update_price = quantity * price_current.attr('data-update-price');
price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
Enter fullscreen mode Exit fullscreen mode

} else if (option_price == '') {
price_current.attr('data-update-price', current);
current *= quantity;
price_current.text(String(current).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
} else {
return false;
}

if (option_sizes && option_sizes.length) {
if (price_current.attr('data-update-price')) {
current = Number(price_current.attr('data-update-price'));
}
var option_prefix = option_sizes.find('input[type="hidden"]').attr('data-prefix'),
option_size_price = option_sizes.find('input[type="hidden"]').attr('data-price');
if (option_prefix == '+') {
update_price = current + Number(option_size_price);
} else {
update_price = current - Number(option_size_price);
}

price_current.attr('data-update-price', update_price);
update_price = quantity * price_current.attr('data-update-price');
price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
Enter fullscreen mode Exit fullscreen mode

}
}`

Latest comments (0)