Shortform - Collection Integration

    Shortform - Collection Integration


    Article Summary

    This guide introduces how to integrate Shortform Collection

    [Step 1] Initialization

    Here are examples of how you can initialize the Shoplive Shortform without user authentication, simple authentication, and JWT token authentication

    Install with desired auth type of initialization code in common layout (head area, etc.)

    Detail information can be found in User Authentication.

    Access Key

    Access key and secret key can be obtained from Shoplive representative.

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>
    
    <!-- OR -->
    
    //Simple auth
    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
      cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
    </script>
    
    <!-- OR -->
    
    //JWT auth
    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
      cloud.shoplive.setUserJWT("USER_JWT");
    </script>

    [Step 2] Rendering Shortform Collection with the desired template

    Enter the code below where you want to display the Shortform list. The template field indicates which layout you want to use for Shortform list.

    <div id="shoplive-shortform"></div>
    <script defer >
      cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID1 | GRID2 | HORIZONTAL"} );
    </script>

    ▶︎ Introduction to Shortform Collection

    Shortform lists can be displayed in the 3 formats below. You can also specify whether to use the "VIEW MORE" button and the maximum number of rows.

    • Grid1 - Vertical Scroll Layout (Large content)

    • Grid2 - Vertical Scroll Layout (Small content)

    • Horizontal - Horizontal Scroll Layout

    Grid1 - Vertical Scroll Layout (Large content)

    Insert below code.

    <div id="shoplive-shortform-1"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform-1", {template: "GRID1"} );
    </script>

    Grid2 - Vertical Scroll Layout (Small content)

    Insert below code

    <div id="shoplive-shortform-2"></div>
    <script defer >
      cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2"} );
    </script>

    Horizontal - Horizontal Scroll Layout

    Insert below code

    <div id="shoplive-shortform-3"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform-3", {template: "HORIZONTAL"} );
    </script>

    UI Configuration

    rows and hasMoreButton options are available only for Grid1 and Grid2

    Parameter

    Function

    Description

    default

    rows

    Max rows

    Sets the default number of rows that apply to the vertical scroll layout.

    2 (max:4)

    hasMoreButton

    Whether showing the ‘View More’ button

    Indicates whether to display the "View more" button. If not displayed, additional rows are automatically loaded when the bottom of the list is reached.

    true

    <div id="shoplive-shortform-2"></div>
    <script defer >
      cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2" ,hasMoreButton:true, rows:4} );
    </script>