Integrating the UGC feature

We'll walk you through how to install short-form user-generated content (UGC).

Installing the UGC Detail Page

showShortformUgcEdit(config) By calling a function, you can load a page where you can edit and generate short-form UGC. config You can use an object to pass in the necessary settings, and when a specific event (save, delete, close) completes, you can execute the user-defined function defined at that time.

You can call it in the following way window.cloud.shoplive.showShortformUgcEdit(config):

const config = {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('Save completed:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('Delete completed:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('Edit closed:', payload);
  },
};

window.cloud.shoplive.showShortformUgcEdit(config);

Required settings for UGC function calls

export interface TShortsUGCConfig {
  shortsId?: string; // Unique shortform ID generated upon creation
  userId: string; // Query parameter for user ID
  userName?: string; // Query parameter for user name
  profileImage?: string; // Query parameter for profile image
  onCustomSaveCompleted?: (payload: TShortsUGCConfig) => void; // Custom function to execute upon save completion
  onCustomDeleteCompleted?: (payload: TShortsUGCConfig) => void; // Custom function to execute upon delete completion
  tags?: string[]; // List of tags
  skus?: string[]; // List of unique product IDs
  brandIdentifier?: string; // Brand identifier
  onCustomCloseEdit?: (payload: TShortsUGCConfig) => void; // Custom function to execute when the detail page is closed
}

Question mark (?)properties marked with is optional.

• If you don't set a value for the Optional property, it will be treated as the default value and will not work with the specific function associated with it. It does not affect the overall behavior.

• For the rest, you must set the value to the Required property. If there is no value, the function may not work. (Currently, only userId is required.)

Installing the UGC List Page

setShortformUgcList(containerId, config) By calling a function, you can dynamically load a short-form UGC list page into a specific container. This function asynchronously retrieves a list of UGC and renders it to the specified container. 아래와 같이 containerId와 config를 명시하여 숏폼 리스트를 구성할 수 있습니다.

const config = {
  userId: 'test.shoplive@shoplive.cloud',
};

window.cloud.shoplive.setShortformUgcList('ugc-list-container', config);

You can load a short-form UGC list on a specific page in the following way:

//shortform_ugc.html

{...}
<div id="my-page-view"></div>
<script>
window.cloud.shoplive.setShortformUgcList('ugc-list-container', {
  userId: 'USER_ID',
  userName: 'USER_NAME',
  profileImage: 'https://example.com/profile.jpg',
  shortsId: '123456789',
  skus: ['sku1', 'sku2'],
  tags: ['tag1', 'tag2'],
  onCustomSaveCompleted: (payload) => {
    console.log('Save completed:', payload);
  },
  onCustomDeleteCompleted: (payload) => {
    console.log('Delete completed:', payload);
  },
  onCustomCloseEdit: (payload) => {
    console.log('Edit closed:', payload);
  },
});
</script>

The above code works as shown below.

1. Checking the userId: config If the object userIddoes not have a , it displays a warning message and exits the function.

2. Confirm UGC initialization: If short-form UGC initialization is not complete, wait for the task to complete.

3. HTML element check: given containerIdIf there is no corresponding HTML component, it prints a warning message and exits.

4. Load a short-form UGC list: Load a short-form UGC list component asynchronously and render the list in its container.