Registering handlebars helper

Solved
New Member
2 1 0

Being unfamiliar with handlebars, I am having difficulty trying to figure out where/how to register my handlebars helper so I can test for equality between certain variants and line item values.

 

Basically, I need to dynamically suppress the display of certain line items for a product in the slide-out cart based on a certain other chosen variant when such line items are determined to be not compatible/applicable with said variant.

 

I have everything else working perfectly, including my shopping cart page (where I have successfully suppressed line items not applicable to certain variants). Now I need to make corresponding changes to "ajax-cart-template.liquid", but it uses mostly handlebars. I found plenty of handlebars helper examples that test for equality, but I cannot figure out how to register them. 

 

Does anyone know how to go about registering handlebars helpers in a shopify theme so I can use them in "ajax-cart-template.liquid"?

0 Likes
Highlighted

Success.

New Member
2 1 0

I finally figured this out.

 

After searching everywhere in my theme for where handlebars helpers are being registered (specifically, the built-in ones since there were no custom ones anywhere to be found in my theme), I found "app.js.liquid" among the several candidates.

 

In "app.js.liquid", at the very end of the module, there is a statement that defines a Handlebars variable, like so:

 

var Handlebars=function(){var e=function(){var e=function(){"use strict";function ...

 

I inserted my code after this "var" statement in "app.js.liquid" to register two handlebars helpers. I used the following code to register my two helpers:

 

        Handlebars.registerHelper('ifEquals', function(arg1, arg2) {

              return (arg1 == arg2) ? (this) : !(this);

        });

 

        Handlebars.registerHelper('ifIncludes', function(arg1, arg2) {

              return (arg1.includes(arg2)) ? (this) : !(this);

        });

 

The first helper compares for equality (i.e. "A" = "B"). The second helper checks if string "A" contains string "B". 

 

These two helpers are then used in "ajax-cart-template.liquid", like so:

 

                 {{#if variation}}

                     <span class="ajaxcart__product-meta">{{variation}}</span>

                 {{/if}}

                 

                 {{#if (ifIncludes variation "/ Yes")}}

                     {{#properties}}

                         {{#each this}}

                             {{#if this}}

                                 <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>

                             {{/if}}

                         {{/each}}

                     {{/properties}}

                 {{/if}}

 

                 {{#if (ifIncludes variation "/ None")}}

                     {{#properties}}

                         {{#each this}}

                             {{#if this}}

                                 {{#if (ifEquals @key "Main Color")}}

                                     <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>

                                 {{/if}}

                                 {{#if (ifEquals @key "Trim Color")}}

                                     <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>

                                 {{/if}}

                             {{/if}}

                         {{/each}}

                     {{/properties}}

                 {{/if}}

 

Although this code can obviously be consolidated, this is simply the first draft/"proof of concept" that I used to get the thing to work and do what I needed. This is how it works:

 

If "variation" contains the string "/ Yes" (customer wants a monogram), the legacy code (RED) is executed as before and ALL "line-items", variances, etc. display in the ajax cart, which includes choice of monogram and color.

 

If, however, "variation" contains the string "/ None" (customer does NOT want a monogram), I do not want the Monogram Letter or Monogram Color "line-items" showing in the ajax cart; so, the alternate code (GREEN) is executed which uses the "ifEqual" helper, thus filtering out everything except the Main Color and Trim Color "line-items".

 

In all, the product page allows the customer to select: 1) Main Color, 2) Trim Color, 3) Style, 4) Monogram (i.e. None or Yes), 5) Monogram Letter, and 6) Monogram Color.

 

Options #5 and #6 are conditionally displayed on the product page and in all carts (i.e. in the ajax slide-out & the cart page) based on whether option #4's selection is "None" or "Yes".

 

in total, there are 2,916 (real/virtual) variances or possible combinations. Only options #3 and #4 are true variances, since only they influence the pricing of the product. All other options are "line-items". (Note: All other supporting code outside the scope of this solution that is specific to registering and using these handlebars helpers for the ajax slid-out cart is not shown/discussed here and so has been omitted.) 

0 Likes