How to add to cart or send quotation

You can add to cart or send quotation after some conditions (like for example the configuration of certain attributes, the add of texts/images in the Designer, ..etc ), using the isAddToCartLoading property and addToCart, createQuote, methods returned by useZakeke hook.

In detail, the addToCart and the createQuote methods are indepent but their buttons, in the Zakeke default theme, are related in case you create a Quote rule.

As you can read in this guide here you can create a quote rule and, in base of this, see displayed a form once clicked the "get a quote" button in the Zakeke default theme (so your theme will need to dinamically create the form basing on the quote rule saved in the backoffice, that you'll be able to retrieve in the product property).

To summarize:

• In product you'll find the sub-property quoteRule from which, if available, you'll be able to generate the form in frontend for the quotation fields;

• The isAddToCartLoading property is a boolean that will identify when the addToCart action is triggered;

• The addToCart method for trigger the add to cart event;

• the createQuote that will send the form filled by the final user;

Let's see now an example of how use these properties and methods:

Usage

import { useZakeke } from "zakeke-configurator-react";

const App = () => {

  const { product, createQuote, isAddToCartLoading, addToCart} = useZakeke();

const handleGetQuoteClick = async (formData: any) => {
  ...
  ...
  await createQuote(formData);
}

const handleAddToCart = async () => {
  ...
  ...
  await addToCart();
}


  return (<>
          {product?.quoteRule &&
                <QuoteButton
                    key={"quote"}
                    onClick={() => handleGetQuoteClick()}>
                    <span>{T._("Get a quote", "Composer")}</span>
                </QuoteButton>
          }
          <CartButton key={'cart'}
          onClick={() => handleAddToCart()}>
								{isAddToCartLoading && <TailSpin color='#FFFFFF' height='25px' />}
								{!isAddToCartLoading && <span>{T._('Add to cart', 'Composer')}</span>}
							</CartButton>
              </>
					)
}