Displaying WIX Tags | Show on Repeater, Static & Dynamic Pages

Show and tell
, ,
1

:star:PREVIEW WEBSITE | https://bit.ly/3GrJjqT
:triangular_flag_on_post:MORE TUTORIALS https://www.wixideas.com/tutorials

:tv:Please Subscribe, Like, & Share :point_right:t4::point_right:t4: YouTube

This tutorial shows you how to display tag fields on the WIX repeater, static (regular), and dynamic pages.

DISPLAY TAGS ON STATIC PAGE

//DISPLAY SELECTION TAGS ON A REGULAR PAGE🎉
$w.onReady(function () {
 
    let tags = ["Food", "Bread", "Delicious", "Restaurant", "Yummy", "Foodie"];
 
    let tagsHtml = tags.map(tag =>
            `<span style="background: #f44336; 
        border-radius: 5px; 
        line-height: 2.6;       
        padding-top: 5px; 
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        color: #ffffff; 
        font-weight:900;
        
        font-size: 12px">${tag}</span>`)
        .join('  ');
    $w('#tagsDisplay').html = tagsHtml;
 
});

DISPLAY TAGS ON REPEATER

//DISPLAY SELECTION TAGS ON REPEATER🎉
$w.onReady(function () {
    $w("#dataset1").onReady(function () {
        $w("#repeater9").onItemReady(($item, itemData) => {
 
            let tags = itemData.tags;
 
            let tagsHtml = tags.map(tag =>
                    `<span style="background: #f44336; 
        border-radius: 5px; 
        line-height: 2.6;       
        padding-top: 5px; 
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        color: #ffffff; 
        font-weight:900;
        
        font-size: 12px">${tag}</span>`)
                .join('  ');
            $item('#tagsDisplay').html = tagsHtml;
 
        });
    });
});

DISPLAY TAGS ON DYNAMIC ITEM PAGE

//DISPLAY SELECTION TAGS ON DYNAMIC ITEM PAGE🎉
$w.onReady(function () {
    
    let tags = $w("#dynamicDataset").getCurrentItem().tags;
 
    let tagsHtml = tags.map(tag =>
            `<span style="background: #f44336; 
        border-radius: 5px; 
        line-height: 2.6;       
        padding-top: 5px; 
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        color: #ffffff; 
        font-weight:900;
        
        font-size: 12px">${tag}</span>`)
        .join('  ');
    $w('#tagsDisplay').html = tagsHtml;
});

:tv:Please Subscribe, Like, & Share :point_right:t4::point_right:t4: YouTube

Facebook Page: WIX Ideas
Facebook Community Group: Wix Ideas Community | Facebook
Instagram: Wix Ideas (@wixideas) • Instagram photos and videos
Website: https://www.wixideas.com/
YouTube Channel: https://www.youtube.com/@wixideas

3 Likes