Page Comparison

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

...

• 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

  Image Removed

...

• 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

...

• 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

  Image Removed

...

• 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 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 your website requires 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)

    • 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

...

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

setTimeoutconst przAddToCartEventInterval = setInterval(() => {

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

    })

  }          

}, 2000);

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

<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://changeme.myshopify.com/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

...