Orders by TikTok shipping (4PL)

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

Widget Orders by TikTok Shipping(4PL) là gì?

**** Cho phép Seller trên các app Shopify 1P và 3P xử lý các đơn hàng Orders by TikTok Shipping(4PL) và hoàn tất quy trình fulfillment.

*Đọc tiếp để tìm hiểu thêm hoặc tham khảo widget Orders by TikTok Shipping(4PL) trên TTS tại đây.

Tại sao chúng tôi xây dựng tính năng này?

Vấn đề cốt lõi**:** Đối với các seller sử dụng 3P để quản lý đơn hàng, khi xử lý các đơn hàng Orders by TikTok Shipping(4PL), seller phải thực hiện các thao tác fulfillment trong TTS seller center, điều này làm gián đoạn quy trình vận hành của seller trên app 1P/3P.

Giải pháp: cho phép seller xử lý các đơn hàng Orders by TikTok Shipping(4PL) riêng lẻ/theo lô ngay trong app 3P.

Quy trình làm việc

Chọn đơn hàng theo lô - > > tạo nhãn vận chuyển - > > in nhãn - > > xử lý giao hàng

Trình diễn

Mẹo:

• Widget Orders by TikTok Shipping(4PL) sẽ chỉ hiển thị các đơn hàng Orders by TikTok Shipping(4PL) cho seller. Bạn nên sử dụng tên tab rõ ràng cho seller, ví dụ như "Manage Orders Fulfilled by TikTok" hoặc "Manage TikTok Orders by TikTok Shipping(4PL) Orders."

Demo tích hợp

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

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/order:manageOrders  
    },  
  ],  
};  
  
export default () => {  
  return (  
    <WidgetConfigProvider  
      config={initOptions.config}  
      getToken={initOptions.getToken}  
      remotes={initOptions.remotes}  
      preloadWidgetNames={['@tiktokshop-widget/order:manageOrders']}>  
      <RemoteWidget  
        name={'@tiktokshop-widget/order:manageOrders'}  
        className={'containerClass'}  
        options={{}} //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/order:manageOrders';  
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({});  
    });  
    return () => {  
      view?.unmount();  
    };  
  }, []);  
  return (  
    <div  
      className="widget-preview-container"  
      id="widget-preview-container"></div>  
  );  
};

Lịch sử thay đổi

Release date	Update
2024/1/22	Phiên bản đầu tiên ra mắt, cung cấp các chức năng cơ bản của 4PL.

Widget SDK User Guide

Widget SDK User Guide