⭐PREVIEW WEBSITE | https://bit.ly/3GrJjqT
🚩MORE TUTORIALS https://www.wixideas.com/tutorials
📺Please Subscribe, Like, & Share 👉🏽👉🏽 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;
});
📺Please Subscribe, Like, & Share 👉🏽👉🏽 YouTube
Facebook Page: https://www.facebook.com/wixideas
Facebook Community Group: https://www.facebook.com/groups/wixideas
Instagram: https://www.instagram.com/wixideas/
Website: https://www.wixideas.com/
YouTube Channel: https://www.youtube.com/@wixideas