in future i have many if condition, any idea to shorten the if condition for (Render Badge items)?
today i just only have 4 item if in the future i have 20 or maybe 100 item, is it i need to code the if for 20 or 100 times?
i have tried many method, but i really don't know how to make it, hope someone can help me as well. Thank you very much
Render Dynamic List
const medals = productItem.goldmedal || productItem.newitem || productItem.freedelivery;
if (medals) {
const iconBadge = $("<ul>", { class: 'icons' });
function createMedal(src, text) {
const badge =
$("<li>", { class: 'icon' })
.append($('<a>', { class: 'tpsTooltip skeleton_hide', href: '###', 'data-tippy-content': text })
.append($('<img>', { src: src, alt: text })))
.append($('<div>', { class: 'pl-placeholder_skeleton pl-placeholder_liIcon' }));
iconBadge.append(badge);
}
createFeatureIcon.append(iconBadge);
//Render Badge items (Below is the if condition code)
if (productItem.goldmedal) {
createMedal(plSettings.goldMetalSrc, plSettings.goldMetalText)
}
if (productItem.newitem) {
createMedal(plSettings.newItemSrc, plSettings.newItemText)
}
if (productItem.newshop) {
createMedal(plSettings.newShopSrc, plSettings.newShopText)
}
if (productItem.freedelivery) {
createMedal(plSettings.freeDeliverySrc, plSettings.freeDeliveryText)
}
}
Settings
//Settings
var plSettings = $.extend({
mainClass: 'item-wrapper',
itemWrapperClass: 'item ripple-effect ripple-joya itemShadowLight',
goldMetalSrc: '/img/tps/gold.png',
goldMetalText: 'Gold Medal sellers stand out from millions of sellers, bringing more trust and peace of mind to your shopping experience',
newItemSrc: '/img/tps/new.png',
newItemText: 'New item',
sellermedalSrc: '/img/tps/seller.png',
sellermedalText: 'Top Seller',
newShopSrc: '/img/tps/newshop.png',
newShopText: 'New Shop In Joyacart',
freeDeliverySrc: '/img/tps/freedelivery.png',
freeDeliveryText: 'Free Delivery'
});
example data is below:
var data = {
productList: [
{
id: "62276197-6059-4c21-9b40-c5b1d277e85d",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000001_12032019.png",
text: 'Product 001',
goldmedal: false,
newitem: true,
newshop: true,
freedelivery: true
},
{
id: "59de8216-052d-4e51-9f7d-7e96642ded62",
link: "javascript:void(0)",
imgurl: "/img/upload/png/joyacart_000002_12032019.png",
text: 'Product 002',
goldmedal: true,
newitem: false,
newshop: true,
freedelivery: true
}]
}
Aucun commentaire:
Enregistrer un commentaire