Order slots

This topic describes the slots that are provided in the order drop-in component.

Extending drop-in components describes the default properties available to all slots.

CreateReturn slots

The CreateReturn container provides slots for customizing the process of initiating a return.

ReturnOrderItem

The ReturnOrderItem slot renders additional information for return items.

slots: {
 ReturnOrderItem: (ctx) => {
   const container = document.createElement('div');
   container.insertAdjacentHTML(
     'afterbegin',
     `
       <div id="info-container" class="info-container">
         <h2 class="info-heading">Product Details</h2>
         <ul class="info-list">
           <li class="info-item">Detail 1: Placeholder information about the product.</li>
           <li class="info-item">Detail 2: Additional placeholder information about the product.</li>
         </ul>
       </div>
     `
   );
   ctx.appendChild(container);
 }
}

ReturnFormActions

The ReturnFormActions slot renders custom return form actions.

slots: {
 ReturnFormActions: (ctx) => {
   const container = document.createElement('div');

   provider.render(Button, {
     variant: 'secondary',
     children: 'Get a Better Offer',
     onClick: () => alert('Custom event listener!'),
   })(container);
   ctx.appendChild(container);
 },
}

CustomerDetails slots

The CustomerDetails container provides slots for customizing the customer details section on the order details page.

OrderReturnInformation slot

The OrderReturnInformation slot renders custom elements in the return information section on the return details page.

slots: {
 OrderReturnInformation: (ctx) => {
   const container = document.createElement('div');

   provider.render(TextArea, {
     children: 'Custom Action Button',
     required: true,
     name: 'custom_text_area',
     label: 'Custom User information',
     disabled: true,
     onChange: (event) => {
       console.log('event', event);
     },
   })(container);

   ctx.appendChild(container);
 }
}

PaymentMethodIcon

The PaymentMethodIcon slot renders custom elements based on the selected payment method on the order details page.

slots: {
 PaymentMethodIcon: (ctx) => {
   const { selectedPaymentMethodCode } = ctx;

   const container = document.createElement('div');

   let iconMarkup = '';
   switch (selectedPaymentMethodCode) {
     case 'credit_card':
       iconMarkup = `<div>Credit Card Icon</div>`;
       break;
     case 'paypal':
       iconMarkup = `<div>PayPal Icon</div>`;
       break;
     case 'bank_transfer':
       iconMarkup = `<div>Bank Transfer Icon</div>`;
       break;
     default:
       iconMarkup = `<div>Default Icon</div>`;
   }

   container.insertAdjacentHTML(
     'afterbegin',
     `
       <div class="payment-method-icon">
         ${iconMarkup}
       </div>
     `
   );

   ctx.appendChild(container);
 }
}

OrderReturns slots

The OrderReturns container provides slots that customize elements in the order returns section on the order details page.

DetailsActionParams slot

The DetailsActionParams slot renders custom actions for each return in the order returns section of the order details page.

slots: {
 DetailsActionParams: (ctx) => {
   const {
     returnOrderItem: { returnNumber },
   } = ctx;

   const container = document.createElement('div');

   container.insertAdjacentHTML(
     'afterbegin',
     `
       <div>
         <a
           href="https://example.com/returns/${returnNumber}"
           class="details-link"
         >Return Details</a>
         <button
           class="cancel-return-button"
           onclick="console.log('Cancel return callback placeholder')"
         >Cancel Return</button>
       </div>
     `
   );

   ctx.appendChild(container);
 }
}

ReturnItemsDetails slot

The ReturnItemsDetails slot renders additional details for each return in the order returns section of the order details page.

slots: {
 ReturnItemsDetails: (ctx) => {
   const { items } = ctx;
   const container = document.createElement('div');

   const itemStatus = items?.[0]?.customStatus || 'No status available';

   container.innerHTML = `Custom return status: ${itemStatus}`;
   ctx.appendChild(container);
 }
}

OrderStatus slot

The OrderStatus slot renders custom order status elements on the order details page.

DeliveryTimeLine

The DeliveryTimeLine slot renders a custom stepper to track delivery progress.

slots: {
 DeliveryTimeLine: (ctx) => {
   const container = document.createElement('div');

   container.insertAdjacentHTML(
     'afterbegin',
     `
      <div class="shipping-stepper">
        <div class="step">
          <div class="step-marker"></div>
          <span class="step-label">Order Placed</span>
        </div>
        <div class="step">
          <div class="step-marker"></div>
          <span class="step-label">Shipped</span>
        </div>
        <div class="step">
          <div class="step-marker"></div>
          <span class="step-label">Out for Delivery</span>
        </div>
        <div class="step">
          <div class="step-marker"></div>
          <span class="step-label">Delivered</span>
        </div>
      </div>
    `
   );

   ctx.appendChild(container);
 }
}

DeliveryTrackActions slot

The DeliveryTrackActions slot renders custom delivery tracking actions.

slots: {
 DeliveryTrackActions: (ctx) => {
   const {
     trackInformation: { number, title },
   } = ctx;

   const container = document.createElement('div');

   container.insertAdjacentHTML(
     'afterbegin',
     `
       <button
         type="button"
         class="track-action-button"
         data-track-number="${number}"
       >
         ${title}
       </button>
     `
   );

   ctx.appendChild(container);
 }
}

ReturnItemsDetails

The ReturnItemsDetails slot renders additional return details in the shipping status container on the return details page.

slots: {
ReturnItemsDetails: (ctx) => {
 const { items } = ctx;
 const container = document.createElement('div');
 container.classList.add('return-items-details');

 items.forEach(({ quantity, requestQuantity, status, uid }) => {
   const html = `
     <div class="return-item" id="return-${uid}">
       <h3 class="return-status">${status}</h3>
       <p class="return-request-quantity">Requested: ${requestQuantity}</p>
       <p class="return-quantity">Quantity: ${quantity}</p>
       <a href="#" class="return-info-link">More information about the return</a>
     </div>
   `;
   container.insertAdjacentHTML('beforeend', html);
 });

 ctx.appendChild(container);
}
}