Cuttlefish Docs
  • English

    • spz-order-shipment

    Supported layouts: container

    When to Use

    When you need to display order logistics, usually used on the order details page.

    Code Demonstration

    Basic Usage

    This component encapsulates all the business logic. We can directly use the encapsulated data to display logistics details.

    Template Data

    Multilingual data required by the component supports multiple languages and can be used directly. (Only includes data processed by the component, original interface data remains unchanged)

    Logistics Package Data:

    PropertyDescriptionType
    countCurrent number of logistics packagesnumber
    fulfillmentsLogistics detailsArray
    fulfillments[0].shippingStatusLogistics statusstring
    fulfillments[0].showConfirmReceiptBtnWhether to show the confirm receipt buttonboolean
    fulfillments[0].showTrackingInfoBtnWhether to show the track logistics information buttonboolean
    fulfillments[0].showCustomTrackingInfoWhether to show the custom track logistics information buttonboolean
    fulfillments[0].parsedTimeOrder date parsing objectObject
    fulfillments[0].line_itemsArray of product detailsArray
    fulfillments[0].line_items[0].parsedPropertiesParse the properties attribute in the product data into an objectObject
    fulfillments[0].line_items[0].optionValueJoinInSlashExtract the values in the options array of the product data and display them separated by /, e.g.: black / Lstring
    fulfillments[0].line_items[0].optionsJoinInColonFormat the name/value in the options array of the product data as name: value, e.g.: color: blackArray

    parsedTime Object Data

    PropertyDescriptionOutput
    YYYYFour-digit year2023
    MMonth, starting from 11-12
    MMMonth, two digits01-12
    MMMAbbreviated month nameJan-Dec
    DDay of the month1-31
    DDDay of the month, two digits01-31
    dddAbbreviated weekday nameMon-Sun
    HHour0-23
    HHHour, two digits00-23
    hHour, 12-hour clock1-12
    hhHour, 12-hour clock, two digits01-12
    mMinute0-59
    mmMinute, two digits00-59
    sSecond0-59
    ssSecond, two digits00-59
    aAM or PM, lowercaseam | pm
    AAM or PM, uppercaseAM | PM

    parsedProperties Object Data

    PropertyDescriptionType
    nameCustom property namestring
    valueCustom property valueany
    isImageWhether the custom property value is an image typeboolean

    spz-render with role="tracking-info-render" attribute template data:

    PropertyDescriptionType
    tagLogistics statusstring
    carrierNameLogistics carrier name, e.g.: USPSstring
    trackingNumberLog

    istics tracking number|string| |checkpoints|Information on each checkpoint reached by logistics|Array| |tagInfo|Logistics status information, e.g.: Delivered on Feb 15, Wed|string| |primaryColor|Primary color in hexadecimal|string| |width|Percentage of current logistics progress|string|

    Buttons performing various actions need to be configured with the corresponding role attribute value to endow the current button with the respective capabilities, supporting the following types of action capabilities:

    ValueDescription
    trackingClick the button, if the logistics tracking number is not of the Aftership type, render the spz-render element with role="tracking-info-render", and provide related logistics information for the package. The button must have the tracking-id attribute, the value is the logistics tracking number and the target-id attribute, the value is the ID of the element containing the spz-render element with the role="tracking-info-render" attribute as a child.
    confirm_receiptClick the button to open a warning dialog to confirm receipt of the current order, if the confirm button in the dialog is clicked, confirm receipt. The button must have the data-id attribute, the value is the logistics ID
    <spz-order-shipment layout="container" order-id="xxx">
  <template>
    <div>
      <h3>Shipments</h3>
      <!-- Shipment Information ... -->

      <!-- Tracking buttons -->
      <div>
        <button
          id="shipment-tracking-btn"
          role="tracking"
          tracking-id="${item.tracking_number}"
          target-id="shipment-tracking-wrapper"
        >
          Tracking info
        </button>
        <button role="confirm_receipt" data-id="${item.id}">
          Confirm receipt
        </button>
      </div>

      <!-- Tracking info -->
      <div id="shipment-tracking-wrapper">
        <spz-render role="tracking-info-render" manual layout="container" template="shipment-tracking-detail-template"></spz-render>
      </div>
    </div>
  </template>
</spz-order-shipment>

    Properties

    PropertyDescriptionTypeDefault ValueRequired
    order-idOrder IDstring-Yes

    AI Summary (LLM Ready)

    • Component ID: spz-order-shipment
    • One-line purpose: Display order logistics.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/