Can't replace my "ADD TO CART" to "BACKORDER" - Supply Theme

New Member
4 0 0

Hi everyone.

I followed the installing instruction from https://help.shopify.com/en/themes/customization/products/add-to-cart/allow-pre-orders

I cannot get it to work on my "Supply" theme. It shows "BACKORDER" like 1s before it goes back to "ADD TO CART" Anyone able to help?

https://vca-gundam-singapore.myshopify.com/collections/real-grade-rg/products/rg-rx-78-2-gundam


Template > product.backorder.liquid

 

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-backorder-template' %}

Sections > product-backorder-template.liquid

        {% if section.settings.product_incoming_message %}
          <div id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}">
            {% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 0 and current_variant.incoming %}
              {% include 'svg-definitions' with 'stock-icon' %}
              {% if variant.available %}
                {% assign date = variant.next_incoming_date | date: "month_day_year" %}
                <span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_not_ship_until' | t: date: date  }}</span>
              {% else %}
                {% assign date = variant.next_incoming_date | date: "month_day_year" %}
                <span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_be_in_stock_after' | t: date: date }}</span>
              {% endif %}
            {% endif %}
          </div>
        {% endif %}

        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'BACKORDER' | json | remove: '"' }}</span>
          </button>

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>
      {% endform %}
0 Likes
Shopify Partner
289 22 33

Hey there. 

 

If it starts out working right, then switches its usually an app or something in the Themes code further down the way, loading later.

 

Edit: Derped hard there.  You left the link haha.  Will take a look.  I hate being sick.

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
0 Likes
Shopify Partner
289 22 33

Hey there.

 

From a customer facing standpoint, I can not replicate it.  I can see in your code some of the pre-order template but I would check to make sure you did not miss any of it.  Also check your stock levels.  If they are in the positive is going to say add to cart.

 

What I did notice is that your embedded Youtube Player and Your google Ads code is ripping **bleep** up on your page.  252 console errors.  Does not look to be effected page speed much, but worth looking into.

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
0 Likes
Shopify Partner
1704 47 149

When you see things like that it is either css FOUC or javacript making changes, disable javascript to confirm javascript as a vector

In your theme.js find the following (line ~2460):

 

if (variant.available) {

 

and in that guard find

 

this.settings.selectors.$addToCartText.html("Add to Cart");

 

Don't just replace that text as that will affect every product button where variant.available is true

That is what is changing the button after page ready|load, Note that variant.available is true for that product you linked . So you need to test this on an item that is not available(0 inventory ,etc)

 

Find the fallback when variant.available is false similar to:

else {
// Variant is sold out, disable the submit button"\

 

 

Once your in those areas you can start making some decisions and code:

  • Quick and dirty if your using manually assigning alternate templates gut the button id to not have "addToCart-" though this may cause other side effects, test thoroughly
  • You can either leave "BACKORDER" out of the default html the liquid renders, and let the javascript handle it when variant.available is false though that may require modifying the area that deals with "Sold Out" to also be able to display "BACKORDER"
  • Disable the button in the liquid rendered html then enable it to either "BACKORDER" or "add to cart"
  • Or via either css or javascript make a more graceful transition between the two different texts
  • Or add logic changing the target element assigned to this.settings.selectors.$addToCart 

Remember to account for and setup translations if your selling multilingual

 

There is also the inventory management logic:

 

if (variant.inventory_management)

 

 

 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
1 Like
New Member
4 0 0

Hi Duncan Thank you for your reply. The inventory is currently set to "0" and checked "Allow customers to purchase this product when it's out of stock" Please let me know if i might miss anything.

Get well soon. :)

0 Likes
New Member
4 0 0

@PaulNewton wrote:

When you see things like that it is either css FOUC or javacript making changes, disable javascript to confirm javascript as a vector

In your theme.js find the following (line ~2460):

 

if (variant.available) {

 

and in that guard find

 

this.settings.selectors.$addToCartText.html("Add to Cart");

 

Don't just replace that text as that will affect every product button where variant.available is true

That is what is changing the button after page ready|load, Note that variant.available is true for that product you linked . So you need to test this on an item that is not available(0 inventory ,etc)

 

Find the fallback when variant.available is false similar to:

else {
// Variant is sold out, disable the submit button"\

 

 

Once your in those areas you can start making some decisions and code:

  • Quick and dirty if your using manually assigning alternate templates gut the button id to not have "addToCart-" though this may cause other side effects, test thoroughly
  • You can either leave "BACKORDER" out of the default html the liquid renders, and let the javascript handle it when variant.available is false though that may require modifying the area that deals with "Sold Out" to also be able to display "BACKORDER"
  • Disable the button in the liquid rendered html then enable it to either "BACKORDER" or "add to cart"
  • Or via either css or javascript make a more graceful transition between the two different texts
  • Or add logic changing the target element assigned to this.settings.selectors.$addToCart 

Remember to account for and setup translations if your selling multilingual

 

There is also the inventory management logic:

 

if (variant.inventory_management)

 

 

 


Hi Paul

Thank you so much for your reply. I know nothing about scripts & stuffs. :p

What I need is the following:
- BACKORDER template for me to set it when existing product is sold out and awaiting for the next restock.
- PREORDER template for pre-ordering upcoming new product.

I want the "ADD TO CART" to appear as mentioned above instead when I switch template accordingly. Is it possible? Do you provide service to make this happen?

0 Likes
Highlighted
Shopify Partner
1704 47 149

Without scripting your simplest method might be , in the alternate templates, to replace|comment out the regular add-to-cart button and add another one similar to with the desired text hardcoded inside the button( or on it's corresponding label element)

You may need to remove the "id=add....." or similar css class as that's what the javascript is using to target that button.

Keep in mind removing id's or classes from and html element may break styling so only remove the bare minimum.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes