I need help using Sparklayer Javascript SDK data in Shopify Theme

Topic summary

A developer is building a B2B Shopify project using Sparklayer integration, where cart items are only accessible via Sparklayer’s JavaScript SDK rather than Shopify’s native cart.

Goal: Display cart item quantities next to product images on collection pages when products are added.

Current Issue: The script successfully retrieves cart data and logs it to the console, but the quantities don’t appear visually on the page. The developer suspects the problem lies in the highlighted section that creates and appends the quantity display element.

Technical Details:

  • Script uses window.spark.getCart() to fetch cart data
  • Matches products by comparing data-product-id attributes with cart item external IDs
  • Creates a <span> element with class cart-quantity to display quantities
  • Uses appendChild() to insert the element into product cards

Status: The developer has shared their code (including a screenshot) and is seeking assistance to modify the script so quantities display correctly next to product images. The issue appears to be in the DOM manipulation/insertion logic rather than data retrieval.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Project Context:
I’m currently developing a B2B project using Sparklayer B2B integration. In this setup, cart items are not visible in Shopify’s native cart system and can only be accessed through Sparklayer’s JavaScript SDK.

Objective:
In an Enterprise Shopify Theme, I want to display the quantity of items added to the cart next to each product image on collection pages when a product is added.

Current Status:
I have a script that successfully logs this data to the console, but I’m unable to make the quantities display visually next to the product card images. The part if the script highlighted in red is where I belive the issue is.

Request:
Can anyone assist in modifying the script to show the added item quantities next to the product images as intended?