Integrate E-commerce scenarios

Send product card message type

export enum CustomMessageTypes {
  ..., // Message types already defined by AUI Interactive Classroom are omitted here.
  ShoppingProduct = 30011,  // E-commerce card message
}

Define the product card class

export interface ClassRoomProductConfig {
  productId: string; // Product ID
  title: string; // Product title
  info: string; // Product description
  coverUrl: string; // Product thumbnail URL
  sellUrl: string; // Product purchase URL
}

// Define and implement the product card class
export class ClassRoomProduct {
  productId: string; // Product ID
  title: string; // Product title
  info: string; // Product description
  coverUrl: string; // Product thumbnail URL
  sellUrl: string; // Product purchase URL

  constructor(config: ClassRoomProductConfig) {
    const { productId, title, info, coverUrl, sellUrl } = config;
    this.productId = productId;
    this.title = title;
    this.info = info;
    this.coverUrl = coverUrl;
    this.sellUrl = sellUrl;
  }
}

Define the product management module

The teacher client and the teaching assistant client instantiate this module.

import { ClassRoomProductConfig } from 'path/to/ClassRoomProductConfig';
import { CustomMessageTypes } from 'path/to/CustomMessageTypes';
import AUIMessage from '@/BaseKits/AUIMessage';

export class ProductManager {
  private productList: ClassRoomProductConfig[] = [];
  private message: InstanceType<typeof AUIMessage>;

  constructor(message: InstanceType<typeof AUIMessage>) {
    this.message = message;
  }

  // Send a product card
  public sendProduct(productId: string): Promise<void> {
    const product = this.productList.find((item) => item.productId === productId);
    if (product) {
      this.message.sendGroupSignal({
        type: CustomMessageTypes.ShoppingProduct,
        data: {
          product
        },
      });
    }
  }
  
  ...
}

You can call the sendProduct method to send a product card. If you send the card from the operations console, the AppServer calls the Interactive Messages API. For more information, see Send messages to a group.

Receive product card messages

The student client must handle product card messages triggered by the teacher, teaching assistant, or operations staff. The following code shows how to implement a listener for product card messages, where CustomMessageTypes.ShoppingProduct is the custom message type for the product card.

import React, { 
  useContext, 
  useEffect, 
  useState, 
} from 'react';
import { Popover } from 'antd-mobile';
import { CloseOutline } from 'antd-mobile-icons'
import { ClassContext } from 'path/to/ClassContext';
import { AUIMessageEvents } from '@/BaseKits/AUIMessage/types';
import { CustomMessageTypes } from 'path/to/CustomMessageTypes';
import styles from './index.less';

const ProductCard: React.FC = () => {
  const { auiMessage } = useContext(ClassContext);
  const [productCardVisible, setProductCardVisible] = useState<boolean>(false);

  const handleShoppingProduct = (data: any) => {
    setProductCardVisible(true);
    // Implement more business logic as needed.
  };

  useEffect(() => {
    const handleReceivedMessage = (eventData: any) => {
      const { type, senderInfo, data } = eventData || {};

      switch (type) {
        case CustomMessageTypes.ShoppingProduct:
          // Product card message
          handleShoppingProduct(data);
          break;
        default:
          break;
      }
    };
    auiMessage.addListener(AUIMessageEvents.onMessageReceived, handleReceivedMessage);

    return () => {
      auiMessage.removeListener(AUIMessageEvents.onMessageReceived, handleReceivedMessage);
    };
  }, [auiMessage]);

  return (
    <Popover
      placement='top'
      mode='light'
      content={(
        <div className={styles['shopping-card']}>
          <div
            className={styles['shopping-close-icon']}
            onClick={() => setProductCardVisible(false)}
          >
            <CloseOutline />
          </div>
        </div> 
      )}
      visible={productCardVisible}
    >
      <div>
        {/* The business logic implements the product card content. */}
      </div>
    </Popover>
  );
};

export default ProductCard;

Display the product card

const isShowProductCard = useMemo(() => {
  // Business logic to determine whether to display the product card component.
}, [...]);

{isShowProductCard ? <ProductCard /> : null}

Product list

Add an entry button

You can add a button to the bottom of the student client in the classroom to open the product list.

const isShowProductList = useMemo(() => {
  // Business logic to determine whether to display the product list.
}, [...]);

{isShowProductList ? <ShoppingList /> : null}

Open the product list

When a user clicks the entry button, a half-screen floating layer appears with an upward animation. The product list is then loaded onto this layer. You can develop the product information display and purchase flow based on your specific requirements.

import React, { useState } from 'react';
import { Popup } from 'antd-mobile';
import styles from './index.less';

const ProductList: React.FC = () => {
  const [productListVisible, setProductListVisible] = useState<boolean>(false);

  const closeProductList = () => {
    setProductListVisible(false)
  };

  return (
    <>
      <Popup
        onMaskClick={() => closeProductList()}
        onClose={() => closeProductList()}
        visible={productListVisible}
      >
        <div className={styles['shopping-list']}>
          <div className={styles['shopping-title']}>
            {/* The business logic implements the product list content. */}
          </div>
        </div>
      </Popup>

       setProductListVisible(true)}>
        <span className="chat-btn">
          <img src="https://img.alicdn.com/imgextra/i3/O1CN012R9g7P1F7ZCYy96rK_!!6000000000440-2-tps-108-108.png" />
        
      </span>
    </>
  );
};

export default ProductList;