I have to do some optimization on the function presented below.
It makes some data like a payload based on the arguments passed into it.
I am not much sure how to improve the code to look better & less.
Please share some thoughts on this.
//Process data and call track event for product added
export function ProductActionsSegment(data) {
let cart_item = []
data.session.cart.items.forEach(function (properties) {
var items = {};
items["brand"] = properties.product.display_brand;
items["category"] = null;
items["id"]= properties.id;
items["imageUrl"]=properties.product.image.url;
items["magento_product_id"]=properties.product.id;
items["manufacturer"]=null;
items["microcategory"]=null;
items["name"]=properties.product.name;
items["price"]=properties.product.price_range.minimum_price.final_price.value;
items["product_id"]=properties.product.id;
items["quantity"]=properties.quantity;
items["regular_price"]=properties.product.price_range.minimum_price.regular_price.value;
items["size"]=properties.product.size;
items["size_type"]=properties.product.size_label;
items["sku"]=properties.product.sku;
items["special_category"]=null;
items["special_price"]=properties.product.special_price;
items["stock_quantity"]=null;
items["swatch"]=properties.product.color_label;
items["trend"]=null;
items["url"]=properties.url;
cart_item.push(items)
});
if(data.location == 'product_page' || data.location == 'product_list') {
var product_page = {
brand: data.product.brandName,
category: null,
country: null,
email: Cookies.get('useremail'),
imageUrl: null,
location: data.location,
magento_product_id: null,
manufacturer: null,
microcategory: null,
name: data.product.name,
price: data.product.price.price.value,
product_id: null,
products:cart_item,
quantity: 1,
regular_price: data.product.price.price.value,
size: null,
size_type: null,
sku:data.product.sku,
special_category: null,
special_price: data.product.price.specialPrice,
stock_quantity: null,
swatch: null,
trend: null,
type: data.product.type,
url: data.product.url
};
TrackEvent('Product Added',product_page);
return;
}
if(data.location == 'cart') {
var eventName;
var type;
if(!data.action && data.new_qty > data.product.quantity){
eventName = 'Product Added';
type = 'increseQuantity';
}
else if(data.action){
eventName = 'Product Removed';
type = 'xProduct';
}
else{
eventName = 'Product Removed';
type = 'decreaseQuantity';
}
var product_cart = {
brand: null,
category: null,
country: null,
email: Cookies.get('useremail'),
imageUrl: null,
location: data.location,
magento_product_id: data.product.id,
manufacturer: null,
microcategory: null,
name: data.product.name,
price: data.product.price,
product_id: data.product.id,
products:cart_item,
quantity: 1,
regular_price: data.product.price,
size: data.product.product.size,
size_type: null,
sku:data.product.product.sku,
special_category: null,
special_price: data.product.product.special_price,
stock_quantity: null,
swatch: data.product.product.color_label,
trend: null,
type: type,
url: data.product.url
};
return product_cart
}
}
-
\$\begingroup\$ any thoughts on this ? \$\endgroup\$dev php– dev php2021年01月25日 08:05:27 +00:00Commented Jan 25, 2021 at 8:05
-
1\$\begingroup\$ Welcome to CodeReview@SE. Helpful. reviews. take. time: expect answers to simple&short code within a couple of hours rather than minutes. While waiting for reviews, (re)visit How do I ask a Good Question? and improve the title of this question. \$\endgroup\$greybeard– greybeard2021年01月25日 08:34:26 +00:00Commented Jan 25, 2021 at 8:34
1 Answer 1
I think the main issue with this function is that it's very difficult to follow what the function is doing with the giant object-creation stuff in the middle of the function. I would extract each of those large chunks into separate helper functions so that it's easy to see at a glance the general idea of what ProductActionsSegment()
does.
Here's an untested example (that also includes a few other minor cleanups):
export function ProductActionsSegment(data) {
const cartItem = data.session.cart.items.map(formatCartItem);
switch (data.location) {
case 'product_page':
case 'product_list':
TrackEvent('Product Added', formatProductPage({ data, cartItem }));
return;
case 'cart':
const type = extractCartTypeFromData(data);
return formatCartPage({ data, cartItem, type });
}
}
function extractCartTypeFromData(data) {
if (data.action) {
return 'xProduct';
} else {
return data.new_qty > data.product.quantity
? 'increseQuantity'
: 'decreaseQuantity';
}
}
const formatCartItem = ({ id, quantity, url, product }) => ({
id,
quantity,
url,
brand: product.display_brand,
category: null,
imageUrl: product.image.url,
magento_product_id: product.id,
manufacturer: null,
microcategory: null,
name: product.name,
price: product.price_range.minimum_price.final_price.value,
product_id: product.id,
regular_price: product.price_range.minimum_price.regular_price.value,
size: product.size,
size_type: product.size_label,
sku: product.sku,
special_category: null,
special_price: product.special_price,
stock_quantity: null,
swatch: product.color_label,
trend: null,
});
const formatProductPage = ({ data: { product, location }, cartItem }) => ({
brand: product.brandName,
category: null,
country: null,
email: Cookies.get('useremail'),
imageUrl: null,
location,
magento_product_id: null,
manufacturer: null,
microcategory: null,
name: product.name,
price: product.price.price.value,
product_id: null,
products: cartItem,
quantity: 1,
regular_price: product.price.price.value,
size: null,
size_type: null,
sku: product.sku,
special_category: null,
special_price: product.price.specialPrice,
stock_quantity: null,
swatch: null,
trend: null,
type: product.type,
url: product.url,
});
const formatCartPage = ({ data: { product, location }, cartItem, type }) => ({
brand: null,
category: null,
country: null,
email: Cookies.get('useremail'),
imageUrl: null,
location,
magento_product_id: product.id,
manufacturer: null,
microcategory: null,
name: product.name,
price: product.price,
product_id: product.id,
products: cartItem,
quantity: 1,
regular_price: product.price,
size: product.product.size,
size_type: null,
sku: product.product.sku,
special_category: null,
special_price: product.product.special_price,
stock_quantity: null,
swatch: product.product.color_label,
trend: null,
type,
url: product.url,
});
A few other things:
- Your original version has an unused eventName variable.
- Are objects of these shapes being created in multiple locations? If not, ignore the following advice. If so, you might want a general helpers such as
createCartPage({ brand: ..., , category: ..., etc })
. This would make it so you don't have to explicitly set "null" to a bunch of different attributes as the helper can take care of that for you. Example helper:
const createBlankCartPage = (attrs = {}) => Object.assign(Object.seal({
brand: null,
category: 'some-default-category',
country: null,
email: null,
// ...
}), attrs);