Essentially, what we are trying to create is a product page that has, for this example, 8 variants in which 5 are in stock items ( Add To Cart ), 2 are Pre-Order items ( Pre-Order ) and 1 is out of stock ( Sold Out ).
I have created an IF statement that shows each of the three above button input text with AddTo Cart & Sold Out being already built into the code. Pre-Order however is what we are trying to integrate.
Pre-Order will show when the page loads but will revert back to Add To Cart once a different variant is chosen.
THE GOAL: We would like to ensure Pre-Order remains the button input text and does not revert to Add To Cart. Add To Cart & Sold Out react this way already.
<button type=“submit” data-use-primary-button=“{% if use_primary_button %}true{% else %}false{% endif %}” class=“ProductForm__AddToCart Button {% if selected_variant.available and use_primary_button %}Button–primary{% else %}Button–secondary{% endif %} Button–full” {% if selected_variant.available %}data-action=“add-to-cart”{% else %}disabled=“disabled”{% endif %}>{%- if selected_variant.inventory_quantity <0 -%}
{{- ‘product.form.pre_order’ | t -}}
{%- if section.settings.show_price_in_button -%}
{{ selected_variant.price | money_without_trailing_zeros }}
{%- endif -%}{%- elsif selected_variant.inventory_quantity ==0 -%}
{{- ‘product.form.sold_out’ | t -}}{%- else -%}
{{- ‘product.form.add_to_cart’ | t -}}{%- endif -%}
I understand there will be an element of JS required however JS is foreign to me.
Would anyone be able to help?
Below is the JS code
/**
- Update the add to cart
*/
}, {
key: ‘_updateAddToCartButton’,
value: function _updateAddToCartButton(newVariant) {
var addToCartButton = this.element.querySelector(‘.ProductForm__AddToCart’),
shopifyPaymentButton = this.element.querySelector(‘.shopify-payment-button’);
addToCartButton.classList.remove(‘Button–secondary’);
addToCartButton.classList.remove(‘Button–primary’);
if (!newVariant) {
addToCartButton.setAttribute(‘disabled’, ‘disabled’);
addToCartButton.removeAttribute(‘data-action’);
addToCartButton.classList.add(‘Button–secondary’);
addToCartButton.innerHTML = window.languages.productFormUnavailable;
} else {
if (newVariant[‘available’]) {
addToCartButton.removeAttribute(‘disabled’);
addToCartButton.classList.add(addToCartButton.getAttribute(‘data-use-primary-button’) === ‘true’ ? ‘Button–primary’ : ‘Button–secondary’);
addToCartButton.setAttribute(‘data-action’, ‘add-to-cart’);
if (undefined === this.options[‘showPriceInButton’] || this.options[‘showPriceInButton’]) {
addToCartButton.innerHTML = ‘\n ’ + window.languages.productFormAddToCart + ‘\n \n ’ + WEBPACK_IMPORTED_MODULE_4__helper_Currency[“default”].formatMoney(newVariant[‘price’], window.theme.moneyFormat) + '\n ';
} else {
addToCartButton.innerHTML = ‘’ + window.languages.productFormAddToCart + ‘’;
}
} else {
addToCartButton.setAttribute(‘disabled’, ‘disabled’);
addToCartButton.classList.add(‘Button–secondary’);
addToCartButton.removeAttribute(‘data-action’);
addToCartButton.innerHTML = window.languages.productFormSoldOut;
}
}
if (this.options[‘showPaymentButton’] && shopifyPaymentButton) {
if (!newVariant || !newVariant[‘available’]) {
shopifyPaymentButton.style.display = ‘none’;
} else {
shopifyPaymentButton.style.display = ‘block’;
}
}
}