Installing Paazl's extension for SFCC SFRA

This article explains how to install Paazl's extension in your Salesforce CC SFRA implementation.

Note

The Paazl LINK cartridge can be used out of the box with Commerce Cloud's Storefront Reference Architecture (SFRA) - version 3.3.0

You can use it with other versions but you may need to make additional adjustments.

Step 1. Install LINK cartridge

Install the int_paazl_sfra and int_paazl_core cartridges in Commerce Cloud UX-studio.

Step 2. Install sgmf-scripts

Salesforce CC has published an NPM node named sgmf-scripts that has tools to compile the CSS and JS scripts for your storefront site. To install and then compile the scripts, execute the following instructions from the command line:

  1. npm install sgmf-scripts
  2. npm run compile:js && npm run compile:scss && npm run compile:fonts

Normally, you only have to compile the fonts once.

Step 3. Import metadata

To add Paazl configuration functionality to Business Manager, import Paazl's predefined metadata as follows:

  1. Download the Paazl LINK installation package from https://github.com/SalesforceCommerceCloud/link_paazl
  2. Open the link_paazl-master/site_import/sites/ folder
  3. Rename the yourSiteId folder to your site's ID in Salesforce CC Business Manager
  4. Zip the site_import folder
  5. Import the zipped file into Business Manager (Administration > Site Development > Site Import & Export).

After the import, the following changes will have been made to Business Manager.

Paazl attributes will have been added to:

  • Administration > Site Development > System Object Types > Site Preferences > Attribute Definitions
  • Administration > Site Development > System Object Types > Order > Attribute Definitions
  • Administration > Site Development > System Object Types > Shipment > Attribute Definitions
  • Administration > Site Development > System Object Types > Basket > Attribute Definitions

The following services will have been added to Administration > Operations > Services:

  • service.paazl.rest.gettoken
  • service.paazl.rest.getSelectedOption

The paazl shipping method will have been added to [yourSiteId] > Merchant Tools > Ordering > Shipping Methods.

Step 4. Compile JS and CSS

The Paazl JS and CSS files are part of the int_paazl_core cartridge.

  1. Compile the JS and CSS code of the app_storefront_base cartridge as explained in SFRA README.md.
  2. Compile the JS and CSS code of the int_paazl_core cartridge.
    1. Go to the top level of your project (just above the cartridges folder).
    2. Make sure that you are using the package.json and webpack.config.js files in the link_paazl repository in GitHub.
    3. Execute the following command:

      npm install

    4. Execute the following commands:

      npm run compile:js && npm run compile:scss

Was this article helpful?