samedi 1 août 2020

Dynamic List How to shorten the IF condition?

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