OrderSearch container
The OrderSearch
container enables order searches using email, last name, and order number. It is available to both guest and registered users for quick access to order details.
OrderSearch container
Configurations
The OrderSearch
container provides the following configuration options:
Example
The following example demonstrates how to render the OrderSearch
container:
const renderSignIn = async (element, email, orderNumber) => authRenderer.render(SignIn, { initialEmailValue: email, renderSignUpLink: false, labels: { formTitleText: email ? 'Enter your password to view order details' : 'Sign in to view order details', primaryButtonText: 'View order', }, routeForgotPassword: () => 'reset-password.html', routeRedirectOnSignIn: () => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,})(element);
export default async function decorate(block) { block.innerHTML = '';
events.on('order/data', async (order) => { if (!order) return;
block.innerHTML = '';
await orderRenderer.render(OrderSearch, { isAuth: checkIsAuthenticated(), renderSignIn: async ({ render, formValues }) => { if (render) { renderSignIn( block, formValues?.email ?? '', formValues?.number ?? '', );
return false; } return true; }, routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH, routeGuestOrder: () => ORDER_DETAILS_PATH, onError: async (errorInformation) => { console.info('errorInformation', errorInformation); }, })(block); });
await orderRenderer.render(OrderSearch, { isAuth: checkIsAuthenticated(), renderSignIn: async ({ render, formValues }) => { if (render) { renderSignIn(block, formValues?.email ?? '', formValues?.number ?? '');
return false; }
return true; }, routeCustomerOrder: () => CUSTOMER_ORDER_DETAILS_PATH, routeGuestOrder: () => ORDER_DETAILS_PATH, onError: async (errorInformation) => { console.info('errorInformation', errorInformation); }, })(block);}