Summary Block – Product

by

Description

  • Control number of products in Summary Block
  • Work with Summary Block – Grid only

#1. Install Code

Hover on Page where you use Summary Block > Click Gear icon

Summary block product 1

Click Advanced > Paste this code

<!-- Summary Block Product @tuanphan -->
<script>
window.tpSummaryProductConfig = {
  limit: 40,
  tag: null,
};
</script>
<script>
!function(){const t=(t,e=document,r=100,n=100)=>new Promise((o=>{const i=setInterval((()=>{const n=e.querySelector(t);(n||--r<=0)&&(clearInterval(i),o(n))}),n)})),e=async()=>{const e=await t(".sqs-block-summary-v2");if(!e)return;const r=await t(".summary-item-list",e),n=e.querySelector(".summary-block-header");if(!r)return;const o=(t=>{const e=t.querySelector('.summary-item a[href*="/p/"]');if(e){const t=e.getAttribute("href").match(/^(.*?)\/p\//);if(t)return t[1]}return null})(e);if(!o){const t=document.createElement("div");return t.className="tp-sp-error",t.textContent="Product Page doesn't exist",r.insertAdjacentElement("afterend",t),n&&(n.style.display="none"),void(r.style.display="none")}const i=new URL(o,location.origin);i.search="";const s=i.pathname,[c,l]=await Promise.all([fetch(s).then((t=>t.text())),(a=s+"?format=json-pretty",fetch(a).then((t=>t.json())).catch((()=>null)))]);var a;if(!c||!l){const t=document.createElement("div");return t.className="tp-sp-error",t.textContent="Product Page doesn't exist",r.insertAdjacentElement("afterend",t),n&&(n.style.display="none"),void(r.style.display="none")}const u=(new DOMParser).parseFromString(c,"text/html").querySelectorAll(".product-list-item");if(!u.length){const t=document.createElement("div");return t.className="tp-sp-error",t.textContent="No products found",r.insertAdjacentElement("afterend",t),n&&(n.style.display="none"),void(r.style.display="none")}const m=window.tpSummaryProductConfig?.tag||window.tpSummaryProduct?.tag,d=window.tpSummaryProductConfig?.limit||window.tpSummaryProduct?.limit,y={},p=l?.items||[];p.forEach((t=>{y[t.id]=t.tags||[]}));let f=[];u.forEach((t=>{const e=t.getAttribute("data-product-id");if(m){if(!(y[e]||[]).some((t=>t.toLowerCase().includes(m.toLowerCase()))))return}f.push(t)})),d&&d>0&&(f=f.slice(0,d));const h=Array.from(r.querySelectorAll(".summary-item")),w=f.length,S=h.length;if(w>S&&S>0){const t=h[0],e=w-S;for(let n=0;n<e;n++){const e=t.cloneNode(!0);r.appendChild(e)}}"function"==typeof window.tpSummaryBeforeBuild&&await window.tpSummaryBeforeBuild({items:p,listEl:r,block:e,productPath:s});const g=r.querySelectorAll(".summary-item");let C=0;f.forEach(((t,e)=>{const r=g[e];if(!r)return;const n=t.querySelector(".product-list-item-link"),o=t.querySelector(".product-list-item-title"),i=t.querySelector(".product-list-item-price"),s=t.querySelector("img");r.querySelectorAll("a[href]").forEach((t=>{t.href=n?.getAttribute("href")||t.href}));const c=r.querySelector(".summary-title-link, .summary-title");c&&(c.textContent=o?.textContent||c.textContent);const l=r.querySelector(".summary-price, .product-price");l&&(l.textContent=i?.textContent||l.textContent);const a=r.querySelector("img");a&&s&&(a.src=s.src||s.getAttribute("data-src")||a.src,a.alt=o?.textContent||a.alt),r.style.display="",C++})),g.forEach(((t,e)=>{e>=C&&(t.style.display="none")})),C>0&&n&&(n.style.display="none"),"function"==typeof window.tpSummaryAfterBuild&&await window.tpSummaryAfterBuild({listEl:r,block:e,built:C,items:p})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}();
</script>

Summary block product 2

#2. Customize

You can adjust number of items in Line 04

limit: 40,

Summary block product 3

If you need support, you can message me on forum or email me.

Buy me a coffee