hey guys this is my recently viewed products i want it to make go swipe in mobile view
main
and this is how i want it
this is my code
<script>
// First Block
function setRecentlyViewedPdp() {
const pdpData = {
productTitle : "{{ product.title }}",
productImg : "{{ product.featured_image | image_url: width: 500 }}",
productPrice : "{{ product.price | money | remove_first: '' }}",
productUrl : "{{ product.url }}"
};
// Init Empty Array to push data
const productArr = [];
// Create a couple of variables
let jsonResp,
jsonRespArr,
jsonRespArrStr;
// Set the number how many products you want to capture
const numberOfProduct = 4;
// Now push the pdpData into Array so that we can use it
productArr.push(pdpData);
// Get the product title from pdpData
const currPdpTitle = pdpData.productTitle;
// Now Convert current page data into Strings which we already pushed in Array
const pdpDataString = JSON.stringify(productArr);
// Set the variable for localStorage
const localData = localStorage.getItem('recently_viewed');
// Second Block
// first we need to check data if data is not there then store right away
if (localData == null) {
localStorage.setItem('recently_viewed', pdpDataString);
}
// If data is there then we need to check couple of other conditions
else if ( localData != null ) {
// Create Variable for oldData or Previous page
const oldPdpData = localStorage.getItem('recently_viewed');
// Count the amount of data stored in strings so that we can remove old products from the stack
const countPdpData = (oldPdpData.match(/productTitle/g) || []).length;
// we also need to check if user is not visiting page again
const reVisitPdp = oldPdpData.includes(currPdpTitle);
// Get old data, merged it with new data and store merged data
if (countPdpData < numberOfProduct && reVisitPdp == false) {
jsonResp = JSON.parse(oldPdpData);
jsonRespArr = jsonResp.concat(productArr);
jsonRespArrStr = JSON.stringify(jsonRespArr);
localStorage.setItem('recently_viewed', jsonRespArrStr);
}
// If User visited more than 4 pages delete first page data
else if (countPdpData >= numberOfProduct && reVisitPdp == false) {
jsonResp = JSON.parse(oldPdpData);
jsonResp.shift();
jsonRespArr = jsonResp.concat(productArr);
jsonRespArr = JSON.stringify(jsonRespArr);
localStorage.setItem('recently_viewed', jsonRespArr);
}
}
}
// Now we write all our function and it's time to execute it
setRecentlyViewedPdp();
// Set Variable for Local Storage Data
const localViewed = localStorage.recently_viewed;
// console.log to verify the data
</script>
<div class="recently-title">
<h2 class="title inline-richtext h2 scroll-trigger animate--slide-in tw-text-[24px] tw-pt-[50px] tw-border-t-[1px] tw-border-solid tw-border-gray-300 ">
<b>Recently Viewed</b>
</h2>
</div>
<div class="js-recentPdpBlock min-[750px]:tw-grid min-[750px]:tw-grid-cols-4 min-[750px]:tw-gap-[var(--grid-desktop-horizontal-spacing)] max-[576px]:tw-grid max-[576px]:tw-grid-cols-2 max-[576px]:tw-gap-[var(--grid-desktop-horizontal-spacing)] "></div>
<script>
// Third Block
function getRecentPdp (){
// First let's convert localStorage data into object again
const pdpData = JSON.parse(localStorage.getItem('recently_viewed'));
console.log(pdpData)
// Create a empty Array
const recentViewHtml = []
// Loop through all the data and inject into HTML using ES6
pdpData.forEach(function(item){
recentViewHtml.push(`
<section id="Recent">
<div class="c-product tw-pointer">
<div class="c-product__img ">
<a href="${item.productUrl}"><img class="tw-w-full tw-object-cover" style="height:auto; object-fit:cover" src='${item.productImg}'/></a>
</div>
<h3 class="c-product__title tw-pt-[12px] tw-pb-[10px] tw-line-[0px] " >
<a class="c-product__url tw-text-[#000000] tw-no-underline" href="${item.productUrl}">
${item.productTitle}
</a>
</h3>
<p class="c-productPrice tw-m-[0px] tw-line-[0px] tw-text-[#000000] " >${item.productPrice}</p>
</div>
</section>
`)
})
// Now consolidate the data
const recentBlock = `${recentViewHtml.join('')}`
// console.log() to check data is correct
console.log(recentBlock);
// Inject into PDP page
const contentBlock = document.querySelectorAll('.js-recentPdpBlock');
// Push the data
contentBlock.forEach(element =>{
element.innerHTML = recentBlock;
})
}
// Execute this function on DOM content load
getRecentPdp();
</script>