New Shopify Certification now available: Liquid Storefronts for Theme Developers

Access product json via custom liquid

15 2 1

Hello all, 


I am playing around with some custom liquid on my site (trying to teach myself somethings) but I am having trouble accessing product json thus unable to access the product image currently. I am iterating through a collection of products and assigning product json as data-product.

<div class="customizable-box-container" id="productContainer">
      {% for product in collections.bundle-books.products %}
      <div class="customizable-box-card-container">
        <div class="customizable-box-item" data-handle="{{ product.handle }}" data-product="{{ product | json }}">
          <a href="{{ product.url }}" class="product-image">
            <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
      {% endfor %}
function addProductToSideBar(product) {
  const sideBar = document.getElementById("sideBarContainer");

  // Create a new element to display the product in the side-bar
  const productElement = document.createElement("div");
  productElement.setAttribute("data-product", JSON.stringify(product));

  // Use the correct property for the image URL if available
  const imageUrl = product.featuredImage.src ? product.featuredImage.url : 'default-image.jpg';

  productElement.innerHTML = `
    <img src="${imageUrl}" alt="${product.title}" class="side-bar-product-image">
    <h3 class="side-bar-product-title">${product.title}</h3>
    <button class="remove-btn">Remove</button>

  // Attach the event listener for the remove button
  const removeBtn = productElement.querySelector(".remove-btn");
  removeBtn.addEventListener("click", handleRemoveButtonClick);


  // Function to handle the plus button click
  function handlePlusButtonClick(event) {
  if ("plus-btn")) {
    const productItem =".customizable-box-item");
    const product = productItem.dataset.product;
    console.log("Product data:", product);

 // Add this line to log the parsed product object

try {
      const productObj = JSON.parse(product);
      // Get the quantity input element and increase its value by 1
      const quantityInput = productItem.querySelector(".quantity-input");
      const currentQuantity = parseInt(quantityInput.value);
      const newQuantity = currentQuantity + 1;
      quantityInput.value = newQuantity;

      // Add the product to the side-bar
} catch (error) {
      console.error("Error parsing JSON:", error);

  // Function to handle the remove button click
  function handleRemoveButtonClick(event) {
    const productElement =".side-bar-product");
    const productData = JSON.parse(productElement.dataset.product);


Upon click of the element: I get this error.

Error parsing JSON: SyntaxError: Expected property name or '}' in JSON at position 1
at JSON.parse (<anonymous>)
at handlePlusButtonClick 
at HTMLDocument.<anonymous> 


The issue seems to lie in the handleRemoveButtonClick. The log of console.log("Product data:", product);  just shows "Product data: {". 


Is this not the correct way to get the product json data-product="{{ product | json }}"? As well as the following step: 


productElement.setAttribute("data-product", JSON.stringify(product));
const productData = JSON.parse(productElement.dataset.product);

Anyone able to lend some assistance?


Replies 0 (0)