const thisScript = document.currentScript;
! function() {
insertWidgetHtml();
}();
function insertWidgetHtml() {
let html =
`
`;
thisScript.insertAdjacentHTML('afterend', html);
initYelpWidget();
}
function initYelpWidget() {
// Configuration
const API_URL = `https://idxapps.com/api/widget/yelp/businesses?app_id=33&`;
function roundDownToNearest(num, multiple) {
return Math.floor(num / multiple) * multiple;
}
const userOptions = {
location: "Miami, florida",
categories: ["food","parks","elementaryschools"],
limit: "9",
};
let currentCategory = userOptions.categories[0].replace(/\s/g, '').toLowerCase();
const businessesOptions = {
location: userOptions.location,
category: currentCategory.replace(/\s/g, '').toLowerCase(),
limit: userOptions.limit
};
const businessesData = [];
// DOM Elements
// Select section
const section = document.querySelector(".IDX-yelp-bussineses-wrapper");
// Select filter container
const categoriesWrapper = document.querySelector(".IDX-categories-wrapper");
const categoriesContainer = document.querySelector(".IDX-categories-container");
// Select skeleton cards container
const skeletonCardsContainer = document.querySelector('.IDX-yelp-skeleton-cards-container');
// Select cards container
const cardsContainer = document.querySelector('.IDX-yelp-cards-container');
// Select category links
const categoryElements = document.querySelectorAll('.IDX-category');
// Select search input
// Functions
//Fetch bussinesses
const getBusinesses = async (options) => {
const {
category,
location,
limit
} = options;
loadingObserver(true);
try {
const response = await fetch(
`${API_URL}location=${location}&categories=${category}&limit=${limit}`
);
const result = await response.json();
return result;
} catch (error) {
console.error("Error in getBusinesses:", error.message);
return {
businesses: ["Error trying to get the businesses"]
};
} finally {
loadingObserver(false);
}
};
//This funcions create html elements, first param tag name, second object with attributes, and third the element inside of it.
const createElement = (tagName, attributes = {}, ...children) => {
const element = document.createElement(tagName);
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
children.forEach(child => {
if (typeof child === 'string') {
element.appendChild(document.createTextNode(child))
} else {
element.appendChild(child)
}
})
return element;
};
// Create Category links function
const createCategoryLinks = () => {
userOptions.categories.forEach(category => {
// Remove spaces from category names
const sanitizedCategory = category.replace(/\s/g, '').toLowerCase();
let categories = {
restaurants: 'Dine',
parks: 'Parks',
pets: 'Wag',
museums: 'Museums',
elementaryschools: 'Elementary Schools',
shoppingcenters: 'Shopping Centers',
bars: 'Drink',
shopping: 'Shop',
coffee: 'Perk',
fitness: 'Sweat',
hair: 'Groom',
'food': 'Food',
};
let icons = {
restaurants: ``,
parks: ``,
pets: ``,
museums: ``,
shoppingcenters: ``,
bars: `
`,
shopping: ``,
coffee: ``,
fitness: ``,
hair: ``,
food: ``,
elementaryschools: ``,
};
const categoryLabel = categories[sanitizedCategory] || category;
const icon = icons[sanitizedCategory] || '';
const link = createElement('a', {
'data-category': sanitizedCategory,
'class': `IDX-category ${sanitizedCategory === currentCategory ? 'selected' : ''}`,
});
link.innerHTML = `${icon} ${categoryLabel}`;
categoriesContainer.appendChild(link);
});
const categoryElements = document.querySelectorAll('.IDX-category');
categoryElements.forEach(categoryElement => {
categoryElement.addEventListener('click', () => {
categoryElements.forEach(element => element.classList.remove('selected'));
categoryElement.classList.add('selected');
const newCategory = categoryElement.getAttribute('data-category');
categoryObserver(newCategory, currentCategory);
currentCategory = newCategory;
});
});
};
// // Create skeleton cards function
const createSkeletonCards = () => {
for (let i = 0; i < userOptions.limit; i++) {
const card = createElement('div', {
class: 'IDX-yelp-card IDX-skeleton-shine'
});
skeletonCardsContainer.appendChild(card);
}
}
const createCards = (businesses) => {
if (businesses.length === 0) {
const message = createElement("span", {}, "there are no results.");
cardsContainer.appendChild(message);
} else {
businesses.forEach(business => {
const card = createElement('div', {
class: 'IDX-yelp-card',
});
const image = createElement('a', {
href: business.url,
target: "_blank",
class: 'IDX-yelp-image',
style: `background-image: url(${business.image_url})`
});
const info = createElement('div', {
class: 'IDX-yelp-info'
});
const leftInfo = createElement('div', {
class: 'IDX-yelp-info-left'
});
const rightInfo = createElement('div', {
class: 'IDX-yelp-info-right'
});
const name = createElement('a', {
href: business.url,
target: "_blank",
class: 'IDX-yelp-name',
}, business.name);
const starsLogoContainer = createElement('div', {
class: 'IDX-yelp-info-stars-logo-container'
});
const stars = createElement('div', {
class: `yelp-stars-${roundDownToNearest(business.rating, 0.5)}`,
role: 'img',
style: "background-image: url('https://s3-media0.fl.yelpcdn.com/assets/public/stars_v2.yji-59bbc2cf8e3d4be04fcc.png')"
});
const yelpLogoLink = createElement('a', {
href: "https://business.yelp.com/",
target: "_blank",
class: 'IDX-yelp-logo-link'
});
const reviews = createElement('p', {},
`${business.review_count} Reviews`);
// Building card structure
leftInfo.appendChild(name);
starsLogoContainer.appendChild(stars);
yelpLogoLink.innerHTML = `
`;
leftInfo.appendChild(starsLogoContainer);
leftInfo.appendChild(reviews);
rightInfo.appendChild(yelpLogoLink);
info.appendChild(leftInfo);
info.appendChild(rightInfo);
card.appendChild(info);
card.appendChild(image);
// adding card to the container
cardsContainer.appendChild(card);
});
}
};
const loadingObserver = (isLoading) => {
skeletonCardsContainer.style.display = isLoading ? 'flex' : 'none';
cardsContainer.innerHTML = '';
};
const categoryObserver = async (newCategory, currentCategory) => {
if (newCategory !== currentCategory) {
const newOptions = {
...businessesOptions,
category: newCategory
};
try {
const businesses = await getBusinesses(newOptions);
businessesData.length = 0; // Clear existing data array
Array.prototype.push.apply(businessesData, businesses.businesses);
createCards(businessesData);
} catch (error) {
console.error("Error getting businesses:", error.message);
} finally {
currentCategory = newCategory;
}
}
};
// Event Listeners
document.addEventListener('DOMContentLoaded', async () => {
createCategoryLinks(); // Create category links
createSkeletonCards(); // Create skeleton cards
try {
const businesses = await getBusinesses(businessesOptions);
Array.prototype.push.apply(businessesData, businesses.businesses);
createCards(businessesData);
} catch (error) {
console.error("Error getting businesses:", error.message);
}
});
}