Problem with variants out of stock

[juliangantiva]

Hi. I’m working with the BuyButton.js library, but I have a problem. I’m displaying products in my website showing only a button named “VIEW PRODUCT” (not images, variants, etc.). The button directs to a modal. Also, I have several variants for a product. The problem is that when the first variant is out of stock, the whole button “VIEW PRODUCT” changes to “out of stock”, but I want that the button remains normal and just when the modal is open and the variant that is out of stock is selected, the button “ADD TO CART” changes. I’ve seen this is possible because when I copy all the code that is generated in the section of Buy Button in my Shopify admin interface, this behaves as I want. However, I haven’t been able to replicate this behavior coding it by myself. Thank you.

Here is my current button configuration:

`(function () {

var client = ShopifyBuy.buildClient({
    apiKey: 'my-key',
    domain: 'mydomain',
    appId: '6'
});

var ui = ShopifyBuy.UI.init(client);

var opciones = {
        product: {
            buttonDestination: 'modal',
            variantID: 'all',
            width: "100%",
            contents: {
                img: false,
                title: false,
                options: false,
                price: false
            },
            text: {
                button: 'Vista rápida',
                outOfStock: 'Agotado',
                unavailable: 'Deshabilitado',
            },
            styles: {
                button: {
                    'background-color': '#df5461',
                    'color': 'white',
                    ':hover': {
                        'background-color': '#e77e89'
                    },
                    ':focus': {
                        'background-color': '#e77e89'
                    },
                    'width': '100%',
                    'height': '22px',
                    'padding': '3px',
                    'font-size': '16px'
                },
            },
        },
        cart: {
            text: {
                title: 'Carro de compras',
                empty: 'Tu carro está vacío',
                button: 'Pagar',
                total: 'Total',
                currency: 'COP',
                notice: 'Envió y códigos de descuento son añadidos en el pago.',
            },
            styles: {
                button: {
                    'background-color': '#df5461',
                    'color': 'white',
                    ':hover': {
                        'background-color': '#e77e89'
                    },
                    ':focus': {
                        'background-color': '#e77e89'
                    },
                }
            },
            
        },
        toggle: {
            styles: {
                toggle: {
                    'background-color': '#df5461',
                    'color': 'white',
                    ':hover': {
                        'background-color': '#e77e89'
                    },
                    ':focus': {
                        'background-color': '#e77e89'
                    },

                }
            },
        },
        modalProduct: {
            text: {
                button: 'Añadir al carro de compras',
                outOfStock: 'Agotado',
                unavailable: 'Deshabilitado',
            },
        },
    };

ui.createComponent('product', {
    id: 10645138516,
    node: document.getElementById('my-product'),
    options: opciones,
});

})();`