This cartridge integrates an online magazine into a Demandware shop. It allows customer to make a
-purchase directly from a curated magazine based on the products in the Demandware shop. Thanks
+
This cartridge integrates an online magazine into a Salesforce Commerce Cloud shop. It allows customers to make a
+purchase directly from a curated magazine based on the products in the Commerce Cloud shop. Thanks
to Styla integration you can change content into an exciting shopping experience that inspires your
customers. It saves time-spent on content creation and increases customer engagement, retention and
sales.
The content created for the Styla magazine is generated through a light weight front end content
-management system, which pulls products from the Demandware shop, but saves the content (stories)
+management system, which pulls products from the Commerce Cloud shop, but saves the content (stories)
in the Styla database.
Styla offers a solution for e-commerce on competitive level, and prices and contracts are to be
negotiated with Styla itself. Styla also offers consulting in many ways to improve the reach and ROI of
the magazine and connected shop(s).
Our terms and services show more detail in regards to the privacy / use of data that comply with the
use of our product(s) and service(s).
-
The implementation consists of the generic int_styla cartridge, a few selective code modifications of
-storefront code and the configuration in Business Manager.
+
The implementation consists of the generic int_styla cartridge, a few selective modifications of
+storefront code, and the configuration in Business Manager.
Component Overview
Functional Overview
Add product to story process
Following is the ‘front end process’, as in, what is accessible to the author of a story, and the end user
in buying a product.
-
+
Styla magazine page generation
The process shown below defines the creation of the page(s) where content is loaded on. When configured
correctly the cartridge will provide simple rerouting functionality (similar to a wildcard rule in an
@@ -67,18 +71,18 @@
Styla magazine page generation
This is accomplished by intercepting redirect errors in the storefront code: If a request path matches
no existing controller then this cartridge searches for a magazine configuration which matches the request path
(see chapter Custom Objects for Magazine configuration). When a match is found then the configured controller
-is called, thus effectively rerouting the request.
+or pipeline is called, thus effectively rerouting the request.
Caching of the Styla template include is configured using a site preference. This also controls
-how often new SEO content and the version number is fetched using web service calls to Styla.
+how often new SEO content and the content version number is fetched using web service calls to Styla.
Caching should be configured to be 1 hour maximum to get any changes that happen on the script
and/or CSS file with a minimum delay.
-
+
The following two processes define what happens in regards to the ‘shopping’ experience.
Show product details process
-
+
Add product to cart process
The cartridge exposes a JavaScript function which allows the Styla magazine to add products to cart.
-
+
Use Cases
Styla can be used for promoting your shop in a significant and new way, allowing customers to directly
shop from your online magazine and interact with your products in a new way. You can create
@@ -88,17 +92,18 @@
Use Cases
Limitations & Constraints
Styla uses URL paths relative to the magazine base path to represent URLs to specific stories, tags, etc.
These URLs need to be aliases and not redirects, because the Styla JavaScript depends on the browser's
-URL to determine the correct path and load the respective content. Since Demandware does not allow custom
+URL to determine the correct path and load the respective content. Since Commerce Cloud does not allow custom
URL aliases in a flexible format similar to mod_rewrite, the URL path of the magazine is limited to the
capabilities of Pipeline and Category URLs.
For example, the magazine base path cannot contain nested folders like /fashion/magazine when using
pipelines because a pipeline alias only supports direct folders like /magazine.
Compatiblity
-
The Styla implementation cartridge is available since Demandware 15.6. Site Genesis 16.1 has been used
-as reference for this installation guide. The installation instructions assume you are using SiteGenesis
-Controllers, integrating with pipelines is of course possible but not covered here.
+
The Styla implementation cartridge is available since Commerce Cloud 15.6.
+
Site Genesis 16.1 has been used as reference for this installation guide.
+
This cartridge supports both integrating with a storefront based on controllers as well as one that is
+using pipelines.
Privacy, Payment
-
No customer or payment data is stored by this cartridge. Styla saves the Demandware data as shown
+
No customer or payment data is stored by this cartridge. Styla saves the Commerce Cloud data as shown
in process Add product to story - Styla saves the product image, description and ID.
For the end user, Styla saves and stores the user data based on the Terms of Service defined by Styla.
Implementation Guide
@@ -106,16 +111,16 @@
Setup
Copy the provided int_styla cartridge into the project's cartridges folder. The cartridge can
be used for both production and testing scenarios.
Configuration
-
The following steps need to be accomplished in order to configure the Styla integration correctly.
+
The following steps need to be performed in order to configure the Styla integration correctly.
Cartridge Path
-
The Styla cartridge needs to be added to the cartridge path on all relevant Demandware instances.
+
The Styla cartridge needs to be added to the cartridge path on all relevant Commerce Cloud instances.
Go to Administration > Sites > Manage Sites > YourSite - Settings and add int_styla to the
cartridge path, e.g. after the storefront cartridges. The following screen shot shows an example
using Site Genesis.
-
+
Site Preferences and Custom Objects
Import metadata definitions
-
New site preferences and a custom object definition need to be imported into the Demandware instance.
+
New site preferences and a custom object definition need to be imported into the Commerce Cloud instance.
Go to Administration > Site Development > Import & Export and upload the file
metadata/styla_magazine_metadata.xml.
Then, import it as Meta Data.
@@ -124,12 +129,13 @@
Site Preferences
Styla Magazine and fill in the appropriate values. The options are described in the table below.
-
Name
ID
Data Type
Default Value
Comment
+
Name
ID
Data Type
Default Value
Description
+
Styla Enabled
stylaEnabled
Boolean
false
Determines whether the Styla integration is active for this site or not.
Base URL to Styla CDN from where client-side JavaScript is loaded. The placeholder {USER} will be replaced with the Username site preference value of the respective magazine configuration. {VERSION} will be replaced with the response from the Version Service call.
Base URL to Styla CDN from where client-side JavaScript is loaded. The placeholder {USER} will be replaced with the Username attribute value of the respective magazine configuration. {VERSION} will be replaced with the response from the Version Service call.
Base URL of Styla Magazine CSS. The placeholder {USER} will be replaced with the Username site preference value of the respective magazine configuration. {VERSION} will be replaced with the response from the Version Service call.
@@ -145,48 +151,74 @@
Custom Objects for Magazine confi
Attribute Name
Data Type
Mandatory
Description
-
Key_and_Sort_Order
String
yes
Use this to give a descriptive name to the configuration. When the cartridge searches for a matching configuration, it will go through the custom objects in order, alphabetically sorted by this attribute. A matching configuration is considered found if the request's path contains the Base Path of the configuration and if the request's locale matches the Allowed Locales attribute.
+
Key_and_Sort_Order
String
yes
Use this to give a descriptive name to the configuration. When the Styla cartridge searches for a matching configuration, it will go through the custom objects in order, alphabetically sorted by this attribute. A matching configuration is considered found if the request's path contains the Base Path of the configuration and if the request's locale matches the Allowed Locales attribute.
Enabled
Boolean
yes
Usually set to true. The cartridge will ignore configurations where Enabled is false.
Username
String
yes
Styla user name for this magazine.
Base Path
String
yes
URL Path of the Styla Magazine. A matching configuration is considered found if the request's path contains the Base Path of the configuration and if the request's locale matches the Allowed Locales attribute.
-
Controller Method
String
yes
Specify the Magazine Controller Method in this format: cartridge-controller-method. E.g.: app_storefront_controllers-Home-Show.
-
Category ID
String
no
Necessary when using the Search controller (or pipeline), which typically is app_storefront_controllers-Search-Show. Make sure this category has at least one product assigned to it.
+
Controller Method
String
yes
Specify the Magazine Controller Method in this format: cartridge-controller-method. E.g.: app_storefront_controllers-Home-Show. If your storefront code uses pipelines then you can specify a pipeline here, e.g. Home-Show. If you are using pipelines then the cartridge name can be omitted.
+
Category ID
String
no
Necessary when using the Search controller (or pipeline), which typically is app_storefront_controllers-Search-Show (or just Search-Show when using pipelines). Make sure this category has at least one product assigned to it, otherwise the category won't be part of the search result.
Allowed Locales
Set of String
no
A list of locale identifiers. A magazine configuration is only considered a match if the current request's path contains the Base Path of the configuration and if the request's locale is found in this list. Leave empty to allow all locales. Example entries: de_DE, fr_CH.
Service Configuration
-
Styla loads SEO data into the page using a Web Service, which needs to be configured. The configuration
-can be imported using a site import. Go to Administration > Site Development > Site Import & Export
-and upload metadata/styla_magazine_services.zip. After a successful import, go to Administration >
-Operations > Services and check if the configuration is according to the following screen shots.
-If so, no further adjustments are required.
-
-
-
+
Styla loads SEO data into the page using a Web Service, which needs to be configured. The service configurations
+can be imported like this: Go to Administration > Operations > Import & Export
+and upload metadata/styla_magazine_services.xml. After successfully importing this file,
+go to Administration > Operations > Services and check if the configuration is according to the following
+screen shots. If so, no further adjustments are required.
+
+
+
The second service used by this cartridge retrieves a version identifier for the Styla username of a
given magazine configuration. This version identifier is appended to the URLs of the magazine JavaScript
-and CSS files. The metadata definition of the version service is part of the site import described above.
+and CSS files. The meta data definition of the version service is part of the service definition import
+described above.
After importing the version service should look like this:
-
-
-
+
+
+
URL Alias
+
Cartridge Version
+
For debugging purposes this cartridge exposes an endpoint which renders the cartridge version.
+You can query the version info using an URL like this (adjust host name and site ID to match your instance):
Styla expects the version information to be served from this friendly URL: /styla-plugin-version/.
+Please go to Merchant Tools > Site URLs > URL Rules > Pipeline URLs and configure this new alias:
+
+
+
New alias
resolves To
+
+
+
styla-plugin-version
StylaMagazine-CartridgeVersion
+
+
+
Magazine
First of all, make sure that the path to your magazine is configured correctly in the Styla system and,
if proper SEO URLs are being used, the pushstate is turned on. If unsure, ask your Styla contact for help.
Furthermore, please note that on all instances except Production, an URL path prefix containing the site
-ID will be inserted by Demandware. For example, /magazine becomes /s/SiteGenesis/magazine on a sandbox
-running the Site Genesis site. This does not prevent the Styla magazine from appearing on these instances
+ID will be inserted by Commerce Cloud. For example, /magazine becomes /s/SiteGenesis/magazine on a sandbox
+running the SiteGenesis site. This does not prevent the Styla magazine from appearing on these instances
and testing the integration is possible on all instances.
The magazine can run on a pipeline (controller) URL or a category URL. If a controller or pipeline is being
used, go to Merchant Tools > Site URLs > URL Rules > Pipeline URLs and configure an alias for your
pipeline. For example, if your magazine runs on the path /magazine on your
Home-Show controller or pipeline, then add the following alias:
-
+
If the magazine runs on a category URL, the Catalog URLs configuration in Business Manager needs to
correspond to the magazine path of the used category. For example, if the magazine runs on /fashion/magazine,
a category needs to exist that generates this SEO URL. Then, a rendering template needs to be created and
set for this category. The content of the rendering template is discussed in the next chapter. Furthermore,
-the ID of this category needs to be set in the site preference Magazine Category ID.
+the ID of this category needs to be set in the configuration attribute Category ID.
Example: To get a /fashion/magazine category URL you first create a new top-level category in catalog
Storefront Catalog - EN: Set Category ID to stylafashion and Name to fashion. Then within that
new category create a new sub-category: Set Category ID to stylamagazine and Name to magazine.
@@ -196,64 +228,84 @@
URL Alias
Finally, make sure that no redirect catchall rule exists in Merchant Tools > Site URLs > Dynamic Mapping
because it would interfere with the necessary redirects for the magazine.
In the following screen shot, the catchall rule has been commented out:
-
+
You can still get the same behavior if you manually redirect to the target of your catch-all rule.
-For an example see the code comment in the chapter RedirectURL.js.
+For an example see the code comment in the chapter RedirectURL.js.
+For pipelines see the chapter RedirectURL pipeline.
Category rendering template
When using category URLs you need to specify a rendering template for the category. The cartridge includes
an example rendering template for this:
/int_styla/cartridge/templates/default/rendering/catlanding.isml
-
I you want to use your own rendering template then you have to add includes for the Styla header and body
+
If you want to use your own rendering template then you have to add includes for the Styla header and body
content as described in chapter Magazine Inclusion.
Product API
-
Styla pulls the product data directly from the Demandware Production instance using the OCAPI interface.
+
Styla pulls the product data directly from the Commerce Cloud Production instance using the OCAPI interface.
The relevant API endpoints need to be configured in the Business Manager under Administration >
Site Development > Open Commerce API Settings. The following code snippet shows a sample configuration.
-On Production, a valid client ID needs to be requested at Demandware.
+On Production, a valid client ID needs to be requested from Salesforce.
Next to Select type make sure Shop is selected, then paste the following text into the input box:
The following changes need to be made to the shop's cartridges to integrate the Styla magazine.
+
The following changes need to be made to the shop's storefront cartridges to integrate the Styla magazine.
Magazine Inclusion
htmlhead.isml
-
In order to embed the magazine on a page, certain elements need to be included. In the HTML HEAD, the
+
In order to embed the magazine on a page, certain elements need to be included. In the HTML HEAD, the
Styla JavaScript library has to be loaded and some SEO tags are included here. This is achieved by
adding a remote include to the file htmlhead.isml. Add the following line to the end of this file:
Since Styla inserts its own TITLE tag as well as a description META tag, make sure that these two tags are
-not inserted by Demandware. Otherwise, duplicate entries can lead to problems regarding the SEO visibility
-of that page.
+
Since Styla inserts its own TITLE tag as well as a description META tag, you should make sure that
+these tags are not inserted by your storefront code on pages rendering a Styla magazine.
+Otherwise, duplicate entries can lead to problems regarding the SEO visibility of that page.
You can avoid duplicate TITLE and META tags if you set a boolean variable in the page template and check
that variable in the htmlhead.isml template:
In htmlhead.isml replace the following lines
@@ -272,7 +324,7 @@
htmlhead.isml
</isif>
</isif>
-
Use the same ISIF statement for the META tag lines; replace these lines
+
Use the same ISIF statement for the META tag lines; replace these lines
The HTML BODY receives the Styla DIV, where the magazine appears, as well as more SEO content. Add the
+
The HTML BODY receives the Styla DIV, where the magazine appears, as well as more SEO content. Add the
following line to the category's rendering template or the template of the pipeline, e.g. homepage.isml:
<isincludetemplate="styla/bodyinclude"/>
-
To avoid duplicate TITLE and META tags (the above include will automatically insert those) we have to
+
To avoid duplicate TITLE and META tags (the above include will automatically insert those) we have to
set a flag so the htmlhead.isml template doesn't include those tags, too. The variable
SkipPageTitleAndMeta needs to be set before the isdecorate statement:
Replace the line
@@ -300,34 +352,35 @@
homepage.isml (example)
<isdecoratetemplate="content/home/pt_storefront">
URL Handling
-
StylaMagazine.js
-
The controller module StylaMagazine.js needs to import modules from your storefront cartridge.
-If your storefront controller cartridge is not named app_storefront_controllers then you need to adjust the following lines accordingly:
-
var app = require('app_storefront_controllers/cartridge/scripts/app');
-var guard = require('app_storefront_controllers/cartridge/scripts/guard');
-
RedirectURL.js
+
The following step is required if your storefront uses controllers. You can skip this if you are using pipelines.
In RedirectURL.js the start() function needs to be changed from this
-
functionstart(){
- var redirect = URLRedirectMgr.getRedirect();
+
functionstart() {
- var redirect = URLRedirectMgr.getRedirect();
+ var redirect = URLRedirectMgr.getRedirect(),
+ location = redirect ? redirect.getLocation() : null;
- if (redirect === null || redirect.location === null) {
- var path = URLRedirectMgr.redirectOrigin;
- var StylaMagazine = require('int_styla/cartridge/controllers/StylaMagazine');
- var handledByStyla = StylaMagazine.Alias(path);
+ if (!location) {
+ var StylaMagazine,
+ path = URLRedirectMgr.redirectOrigin,
+ handledByStyla = false;
+ if (dw.system.Site.current.getCustomPreferenceValue('stylaEnabled') == true) {
+ StylaMagazine = require('int_styla/cartridge/controllers/StylaMagazine');
+ handledByStyla = StylaMagazine.Alias(path);
+ }
if (!handledByStyla) {
// You can replace the following with a controller call to get the // functionality of a catch-all rule.
@@ -339,14 +392,14 @@
Before the change if no matching URL rule was found then the redirecterror template was rendered.
Now if no matching rule is found then StylaMagazine.Alias() is called. If that method finds a magazine
-configuration in site preferences where the Magazine Base Path matches redirectOrigin then it will
+configuration object where the Magazine Base Path matches redirectOrigin then it will
call the controller specified in the magazine configuration; if no matching magazine configuration is
found, then the redirecterror template is rendered.
E.g. assume we have a pipeline alias magazine assigned to Home-Show which renders a Styla magazine.
@@ -359,7 +412,32 @@
RedirectURL.js
will execute the Home.Show() controller method and return true.
Since the URL in the customer's browser is still magazine/stories/5 the Styla JavaScript will load
the corresponding magazine content.
+
RedirectURL pipeline
+
The following step is required if your storefront uses pipelines. You can skip this if you are using controllers.
+
The RedirectURL-Start pipeline needs to be changed: In the error exit edge of the RedirectURL pipelet
+insert the following:
+
+
A call node to StylaMagazine-Alias
+
A decision node with Decision Key set to empty(PipelineName)
+
A dynamic jump node which reads its target from the variable PipelineName
+
+
Original pipeline:
+
+
Changed pipeline:
+
+
If you prefer the error behavior of the catch-all redirect rule then instead of rendering the
+util/redirecterror template you can use a jump node with target Home-ErrorNotFound:
+
Home-ErrorNotFound pipeline instead of redirecterror template:
+
+
The Redirect-Start pipelines shown above require that the int_styla cartridge is in the cartridge path
+of all sites which use this Redirect-Start pipeline. If you want to avoid that then you can insert a check
+for the site preference stylaEnabled before the StylaMagazine-Alias pipeline is called.
+
Check if Styla is enabled before calling the StylaMagazine-Alias pipeline:
+
+
See int_styla/cartridge/example/pipelines/RedirectURL.xml for an example, you can copy the
+pipeline modifications from there.
SearchModel.js
+
The following step is required if your storefront uses controllers. You can skip this if you are using pipelines.
If using a category URL, the SearchModel.initializeProductSearchModel controller method has to be
modified. When StylaMagazine.Alias() (see previous section) finds a matching magazine configuration
it will store the Magazine Category ID from the configuration in request.custom.MagazineCategoryId.
@@ -396,10 +474,26 @@
SearchModel.js
return productSearchModel;
-
The value of the category ID needs to be set in the site preference stylaCategoryID. Apart from that,
+
The value of the category ID needs to be set in the magazine configuration's custom object attribute
+categoryID. Apart from that,
use the category rendering template provided in this cartridge
/int_styla/cartridge/templates/default/rendering/catlanding.isml or create a custom one as described
in chapter Magazine Inclusion.
+
Search pipeline
+
The following step is required if your storefront uses pipelines. You can skip this if you are using controllers.
+
The Search-Show pipeline needs to be changed, specifically modify the CategoryID parameter of the
+Search pipelet:
What this change does: If the redirect handler has determined that the current request's URL matches a magazine
+configuration, and if that configuration pointed to the Search-Show pipeline, then this change will cause the
+Search pipelet to use the category ID which is specified in the magazine configuration.
JavaScript Actions
app.js
If product information and add to cart functionality is used by the Styla magazine, a JavaScript function
@@ -425,7 +519,7 @@
app.js
The cart.js then takes care of exposing and registering the add to cart functionality with Styla.
Estimated Effort
-
The estimated effort to make the necessary changes to the shop cartridge is 4-8 hours, depending on
+
The estimated effort to make the necessary changes to the shop cartridge is 8-12 hours, depending on
the features being used (Styla SEO, add to cart feature, multiple magazines, etc.).
Cartridge Upgrade
When upgrading the cartridge please follow the instructions below in order, starting from the version
@@ -521,12 +615,12 @@
Testing
Operations, Maintenance
Data Storage
-
No data is stored inside or outside of Demandware by this integration cartridge.
+
No data is stored inside or outside of Commerce Cloud by this integration cartridge.
Availability
If the Styla SEO web service is not available, no SEO content will be embedded on the page. However,
the magazine still appears as long as the main service is working. The circuit breaker pattern is
active for the SEO web service.
-
The integrated Demandware web service framework has been used. Therefore, detailed operational
+
The integrated Commerce Cloud web service framework has been used. Therefore, detailed operational
information can be found in Business Manager under Administration > Operations > Service Status.
Styla can be reached during business hours (8:00 - 20:00 GMT+1) on support@styla.com.
Each of our customers gets an account manager assigned, allowing for direct contact and a single point
@@ -544,8 +638,8 @@
Business Manager
Storefront Functionality
The storefront shows the Styla magazine after successful installation and configuration. The features of
the magazine depend on the Styla system.
-
The cartridge exposes the controller endpoint StylaMagazine-CartridgeVersion which renders the cartridge's
-version as a JSON response, e.g.: {"version":"16.2.0"}.
+
The cartridge exposes the endpoint StylaMagazine-CartridgeVersion which renders the cartridge's
+version as a JSON response, e.g.: {"version":"17.1.0"}.
Known Issues
There are currently no known issues.
Release History
@@ -556,5 +650,6 @@
Release History
16.1.0
2016-MAY
Initial Release
16.1.1
2016-OCT
Configuration using custom objects, specify locale, send request parameters to SEO API
+
17.1.0
2017-MAY
Added compatibility with pipeline architecture, improved version endpoint, bug fixes, code cleanup