Add to cart buttons

Here’s a guide to adding add to cart buttons to your preezie product recommendations. This allows shoppers to directly purchase their preezie recommendations:

For Shopify customers

Connect it to your product feed

• To connect your Shopify feed to your cart, you’ll need to add the Product ID join to our preezie results. Please get in touch with support@preezie.com to help you with this, the steps are:

  • In https://doorman.preezie.com/home/importer/product-fields choose your Product database

  • Click Create New Field

    • Name: prz_addToCartId

    • Type: String

    • Feed Path: variants/id

    • Hit Save

• Now you have added a new product field you need to re-run your feed (or wait for it to run automatically) for each product to propagate the Shopify ID value into prz_addToCartId

• To do it manually: Go to https://admin.preezie.com/app/products/feeds find your feed, hit Run

  • Once the feed has Success status, go to https://admin.preezie.com/app/products/products and find any product to check the new field is present, for example:

Turn on the feature

• Then turn on the feature in your CMS admin > Settings > Tenant settings
  Get in touch with support@preezie.com if you need help with this

  • In the admin tab select Shopify then Active

  • If your website has a custom shopping cart integration then you can add an optional Redirect for the shopper directly to your cart page (in a new tab)

    • This is used in the case where the cart is not automatically refreshed when preezie adds products to your cart, i.e. it looks like nothing has happened!

  • Hit > Save API Integration

Turn on and style your buttons

You’re now ready to turn on and style your buttons, see the styling guide below.

Custom integration for all other eCommerce platforms

Connect it to your product feed

• To connect your feed to your cart, you’ll need to add the Product ID field that your website’s add to cart is using to map to your preezie database attributes. This is the join between the results and your website’s cart. Please get in touch with support@preezie.com to help you with the steps below

  • In https://doorman.preezie.com/home/importer/product-fields choose your Product database

  • Click Create New Field

    • Name: prz_addToCartId

    • Type: String

    • Feed Path: (this needs to match your feed’s cart product id, e.g. id)

    • Hit Save

• Now you have added a new product field you need to re-run your feed (or wait for it to run automatically) for each product to propagate the Product ID value into prz_addToCartId

• To do it manually: Go to https://admin.preezie.com/app/products/feeds find your feed, hit Run

  • Once the feed has Success status, go to https://admin.preezie.com/app/products/products and find any product to check the new field is present, for example:

Turn on the feature

• Turn on the feature in your CMS admin > Settings > Tenant settings
  Get in touch with support@preezie.com if you need help with this

  • In the admin tab select Custom then Active

  • If you require it then you can add an optional Redirect to your cart page after the shopper clicks add to cart (in a new tab)

  • Hit > Save API Integration

Add your custom code

Now the feature is on, each time the add to cart button is clicked a preezie custom event przAddToCartEvent will fire. You then need to place this script on your pages with your own custom add to cart events that your platform uses.

The event param requires 2 variables to be passed,

• id: the exact product variant id that will be added to the cart, note this needs to match the id passed to prz_addToCartId as above

• quantity: the quantity that is being passed, i.e. 1

const przAddToCartEventInterval = setInterval(() => {
  const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
  if (przWidget) {
    clearInterval(przAddToCartEventInterval)
    przWidget.addEventListener('przAddToCartEvent', (event) => {
      // !!!!!!!!!!!!IMPORTANT!!!!!!!!!
      // event: { detail: { id: '125173761', quantity: 1 } }
      // Please implement your own custom logic to handle the 'add to cart' event here
    })
  }
}, 2000)

Hence each time the add to cart button is clicked przAddToCartEvent is fired and subsequently the actions within your customised script above.

As an example, here’s a custom example of a Shopify add to cart script (note, you’d update the fetch url to your own, and you need to implement the logic to update the cart UI on your site):

<script>
  const przAddToCartEventInterval = setInterval(() => {
    const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
    if (przWidget) {
      clearInterval(przAddToCartEventInterval)
      przWidget.addEventListener('przAddToCartEvent', (event) => {
        //!!!!!!!Important!!!!!!!
        // Please note that this is an example only.
        // You will need to implement your own custom logic to handle the 'add to cart' event on your site.
        fetch('https://jurlique.com.au/cart/add.js', {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json'
          },
          redirect: 'follow',
          referrerPolicy: 'no-referrer',
          body: JSON.stringify({ items: event.detail })
        }).then((response) => {
          // Put your cart UI code here
        })
      })
    }
  }, 2000)
</script>

Turn on and style your buttons

You’re now ready to turn on and style your buttons, see the styling guide below.

Turn on and style your buttons

• Now go to the workflow where you want to show add to cart buttons > Edit

• UI Result & Behaviours > check Show Add to Cart button on results page

• Add to cart button text on result page > Type the CTA text that each button will show, e.g. Add to cart

  • Hit Save
    

    

Style your buttons

By default your buttons will be styled the same as your Learn more buttons, if you’re not using these or want to style add to cart differently then follow these steps:

• In your workflow Edit > Test Guide Widget

• Now choose RESULTS > Product result > CTA behaviour

  • Here you have various configurations to style position, design and hover states:

This means you’ll be able to match your website’s button design:

Once you hit Save! this will be immediately reflected in your widget.

For Magento customers (coming soon)

Coming soon.