Add Pre-Order Button and Note [Multiple variants product] - Shopify

Add Pre-Order Button and Note [Multiple variants product] - Shopify

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with all Shopify 2.0 FREE Themes.

Add a pre-order button to your Shopify 2.0 FREE themes. This only change the button text if the product variant quantity is equal to zero. Note: I said variant, which means if a certain product variant has a quantity of more than zero, you will not see the change. You can also add a pre-order note to make sure your customer is aware what they are buying.

Before editing the code, make sure you have the "Track quantity", and "Continue selling when out of stock" checked in the product you want to have a pre-order.

shopify product

 

1. Go to Code Editor by clicking Online store > Themes > Actions > Edit code.

2. Open the main-product.liquid under Section folder. Then, paste the code below.

3. Find this code here "{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}" and the {% endform %. Replace the code with the code below. 

  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
{% comment %} Assign preorder on whatever name you want {% endcomment %}

<div class="variant_available_select hidden">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option data-available-variant="{{ variant.id }}" value="{{ variant.id }}" data-preorder="{{block.settings.preorder_btn}}">
{{- variant.inventory_quantity -}}
</option>
{%- endfor -%}
</select>
</div>

<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %} buy-buttons"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}>

<span>
{%- if product.selected_or_first_available_variant.available -%}
{%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
{{ 'products.product.add_to_cart' | t }}
{%- else - %}
{{block.settings.preorder_btn}}
{%- endif -%}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"/>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}

 

4. Before the " {%- when 'buy_buttons' -%}", paste the code below.

{% when 'preorder_note' %}
<div class="preorder-message {% if product.selected_or_first_available_variant.inventory_quantity <= 0 %}show_note{% endif %}">
{{block.settings.preorder}}
</div>
<style>
.preorder-message {
display: none
}

.show_note {
display: block !important;
}
</style>

 5. At the schema section, after the "type": "buy_buttons" and replace it with the code below. See video for more information

 ,{
"type": "text",
"id": "preorder_btn",
"label": "Pre-order button label",
"default": "Pre-order now"
}
]
},
{
"type": "preorder_note",
"name": "preorder_note",
"settings": [
{
"type": "richtext",
"id": "preorder",
"default": "<p>Please allow us 5-7 days to ship the item.</p>",
"label": "Pre-order note"
}
]
}

 

6. Go to Asset folder, open the global.js file, and find the "toggleAddButton" code, replace the   toggleAddButton code with the code below. 

toggleAddButton(disable = true, text, modifyClass = true) {
const productForm = document.getElementById(`product-form-${this.dataset.section}`);
if (!productForm) return;
const addButton = productForm.querySelector('[name="add"]');
const addButtonText = productForm.querySelector('[name="add"] > span');
const varantQuantity = productForm.querySelector(`[data-available-variant="${this.currentVariant.id}"]`);

if (!addButton) return;
if (disable) {
addButton.setAttribute('disabled', 'disabled');
if (text) addButtonText.textContent = text;
} else {
addButton.removeAttribute('disabled');
if(varantQuantity) {
if(varantQuantity.textContent <= 0) {
addButtonText.textContent = varantQuantity.dataset.preorder;
document.querySelector('.preorder-message').classList.add('show_note');
document.querySelector('.shopify-payment-button').classList.add('hidden');
} else {
addButtonText.textContent = window.variantStrings.addToCart;
document.querySelector('.preorder-message').classList.remove('show_note');
document.querySelector('.shopify-payment-button').classList.remove('hidden');
}
} else {
addButtonText.textContent = window.variantStrings.addToCart;
}
}
if (!modifyClass) return;
}

 

That is it (",)

Copied!
Voltar para o blogue

Deixe um comentário