Front-end Integration

JavaScript Integration

The full JS snippet for both production and sandbox environments can be found here

The Forter JavaScript Snippet should be injected into the site footer section for all web pages. The following site template has been built:

int_forter/cartridge/templates/default/custom/fortersnippetjs.isml

When you add your Site Id and Secret Key to your cartridge settings, this .isml template will be configured. Please let your Forter onboarding team know once this has been added, so that they can complete the enablement remotely.

MFRA JavaScript

Include the Forter JavaScript snippet

The Forter JavaScript Snippet should be injected into the checkout.isml and page.isml templates in your existing app_storefront_base. The instructions and code snippets are included below:

1) Update the checkout.isml template

Update the checkout.isml template with the forterJS snippet. The exact path in the Forter SFCC cartridge is: int_forter_mfra/cartridge/templates/default/common/layout/checkout.isml.

This extends the app_storefront_base/cartridge/templates/default/common/layout/checkout.isml template with:

<isincludetemplate="custom/fortersnippetjs"/>

The full checkout.isml file is included below:

Full checkout.isml template

<iscontenttype="text/html" charset="UTF-8" compact="true"/>
<!DOCTYPE html>
<html lang="en">
<head>
<isincludetemplate="/common/htmlHead"/>
<isactivedatahead/>
</head>
<body>
<div class="page">
<isincludetemplate="/components/header/pageHeaderNomenu"/>
<isreplace/>
<isincludetemplate="/components/footer/pageFooter"/>
</div>
<isincludetemplate="/common/scripts"/>
<!--add the below line of code-->
<isincludetemplate="custom/fortersnippetjs"/>
<!--end-->
<isincludeurl="${URLUtils.url('ConsentTracking-Check')}"/>
</body>
</html>

2) Update the page.isml template

You should include the page.isml template with the forterJS snippet. The exact path in the Forter SFCC cartridge is: int_forter_mfra/cartridge/templates/default/common/layout/page.isml.

This extends the app_storefront_base/cartridge/templates/default/common/layout/page.isml html template with the following code:

<isincludetemplate="custom/fortersnippetjs"/>

The full page.isml file is included below:

Full page.isml file

<iscontenttype="text/html" charset="UTF-8" compact="true"/>
<!DOCTYPE html>
<html lang="en">
<head>
<isincludetemplate="/common/htmlHead"/>
<isactivedatahead/>
</head>
<body>
<div class="page" data-action="${pdict.action}" data-querystring="${pdict.queryString}">
<isincludetemplate="/components/header/pageHeader"/>
<isreplace/>
<isincludetemplate="/components/footer/pageFooter"/>
</div>
<div class="error-messaging"></div>
<div class="modal-background"></div>
<iscontentassetaid="cookie_hint"/>
<isincludetemplate="/common/scripts"/>
<isincludetemplate="custom/fortersnippetjs"/>
<isincludeurl="${URLUtils.url('ConsentTracking-Check')}"/>
</body>
</html>