How to add custom data to your cart using Extensions

The Ollie Shop Extensions API allows the user to include any information in your cart. For an overview of the Extensions API take a look at this tutorial.

Now that we have a functional component that allows the user to add text, we must now make sure we connect this component with the Cart, in other words, we have to make sure that the data added by the user actually makes its way into the cart.

The Ollie Shop SDK offers the handler for the Extensions API. So we'll add this to our index.tsx file

export const MedicalPrescriptionBox: CustomComponent = ({cart, updateExtensionAction}) => {
 

And inside our component we'll declare the behaviour we would like to have for the action of the "send" button.

update-prescription is how we are deciding to identify this Extension.
All we need to send will be the id of the product and the link to the medical prescription.

export const MedicalPrescriptionBox: CustomComponent = ({cart, updateExtensionAction}) => {
  
  const ref = React.useRef<HTMLInputElement>(null);

    const handleSubmit = async (product: any) => {
      const input = ref.current
      try {
        if(input?.value?.trim()) {
          updateExtensionAction(cart.id, {id:"update-prescription", scope:"custom", value: { items: product.id, urls: input?.value } })
        }
      } catch (e){
        console.log(e)
      }
 };

The updateExtensionAction function from the SDK does the same as the REST API example below:

Now that we are able to send data to the API we must account for this action in our HTML component. We'll include the handleSubmit function created above.

return (
    <>
    {cart?.items.map((product: any) => (
      <div className="ml-4 flex flex-1 flex-col justify-between sm:ml-6">
            <>
              <p className="mt-1 text-sm font-medium text-gray-900">
                Please provide the URL for your prescription.
              </p>
              <span className="mt-4 flex space-x-2 text-sm text-gray-700" > 
                <input ref={ref} type="text" className="input-class-prescription" required style={{ padding: '10px 20px', border: '1px solid #007BFF', borderRadius: '5px' }} />
                <button onClick={(event: React.FormEvent) => handleSubmit(product)} style={{ backgroundColor: '#007BFF', color: '#fff', padding: '10px 20px', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>Send</button>
                </span>    
            </>
          )} 
        </div>
    ))}
    </>
  );

But you must be thinking: how will my component know if it should or shouldn't be displayed?

Our component will be conditional to the existence of an attribute product.requiresPrescription and this attribute will be included in the cart by a separate actor, what we call a Function.

Also, once the user successfully submits the prescription link this information is added to the cart only after the ecommerce provider accepts the information. This is also performed by a Function. In the next chapter, we'll cover how to build these two functions and also make the last updates to our Component to consider both of these situations.