Adding An Out Of Stock Contact Form To Product Page In Dawn 2.0

Technical Q&A

Topic summary

Main issue: The product page should hide the buy/add-to-cart buttons and show an out-of-stock contact form when the selected variant is unavailable, without requiring a page refresh in Dawn 2.0.

What was tried: A Liquid if statement around the product form (including using product.selected_or_first_available_variant.available) and placing conditions inside the button. It worked only after reloading the page.

Root cause: The logic wasn’t applied at the variant level in real time, so the Liquid condition didn’t update as variants changed (Liquid renders server-side and doesn’t react to client-side selection changes).

Solution implemented: Add JavaScript to the variant updater to toggle visibility based on the current variant’s availability. Code (central to the fix): a function updateOOSForm() that hides .product-form and shows #sold-out when !this.currentVariant.available, and reverses when available.

Outcome/status: Issue resolved by integrating the JS toggle into the variant update flow. No further open questions noted.

Summarized with AI on February 20. AI used: gpt-5.
1

I am not sure what I am doing wrong but I have an if statement wrapped around the product form to not show the buy / add to cart buttons and instead show an out of stock form when the selected variant is not available.

Problem is it only works if you manually reload the product page. Does anyone know how to get it to work without having to refresh the page?

Do I have my if statement in the wrong place? I tried it inside of the product form button changing it to:


I'm so stuck!

I also tried:

```css
{%- if product.selected_or_first_available_variant.available -%}
around the:

{%- else -%}
OUT OF STOCK CONTACT FORM

Feeling clueless.

2

So this was silly on my part. I was trying to convert the instructions to add a contact form on an older theme and the instructions were not on the variant level so of course didn’t update as the variants changed. I realized that I needed to add some JS to the variant updater method. Something to hide and unhide the parts I needed.

updateOOSForm() {
    const productForm = document.querySelector('.product-form');
    const backInStockForm = document.querySelector('#sold-out');
    if (!this.currentVariant.available) {
    productForm.style.display = "none";
    backInStockForm.style.display = "";
    } else {
      productForm.style.display = "";
      backInStockForm.style.display = "none";
    }
  }