Integration jQuery Plugin

1. Got to the Content Blocks (Top Menu -> Content/Content Blocks).

2. Next, create a new Content Block. Clicks on Create a content block button.

3. In the Create view:

a. Add a Title

b. In the content field

In the Editor text, you will find a custom ToolBarItem to add the HTML structure, open the options in the SmarterCommerce button and select the option “Session Expired”.

Note: on some monitors the SmarterCommerce option appears within the dot’s menu with the name “exe”. (This name is fixed in update 7)

4. To view and modify the HTML structure enter the following option, then find the Code Review.

5. Modify the HTML, you need to add the values for data-shopping-url with the absolute URL of the site.

6. Click on Create and the Content Block configuration are finished.

Implementation Example

1. Then, add a Content block widget to the page where you want to display the plugin. Recommendation add the content block in the page template (Design > Page Templates).

a. Navigate to Page template and select the template where the content will be added.

b. Add a Content block widget into the page Template. the content block can be added in any section, it is recommended to add it at the top of the page.

2. On the Content block, click on “More” menu and select “Use shared”, select the content block previously created and click Done selecting.

3. Add the link to the session expired plugin using a javascript plugin widget.

a. Add Javascript widget into the Head_JavaScripts_PlaceHolder section in the page template.

b. Select the js file from resources files.

URL: ~/ResourcePackages/Bootstrap4/MVC/Scripts/sc-jquery.sessionexpired.min.js

c. On “More Options” select to include in “Before the closing body tag” and Save changes.

d. Click on Save.

4. Add a Javascript widget on same page after the previous javascript in step 3.

a. Add Javascript widget.

b. Select Write JavaScript option.

c. Edit to add the function that initialize the plugin.  

$(function () {
            if ($("#scj-sessionexpired").length > 0)
                        $("#scj-sessionexpired").scSessionExpired();
});

d. On “More Options” select to include in “Before the closing body tag” and Save changes.

5. Publish page template.

Plugin HTML data attributes