Implement Partner Logo Badges
Sat Jan 08 2022 03:49:33 GMT+0000 (UTC)
Saved by
@rebukt
#javascript
#css
/*-- css for partner tier styles --*/
.tier_level {
height: auto;
float: right;
padding-right: 10px;
}
.tier_level img {
height: 65px;
width: auto;
position: absolute;
top: -3px;
right: 275px;
}
@media only screen and (max-width: 600px){
.tier_level img {
right: 50px;
top: 1px;
height: 55px;
}
}
// JS to display logos based on group
jQuery(document).ready(function ($) {
var isLoggedIn = !!$(".logged-in").length;
var myGroups = isLoggedIn ? abUser.group_id : [];
function partnerTierFunction() {
// set up DOM
$("#header .wrapper").append('<div class="tier_level"></div>');
// create object for partner tiers
var myTier = {
"19": {
name: "Steel",
image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
},
"23": {
name: "Cobalt",
image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
},
"24": {
name: "Sky",
image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
},
"25": {
name: "Sapphire",
image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
},
};
// check if the user is in a tier group
for (var i = 0; i < myGroups.length; i++) {
// associate tier label to group values
var groups = myGroups[i];
var tier = myTier[groups];
// populate DOM with tier label
if (tier !== undefined) {
var $z = $("div.tier_level");
$z.append('<img src="' + tier["image"] + '">');
break;
}
}
}
function visibilityDriver() {
visScenarios.forEach(function(scenario) {
if (scenario.condition) {
scenario.outcome();
}
})
}
var visScenarios = [
{
condition: isLoggedIn,
outcome: function () {
partnerTierFunction();
},
},
];
visibilityDriver();
}); // end ready function
content_copyCOPY
Request: Set up badges as the secondary logo according to the partner type on the Company Form.
Ensure a group is created for each partner type
Upload the logos under media library (on the back end)
Implement the CSS to create the space where we are displaying the images
Implement the JavaScript to show a logo, based on the partner type
Comments