Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

41 add category list #42

Merged
merged 5 commits into from
Jun 6, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions best-cigars-guide/blocks/footer/footer.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getMetadata } from '../../scripts/aem.js';
import { loadFragment } from '../fragment/fragment.js';
import { isInternal } from '../../scripts/scripts.js';
import { isInternal, isCategory } from '../../scripts/scripts.js';
import { addLdJsonScript } from '../../scripts/linking-data.js';

function buildLdJson(container) {
Expand All @@ -19,7 +19,7 @@ function buildLdJson(container) {
};

// Change type for category pages
if (document.querySelector('.article-list-container')) {
if (isCategory()) {
ldJson['@type'] = 'CollectionPage';
}

Expand Down
73 changes: 73 additions & 0 deletions best-cigars-guide/blocks/item/item.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.item-wrapper {
border-bottom: 1px dashed #ccc;
margin-bottom: 40px;
padding-bottom: 45px;
font-size: 0.75em;
font-weight: 300;
}

.item-wrapper h3 {
margin-bottom: 25px;
text-align: center;
font-size: var(--heading-font-size-s);
}

.item-wrapper a {
display: block;
text-align: center;
}

.item-wrapper img {
max-height: 75px;
width: auto;
margin-bottom: 25px;
text-align: center;
}

.item-wrapper .item-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 30px auto;
width: 90%;
}

.item-wrapper .item-stat {
padding-right: 10px;
}

.item-wrapper .item-stat .label {
font-weight: bold;
}

.item-wrapper .item-buy-now a {
font-weight: 600;
text-decoration: none;
display: inline-block;
box-sizing: border-box;
width: auto;
padding: 10px 25px 9px;
background: #177abb;
border-bottom: 1px solid #035890;
color: #fff;
border-radius: 4px;
transition: background-color .15s;
}

.item-wrapper .item-buy-now a:hover {
background: #0d67a2;
}

.item-wrapper .item-subinfo {
display: flex;
justify-content: space-between;
align-items: center;
width: 280px;
margin: 0 auto;
}

.item-wrapper .item-star-rating img {
width: 25px;
height: 25px;
margin: 0;
}
110 changes: 110 additions & 0 deletions best-cigars-guide/blocks/item/item.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/**
* parse block row data into a js object
* @param block
* @returns {{}}
*/
function parseData(block) {
const rows = block.children;
const data = {};

// eslint-disable-next-line no-plusplus
for (let i = 0; i < rows.length; i++) {
const fieldName = rows[i].firstElementChild.textContent;

if (fieldName === 'Image') {
data[fieldName] = rows[i].lastElementChild.innerHTML;
} else if (fieldName === 'Rating') {
data[fieldName] = Number(rows[i].lastElementChild.textContent);
} else {
data[fieldName] = rows[i].lastElementChild.textContent;
}
}

return data;
}

/**
* render rating stats html
* @param data
*/
function renderRatingStars(data) {
let output = '';

// eslint-disable-next-line no-plusplus
for (let i = 0; i < 5; i++) {
if (i + 0.5 === data.Rating) {
output += '<img src="/best-cigars-guide/icons/star-half.png" alt="">';
} else if (i < data.Rating) {
output += '<img src="/best-cigars-guide/icons/star.png" alt="">';
} else {
output += '<img src="/best-cigars-guide/icons/star-empty.png" alt="">';
}
}

return output;
}

/**
* render individual item stats
* @param data
* @returns {string}
*/
function renderStats(data) {
// list of possible stat fields from block data
const stats = [
'Country',
'Strength',
'Wrapper',
'Color',
];

let output = '';
// eslint-disable-next-line no-plusplus
for (let i = 0; i < stats.length; i++) {
if (stats[i] in data) {
output += `
<div class="item-stat">
<p class="label">${stats[i]}</p>
<p>${data[stats[i]]}</p>
</div>
`;
}
}

return output;
}

function render(data) {
const ratingLabel = data.Rating ? `Rated ${data.Rating} out of 5 stars.` : 'No ratings yet.';

return `
<h3>${data.Name}</h3>
<a href="${data.Link}">
${data.Image}
</a>
<div class="item-info">
<p>${data.Description}</p>
<div class="item-stats">
${renderStats(data)}
</div>
<div class="item-subinfo">
<div class="item-star-rating" data-rating="${data.Rating}" title="${ratingLabel}">
${renderRatingStars(data)}
</div>
<div class="item-buy-now">
<a href="${data.Link}" target="_blank">Buy Now</a>
</div>
</div>
</div>
`;
}

/**
* loads and decorates the item
* @param {Element} block The item element
*/
export default async function decorate(block) {
const data = parseData(block);
block.innerHTML = render(data);
return block;
}
6 changes: 4 additions & 2 deletions best-cigars-guide/blocks/nav/nav.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 10px 0;
padding: 50px 1rem 15px;
max-width: var(--content-width);
margin: 0 auto 20px;
}

/* Breadcrumb styling */
Expand Down Expand Up @@ -68,6 +69,7 @@
.nav-row {
flex-direction: column; /* Stack items vertically on small screens */
align-items: center;
padding: 10px 16px;
}

.breadcrumb,
Expand Down
6 changes: 3 additions & 3 deletions best-cigars-guide/blocks/nav/nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ export default function decorate(block) {
block.remove();

// Create nav
const startingTag = document.querySelector('body > main > div');
const navDiv = document.createElement('div');
const startingTag = document.querySelector('body > header');
const navDiv = document.createElement('nav');
navDiv.className = 'nav-row';

// Create Breadcrumbs
Expand All @@ -142,5 +142,5 @@ export default function decorate(block) {
awaitCategoriesDropdown();

// Append nav to the dom
startingTag.prepend(navDiv);
startingTag.after(navDiv);
}
49 changes: 49 additions & 0 deletions best-cigars-guide/blocks/sidebar/sidebar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
.article-wrapper {
display: flex;
max-width: var(--content-width);
margin: auto;
justify-content: space-between;
padding: 0 1rem;
}

.article-wrapper .section {
padding: 0;
width: 64%;
}

.article-wrapper aside {
width: 30%;
max-width: 315px;
}

aside h3 {
font-size: 0.9em;
margin: 0 0 1.2em;
font-weight: 700;
}

aside ul {
list-style: none;
padding: 0;
}

aside li {
margin: 0 0 12px;
font-weight: 300;
font-size: 0.7em;
}

@media (max-width: 600px) {
.article-wrapper {
display: block;
}

.article-wrapper .section {
width: 100%;
}

.article-wrapper aside {
width: 100%;
max-width: 100%;
}
}
82 changes: 82 additions & 0 deletions best-cigars-guide/blocks/sidebar/sidebar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { fetchCategoryList, fetchArticleList } from '../../scripts/scripts.js';

// get the current category name
const currentCategoryPath = window.location.pathname.split('/').slice(0, 3).join('/');

async function getRelatedArticles() {
const wrap = document.createElement('div');
wrap.className = 'sidebar-related-articles';

const heading = document.createElement('h3');
heading.textContent = 'Related Articles';
wrap.append(heading);

const list = document.createElement('ul');

// todo: related article magic 🪄
list.innerHTML = '<li><a href="/best-cigars-guide">Dummy list item</a></li><li><a href="/best-cigars-guide">Dummy list item 2</a></li>';

wrap.append(list);

return wrap;
}

async function getCategories() {
const wrap = document.createElement('div');
wrap.className = 'sidebar-categories';

const heading = document.createElement('h3');
heading.textContent = 'CATEGORY';
wrap.append(heading);

const categoriesList = await fetchCategoryList();

categoriesList.forEach((category) => {
const categoryPath = category.path.split('/')
.slice(0, 3)
.join('/');

if (categoryPath === currentCategoryPath) {
heading.innerText = category.path
.split('/')
.pop()
.replace(/-/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
}
});

const list = document.createElement('ul');

const articleList = await fetchArticleList();
const currentArticlePath = window.location.pathname;

articleList.forEach((article) => {
const articleCategoryPath = article.path.split('/')
.slice(0, 3)
.join('/');

// List all the articles in this category, but not this article itself
if (articleCategoryPath === currentCategoryPath && article.path !== currentArticlePath) {
const listElement = document.createElement('li');
const listLink = document.createElement('a');
const articleTitle = article.title.split('|')[0].trim();
listLink.href = article.path;
listLink.innerHTML = articleTitle;
listElement.appendChild(listLink);
list.appendChild(listElement);
}
});
wrap.append(list);

return wrap;
}

export default async function decorate(block) {
const categories = await getCategories();
block.append(categories);

const relatedArticles = await getRelatedArticles();
block.append(relatedArticles);

return block;
}
Binary file added best-cigars-guide/icons/star-empty.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added best-cigars-guide/icons/star-half.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added best-cigars-guide/icons/star.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading