How to display line item properties in Cart API?

Store Design
1

I am relatively new to the Cart API and JS ability is a touch sketchy (currently). Our client is using GoCart JS for their cart, but wants to add additional fields under the products.

The have a product that has properties added to it, which we have previously shown using a liquid for loop and running through properties,

I am trying to show that same info but using the API and am currently getting [object OBJECT] returned, can anyone point our where I’m going wrong/any solution?

The attempt below uses itemOptions / item.options_with_values

renderDrawerCart(cart) {
        this.clearCartDrawer();
        cart.items.forEach((item, index) => {
            let itemVariant = item.variant_title;
            let itemOptions = item.properties_with_values;
            if (itemVariant === null) {
                itemVariant = '';
            }
            if (itemOptions === null) {
                itemOptions = '';
              }
            const cartSingleProduct = `
        
            

                

                
                    ${item.product_title}
                    
${itemVariant}

                    <small>${itemOptions}</small>

                    
                        ${this.labelQuantity} 
                        -
                        
                        +
                    

                

            

            ${formatMoney(item.line_price, this.moneyFormat)}

            ${this.labelRemove}
        

      `;

How the options should look
How the options should look597×455 88.9 KB

How they currently look
How they currently look451×705 118 KB

Image on the left is how the options should look, on the right is how they do,

Any assistance at all would be massively helpful and appreciated

2

Hi,

OK here we go with some untested codes. Feel free to modify.

// replace this
let itemOptions = item.properties_with_values;

// with this
let itemOptions = item.options_with_values;

// add the following
const itemOptionsText: string[] = [];
if(itemOptions){
  for(const option of itemOptions){
     itemOptionsText.push(`${option.name}: ${option.value}`);
  }
}

//replace this following line
<small>${itemOptions}</small>

//with this
<small>${itemOptionsText.join('
')}</small>
3

Thanks a lot for that! I hit an issue exporting this in the build however where it flags the ItemOptionsText: colon as an unexpected token, I altered it a little and the build succeeded and still pulled through [Object] rather than the actual text needed.

We have variants showing, what in particular we’re looking to pull through is a property on a single products form that is posted as property[Selection], and I can’t figure out how to bring that through,

Thanks however for the attempt!