Create an account

The Sitecore OrderCloud Sandbox is available free of charge. Once you sign up, you will be provided with a Staging and Production environment, allowing you to configure your site as required for actual operations. First, create an account.

Clicking Create a Free Account in the upper right corner of the screen will bring up a sign-up screen where you can enter your e-mail address.

Enter your e-mail address and click the Register button. In a few moments, you will receive an e-mail with a confirmation code in your e-mail address.

Enter the code in the first field and enter your full name and username and password for login.

After user registration is completed, you will be taken to the following screen.

You have now created your account. Please log in with the account you have created. The first thing you will see is a dialog box with terms and conditions of use.

After checking the box and logging in, the portal screen can now be accessed.

Import sample data into OrderCloud

In this case, our goal is to set up an OrderCloud tenant in a Japanese data center. For this purpose, we will create a new marketplace for the Japanese data center. As a preliminary step, we need to upload the images to be used on the site to Azure storage. The procedure is as follows (assuming that the storage has already been created)

• Download the file https://raw.githubusercontent.com/ordercloud-api/ordercloud-seed/main/seeds/Vercel-B2C.yml. Save this file in the assets/Seed folder.
• Download the full set of images described in the Yaml file above.
• Create a vercel-integration-assets container for Azure storage

• Upload the downloaded images to the container you created.

• Make sure you can access the uploaded images in your browser
• Change the image path in the assets/Seed/Vercel-b2c.yml file to the new storage path.

You are now ready to upload. Then, using the command line, create a new Marketplace using the data you have prepared.

npx @ordercloud/seeding seed Vercel-B2C.yml -n='Nextjs Commerce Japan' -u={username} -p={password} -r=jpn

Match the username and password as the data for the account you just created. The required data will be generated based on the data as shown below.

Once completed, confirm that the marketplace has been created on the OrderCloud administration page.

You are now ready to launch at a data center in Japan.

Create a Next.js Commerce project

Next, create a Next.js project in Vercel, which also allows you to create a free account (limited capacity, etc., but fine for evaluation purposes). Click Create Project, and the following screen appears, showing the Next.js Commerce project.

You will be asked to select the Git repository you wish to link to, in this case GitHub.

Enter a project name. In this case, we will use `nextjs-commerce`.

Since Sitecore OrderCloud is not available at this time, skip the Add Integrations section and execute it.

After a while, the site will be launched using Next.js Commerce data.

Work with OrderCloud.

For integration, we will first create a new marketplace in a data center in the U.S. This is because it is not possible to select a data center on the Connector's administration screen. Since it is not possible to select a data center on the Connector's administration screen, we will proceed by creating a marketplace in the U.S. and then connecting to the data in the Japanese marketplace.

First, search for sitecore in the Integration administration page and select Sitecore OrderCloud.

Click on the button below to display the screen below and click on the Add Integration button.

The screen will change and the following dialog will appear (the sample environment has already been installed, so the screen will be different from the first time).

Once this is done, click on the `Configure` button and the following screen will appear. For the list that appears on the right side, keep the Seed new Marketplace item selected and click `Apply Changes`.

You can see that a new Marketplace has been created for a while on the screen.

There are no changes to the site since the Build process is not yet running after the Integration setup is complete.

Click Redeploy from the Deployments menu to build the site

After a short while, the build is completed and the site is changed as follows.

Switching Marketplaces

The site is already up and running with Next.js Commerce and OrderCloud working together, but the data center is overseas. Finally, we will proceed with the procedure to switch to the Japanese marketplace.

First, we will change the values of the Environment Variables for the project. First, we will retrieve two pieces of information about the marketplace from the following page on OrderCloud

• ORDERCLOUD_MARKETPLACE_ID: Marketplace Identifier
• ORDERCLOUD_MARKETPLACE_NAME: Marketplace Name

Then select `API Clients` from the menu on the left, or `Nextjs` for Sandbox (if you have a different name).

From this screen window, select API Client to retrieve the values. First, obtain the following two keys from Middleware Integrations. -middleware

• ORDERCLOUD_MIDDLEWARE_CLIENT_ID : Client ID
• ORDERCLOUD_MIDDLEWARE_CLIENT_SECRET : Client Secret

Finally, to retrieve the Buyer's ID, switch to the Storefront App to retrieve the ID.

• ORDERCLOUD_BUYER_CLIENT_ID : Client ID

We have now changed the variables in the project set up in Vercel. However, this is not enough to complete the work. The data center referenced by the Next.js Commerce project is in the U.S., so we need to switch this to Japan. Please change the following files in your project

export const API_URL = 'https://japaneast-sandbox.ordercloud.io'

Also, for images, please add the storage URL as follows, as they will be stored in a different storage than the sample.

const commerce = require('./commerce.config.json')

module.exports = {
  commerce,
  images: {
    domains: ['localhost', 'ocdevops.blob.core.windows.net', 'YOURBLOBSTORAGE.blob.core.windows.net'],
  },
}

Change this code and reflect it on GitHub to perform a rebuild.

If you get an error, click on the Redeploy with existing Build Chache dialog on the Redeploy screen and then deploy on the side to complete the process. The following is the screen.

Summary

In this article, we have introduced the process of integrating Next.js Commerce and Sitecore OrderCloud, and even the procedure for selecting a data center in Japan. You can see how easy it is to set up a commerce site.

Tags

• OrderCloud