Mẫu vận chuyển

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

Mẫu vận chuyển là gì?

Đối với 'Shipped by seller', TikTok yêu cầu ít nhất một mẫu vận chuyển bao gồm phí vận chuyển hiển thị cho người mua.

Đ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 nếu không đăng nhập vào Seller Center.
• Tỷ lệ thất bại cao khi đăng sản phẩm qua API chủ yếu là do không thiết lập mẫu vận chuyển

Đối với những người bán đó, widget này có thể cung cấp một mẫu vận chuyển (điều kiện tiên quyết để đăng sản phẩm) cho người bán

Hình ảnh minh họa

Bản demo tích hợp

React framework

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

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:shippingTemplate  
    },  
  ],  
};  
  
export default () => {  
  return (  
    <WidgetConfigProvider  
      config={initOptions.config}  
      getToken={initOptions.getToken}  
      remotes={initOptions.remotes}  
      preloadWidgetNames={['@tiktokshop-widget/logistics:shippingTemplate']}>  
      <RemoteWidget  
        name={'@tiktokshop-widget/logistics:shippingTemplate'}  
        className={'containerClass'}  
        options={{  
            onResult: (data: { code: number }) => {  
              if (data.code === 0) {  
                //Callback function for successful shipping template 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:shippingTemplate';  
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 shipping template 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 được ra mắt, cung cấp các chức năng cơ bản để thêm mẫu vận chuyển.

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

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