.lines()

openbridge.cart.lines()

const lines = openbridge.cart.lines()

lines.forEach((line) => {
    console.log(line.merchandise.product.title)
    console.log(`Variant: ${line.merchandise.title}`)
    console.log(`Quantity: ${line.quantity}`)
    console.log(`Price: ${line.cost.totalAmount.amount}`)
})

function renderCartItems() {
    const container = document.querySelector('.cart-items')
    const lines = openbridge.cart.lines()

    container.innerHTML = lines
        .map(
            (line) => `
    <div class="cart-item" data-line-id="${line.id}">
      <img src="${line.merchandise.image?.url}" alt="${line.merchandise.title}">
      <div class="item-details">
        <h3>${line.merchandise.product.title}</h3>
        <p>${line.merchandise.title}</p>
        <p>Qty: ${line.quantity}</p>
        <p>${line.cost.totalAmount.currencyCode} ${line.cost.totalAmount.amount}</p>
      </div>
    </div>
  `
        )
        .join('')
}

const lines = openbridge.cart.lines()

const tshirt = lines.find(
    (line) => line.merchandise.product.handle === 'awesome-tshirt'
)

if (tshirt) {
    console.log('T-shirt is in cart, quantity:', tshirt.quantity)
}

const lines = openbridge.cart.lines()

lines.forEach((line) => {
    const options = line.merchandise.selectedOptions
    console.log(options.map((o) => `${o.name}: ${o.value}`).join(', '))
    // e.g., "Size: Large, Color: Blue"
})