Привет, разработчики 👋

Это мой первый пост в блоге, поэтому мой словарный запас может быть не таким впечатляющим, но вы определенно что-то выучите после прочтения этого.

Я работал над проектом клиента, и внезапно возникла потребность в недавно просмотренных продуктах, которые нужно показывать пользователям. Я начал изучать, но не нашел ничего, что можно было бы использовать. Были некоторые плагины JavaScript, но я не хотел использовать какие-либо плагины или библиотеки, поэтому решил записать весь код с нуля в основном JavaScript.

Если вы хотите получить недавно просмотренные продукты, вы можете сделать это с помощью только одного файла, без необходимости устанавливать какие-либо плагины, какую-либо библиотеку или какое-либо приложение Shopify.

Этот код будет работать со всеми темами Shopify, вам просто нужно включить один файл в папку сниппетов и включить его в шаблон продукта.

Я использовал локальное хранилище браузера для хранения данных, а затем использовал его для просмотра продуктов.

Давайте начнем с кода и сделаем так, чтобы у клиентов было больше опыта.

Создайте фрагмент latest-visible-product-js.liquid для написания нашего кода.

Получите текущие данные PDP с помощью жидких объектов и сохраните их в переменной JS.

<script type="text/javascript">
  const pdpData = {
    productTitle = "{{ product.title }}",
    productImg = "{{ product.featured_image | img_url: 'small' }}",
    productPrice = "{{ product.price | money | remove_first: '' }}",
    productUrl = "{{ product.url }}"
 }
console.log(pdpData) 
</script>

Теперь, если вы выполните console.log (pdpData), результат должен быть примерно таким

Теперь давайте создадим несколько переменных, помещающих данные в массив. Одна вещь, которую нам нужно иметь в виду, - это хранить данные в locaStorage в форме строк, поэтому нам нужно преобразовать наши объекты в массив для хранения.

Первый блок кода

<script type="text/javascript">
// First Block
function setRecentlyViewedPdp() {
  const pdpData = {
    productTitle = "{{ product.title }}",
    productImg = "{{ product.featured_image | img_url: 'small' }}",
    productPrice = "{{ product.price | money | remove_first: '' }}",
    productUrl = "{{ product.url }}"
 };
 console.log(pdpData)
  // Init Empty Array to push data
   const productArr = [];
  // Create a couple of variables 
   let jsonResp,
       jasonRespArr, 
       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');

к настоящему времени мы выполнили следующие действия.
1. Получите данные со страницы продукта и поместите их в массив.
2. Преобразование данных массива в строки для дальнейшего использования.
3. Установите переменную для нашего локального хранилища.

Теперь нам нужно сохранить эти данные в localStorage для 4 последовательных страниц.
PS: вам нужно следить за приведенным выше кодом, это следующий блок кода.

Второй блок кода

// 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_viewedPDP');
// 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 
   cont 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_viewedPDP', jsonRespArrStr);
 }
// If User visited more the 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_viewedPDP', 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_viewedPDP;
// console.log to verify the data 
console.log(localViewed);

Данные, хранящиеся в localStorage, находятся в строковой форме, поэтому это будет выглядеть так

Итак, мы получили данные о последних посещенных товарах, теперь нам нужно написать функцию для ввода данных на страницу товара.

Создайте пустой ‹div›, который мы можем использовать для ввода наших данных

Третий и последний блок кода

<div class="js-recentPdpBlock o-flex">
<!-- Recent Viewed Products would appear here -->
</div>

Напишем функцию () и введем данные на страницу товара.

// Third Block
function getRecentPdp (){
// First let's convert localStorage data into object again
  const pdpData =     JSON.parse(localStorage.getItem('recently_viewedPDP'));
// Create a empty Array
 const recentViewHtml = []
// Loop through all the data and inject into HTML using ES6
 pdpData.forEach(function(item){ 
   recentViewHtml.push(`
     <div class="c-product">
       <div class="c-product__img">
         <img src='${item.productImg}'/>
       </div>
       <h3 class="c-product__title">
         <a class="c-product__url" href="${item.productUrl}">
           ${item.productTitle}
         </a>
       </h3>
       <p class="c-productPrice">${item.productPrice}</p>
      </div>
   `)
 })
 // 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.getElementsByClassName('js- recentPdpBlock');
 // Push the data
 contentBlock[i].innerHTML = recentBlock;
}
// Execute this function on DOM content load 
document.addEventListener("DOMContentLoaded", function(event) {
 getRecentPdp();
});
</script>
// Done ✅ 
// Happy Coding

Итак, мы закончили с очень интересной функцией в нашем Shopify Store.

Если вам это нравится, поделитесь и полюбите.

Удачного кодирования ..

Создано с любовью ❤️
@miniScript

Технический руководитель Анатта