CODEWITHSUNDEEP
handlebars.jsbigcommerce
Jon Morgan
Jon Morgan

Reputation: 37

Conditional Add to Cart button doesn't work on Big Commerce product detail page

I am having some trouble getting my Add to Cart button to work on my product pages within BigCommerce. We're using the Cornerstone theme. I can get the button to display but it doesn't actually work so that's kind of an issue for me :) We're trying to implement a feature that requires people to login to see the price of select items in our system. When we push a product record to BigCommerce, we include a custom HidePrice field and we set the value of it to either true or false. Items that have a HidePrice value of true should have their price hidden and the Add to Cart button suppressed for guests that may be browsing the site. If the Customer is logged in, the price is revealed and the Add to Cart button is displayed. So here's what we have so far. It works in that it will hide/reveal the price and Add to Cart button as desired but our problem now is that the Add to Cart button is non-functional for guests who are trying to add products to the cart that have a HidePrice value of false. Geez, I hope that makes sense! I've identified where things are breaking down and have noted it in the snippet below.

{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{#filter product.custom_fields 'HidePrice' property='name' }}
        {{#if (toLowerCase value) '==' 'true'}}
            <a href="/login.php" class="login-for-price"><i class="fas fa-unlock-alt"></i>&nbsp;&nbsp;Login to Unlock Price</a>
        {{else}}
            {{> components/products/add-to-cart}} <!-- This is the part that isn't working. The button renders but it doesn't work -->
        {{/if}}
    {{/filter}} 
{{/if}}

This add-to-cart component typically fills out a data-product-url and a data-product-id value with the button's input tag. Using Chrome's dev tools, I can see that the data-product-url and the data-product-id values are left empty. I can see these two elements should be populated by the following snippet in templates/components/products/add-to-cart.html within Stencil

<div class="form-action">
    <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" data-product-url="{{product.url}}" data-product-id="{{product.id}}" class="button button--primary" type="submit"
        value="{{#if product.pre_order}}{{lang 'products.add_to_cart'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
</div>

Any help is greatly appreciated.

Cheers! Jon

Upvotes: 2

Views: 558

Answers (1)

Matt Coy
Matt Coy

Reputation: 1101

The issue here is that you have left the main context to enter the filter. Your add-to-cart component has lost the ability to use the product object, thus product.id, product.url, and other calls are failing.

You have 2 options to resolve:

  1. Pass the product context to the component. Assuming your theme is using Handlebars v4 (you can check in config.json), you can do this by passing product=../product through to the component: {{> components/products/add-to-cart product=../product}}. If you aren't on Handlebars v4, you might need two or three sets of ../ (product=../../product)

  2. Set a variable inside the filter and remove the code from the filter:

    {{assignVar 'hidePrice' 'false'}}
{{#filter product.custom_fields 'HidePrice' property='name' }}
    {{#if (toLowerCase value) '==' 'true'}}
        {{assignVar 'hidePrice' 'true'}}
    {{/if}}
{{/filter}} 
{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{#if (getVar 'hidePrice') '==' 'true'}}
        <a href="/login.php" class="login-for-price"><i class="fas fa-unlock-alt"></i>&nbsp;&nbsp;Login to Unlock Price</a>
    {{else}}
        {{> components/products/add-to-cart}}
    {{/if}}
{{/if}}

Upvotes: 5

Related Questions