Bug in shopify cart with custom code on product page - certain products show as $0

Bug in shopify cart with custom code on product page - certain products show as $0

jabbar_kan
Visitor
1 0 1

I'm currently developing a web store on Shopify with some specific needs that has led to some code in order to facilitate these needs. Some background;

  • The store will sell both preorder and premade items
  • Premade and Preorder items may not occupy a cart together due to the turnaround time of preorder items (~20 weeks from order to shipment)
  • Premade items are paid in full upon ordering and sent within a business day or two
  • Preorder items are paid for with a 50% deposit on order creation and the other 50% paid via invoice upon completion of the item

I have been able to fulfil all the needs here in pretty basic ways, I've been able to sort preorder and premade items into separate collections, which means the 50% deposit is applied as a discount to items in the preorder collection. The only issue I have run into is the pretty rudimentary (and hardly watertight) solution for stopping preorder and premade items occupying a cart. I've used some basic liquid to check if items in the customer's cart conflict with the current item they are viewing, if they can't share a cart, the button is not created on the page, rather just some text saying they can't add the item. The solution works fine for the store, due to the nature of what it's selling it's very unlikely customers will go out of their way to check out with an invalid cart. For its intended function the code works perfectly and doesn't act up.

The only issue is that somehow, despite all the code for hiding the button being contained within the product-template.liquid, the cart page encounters a really weird bug where a customer adds a pre-order item (in a valid manner). The item will show in the cart with the deposit discount applied, and the subtotal will be correct, however, the item will show as $0. This bug only applies for pre-order items with the automatic discount.

Visual of this bug

This bug only persists for a bit, after two or so refreshes it tends to correct itself.

Visual of the cart acting normally after the bug is gone

I don't understand how this code is interfacing with the cart in an odd manner despite being separate from the product page code and only ever getting the state of the cart, never setting. I've tried isolating the code that hides the add to cart button, and the bug is not present. I'm pretty new to Shopify so I'm wondering if I've made an odd oversight or am missing something obvious.

The block of code in 'product-template.liquid' that includes the logic and introduces the bug:

{% assign in_preorder_collection = false %}
              {% for collection in product.collections %}
                  {% if in_preorder_collection == false and collection.title == 'Pre-Order' %}
                      <div>
                        <p style="color:green;font-size:0.75em">
                            &ensp;Pay a 50% deposit per item
                        </p>
                      </div>
                      {% assign in_preorder_collection = true %}
                  {% endif %}
              {% endfor %}
            

            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >

                {% assign allow_flag = true %}
                        {% if in_preorder_collection %}
                            {% for item in cart.items %}
                                {% for collection in item.product.collections %}
                                    {% if collection.title == 'Pre-Built' %}
                                        {% for collection in product.collections %}
                                            {% if collection.title == 'Pre-Order' %}
                                                <h2>Pre-Built and Pre-Order Items cannot be in the same Cart</h2>
                                                {% assign allow_flag = false %} 
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        {% else %}
                            {% for item in cart.items %}
                                {% for collection in item.product.collections %}
                                    {% if collection.title == 'Pre-Order' %}
                                        {% for collection in product.collections %}
                                            {% if collection.title == 'Pre-Built' %}
                                                <h2>Pre-Built and Pre-Order Items cannot be in the same Cart</h2>
                                                {% assign allow_flag = false %} 
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        {% endif %}
                              {% if allow_flag %}
                                  <button type="submit" name="add"
                                    {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                                    aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                                    class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
                                    {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                                    data-add-to-cart>
                                    <span data-add-to-cart-text>
                                      {% unless current_variant.available %}
                                        {{ 'products.product.sold_out' | t }}
                                      {% else %}
                                        {{ 'products.product.add_to_cart' | t }}
                                      {% endunless %}
                                    </span>
                                    <span class="hide" data-loader>
                                      {% include 'icon-spinner' %}
                                    </span>
                                  </button>
                                  {% if section.settings.enable_payment_button %}
                                    {{ form | payment_button }}
                                  {% endif %}
                                </div>
                              </div>
                            {% endif %}
                          {% endform %}
                        </div>

And here is the same code without the logic, removing the bug;

<div>
        <p style="color:green;font-size:0.75em">
                &ensp;Pay a 50% deposit per item
        </p>
</div>


    <div class="product-form__controls-group product-form__controls-group--submit">
      <div class="product-form__item product-form__item--submit
        {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
        {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}">

    
        <button type="submit" name="add"
          {% unless current_variant.available %} aria-disabled="true"{% endunless %}
          aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
          class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
          {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
          data-add-to-cart>
          <span data-add-to-cart-text>
            {% unless current_variant.available %}
              {{ 'products.product.sold_out' | t }}
            {% else %}
              {{ 'products.product.add_to_cart' | t }}
            {% endunless %}
          </span>
          <span class="hide" data-loader>
            {% include 'icon-spinner' %}
          </span>
        </button>
        {% if section.settings.enable_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endform %}
</div>

Any help is extremely appreciated! Thanks for your time 🙂

Replies 2 (2)

KetanKumar
Shopify Partner
36927 3642 11995

@jabbar_kan 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

sophiamartin234
Visitor
1 0 0

When custom code on a Shopify product page causes certain products to show as $0 in the cart, it can be a challenging issue to debug. Here are steps to identify and resolve the problem:

Steps to Resolve the Issue

  1. Check the Custom Code for Errors:

    • Inspect the custom code added to the product page for any syntax errors or logic issues.
    • Ensure that the code correctly calculates and assigns product prices.
  2. Review Product Template Code:

    • Verify that the product template (product.liquid or a section file) includes the correct price handling code.
    • Check for any conditions or calculations that might incorrectly set the product price to $0.