Leveraging Feature Flags in Virto Commerce/Storefront: A Guide to Implementing Dynamic Features

howto
,
1

Feature flags, also known as feature toggles or switches, are a powerful technique used by developers to control the activation or deactivation of specific features in their applications.

By using feature flags, developers can easily enable or disable features without the need for redeploying the application, providing more flexibility, control, and better risk management during the development and release process. In this blog post, we’ll explore how to effectively implement feature flags in Virto Commerce and its Storefront.

Overview

Feature flags allow developers to introduce new functionality or changes to the application without making them immediately available to all users. Instead, features can be enabled or disabled for specific users, groups, or environments. This approach provides a safer way to test new features, gather feedback, and quickly roll back changes if any issues arise.

A Practical Example: Virto Commerce Google Analytics Module

Let’s take a look at a real-world example of feature flags in action using the Virto Commerce Google Analytics Module. This module integrates Google Analytics into the storefront to track customer behaviour and improve marketing efforts.

Utilizing Store Settings for Enabling/Disabling

In the Google Analytics module, feature flags are implemented using store settings. Developers can easily toggle the Google Analytics integration on or off by accessing the store settings via the ModuleConstants.cs file. This way, the Google Analytics feature can be turned on for specific stores while remaining disabled for others.

image
image1122×872 67.4 KB

Integrating Feature Flags into the Storefront Theme

The vc-theme-b2b-vue Storefront theme provides a prime example of how to integrate feature flags. By accessing global-variables.liquid and head-content.liquid files, developers can inject the necessary logic to check if the Google Analytics feature flag is enabled or disabled.

...
{%- if current_store.settings['GoogleAnalytics4.EnableTracking'] -%}
  {%- assign google_analytics_enabled = current_store.settings['GoogleAnalytics4.EnableTracking'].value == true -%}
  {%- assign google_tag_id = current_store.settings['GoogleAnalytics4.MeasurementId'].value -%}
{%- else -%}
...

...
<script type="application/json" id="vcAppContext">
  {
    {%- comment %} NOTE: Uncomment this when migrating to MPA
    "baseUrl": "{{ '/' | full_url }}",
    "storeId": "{{ current_store.id }}",
    "locale": "{{ current_language.culture_name }}",
    "locales": {{ current_store.languages | map 'CultureName' | json }},
    "currencyCode": "{{ current_currency.code }}",
    "catalogId": "{{ current_store.catalog }}",
    "userId": "{{ current_user.id }}",
    "userIsAuthorized": {{ current_user.is_registered_user }},
    {% endcomment %}
    "storeSettings": {
      "anonymousAccessEnabled": {{ current_store.anonymous_users_allowed }},
      "googleAnalyticsEnabled": {{ google_analytics_enabled }}
    }
    {%- comment %}"themeSettings": {{ settings | json }}{% endcomment -%}
    {%- comment %}"localization": {{ '' | t }}{% endcomment -%}
  }
...
</script>

Update and Ensure Consistency

Finally, it’s crucial to update the useAppContext.ts file to ensure that the feature flag status is consistently applied throughout the application. By keeping this file updated, developers can guarantee that the feature flag settings are consistently honored.

...
const appContextString =
  IS_CLIENT && !IS_DEVELOPMENT
    ? document.getElementById("vcAppContext")?.textContent
    : // Mock settings for DEV mode
      `{
        "storeSettings": {
          "anonymousAccessEnabled": true,
          "googleAnalyticsEnabled": true
        }
      }`;
...

Feature Flag Implementation in the Storefront Composables

The magic happens in the useGoogleAnalytics.ts files, where developers can access the store settings to conditionally enable the Google Analytics feature based on the feature flag status. This ensures that Google Analytics tracking will only be activated for stores where the feature is explicitly enabled.

...
const { storeSettings } = useAppContext();

const isAvailableGtag: Readonly<boolean> = Boolean(IS_CLIENT && storeSettings.googleAnalyticsEnabled && window.gtag);
...

Summary

Feature flags offer an invaluable toolset for developers to control the availability of new features in their applications. By implementing feature flags in Virto Commerce and its Storefront, developers can easily enable or disable specific features without extensive code changes or application redeployments. By following the practical example of the Google Analytics module and utilizing store settings and Storefront theming, developers can confidently integrate feature flags into their Virto Commerce projects, ensuring a smoother and more controlled development and release process.

1 Like