Access product json via custom liquid

[tdug07]

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 }}">
          </a> 
        </div>
      </div>
      {% endfor %}
    </div>

<script>
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.classList.add("side-bar-product");
  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);

  sideBar.appendChild(productElement);
}

  // Function to handle the plus button click
  function handlePlusButtonClick(event) {
  if (event.target.classList.contains("plus-btn")) {
    const productItem = event.target.closest(".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
      addProductToSideBar(product);
} catch (error) {
      console.error("Error parsing JSON:", error);
    }
    }
  }

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

</script>

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?