How to add customField to cart summary template?

Support
#1

Hello, i try to add a svg image to the summary cart using custom fields.
Products on my store can be bought in different package and i use svg images to illustrate it.

I can’t find the the way to get the source value (url) who is passing to the cart.

It displays as text without problem using
<item-custom-fields> </item-custom-fields>.
But i search the way to diplay it like that :
<img src="{{ item.Url-to-the-svg-image }}">

Can you help me ?

#2

Hey @Fletcher
Can you let us know how the SVG is added in the first place? You could check the hidden field or the meta data to find the src.

If you are not able to find it please send an email to geeks@snipcart.com with the link to your site so we can check it as well.

#3

Hi,
Here is the way i declare the svg image :

<button data-dismiss="modal" class="snipcart-add-item" 
        data-item-id="20335" 
        data-item-price="5" 
        data-item-url="https://domainName.ext/Product.html" 
        data-item-description="" 
        data-item-image="https://domainName.ext/images/ProductImg.png" 
        data-item-quantity="1" 
        data-item-name="Muscade poudre" 
        data-item-custom1-name="Packaging" 
        data-item-custom1-type="readonly" 
        data-item-custom1-value="https://domainName.ext/images/ProductPackage1.svg">
Add to cart
</button>

Thank you for your help.

#4

Hey @Fletcher,

If you are overriding the <ItemLine> or <CartSymmaryItem> template, you can try this:

<img :src="item.customFields.find(field => field.name === 'Packaging').value">

In Vue, we need to add the colon before the attribute to tell Vue that this will be a dynamic attribute (with JS expression). We can then write javascript that will be evaluated in our Vue template.

Each item has an array of custom fields, that’s why we find the one matching the name you want (‘Packaging’) and then display it’s value.

Let me know if this helps!

#5

Hello,
I probably misspoke. The svg is dynamically managed by the user. It appears in the product detail and I would like it to also appear in the shopping cart to remind the user of the packaging choice he has made. When I use the proposed method the shopping cart does not display any HTML. Like broken. I try :

<img :src="item.item-custom1">
or
<img :src="item.item-custom1-value">
or
<img :src="{{ item.item-custom1 }}">
or
<img :src="item.Packaging">

But… nothing works…
Any other idea ?

#6

Thanks for the added context @Fletcher, I updated my previous answer to include how to get the custom field value.

#7

Thank you for your support. It’s exactly what i expected !

:wink:

2 Likes