Conditional for development environment in Bigcommerce's Handlebars

Question

Working from the Cornerstone theme in Stencil, I want to be able to do different things depending on whether I am on my local NPM environment or the production site.

Looking at the current URL is not enough as the page has to be already loaded for that. I want to have conditionals in the template, with handlebars, when the markup is being generated. Something like:

{{#if developEnvironment '===' 'true'}}
  <p>I'm local</p>
{{else}}
  <p>I'm remote</p>
{{/if}}

I see nothing useful in the theme_settings vars.

Any ideas?

Answer 1

BigCommerce provides an actual key/value pair for determining if in development or not within the context.

I'm using stencil CLI v2.1.0, so it might not be the case for older versions.

{{#if in_development}}
 In Development
{{else}}
 In Production
{{/if}}

Answer 2

You could add your own custom theme_settings values.

First, navigate to the ./config.json file. Look for the variations array in this file. It should look something like this:

  "variations": [
    {
      "name": "Light",
      "id": "light",
      "meta": {...},
      "images": {...},
      "settings": {
          "developEnvironment": true,
...

Under the settings object you can add your own custom theme_settings values just like I did above: "developEnvironment": true,. Now in your theme file you can do something like this:

    {{#if theme_settings.developEnvironment}}
        <!-- Do something -->
    {{/if}}

Answer 3

You can try using this conditional statement:

{{#if settings.maintenance.secure_path '==' 'http://localhost:undefined'}}
  You are running on development.
{{else}}
  You are running on production.
{{/if}}