DL Media - Coding Task

add-to-cart.liquid

<product-form>
  // rest of product form functionality
  
<button
  id="btn-ATC_Button"
  type="submit"
  class="btn-Button_Primary"
  data-inventory="{{ product.variants.first.inventory_quantity }}"
  {% if product.variants.first.inventory_quantity == 0 %}disabled{% endif %}>
  {% if product.variants.first.inventory_quantity == 0 %}
    Out of Stock
  {% else %}
    Add to Cart
  {% endif %}
</button>

</product-form>

<script src="{{ 'product-form.js' | asset_url }}" type="module"></script>

buttons.pcss

.btn-Button_Primary {
  align-self: flex-start;

  display: inline-block;
  width: auto;
  padding: 12px 20px;

  font-size: 12px;
  font-weight: 400;
  font-family: var(--title-font);
  letter-spacing: 1.5px;
  text-transform: uppercase;

  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-color);

  transition:
    background-color 0.5s ease,
    color 0.3s ease;

  &:hover {
    background-color: #fff;
    color: var(--text-color);
  }

  @media (--sm) {
    padding: 12px 33px;
  }
}

.btn-Button_Primary[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.btn-Button_Primary.low-stock {
  background-color: var(--yellow-color);
  border-color: #FFD700;
  color: #000;
}

.btn-Button_Primary.in-stock {
  background-color: var(--green-color);
  border-color: #28a745;
  color: #fff;
}

/* would usually just handle with disabled attribute but added a class here for purposes of task */

.btn-Button_Primary.out-of-stock {
  opacity: 0.5;
  pointer-events: none;
}

product-form.js

class ProductForm extends HTMLElement {
  constructor () {
    super()
    this.atcButton = this.querySelector('#btn-ATC_Button')
  }

  connectedCallback () {
    if (this.atcButton) {
      this.updateButtonState()
    }
  }
  
  // Other product form functionality goes here

  updateButtonState () {
    const inventory = parseInt(this.atcButton.getAttribute('data-inventory'), 10)

    // Remove any previous stock classes
    this.atcButton.classList.remove('low-stock', 'in-stock', 'out-of-stock')

    if (inventory === 0) {
      this.atcButton.classList.add('out-of-stock')
      this.atcButton.disabled = true
      this.atcButton.textContent = 'Out of Stock'
    } else if (inventory < 10) {
      this.atcButton.classList.add('low-stock')
      this.atcButton.disabled = false
      this.atcButton.textContent = 'Limited Stock Remaining - Add to Cart'
    } else {
      this.atcButton.classList.add('in-stock')
      this.atcButton.disabled = false
      this.atcButton.textContent = 'Add to Cart'
    }
  }
}


if (!customElements.get('product-form')) {
  customElements.define('product-form', ProductForm)
}