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

Technical Q&A
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";
    }
  }