Display Latest Shop products in summary block

This can be achieved by simply manually moving the last product you add to your shop, to the top of the list in the main shop category. However, if you have many products in your store it soon becomes a chore to do this every time you add a new product. I wrote a bit of code to modify all store related summary blocks so that the order is reversed. Now the last product in your shop’s main category list is displayed first. This can probably be also achieved by creating your own summary block from scratch, as the resulting modification completely restructures the HTML within the summary block and requires a lot of styling to gain a respectable look. I am using “?format=json-pretty” appended after the url of my shop link to access the product list through JSON, and read the attributes of individual products.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
function updateSummaryBlock(container, products) {
container.innerHTML = '';
products.forEach(product => {
let productHTML = `
<div class="summaryProductItem">
<a href="${product.fullUrl}">
<img src="${product.items[0].assetUrl}" alt="${product.title}" class="summaryBlockImage">
<p class="summaryBlockProductTitle">${product.title}</p>
</a>
</div>
`;
container.insertAdjacentHTML('beforeend', productHTML);
const summaryBlockImages = document.querySelectorAll('.summaryBlockImage');
summaryBlockImages.forEach(image => { 
image.style.opacity = '1';
});
});
}
let summaryBlockContainers = document.querySelectorAll('.summary-block-wrapper');
if (summaryBlockContainers.length > 0) {
summaryBlockContainers.forEach(function(container) {
const isProductBlock = container.classList.contains('summary-block-collection-type-products');
if (isProductBlock) {
const jsonShopUrl = 'https://www.polivantage.com/shop?format=json-pretty';
fetch(jsonShopUrl)
.then(response => response.json())
.then(data => {
const products = data.items;
products.reverse(); 
updateSummaryBlock(container, products.slice(0, 3));
})
.catch(error => console.error('Error fetching products:', error));
}
});
}
});

CSS:

.sqs-block-summary-v2 {
   height: auto;
}
.summary-item-list {
 display:flex;
 flex-wrap: wrap;
 justify-content:center;
 width: 100%;
}
.summary-item-list-container {
  width: 100%;
}
.summaryProductItem {
  transition: all 0.55s ease;
  scale: 1;
}
.summaryProductItem:hover {
  transition: all 0.3s ease;
  scale: 1.05;
}
.summary-block-wrapper * {
  margin: 5px;
}
.summary-block-wrapper {
 display:flex;
 flex-wrap: nowrap;
 justify-content:center;
 margin: 0;
}
@media screen and (max-width:790px) {
.summary-block-wrapper {
  flex-wrap: wrap;
  }
.summary-block-wrapper * {
  margin: 2px;
  }
}
.summary-title, .summaryBlockProductTitle {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 16px;
  text-align: center;
}
.summaryBlockImage, .summary-thumbnail-image {
  width: 350px;
  height: 350px;
  border: solid 2px black; 
}

Please note that the CSS also affects other product blocks and ensures centering of the items within.