Custom data in default theme cart

Support
#1

hi,

I am using React, Next.js and Snipcarts default theme. I have problems with displaying custom data in the shopping cart elements.

i have a button that adds the product to the cart:

data-item-id={product.id}
                data-item-price={product.price}
                data-item-url={'/'}
                data-item-description={product.maker}
                data-item-image={product.image.url}
                data-item-name={product.title}
                data-item-quantity={quantity}
                data-item-custom1-value={product.delivery}

now i want to display the id, price of a single item and deliverytime in the cart. see comments:

<item-line>
                <li class="snipcart__item__line snipcart__box">
                  <div class="snipcart__item__line__product">
                    <div class="snipcart__item__line__header">
                      <item-image alt="product image"> </item-image>
                      <div>
                        <h1>custom data</h1>
                         {/* description works */}
                        <item-description> </item-description>
                        {/* cant to display id and price of single item like descrition */}
                        <item-id> </item-id>
                        <item-price> </item-price>
                        {/* are custom fields also possible to display just the text like description? */}
                        <item-custom-fields> </item-custom-fields>
                      </div>
                      <item-quantity
                        class="snipcart__item__line__quantity"
                        v-if="!adding"
                      ></item-quantity>
                      <div class="snipcart__item__line__header__actions">
                        {/* remove item don't work */}
                        <remove-item-action class="snipcart__button--icon">
                          <icon name="trash" class="icon--red" alt="item.remove_item"></icon>
                        </remove-item-action>
                      </div>
                    </div>
                  </div>
                </li>
</item-line>

Thanks!

#2

Hey @rob345,

Our custom templates oftentimes include other templates (that may also be customizable).
This is the case for <line-item> which contains <item-description> and <item-price> for example.

There seems to be some confusion about this since it looks like every product property is accessible in a similar fashion with a corresponding template (ie: <item-id> for displaying the product id) – but this is not the case. You can instead access the value of the item (product) properties using dot notation like this: item.id. Since we use VueJS behind the scenes, you can add accolades to display the text value of variables {{ item.id }}.

For the custom fields, depending on your use case, you can use read-only custom fields or create your own logic with Vue.

Here is sandbox I created to show both options + how to display the product Id:

This should help clear things up, don’t hesitate if you have more questions.
Cheers!

1 Like