Displaying SOLD OUT button for Inventory Variant level of 0

[lesliekirk]

Hi Leslie,

That is because the IF statement does not get reevaluated when you change variants; that is the reason we have JavaScript checking the disabled state of the button.

So what is the bottom line here - no ability to display "Sold Out" on the button?

[Matt Zimmermann]

Hi Leslie,

Revert back to the original button and replace your outOfStock function in scripts.js with this:

// ---- Update Button For "Out Of Stock" ---- //
function outOfStock () {
    var button = $('#js-add-to-cart');
    var buttonText = button.html();

    if (button.is(':disabled') === true) {
        button.addClass('bg-gray').html('Sold Out');
    }
    else {
        button.removeClass('bg-gray').html(buttonText);
    }
}
outOfStock();

[lesliekirk]

Hi Leslie,

Revert back to the original button and replace your outOfStock function in scripts.js with this:

// ---- Update Button For "Out Of Stock" ---- //
function outOfStock () {
var button = $('#js-add-to-cart');
var buttonText = button.html();

if (button.is(':disabled') === true) {
button.addClass('bg-gray').html('Sold Out');
}
else {
button.removeClass('bg-gray').html(buttonText);
}
}
outOfStock();

Thanks Matt - but now it shows Sold Out all the time.

[Matt Zimmermann]

Hi Leslie,

Did you revert back to this button code and is there inventory for the variants?

<button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>

[lesliekirk]

Yes and Yes.

Here is the button code used:

<button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>

I also tried using:

<button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold" disabled>Add <span class="small-inline-block hide">to Cart</span></button>

Question, could there be an issue with it using the "Preload - Drop-Down Lists Contain Select One"? It seems to also display Sold Out when the Invalid Attribute Combination Message "Please select a valid combination of attributes." displays. That too can be confusing to be greeted with Sold Out before even selecting.

[Matt Zimmermann]

Hi Leslie,

It's possible. Are you seeing any JavaScript errors in the console?

[lesliekirk]

There are two

Unchecked runtime.lastError: The message port closed before a response was received.

Failed to load resource: the server responded with a status of 404 ()

this one is related to the Google Tag Manager

[Matt Zimmermann]

Hi Leslie,

Since the initial state may be that the item is sold out, that might be causing the issue. Try replacing the outOfStock function with this:

        // ---- Update Button For "Out Of Stock" ---- //
        function outOfStock () {
            var button = $('#js-add-to-cart');

            if (button.is(':disabled') === true) {
                button.addClass('bg-gray').html('Sold Out');
            }
            else {
                button.removeClass('bg-gray').html('Add <span class="small-inline-block hide">to Cart</span>');
            }
        }
        outOfStock();

[lesliekirk]

Hi Matt, thanks!!! This is soooo close. The only issue I have now is the initial Select One state displays "Sold Out". Is there any way to display a grayed out Add to Cart button until a selection has been made?

I'm using this button code (along with the update to the outOfStock function):

<button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold" disabled>Add <span class="small-inline-block hide">to Cart</span></button>

[Matt Zimmermann]

Hi Leslie,

Not that I know of since, on load, Miva will make the button disabled because there is not valid selection. That is the biggest drawback of adding the Select One option.

[lesliekirk]

Hi Leslie,

Not that I know of since, on load, Miva will make the button disabled because there is not valid selection. That is the biggest drawback of adding the Select One option.

Okay, this has become one hot mess. Items that don't have variants are showing a SOLD OUT button. The site is also using Tess's Wait List. I'm going to open a support ticket and reference this thread. I must be missing something.

[lesliekirk]

Hi Leslie,

That is the biggest drawback of adding the Select One option.

I straightened out all the other messes accept this drawback of using the Select One. Is it possible to completely hide the Add to Cart button until a selection has been made?

[Matt Zimmermann]

Hi Leslie,

You might try doing it through CSS:

.add-to-cart[disabled] {display: none;}

[lesliekirk]

Hi Leslie,

You might try doing it through CSS:

.add-to-cart[disabled] {display: none;}

That seems to hide the "SOLD OUT" button too.