Add to cart button

These examples show how you can create an "add to cart" button for each product in the search results.
If you have multiple variants of one product, you would need to update the script to select correct variant.

Important note: to add custom styling to the button, you will need to use Custom CSS feature in the Merchant Dashboard

Generic integration

window.findifyApiRegistry = [{
    hook: "search.item",
    didMount: function(apiData) {
        var node = apiData.node;
        var data = apiData.data;
        var buttonNode, button;

        if (node && data.availability) {
          button = document.createElement('button');

          button.setAttribute('data-add-to-cart', data.id);
          button.setAttribute('data-findify-type', 'add-to-cart-product');
          button.setAttribute('data-findify-id', data.id);
          //adding custom classes
          button.setAttribute('class', 'YOUR_CUSTOM_CLASSES');

          //change button value
          button.innerHTML = "Add to cart";

          button.addEventListener('click', function(e) {
            e.preventDefault();

            // send events to our analytics system
            data.trackEvent('add-to-cart', { item_id: data.id, quantity: 1 }).then(function() {
              return data.trackEvent('click-item', { item_id: data.id });
            });
            // BIND TO YOUR ADD TO CART FUNCTION
          });
          if (node.children && node.children.length > 0) {
            node.children[0].appendChild(button);
          } else {
            node.appendChild(button);
          }            
        }
    }
}];

BigCommerce integration

window.findifyApiRegistry = [{
  hook: "search.item",
  didMount: function(apiData) {
    var node = apiData.node;
    var data = apiData.data;
      var buttonNode, button;

      if (node && data.availability) {
        button = document.createElement('button');

        button.setAttribute('data-add-to-cart', data.id);
        button.setAttribute('data-findify-type','add-to-cart-product');
        button.setAttribute('data-findify-id', data.id);
        //adding custom classes
        button.setAttribute('class', 'YOUR_CUSTOM_CLASSES');

        //change button value
        button.innerHTML = "Add to cart";

        button.addEventListener('click', function(e) {                
          e.preventDefault();

          // send events to our analytics system
          data.trackEvent('add-to-cart', { item_id: data.id, quantity: 1 }).then(function() {
            return data.trackEvent('click-item', { item_id: data.id });
          });
            window.location.href = "/cart.php?action=add&product_id=" + data.id;
        });
        if (node.children && node.children.length > 0){
          node.children[0].appendChild(button);
        } else {
          node.appendChild(button);
        }  
      }
  }
}];

Shopify integration

window.findifyApiRegistry = [{
    hook: "*.item",
    didMount: function(apiData) {
        function createHideForm(form) {
            var hideFormsContainer = document.querySelector("#hide-add-to-cart-container");
            if (!hideFormsContainer) {
                hideFormsContainer = document.createElement("div");
                hideFormsContainer.setAttribute("id", "hide-add-to-cart-container");
                document.body.appendChild(hideFormsContainer);
            }
            var hideForm = form.cloneNode(true);
            hideFormsContainer.appendChild(hideForm);
            return hideForm;
        }

        var node = apiData.node;
        var data = apiData.data;
        var formNode, button;

        if (node && data.availability) {
          formNode = document.createElement('form');
          formNode.setAttribute("method", "POST");
          formNode.setAttribute("action", "/cart/add");
          formNode.setAttribute("data-add-to-cart", data.id);
          formNode.setAttribute('data-findify-type', 'add-to-cart-product');
          formNode.setAttribute('data-findify-id', data.id);
          //ADD CUSTOM CLASSES TO THE FORM
          formNode.setAttribute('class', 'YOUR_CUSTOM_CLASSES');

          var quantity = document.createElement('input');
          quantity.setAttribute("type", "hidden");
          quantity.setAttribute("name", "quantity");
          quantity.setAttribute("value", "1");
          formNode.appendChild(quantity);

          var productID = document.createElement('input');
          productID.setAttribute("type", "hidden");
          productID.setAttribute("name", "id");

          if (data.variants_ids.length === 1) {
            productID.setAttribute("value", data.variants_ids[0]);
          } else {
            //SET CORRECT VARIANT ID IF THERE ARE MULTIPLE
          }

          formNode.appendChild(productID);

          var hideForm = createHideForm(formNode);

          var submitButton = document.createElement('input');
          submitButton.setAttribute("type", "submit");
          submitButton.setAttribute("value", "Add to cart");

          submitButton.addEventListener('click', function(e) {
            e.preventDefault();

            // send events to our analytics system
            data.trackEvent('add-to-cart', { item_id: data.id, quantity: 1 }).then(function() {
              return data.trackEvent('click-item', { item_id: data.id });
            });
              hideForm.submit();
          });

          formNode.appendChild(submitButton);

          if (node.children && node.children.length > 0) {
            node.children[0].appendChild(formNode);
          } else {
            node.appendChild(formNode);
          }            
        }
    }
}];

window.findifyApiRegistry = [{
    hook: "*.item",
    didMount: function(apiData) {
        var node = apiData.node;
        var data = apiData.data;
        var formNode, button;

        if (node && data.availability) {
            formNode = node.querySelector('[data-add-to-cart="' + data.id + '"]');

            if (!formNode) {
                formNode = document.createElement('form');
                formNode.setAttribute("method", "POST");
                formNode.setAttribute("action", "/cart/add");
                formNode.setAttribute("data-add-to-cart", data.id);
                formNode.setAttribute('data-findify-type', 'add-to-cart-product');
                formNode.setAttribute('data-findify-id', data.id);
                formNode.setAttribute("target", "_blank");
                //ADD CUSTOM CLASSES TO THE FORM
                formNode.setAttribute('class', 'YOUR_CUSTOM_CLASSES');

                var quantity = document.createElement('input');
                quantity.setAttribute("type", "hidden");
                quantity.setAttribute("name", "quantity");
                quantity.setAttribute("value", "1");
                formNode.appendChild(quantity);

                var productID = document.createElement('input');
                productID.setAttribute("type", "hidden");
                productID.setAttribute("name", "id");

                if (data.variants_ids.length === 1) {
                    productID.setAttribute("value", data.variants_ids[0]);
                } else {
                    //SET CORRECT VARIANT ID IF THERE ARE MULTIPLE
                }

                formNode.appendChild(productID);

                var submitButton = document.createElement('input');
                submitButton.setAttribute("type", "submit");
                submitButton.setAttribute("value", "Add to cart");

                submitButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    formNode.submit();
                });

                formNode.appendChild(submitButton);

                if (node.children && node.children.length > 0) {
                    node.children[0].appendChild(formNode);
                } else {
                    node.appendChild(formNode);
                }
            }
        }
    }
}];