@nosto/nosto-react
    Preparing search index...

    Function useNostoOrder

    • You can personalise your order-confirmation/thank-you page by using the useNostoOrder hook.

      Parameters

      Returns void

      Example: Basic order confirmation page usage

      import { useNostoOrder } from '@nosto/nosto-react'

      function OrderConfirmationPage({ order }: { order: Order }) {
        useNostoOrder({
          order: order,
          placements: ['orderconfirm-nosto-1', 'orderconfirm-cross-sell']
        })

        return (
          <div>
            <h1>Order Confirmed!</h1>
            <p>Order #{order.order_number}</p>
            <div id="orderconfirm-cross-sell" />
            <div id="orderconfirm-nosto-1" />
          </div>
        )
      }

      import { useNostoOrder } from '@nosto/nosto-react'

      function ThankYouPage({ orderData }: { orderData: ToCamelCase<Order> }) {
        useNostoOrder({
          order: {
            orderNumber: orderData.orderNumber,
            customerEmail: orderData.customerEmail,
            purchasedItems: orderData.purchasedItems.map(item => ({
              productId: item.productId,
              skuId: item.skuId,
              name: item.name,
              unitPrice: item.unitPrice,
              quantity: item.quantity
            }))
          },
          placements: ['thankyou-recommendations', 'thankyou-reviews']
        })

        return (
          <div>
            <h1>Thank you for your purchase!</h1>
            <div id="thankyou-recommendations" />
            <div id="thankyou-reviews" />
          </div>
        )
      }

    Settings

    Member Visibility