TypeError when using buybutton js

[brianrivet-tilt]

I'm getting the following error when trying to use the buy button:

TypeError: Cannot read properties of undefined (reading 'indexOf')
at buybutton.js:12613:25

Here's and example of my code (I have a number of products and they are all doing this):

`
var shopui = ShopifyBuy.UI.init(client);

    shopui.createComponent('cart', {
        options: {
            cart: {
                startOpen: false,                       
                templates: {
                    button: '<button class="shopify-buy__btn shopify-buy__btn--cart-checkout btn-checkout" type="button">CHECKOUT</button>'
                },
                styles: {
                    button: {
                        color: '#ffffff',
                        'background-color': '#AF1121',                              
                        'font-weight': 'bold',
                        'text-transform': 'uppercase',
                        ':hover': {
                            'background-color': '#841717'
                        }
                    }
                }
            },
            toggle: {
                styles: {
                    toggle: {
                        'background-color': '#AF1121',
                        ':hover': {
                            'background-color': '#841717'
                        }
                    }
                     
                }
            }
        }
    });


    shopui.createComponent('product', {
        id: {{ entry.productShopifyId }},
        node: document.getElementById('shopControls'), 
       
        options: {
            product: {
                buttonDestination: 'cart',
                iframe: false,
                contents: {
                    img: false,
                    price: true,
                    description: false,
                    title: false,
                    options: true,
                    quantity: false,                        
                    button: true 
                },                                                   
                templates: {
                    button: '<p class="text-left mt-30px mb-30px"><button class="shopify-buy__btn btn-shopify shopify-btn-redHollow">ADD TO CART</button></p>',

                    price: '<div class="pb-30px text-left"><p class="productPrice">{{data.selectedVariant.formattedPrice}}</p></div>'

                }
                
            }
        }
       
    });        

`

[MojoMark]

Hey, I'm seeing this same behavior. Anybody find a solution? I'm running the 2.2.1 version, found it initially with 2.1.8.

[brianrivet-tilt]

Updating to 2.2.1 fixed the problem for me.

[mjmaurer]

Having this issue as well with 2.2.1 (originally had the error with 2.1.8)

[MojoMark]

i would echo Brian's comment. I didn't have the reference to 2.2.1 corrected initially. Now it seems to work ok for me.

[brianrivet-tilt]

I'm having this issue again. Updating to 2.4.0 seems to fix that error, but the {{data.selectedVariant.price}} no longer works and is just outputting [object object] can anyone help me to resolve. This is time sensitive.

[murphy1484]

@brianrivet-tilt
data.selectedVariant.price is an object consisting of amount and currencyCode.
So you would have to print the amount: data.selectedVariant.price.amount.
The same goes for compareAtPrice.

https://shopify.dev/docs/api/storefront/2023-07/objects/MoneyV2

[philosophy-flow]

@murphy1484
The data.selectedVariant.price.amount value only seems to have one trailing zero. Do you know of a way to add an additional zero (17.0 --> 17.00)?

[murphy1484]

@philosophy-flow I've added following code to format the price to the product options in the createComponent function.

import formatMoney from "@shopify/buy-button-js/lib/utils/money";

const moneyFormat = '€ {{amount_with_comma_separator}}';

product: {
    viewData: {
        formatVariantPrice() {
            return formatMoney(this.data.selectedVariant.price.amount, moneyFormat);
        }
    },
    ...

then in the templates attribute you can use it.

price: `<div>{{ data.formatVariantPrice }}</div>`

[dannytrann]

Hi @brianrivet-tilt
I'm just using the script <script src="http://sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script> so I'm not sure how the solution to upgrade to 2.40 would apply to me. I'm still getting this same error though - any ideas?

[dannytrann]

Nevermind, I fixed it by adding the script in my HTML file https://sdks.shopifycdn.com/buy-button/2.4.0/buybutton.js instead of the https://sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js