Cài đặt kho hàng

Thị trường khả dụng: US&UK

Widget "Cài đặt kho hàng" là gì?

Trước khi đăng bán sản phẩm, người bán cần thiết lập đúng địa chỉ Kho hàng/ Lấy hàng. Khi người bán chọn dịch vụ lấy hàng của đơn vị vận chuyển, TikTok Shop sẽ lấy địa chỉ này và lên lịch lấy hàng cho đơn vị vận chuyển.

Điểm khó khăn:

• Người bán có thể không có cơ hội biết thông tin này hoặc thiết lập mẫu vận chuyển mà không đăng nhập vào Seller Center.
• Tỷ lệ thất bại cao khi đăng bán sản phẩm qua API chủ yếu do không thiết lập mẫu vận chuyển

Widget Cài đặt kho hàng cho phép Người bán nhập thông tin kho giao hàng và kho trả hàng, bao gồm người liên hệ của kho, địa chỉ và phạm vi bán hàng.

Hình ảnh minh họa

Demo tích hợp

React framework

Cấu hình preload trong WidgetConfigProvider preloadWidgetNames, bạn có thể đặt WidgetConfigProvider ở lớp ngoài cùng để preload theo thời gian

TYPESCRIPTWord Wrap

import { WidgetConfigProvider,RemoteWidget } from '@tiktokshop/widget-kit-react';  
  
const getWidgetToken = async () => {  
  const res: any = await get('https://xxx/api/v1/widget/access_token', {  
    outer_shop_id: 'xxx',  
    partner_type: '1',  
  });  
  if (res?.code === 0) {  
    return res?.data;  
  }  
  return {};  
};  
  
const initOptions = {  
  config: {  
    shopId: 'xxx', //seller id, such as 123456  
    oecRegion: 'xxx', //country,such as US  
    appKey: 'xxx', //The key corresponding to the merchant's creation service  
    isvInfo: {  
      name: 'xxx', //ISV name,such as OPEN_PLATFORM  
    },  
  },  
  getToken: getWidgetToken, //get auth token  
  remotes: [  
    {  
      name: 'xxx', //Integrated business name, provided by the open platform,such as:@tiktokshop-widget/logistics:warehouse  
    },  
  ],  
};  
  
export default () => {  
  return (  
    <WidgetConfigProvider  
      config={initOptions.config}  
      getToken={initOptions.getToken}  
      remotes={initOptions.remotes}  
      preloadWidgetNames={['@tiktokshop-widget/logistics:warehouse']}>  
      <RemoteWidget  
        name={'@tiktokshop-widget/logistics:warehouse'}  
        className={'containerClass'}  
        options={{  
            onResult: (data: { code: number }) => {  
              if (data.code === 0) {  
                //Callback function for successful warehouse submission  
              }  
            },  
            type: 'management',  
        }} //Pass in the props required by the widget. If there are none, you don't need to pass them in.  
      />  
    </WidgetConfigProvider>  
  );  
};

Native js

JSONWord Wrap

import React, { useEffect } from 'react';  
import { get } from './utils/fetch';  
import { loadWidget, init, WidgetComponent } from '@tiktokshop/widget-kit';  
  
const name = '@tiktokshop-widget/logistics:warehouse';  
let view = null;  
export default () => {  
  const getWidgetToken = async () => {  
    const res: any = await get('https://xxx/api/v1/widget/access_token', {  
      outer_shop_id: 'xxx',  
      partner_type: '1',  
    });  
    if (res?.code === 0) {  
      return res?.data;  
    }  
    return {};  
  };  
  
  const initWidget = () => {//It is recommended to initialize the widget in the outer layer and execute the preloadWidget([name]) method to preload resources.  
    init({  
      config: {  
        shopId: 'xxx',  
        oecRegion: 'US',  
        appKey: 'xxx',  
        isvInfo: {  
          name: 'OPEN_PLATFORM',  
        },  
      },  
      remotes: [  
        {  
          name,  
        },  
      ],  
      getToken: getWidgetToken,  
    });  
  };  
  useEffect(() => {  
    initWidget();  
    loadWidget(name).then((component: WidgetComponent) => {  
      view = component.create(  
        document.getElementById('widget-preview-container')!,  
      );  
      view?.render({  
          onResult: (data: { code: number }) => {  
              if (data.code === 0) {  
                //Callback function for successful warehouse submission  
              }  
            },  
            type: 'management',  
      });  
    });  
    return () => {  
      view?.unmount();  
    };  
  }, []);  
  return (  
    <div  
      className="widget-preview-container"  
      id="widget-preview-container"></div>  
  );  
};

Nhật ký thay đổi

Release date	Update
2024/2/22	Phiên bản đầu tiên ra mắt, cung cấp các chức năng cơ bản để thêm kho hàng.

Hướng dẫn sử dụng Widget SDK

Hướng dẫn sử dụng Widget SDK