Custom Block Helper Creation in SuiteCommerce

Custom block helpers allow you to define unique iterators and conditionals in your templates, enhancing SuiteCommerce capabilities. This article explores how to create and test a custom helper that checks if a string starts with a specified prefix.

Creating a Block Helper

To create a custom block helper, you can use the following sample JavaScript code:

1Handlebars.registerHelper('startsWith', "text-purple-400">function (prefix, text, options) {
2    "text-purple-400">if (text.indexOf(prefix) === 0) {
3        "text-purple-400">return options.fn("text-purple-400">this);
4    }
5    "text-purple-400">return options.inverse("text-purple-400">this);
6});

This code does the following:

• Registers the startsWith helper that can be used within Handlebars templates.
• Passes three parameters:
  • The prefix to check against the text.
  • The text string being validated.
  • An options hash that Handlebars uses to determine the output for the condition.

When invoked, this helper checks whether the string starts with the given prefix using indexOf and returns the appropriate template code based on the truthiness of the condition:

• If the prefix is found at the start, the helper returns the template code for the true condition.
• If not, it returns the template code for the false condition.

Testing the Block Helper

Given the complexity of the helper, testing it in a template is essential. Here’s how you can verify its functionality:

1. Add the helper to a template.

2. Deploy the extension that contains the template via Gulp.js. For deployment, use the following command:

   gulp extension:deploy

3. Activate the extension as directed in the deployment documentation.

Once the Commerce website is running locally, open the developer console and test the block helper using code like this:

{{#startsWith 'Ste' 'Steve'}}
    <p>Steve? That's a great name!</p>
{{"text-purple-400">else}}
    <p>Well, that name is pretty good, but it's not Steve</p>
{{/startsWith}}

You can also leverage user profile data and change the 'Steve' string to dynamically display based on the current user, for instance, by using model.fullname.

For more in-depth information on block helpers, refer to the official Handlebars documentation.

Important Notes:

• Ensure you have tested thoroughly before deploying changes to your live site.
• Changes may also be subject to security assessments based on your account settings and customizations.