Troubleshoot the Storefront Toolkit in B2C Commerce

Google Chrome's third-party cookie blocking can prevent authorization and break the Storefront Toolkit. To resolve this issue, allow third-party cookies in Chrome Settings.

If you prefer to keep third-party cookies blocked, enable partitioned cookies so that the Storefront Toolkit works. Partitioned cookies is a customer-facing feature toggle.

Note Enabling partitioned cookies can have other consequences for your storefront, depending on your implementation and how your storefront uses cookies. Before you enable partitioned cookies, consult the developers who maintain your storefront, whether internal, a partner, or the Customer Success Group (CSG).

• Make sure that you’ve correctly configured the HTTPS host and that the hostname aliases point to the correct instance using DNS. See Hostname Aliases.
• To open the storefront, click Storefront. Make sure to use HTTPS in the URL for the storefront. If the browser displays an error regarding an invalid certificate, allow an exception for the certificate.
• Remove CDATA sections from your HTML storefront code. The Storefront Toolkit doesn't support CDATA.

It's possible that page markers are missing from the HTML. Add <!-- dwMarker="content" dwContentID="${pdict.Content.UUID}" --> when rendering content assets and <!-- dwMarker="product" dwContentID="${Product.UUID}" --> when rendering products.

If your code includes anticlickjacking, the content of the page can be hidden when opened in an iframe. To resolve this issue, we recommend that you add a custom site preference to disable anticlickjacking on staging or sandbox instances. For more information, see Clickjacking.

URLs constructed using the following methods of dw.web.URLUtils aren’t working as expected:

• url
• http
• https
• abs

The Storefront Toolkit adds a cache-busting parameter to URLs. For example, you use URLUtils.url to construct a URL with a parameter like this: URLUtils.url(”Pipeline-Start”) + “?param=value”.

The resulting URL is https://example.com/on/demandware.store/Sites-MySite-Site/default/Pipeline-Start?__sftkCacheBuster=1593615552718?param=value.

The URL doesn’t work as expected and can cause problems in the storefront depending on where you use it.

Use URLUtils as in this example to pass in a URL parameter: URLUtils.url("Pipeline-Start", "param", "value").

When you use the Storefront Toolkit, the resulting URL is https://example.com/on/demandware.store/Sites-MySite-Site/default/Pipeline-Start?__sftkCacheBuster=1593615552718&param=value. The URL has the & character instead of ? before param. When you don’t use the Storefront Toolkit, the resulting URL is https://example.com/on/demandware.store/Sites-MySite-Site/default/Pipeline-Start?param=value.

Check to see if you’re using links that include a target=”_top” attribute, as in this example:

<a href="/example/link" target="_top">An example link</a>

The target=”_top” attribute causes the browser to open the link in the topmost frame, resulting in the Storefront Toolkit not being visible.

ClickJack Protection or Anti-ClickJack scripts can cause these errors. ClickJacking is when a malicious actor displays your website in an iframe that the attacker controls. The attacker can intercept input events to see the information, such as passwords or credit card numbers, that a user enters.

Instead of using scripts, to prevent clickjacking, include the following HTTP headers in your storefront: X-Frame-Options: DENY and Content-Security-Policy: frame-ancestors ‘none’.

Use the following code in your storefront to set these headers:

response.setHttpHeader("X-Frame-Options", "DENY");
response.setHttpHeader("Content-Security-Policy", "frame-ancestors 'none');

Look for the Page Marker in your custom code:

<!-- dwMarker="content" dwContentID="${pdict.Content.UUID}" -->

The expression used for the dwContentID can be different. Make sure that expression actually evaluates to the universally unique identifier (UUID) of the content asset.

Check for custom code that redirects the request to a different site, for example, based on geolocation. The Storefront Toolkit doesn't work across multiple sites.

We recommend that you check for the presence of the sfdc-toolkit-token cookie and not redirect to another site when the cookie is present.