I am encountering an issue with Shopify where I need to sort blog posts by a date different from the publish date. According to the Shopify Community Forums, the most effective way to achieve this is by utilizing liquid to input the information and then modifying it through client-side Javascript. My approach involves placing the div and the new date into an object within an array. This object is structured to contain a div value and a date value in the following format:
0:
date: "1563681600"
div: " <div class="article-image">
<a href="/blogs/upcoming/dog-days-of-summer">
<div class="rimage-outer-wrapper" style="max-width: 750px"><div class="rimage-wrapper lazyload--placeholder" style="padding-top:60.0%"><img class="rimage__image lazyload fade-in " data-src="//cdn2.shopify.com/s/files/1/0152/7041/2388/articles/84th_2019-0721_slider_{width}x.jpg?v=1561562008" data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.6666666666666667" data-sizes="auto" alt="DOG DAYS OF SUMMER"><noscript><img src="//cdn2.shopify.com/s/files/1/0152/7041/2388/articles/84th_2019-0721_slider_1024x1024.jpg?v=1561562008" alt="DOG DAYS OF SUMMER" class="rimage__image"></noscript></div></div>
</a>
</div>
<div class="meta">
<span class="meta-item date">1563681600</span>
<span class="meta-item" id="time">1-3pm</span>
<span class="meta-item location">84th Street Location</span>
</div>
<h2><a href="/blogs/upcoming/dog-days-of-summer" title="">DOG DAYS OF SUMMER</a></h2>
<div class="rte article-excerpt"><b>Books of Wonder</b><span> </span><span>is excited to host a picture book event: DOG DAYS OF SUMMER. Please join us on Sunday, July 21st at our 84th Street Store to celebrate four amazing picture books about dogs!</span></div>
<p class="fullarticle"><a class="cta-link" href="/blogs/upcoming/dog-days-of-summer">Read more</a></p>
"
After successfully sorting the array by date, my current challenge lies in displaying these div elements in the DOM. Despite capturing these DIVS using innerHTML, I encounter an error when attempting to use AppendChild. Here is the code snippet:
function storeid() {
var divName = document.getElementsByClassName('pullup');
var className = document.getElementsByClassName('date');
var classnameCount = className.length;
var IdStore = new Array();
for (var j = 0; j < classnameCount; j++) {
var obj = {};
var div = divName[j].innerHTML;
var dateString = className[j].innerText;
obj["div"] = div;
obj["date"] = dateString;
IdStore.push(obj);
}
console.log(IdStore);
IdStore = IdStore.sort(function(a, b) {
return b.date - a.date
});
IdStore.forEach(el => {
document.body.appendChild(el.div);
})
}
storeid();
Despite specifying that only the div should be appended, I continue to receive the error message:
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'Could appendChild possibly be unable to handle this much content? Or is there a more efficient solution to this problem?