I’m now a couple months into exploring Optimizely Configured Commerce and Spire CMS.  As much as I’m up to speed with the Configured Commerce side of things (having past experience with Customized commerce), the Spire CMS side is a bit daunting, having worked with traditional Optimizely CMS for a while. We face challenges in figuring out handlers, a key concept in both Customized Commerce and Spire CMS.

And yes there is documentation, but its more high level and not enough to understand the inner functioning of the code (or maybe I just haven’t had the patience to go through it all yet :)).

Needless to say, I took a rather “figure it out by myself” approach here. I find that this is a much better way to learn and remember stuff :).

Here’s to figuring out handlers

In a commerce site, there is Order History for every customer, with a “Reorder” capability. I will tweak the behavior of this Reorder action and prevent adding a specific SKU to cart again when user clicks “Reorder”.

Challenge #1 – Where does the code tied to reorder live?

Depending on what you are looking for and what you need to change, this can be different files in the Frontend source code.

Challenge #2 – How do I find the right file?

I start by searching on keywords like “reorder” which do lead me to some files but they are mostly .tsx files aka React components that had the Reorder button on them. What I’m looking for instead is the actual method that passes the current order lines to add to cart, in order to intercept and tweak.

Challenge #3 – How do I find the file which takes in Order Lines and adds to cart?

I decided it was time to put my browser skills to good use. I launch the site, open Dev tools, and hit Reorder to monitor all the Network calls that occur. And bravo.. I see the api call to Cart API for bulk load, which is what this action does. Here’s what that looks like :

api/v1/carts/current/cartlines/batch

with a Payload of cartlines sent to add to Cart.

Reverse engineering in action

Step #1 – I traced this back in code. Looked for “cartlines/batch” and found 1 file – CartService.ts

Its OOTB code, but for people new to this like me, we don’t know which folder has what. So, I’ll make this one step easier for you by telling you exactly where this file lives. You will find it at

FrontEnd\modules\client-framework\src\Services\CartService.ts

The method that makes the api call is addLineCollection(parameter: AddCartLinesApiParameter).

Step #2 – I now search for files that called this method. I found quite a few files that call this, but for my specific scenario, I stuck to the ones that said “reorder” specifically. These are the Frontend Handlers in Spire CMS.

Here’s the list and paths of the files that are relevant to the context here :

• FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderDetails\Handlers\Reorder.ts
• FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderHistory\Handlers\Reorder.ts
• FrontEnd\modules\client-framework\src\{blueprintName}\Pages\OrderStatus\Handlers\Reorder.ts

Once I see the line that makes the call to addLineCollection() method, I check how the parameter is being set.

Step #3 – All that’s left now is to update the code that sets the AddCartLinesApiParameter for this call, from the existing Order’s order lines. I add a filter to exclude the one specific SKU that I don’t want re-added to cart on reorder, on the OrderLines collection. Looks something like this :

Conclusion

In today’s mobile-first world, delivering personalized experiences to visitors using mobile devices is crucial for maximizing engagement and conversions. Optimizely’s powerful experimentation and personalization platform allows you to define custom audience criteria to target mobile users effectively.

By leveraging Optimizely’s audience segmentation, you can create tailored experiences based on factors such as device type, operating system, screen size, and user behavior. Whether you want to optimize mobile UX, test different layouts, or personalize content for Android vs. iOS users, understanding how to define mobile-specific audience criteria can help you drive better results.

In this blog, we’ll explore how to set up simple custom audience criteria for mobile visitors in Optimizely, the key benefits of mobile targeting, and the best practices to enhance user experiences across devices. Let’s dive in!

This solution is based on Example – Create audience criteria, which you can find in the Optimizely documentation.

Create the settings and criterion classes

First, we need to create two classes in our solution:

Class VisitorDeviceTypeCriterionSettings needs to inherit CriterionModelBase class, and we need only one property (settings) to determine if the visitor is using a desktop or a mobile device.

public bool IsMobile { get; set; }

The abstract CriterionModelBase class requires you to implement the Copy() method. Because you are not using complex reference types, you can implement it by returning a shallow copy as shown (see Create custom audience criteria):

public override ICriterionModel Copy()
{
    return base.ShallowCopy();
}

The entire class will look something like this:

using EPiServer.Data.Dynamic;
using EPiServer.Personalization.VisitorGroups;

namespace AlloyTest.Personalization.Criteria
{
    [EPiServerDataStore(AutomaticallyRemapStore = true)]
    public class VisitorDeviceTypeCriterionSettings : CriterionModelBase
    {
        public bool IsMobile { get; set; }

        public override ICriterionModel Copy()
        {
            // if this class has reference types that require deep copying, then
            // that implementation belongs here. Otherwise, you can just rely on
            // shallow copy from the base class
            return base.ShallowCopy();
        }
    }
}

Now, we need to implement the criterion class VisitorDeviceTypeCriterion and inherit the abstract CriterionBase class with the settings class as the type parameter:

public class VisitorDeviceTypeCriterion : CriterionBase<VisitorDeviceTypeCriterionSettings>

Add a VisitorGroupCriterion attribute to set the category, name, and description of the criterion (for more available VisitorGroupCriterion properties, see Create custom audience criteria:

[VisitorGroupCriterion(
    Category = "MyCustom",
    DisplayName = "Device Type",
    Description = "Criterion that matches type of the user's device"
)]

The abstract CriterionBase class requires you to implement an IsMatch() method that determines whether the current user matches this audience criterion. In this case, we need to determine from which device the visitor is accessing our site. Because Optimizely doesn’t provide this out of the box, we need to figure out that part.

One of the solutions is to use information from the request header, from the User-Agent field and analyze it to determine the OS and device type. We can do that by writing our match method:

public virtual bool MatchBrowserType(string userAgent)
{
    var os =
        new Regex(
            @"(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino",
            RegexOptions.IgnoreCase | RegexOptions.Multiline);
    var device =
        new Regex(
            @"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-",
            RegexOptions.IgnoreCase | RegexOptions.Multiline);
    var deviceInfo = string.Empty;

    if (os.IsMatch(userAgent))
    {
        deviceInfo = os.Match(userAgent).Groups[0].Value;
    }

    if (device.IsMatch(userAgent.Substring(0, 4)))
    {
        deviceInfo += device.Match(userAgent).Groups[0].Value;
    }

    if (!string.IsNullOrEmpty(deviceInfo))
    {
        return true;
    }

    return false;
}

Now, we can go back and implement the IsMatch() method that is required by CriterionBase abstract class.

public override bool IsMatch(IPrincipal principal, HttpContext httpContext)
{
    return MatchBrowserType(httpContext.Request.Headers["User-Agent"].ToString());
}

Test the criterion

In the CMS we need to create a new audience criterion. When you click on the ‘Add Criteria’ button, there will be ‘MyCustom’ criteria group with our criteria:

When you select the ‘Device Type’ criteria, you will see something like this:

We can easily add a label for the checkbox by using Optimizely’s translation functionality. Create a new XML file VisitorGroupCriterion.xml and place it in your translations folder where your translation files are, like this:

Put this into the file that you created:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<languages>
  <language name="English" id="en-us">
    <visitorgroups>
      <criteria>
        <ismobile>
          <key>Is Mobile Device (Use this setting to show content only on Mobile)</key>
        </ismobile>
      </criteria>
    </visitorgroups>
  </language>
</languages>

There is one more thing to do. In VisitorDeviceTypeCriterionSettings.cs, decorate the IsMobile property with the translation definition. Add this attribute:

[CriterionPropertyEditor(LabelTranslationKey = "/visitorgroups/criteria/ismobile/key")]

It should look like this:

Now, in the editor view, we have a label for the checkbox.

Personalize the content by setting the content for this visitor group.

Desktop view:

Mobile view:

You can see that there is content that is only visible if you access the site with a mobile device.

And that’s it!

This series of blog posts will cover the main areas of activity for your marketing, product, and UX teams before, during, and after site migration to a new digital experience platform.

Migrating your site to a different platform can be a daunting prospect, especially if the site is sizable in both page count and number of assets, such as documents and images. However, this can also be a perfect opportunity to freshen up your content, perform an asset library audit, and reorganize the site overall.

Once you’ve hired a consultant, like Perficient, to help you implement your new CMS and migrate your content over, you will work with them to identify several action items your team will need to tackle to ensure successful site migration.

Whether you are migrating from/to some of the major enterprise digital experiences platforms like Sitecore, Optimizely, Adobe, or from the likes of Sharepoint or WordPress, there are some common steps to take to make sure content migration runs smoothly and is executed in a manner that adds value to your overall web experience.

Part I – “Keep, Kill, Merge”

One of the first questions you will need to answer is, “What do we need to carry over?” The instinctive answer would be everything. The rational answer is that we will migrate the site over as is and then worry about optimization later. There are multiple reasons why this is usually not the best option.

• This is a perfect opportunity to do a high-level overview of the entire sitemap and dive a bit deeper into the content. It will help determine if you still need a long-forgotten page about an event that ended years ago or a product that is no longer being offered in a certain market. Perhaps it hasn’t been purged simply because there is always higher-priority work to be done.
• It is far more rational to do this type of analysis ahead of the migration rather than after. If nothing else, it is simply for efficiency purposes. By trimming down the number of pages, you ensure that the migration process is shorter and more purposeful. You also save time and resources.

Even though this activity might take time, it is essential to use this opportunity in the best possible manner. A consultant like Perficient can help drive the process. They will pull up an initial list of active pages, set up simple audit steps, and ensure that decisions are recorded clearly and organized.

Step I – Site Scan

The first step is to ensure all current site pages are accounted for. As simple as this may seem, it doesn’t always end up being so, especially on large multi-language sites. You might have pages that are not crawlable, are temporarily unpublished, are still in progress, etc.

Depending on your current system capabilities, putting together a comprehensive list can be relatively easy. Getting a CMS export is the safest way to confirm that you have accounted for everything in the system.

Crawling tools, such as Screaming Frog, are frequently used to generate reports that can be exported for further refinement. Cross-referencing these sources will ensure you get the full picture, including anything that might be housed externally.

Step II – Deep Dive

Once you’ve ensured that all pages made it to a comprehensive list you can easily filter, edit, and share, the fun part begins.

The next step involves reviewing and analyzing the sitemap and each page. The goal is to determine those that will stay vs candidates for removal. Various different factors can impact this decision from business goals, priorities, page views, conversion rate, SEO considerations, and marketing campaigns to compliance and regulations. Ultimately, it is important to assess each page’s value to the business and make decisions accordingly.

This audit will likely require input from multiple stakeholders, including subject matter experts, product owners, UX specialists, and others. It is essential to involve all interested parties at an early stage. Securing buy-in from key stakeholders at this point is critical for the following phases of the process. This especially applies to review and sign-off prior to going live.

Depending on your time and resources, the keep-kill-merge can either be done in full or limited to keep-kill. The merge option might require additional analysis, as well as follow-up design and content work. Leaving that effort for after the site migration is completed might just be the rational choice.

Step III – Decisions and Path Forward

Once the audit process has been completed, it is important to record findings and decisions simply and easily consumable for teams that will implement those updates. Proper documentation is essential when dealing with large sets of pages and associated content. This will inform the implementation team’s roadmap and timelines.

At this point, it is crucial to establish regular communication between a contact person (such as a product owner or content lead) and the team in charge of content migration from the consultant side. This partnership will ensure that all subsequent activities are carried out respecting the vision and business needs identified at the onset.

Completing the outlined activities properly will help smooth the transition into the next process phase, thus setting your team up for a successful site migration.

With most systems transitioning to cloud-based environments, databases are often hosted across various cloud platforms. However, during the development cycle, there are occasions when having access to a local database environment becomes crucial, particularly for analyzing and troubleshooting issues originating in the production environment.

Sometimes, it is necessary to restore the production database to a local environment to diagnose and resolve production-related issues effectively. This allows developers to replicate and investigate issues in a controlled setting, ensuring efficient debugging and resolution.

In an Azure cloud environment, database backups are often exported as .bacpac files. The file must be imported and restored locally to work with these databases in a local environment.

There are several methods to achieve this, including:

1. Using SQL Server Management Studio (SSMS).
2. Using the SqlPackage command-line.

This article will explore the steps to import a .bacpac file into a local environment, focusing on practical and straightforward approaches.

The first approach—using SQL Server Management Studio (SSMS)—is straightforward and user-friendly. However, challenges arise when dealing with large database sizes, as the import process may fail due to resource limitations or timeouts.

The second approach, using the SqlPackage command-line, is recommended in such cases. This method offers more control over the import process, allowing for better handling of larger .bacpac files.

Steps to Import a .bacpac File Using SqlPackage

1. Download SqlPackage

• Navigate to the SqlPackage download page: SqlPackage Download.
• Ensure you download the .NET 6 version of the tool, as the .NET Framework version may have issues processing databases with very large tables.

2. Install the Tool

• Follow the instructions under the “Windows (.NET 6)” header to download and extract the tool.
• After extracting, open a terminal in the directory where you extracted SqlPackage.

3. Run SqlPackage

• Put .bacpac file into the package folder.(ex: C:\sqlpackage-win7-x64-en-162.1.167.1)
• Use the following example command in the terminal to import the .bacpac file:
• powershell
  SqlPackage /a:Import /tsn:"localhost" /tdn:"test" /tu:"sa" /tp:"Password1" /sf:"database-backup-filename.bacpac" /ttsc:True /p:DisableIndexesForDataPhase=False /p:PreserveIdentityLastValues=True

4. Adjust Parameters for Your Setup

• /tsn: The server name (IP or hostname) of your SQL Server instance, optionally followed by a port (default: 1433).
• /tdn: The name of the target database (must not already exist).
• /tu: SQL Server username.
• /tp: SQL Server password.
• /sf: The path to your .bacpac file (use the full path or ensure the terminal is in the same directory).

5. Run and Wait

• Let the tool process the import. The time taken will depend on the size of the database.

Important: Ensure the target database does not already exist, as .bacpac files can only be imported into a fresh database.

The options /p:DisableIndexesForDataPhase and /p:PreserveIdentityLastValues optimize the import process for large databases and preserve identity column values. SqlPackage provides more reliability and flexibility than SSMS, especially when dealing with more extensive databases.

Reference:

https://learn.microsoft.com/en-us/azure/azure-sql/database/database-import?view=azuresql&tabs=azure-powershell

The mark of a successful website is more than just a collection of pagee. It’s a structured ecosystem where every piece of content serves a purpose, or it should. When building a new site or migrating to a new platform, content mapping is a critical step that determines how information is organized, accessed, and optimized for performance. Without a thoughtful strategy, businesses risk losing valuable content, creating navigation confusion, and impacting search visibility. It should be a process that is constantly reviewed and refined.

Content mapping starts with a deep understanding of what already exists and how it needs to evolve. This process is especially important when working with both structured and unstructured data—two very different types of content that require distinct approaches. Structured data, such as product catalogs, customer profiles, or metadata, follows a defined format and is easier to categorize. Unstructured data, including blog posts, images, and videos, lacks a rigid framework and demands extra effort to classify, tag, and optimize. While structured data migration is often straightforward, unstructured content requires strategic planning to ensure it remains accessible and meaningful within a new digital experience.

Why a Content Audit is Important

A content audit is the first step in developing a solid content mapping strategy. This involves evaluating existing content to determine what should be migrated, what needs to be refined, and what should be left behind. Without this step, businesses risk carrying over outdated or redundant content, which can clutter the new site and dilute the user experience.

A well-executed audit not only catalogs content but also assesses its performance. Understanding which pages drive the most engagement and which fail to connect with audiences helps inform how content is structured in the new environment. This process also highlights gaps—areas where fresh content is needed to align with business goals or audience expectations.

Beyond performance, content audits reveal inconsistencies in voice, formatting, or taxonomy. A new site presents an opportunity to standardize these elements, ensuring that every piece of content follows best practices for branding, SEO, and user experience.

Taxonomy and Metadata

Once content is audited and mapped, the next step is defining a clear taxonomy and metadata strategy. Taxonomy refers to how content is classified and grouped, making it easier for users to navigate and find relevant information. Metadata, on the other hand, provides the structured details that power search functionality, personalization, and content recommendations.

Without proper taxonomy, even high-quality content can become buried and difficult to access. Establishing consistent tagging, categorization, and metadata ensures that content remains discoverable, whether through site search, filtering options, or AI-driven recommendations. This is particularly important when transitioning to platforms like Acquia, Sitecore, or Optimizely, where personalization and dynamic content delivery depend on well-structured metadata.

Additionally, URL consistency and redirect strategies play a crucial role in maintaining SEO authority. A content mapping plan should account for how legacy URLs will transition to the new site, preventing broken links and preserving search rankings.

Scalability and Future Growth

Content mapping is not just about migrating existing assets—it’s about creating a structure that supports long-term digital success. The best content strategies anticipate future growth, ensuring that new content can be seamlessly integrated without disrupting site architecture.

This means designing a content model that accommodates personalization, omnichannel distribution, and AI-driven enhancements. As businesses scale, the ability to dynamically deliver content across different devices and user segments becomes increasingly important. Content mapping lays the foundation for this flexibility, making it easier to adapt and evolve without requiring constant restructuring.

A Seamless Digital Experience

A well-planned content mapping strategy transforms website migration from a logistical challenge into a strategic opportunity. By auditing existing content, defining clear taxonomy and metadata structures, and building for scalability, businesses can create a site that is not only organized but optimized for engagement and performance.

Content is the heart of any digital experience, but without proper mapping, it can become fragmented and difficult to manage. Taking the time to strategically align content with user needs, business goals, and technological capabilities ensures that a new site isn’t just a fresh coat of paint—it’s a true step forward in delivering meaningful digital experiences.

Optimizing B2B E-commerce with Optimizely Commerce: Best Practices and Key Features

In today’s fast-paced digital landscape, businesses need robust and scalable e-commerce solutions to meet the growing demands of B2B buyers. Optimizely Commerce (formerly Insite) is a leading platform that empowers businesses with cutting-edge tools to enhance the online purchasing experience.

In this blog, we’ll explore Optimizely Commerce’s key features, which make it a powerful choice for B2B businesses, and discuss best practices for maximizing its potential.

Why Optimizely Commerce for B2B?

Unlike B2C platforms, B2B commerce has complex requirements, such as bulk orders, contract pricing, and account-based purchasing. Optimizely Commerce is explicitly designed to address these challenges.

5 Key Features That Drive B2B Success

1. Personalized Customer Experiences

• Leverage AI-driven product recommendations.
• Provide dynamic pricing based on contracts and customer segments.

2. Advanced Account Management

• Self-service portals for order history, quotes, and invoices.
• Multi-user roles with approval workflows.

3. Seamless Integration with ERP & CRM

• Automate order processing and inventory management.
• Ensure real-time data synchronization.

4. Mobile-Friendly & Headless Commerce

• Optimize for mobile experiences.
• Leverage API-driven commerce for greater flexibility.

5. Powerful Search and Merchandising

• AI-powered search to deliver relevant results.
• Customizable catalogs and product visibility settings.

5 Best Practices for Maximizing Optimizely Commerce

1. Optimize Site Performance

• Use caching mechanisms for faster page loads.
• Ensure a responsive design for mobile buyers.

2. Leverage Personalization & AI

• Tailor content and pricing based on customer behavior.
• Implement AI-driven product recommendations.

3. Enable Self-Service Capabilities

• Provide customers with self-service portals to check order history, request quotes, and manage accounts.

4. Streamline Checkout & Payments

• Simplify the checkout process with saved payment options.
• Offer multiple payment methods, including net terms and PO-based ordering.

5. Continuously Analyze & Improve

• Use analytics to track customer behavior and identify trends.
• A/B test different UI elements for better engagement.

Conclusion

Optimizely Commerce offers a powerful and flexible solution for businesses looking to optimize their B2B e-commerce operations. By leveraging its robust features and following best practices, companies can enhance customer experiences, improve efficiency, and drive revenue growth.

Is your business ready to take B2B e-commerce to the next level? Start optimizing with Optimizely Commerce today!

The Optimizely Configured Commerce SDK and Optimizely Configured Commerce Cloud serve different but complementary purposes within the Optimizely ecosystem. Below is a breakdown of their differences to help clarify their roles:

Optimizely Configured Commerce SDK (Software Development Kit)

The SDK is a toolkit developers use to build, extend, and customize Optimizely Configured Commerce solutions.

Key Features

• Custom Development: Enables developers to create tailored functionality or modify existing features.
• Extensibility: Allows the integration of third-party tools, systems, or APIs into the platform.
• Local Development: Provides resources for developers to work offline or in a local development environment.
• Code Control: Gives developers greater flexibility to build unique features that align with business-specific workflows or industry requirements.

Use Cases

• Businesses need highly customized solutions that go beyond the standard capabilities of Optimizely Configured Commerce.
• This is for developers who want to test and implement features locally before deploying them to the live environment.
• When integrating Optimizely with complex systems such as legacy ERPs, custom CRMs, or bespoke tools.

Optimizely Configured Commerce Cloud

This is the fully managed, cloud-hosted environment where the Configured Commerce platform operates. It delivers scalability, security, and reliability while offloading the burden of infrastructure management from businesses.

Key Features

• Cloud Hosting: Hosted on Optimizely’s infrastructure, ensuring uptime and reliability.
• Scalability: Automatically adjusts to handle increased traffic or load.
• Maintenance-Free: Optimizely manages software updates, patches, and performance optimizations.
• Global Availability: Designed for businesses operating in multiple regions with global infrastructure support.
• Security: Includes enterprise-grade security measures, including compliance with data protection standards.

Use Cases

• Businesses that want to focus on business operations rather than maintaining infrastructure.
• Companies expecting fluctuations in traffic and requiring a scalable solution.
• Organizations need high uptime and reliability for their eCommerce operations.

Important Distinctions Between Cloud and SDK

Factor	SDK	Cloud
Purpose	Toolkit for building and customizing functionality.	Fully managed, hosted environment for the platform.
Target Team	Developers and technical teams.
Customization	High flexibility for custom features and integrations.	Limited to Cloud version also supports the platform extension at large extent with certain limitation but from this point it sounds like we can only customize the platform through configurations.
Management	Requires development resources to build and deploy changes.	Managed entirely by Optimizely, including updates and maintenance.
Hosting	Local or self-hosted for development purposes and production purposes.	Hosted by Optimizely with global availability.

By leveraging Optimizely Cloud capabilities, you can achieve robust, scalable, and tailored eCommerce experiences with minimized operational complexity, while using SDK version you can have more controlled, customizable website and also have control on infrastructure, upgrades and the deployments

Implementing Optimizely a Configured Commerce platform is a significant milestone for any business looking to scale its digital operations. A well-structured timeline ensures a seamless transition from planning to execution, ultimately delivering a robust eCommerce solution tailored to your needs.

The implementation involves four key phases: Prepare, Build and Verify, Go Live, and Post-Go Live. Let’s examine each phase to understand its importance and components.

Image Source from https://support.optimizely.com/hc/en-us/articles/4413199673229-Configured-Commerce-implementation-timeline

Prepare: Creating the Foundation for Success

The journey begins with thorough preparation. This phase ensures all stakeholders align on the project goals, requirements, and expectations.

• Client Workshop: This critical step involves defining requirements through collaboration with the client. It sets the stage for clearly understanding business objectives and the roadmap.
• Project Setup: Once the requirements are precise, the focus shifts to creating a sandbox environment for testing and development. This step involves preparing data and configuring ERP and third-party systems for seamless integration with the new platform.

Businesses can minimize risks and ensure a smoother development process by investing time in preparation.

Build & Verify: Realizing the Goal

The Build & Verify phase actively constructs the platform and ensures that all functional and technical requirements are met.

• Initial Development: Core elements like customer and product data are established, forming the system’s backbone.
• Ongoing Development and Build: This stage covers integration, site configuration, and the functional requirements outlined earlier. Key tasks include:
  • Loading and structuring content
  • Designing themes to reflect the brand identity
  • Setting up integrations for payment systems, shipping, and more

This phase involves rigorous testing to verify that the platform meets business needs and performs as intended.

Go Live: Launching with Confidence

With development and testing completed, the project transitions to the Go Live phase, where the production environment becomes operational.

• Create Production Site: A production site is configured to integrate all data and functionalities.
• Production Prep: This includes loading production data, finalizing integration setups, and ensuring smooth and comprehensive user onboarding. At this stage, internal teams focus on training and ensuring they can manage the platform post-launch.

The platform officially launches, marking the achievement of months of collaboration and hard work.

Post-Go Live: Continuous Optimization

The implementation process doesn’t end with the platform launch. The Post-Go Live phase ensures that businesses continuously monitor and optimize the production site for performance, scalability, and user experience. Regular maintenance and updates are vital to ensure that the platform remains robust and adaptive to evolving business needs.

Why a Structured Timeline Matters

A well-planned implementation time frame keeps the project on track and provides flexibility to address unexpected obstacles. Businesses can focus on delivering an efficient and effective commerce solution by breaking the process into distinct, manageable phases.

With this phased approach, Implementing the Optimizely Configured Commerce platform becomes manageable. It provides a path to a scalable, high-performing, and user-friendly eCommerce experience. Proper planning, collaboration, and execution are the keys to success in this transformative journey.

Reference URL – https://support.optimizely.com/hc/en-us/articles/4413199673229-Configured-Commerce-implementation-timeline

Optimizely Spire CMS provides a feature to create variants of CMS pages. Page variants are variations of a website page with rules for displaying it to end users. Optimizely Spire CMS supports page variants for all CMS pages, including the header and footer. The primary purpose of that user is to see different variations of the same page.

Optimizely Spire CMS provides a feature to apply rule types on page variants. Optimizely Configured Commerce supports creating custom rule types and rule type options to further use the Rules Engine. The basic requirement of creating a custom rule type or using OOTB on a rule type is that users can see different CMS pages as per the applied rule type.

This blog provides complete information on creating custom rule-type options. The steps below will help create a custom rule type option in the Optimizely Configured Commerce solution that can be used in the Optimizely Spire CMS.

How to Create a Custom Rule Type Option in Optimizely Spire CMS

1. Open Optimizely Configured Commerce solution in Visual Studio.
2. Go to the “Extensions” class library.
3. Create a new class, “CustomRuleTypeOption,” and inherit it from the “CriteriaTypeBase” base class. Add Dependency Name attribute with a name of “CustomRuleTypeOption“.
4. Implement inherited abstract class members.
5. Change the DisplayName property value to “Custom Rule Type Option“.
6. Override the remaining properties value.
7. To show custom rule type option field in CMS, we need to override the “ParameterDescriptions” property and set “Label” and “ValueType” value.
8. Override the Validate method and add business logic to validate the input value specified in the CMS. If “true” is returned, the user will see the page variant. If “false” is returned, the user will see the default page.
9. Rebuild the solution.
10. Login in Admin.
11. Go to Administration -> System -> Rule Types listing page.
12. Open the “Page” rule type from the listing page.
13. Go to “Rule Options” tab and click on “Rule Type Option” button.
14. Enter “Description” and select the custom rule type option from the “Criteria Type” dropdown and click on the “Save” button.
15. Log in as a content admin and click the “Edit” icon.
16. Go to any page and create a variant of the page. For example, go to Header and click on More Options (…).
17. Select “Create Variant“.
18. Enter a “Variant Name”, select “Copy Content from Default” and click on “Save” button.
19. Select the custom rule type option from the rule type dropdown, enter the value, and click the save button.
20. As per the rule type, verify the variant page on the site.

References:

1. https://support.optimizely.com/hc/en-us/articles/4413199746317-Manage-page-variants
2. https://docs.developers.optimizely.com/configured-commerce/docs/create-custom-rule-type-option-for-cms-variants
3. https://support.optimizely.com/hc/en-us/articles/4413200007437-Rule-type-options

When building websites in Optimizely Commerce (Spire), you may need to create sections that span the entire page width. Full-width sections are essential for design elements such as banners, hero images, and background sections. Optimizely Commerce (Spire) provides a flexible framework that makes it easy to configure and implement full-width layouts, allowing developers to create visually engaging designs with minimal effort. This guide will walk you through utilizing this feature to seamlessly create full-width sections.

How to Create Full-Width Sections

Step 1: Folder Structure

• First, ensure you have already created a blueprint under the directory src\FrontEnd\modules\blueprints. For example, you might have a blueprint named CustomBlueprint.
• Navigate to the CustomBlueprint/src. Ensure that a Start.tsx file exists in this directory. If it does not, create and add this file.

Step 2: Understand the Options in Start.tsx

The Start.tsx file is the entry point for setting up the main themes, custom widgets, and pages. It uses Mobius styling principles to ensure everything looks consistent, flexible, and accessible. These principles provide a unified design, allowing for easy customization of themes, colors, typography, and other UI elements while maintaining a seamless, responsive user experience across devices.

In the Start.tsx file, you will find two options for configuring the full-width layout through the style guide:

• setPreStyleGuideTheme: If you add your code under this method, you can update the full-width settings directly from the content admin interface
• setPostStyleGuideTheme: If you use this function, the full-width settings will be fixed, and you won’t be able to modify them from the content admin interface.

Step 3: Full-Width Configuration Code

Optimizely Commerce (Spire) already provides a built-in solution to configure sections like the header, content, and footer to span the full page width. To enable full-width for these sections, use the following code snippet:

Explanation

• header: { isFullWidth: true }: Ensures the header section spans the full width of the page.
• content: { isFullWidth: true }: The main content area extends from edge to edge, perfect for displaying banners or immersive visuals.
• footer: { isFullWidth: true }: Sets the footer to full width, ideal for footers with background colors or design elements that must reach the screen’s edges.

Step 4: Integrate the Code

Add the above code to the Start.tsx file within one of the theme configuration functions (setPreStyleGuideTheme or setPostStyleGuideTheme), depending on whether you want to allow updates to the full-width settings from the content admin interface.

Step 5: How to Update the Full-Width Configuration from the Content Admin

After configuring the full-width settings in the Start.tsx file, Optimizely Commerce (Spire) provides an easy way to manage and update these configurations directly from the Content Admin interface.

• Go to the Content Admin and navigate to the Style Guide
• In the Site Configurations section, you will find the Full Width settings.

• Click on each option (Header, Content, and Footer) to see a toggle that allows you to make the section full-width.

Note: You can only update the full-width setting using the setPreStyleGuideTheme option in the Start.tsx file.

• After updating the value in the Settings modal, ensure you save the changes.

Step 6: How to Use the Full-width Option on Actual Pages

• To use the full-width option on pages, add a Row widget. Edit the Row widget, and you will see a Full Width Checkbox option (by default, this option will be unchecked).

• To make the section full width, check the checkbox.

     Note: Once the checkbox is checked, any content in that row will be displayed at full width.

Conclusion

Optimizely Commerce (Spire) provides a straightforward and flexible solution for creating full-width sections, making it easier to design visually engaging websites. Following the steps outlined in this guide, you can quickly enable full-width layouts for your header, content, and footer. Whether you prefer to manage these configurations through the Content Admin interface or directly in the code, Optimizely Commerce offers the flexibility to create seamless, immersive designs that enhance the overall user experience. With full control over these settings, you can customize your site’s layout to fit your specific design needs while maintaining a consistent and responsive interface across devices.

Optimizely Configured Commerce provides a unique way of managing emails. This allows administrators to configure and manage the email templates and settings used for automated email communications with users. This feature is essential for ensuring consistent branding, and operational efficiency in a B2B e-commerce environment. And most importantly, those emails are setup automatically and should not require many updates.

However, in some scenarios, you might need more customizations when working with emails. This article will provide more insights about Optimizely Configured Commerce’s Emails that have not been covered in the documentation. You will get some ideas on how to deeply customize the Email Templates and also, send emails using the B2B framework from Optimizely.

Prerequisites

Before jumping into customization, you need to have fundamental understandings about Email Administration in Configured Commerce.

• This will help you know more about the process flow for how emails are sent: https://docs.developers.optimizely.com/configured-commerce/v1.5.45-b2b-sdk/docs/defining-working-with-and-troubleshooting-email-lists-and-templates
• You also need to be able to work with Email Templates in admin console effectively: https://docs.developers.optimizely.com/configured-commerce/v1.5.45-b2b-sdk/docs/creating-and-editing-email-templates

How to send email with Optimizely Configured Commerce

In Optimizely Configured Commerce, emails are sent automatically when a certain event occurs on a webpage (for example, order confirmation email is sent when submitting an order). However, some actions are not associated with sending mails. If you want to do that, like sending a notification email to the new registrant, you have to put some code inside your custom handlers, or Web API Controllers. Using .NET SmtpClient is a good choice, but in the scope of this article, I would suggest utilizing the EmailService inside the B2B framework that we’re using. The reason is you can benefit from the Email Administration feature that is integrated to Configured Commerce, from managing email templates to monitoring the email message logs, etc. Every mail sending through the EmailService will be kept track of inside this screen:

As being said, here’s how you can send the email any time with B2B Email Service (along with explanation):

// getting email template from IEmailTemplateUtilities (you need to inject this interface in your controller)
var emailTemplate = emailTemplateUtilities.GetOrCreateByName("MyCustomEmailTemplate");

// retrieving the content manager from the email template
var emailTemplateContentManager = emailTemplate.ContentManager;

// using IContentManagerUtilities to get the current version of the email body (you also need to inject this interface in your controller)
var htmlBody = contentManagerUtilities.CurrentContent(emailTemplateContentManager).Html;

// now create the email model to store the dynamic data. It's basically an ExpandoObject
dynamic emailModel = new ExpandoObject();
emailModel.Name = "John Doe";

// Parsing the template. For example, the placeholder [[Model.Name]] in the html body will be replaced with the actual data of emailModel, which is "John Doe".
// You need to inject the IEmailService before using it
string strEmailBody = emailService.Value.ParseTemplate(htmlBody, emailModel);

// Send the email with Configured Commerce's IEmailService
var sendEmailParameter = new SendEmailParameter();
sendEmailParameter.ToAddresses = new List<string>(){ "john.doe@test.com" };
sendEmailParameter.FromAddress = "defaultemail@test.com";
sendEmailParameter.Subject = "Welcome to our site";
sendEmailParameter.Body = strEmailBody;
try
{
    emailService.Value.SendEmail(sendEmailParameter, unitOfWork);
}
catch (Exception e)
{
    // Error handling
}

You can create a new template or edit an existing one. The IEmailService will send successfully as long as it is able to find the template name, and the placeholders match with the structure of your Email Model ExpandoObject:

Customize Email Templates

DotLiquid is used to render the views of all email templates. However, seems like it’s not the standard DotLiquid syntax. The syntax has not been documented, this is what I found while inspecting the default templates:

Placeholder Syntax

The templating engine uses this syntax [[Model.PropertyName]] to render dynamic data from the Model. Since the Model is an ExpandoObject so you’re free to define any property inside. Also, there’re bunch of built-in variables for existing templates, please refer here: https://support.optimizely.com/hc/en-us/articles/4413199986957-HTML-variables-for-email-templates

If-Else Statement

Use this logic block when you want to render something conditionally.

If:

[% if Model.MyProperty != null and Model.MyProperty != "" -%]
    <p>[[Model.MyProperty]]</p>
[% endif -%]

If-Else:

<strong>
    [% if Model.FirstName!= null and Model.FirstName!= "" -%] [[Model.FirstName]] [% else -%] [[Model.LastName]] [% endif -%]
</strong>

Iteration

Use this block to loop through a list:

[% for orderGroup in Model.OrderGroups -%]
    <div>
          <p>[[orderGroup.Heading]]</p>
    </div>
[% endfor -%]

Note: As of now (Jan 2025), the templating engine hasn’t supported nested loop yet.

Site Messages

You can even use Site Messages in your templates. For example:

<span>[% siteMessage 'Welcome_Message' %]:</span>

The cool thing about it is, Site Messages can be localizable. So based on SiteContext.Current.LanguageDto (from Insite.Core.Context), it can detect the current language and translate the message automatically for you.

I hope this information will be helpful when you need to work on Email Administration in Optimizely Configured Commerce. Happy coding!

A strong and successful search engine optimization (SEO) strategy is essential in the extremely competitive world of e-commerce today. You can increase the visibility, draw in more visitors, and raise conversion rates with the correct tools and strategies. Product information management (PIM) is a crucial tool for accomplishing these objectives.

What is PIM?

PIM provides a central repository for product information, ensuring that information is accurate, consistent, and up-to-date. This allows businesses to streamline the management of product data, such as descriptions, images, specifications, and other key information related to their products. Having this organized and easily accessible information can be extremely beneficial to businesses looking to improve their customer service, increase sales, and ultimately enhance their SEO performance.

By using PIM, businesses can save time and resources by reducing manual work, increasing accuracy, and eliminating redundant data entry. A PIM system can also help with managing different versions of product descriptions, images, and other data fields in different languages and currencies. This allows businesses to quickly launch products into new markets and keep them updated across multiple channels.

How can PIM help improve your SEO?

Product Information Management (PIM) systems are designed to help businesses store, manage, and distribute product information in an efficient and organized manner. It has become a popular tool for businesses looking to improve their SEO rankings.

PIM can help improve your SEO rankings in several ways:

1. High-quality Content: PIM can help ensure that product information is accurate, complete, and consistent, which can lead to better on-page optimization and search engine visibility.
2. Enhanced Product Descriptions: PIM enables the creation of detailed and optimized product descriptions, which can help improve the relevance and quality of content for search engines.
3. Better Keyword Targeting: PIM can provide insights into which keywords are most relevant for each product, enabling e-commerce websites to better target those keywords in their product pages and other content.
4. Improved Taxonomy: Taxonomy helps to improve the customer experience by making it easier for customers to find what they are looking for, and to compare products based on relevant attributes. In addition, a well-structured taxonomy can also help to improve search engine optimization (SEO) by increasing the relevance of search results, which can drive more traffic to a company’s website.
5. Cross-Channel Distribution – PIM systems also make it easy to distribute your product information across multiple channels. This helps increase the visibility of your product pages and will help improve your SEO rankings.
6. Faster and More Efficient SEO Updates – PIM can also help make SEO updates faster and more efficient. With PIM, you can quickly and easily make changes to your product information, which can then be automatically updated across all of your sales channels. This saves time and reduces the risk of errors, making it easier to optimize your product pages for search engines. With PIM, you can keep your website up-to-date with the latest product information and take advantage of new SEO opportunities as they arise.
7. Asset Management – Asset management in a Product Information Management (PIM) system refers to the process of organizing and managing digital assets, such as images, videos, and other multimedia files, associated with a product. This includes storing, categorizing, and versioning these assets to ensure that they are easily accessible and up-to-date. We can also attach metadata to digital assets to help improve the search.

This can lead to improved organic search traffic and more conversions for your business but business always questions how do I know the optimization we were doing in PIM is helping us, One way to identify is utilizing Digital Self analytics.

inriver’s digital self-analytics tool, Evaluate, significantly enhances SEO optimization in several ways:

1. Content Compliance: Evaluate ensures that your product information is accurate and consistent across all channels, which is crucial for SEO. Accurate data helps search engines understand your products better, improving visibility.
2. Keyword Optimization: The tool tracks keyword performance and helps you optimize product listings for better search rankings. This includes monitoring keyword search and share-of-shelf.
3. Real-Time Insights: Evaluate provides real-time insights into how your products are performing on the digital shelf. This includes monitoring product search rankings, competitor pricing, and stock levels, allowing you to make data-driven decisions to improve SEO.
4. Engagement Intelligence: By analyzing customer interactions and engagement with your product listings, Evaluate helps you understand what works and what doesn’t. This information is vital for refining your SEO strategy to attract more traffic and improve conversions.
5. Automated Monitoring: The tool uses smart automation to constantly monitor your products, providing actionable insights that help you stay ahead of the competition and ensure your product information is always optimized for search engines.

Using inriver Evaluate, you can take control of your digital shelf, drive revenue growth, and enhance your SEO efforts with precise, actionable data.

By following these recommendations, you can make sure that you get the most out of your PIM system and improve your SEO performance. PIM can help you stay ahead of the competition in the e-commerce space. So if you’re looking to improve your SEO performance and reach more customers, it’s time to invest in PIM. For more information on this, contact our experts today.