Customer Profile

The customer modules provides a pre-built components that allows you to integrate customer authentication into your website with ease. This module provides login and register functionality in addition to a profile module allowing for easy updates. Tip, within Buddi you can access your customer profiles by simply navigating to the 'Customers' tab within the admin. They are your customers after all which is why we make the customer info easy to export!

Login and Register Module

This module allows a customer to login a customer or register a new one.

There are 2 ways to include this module:

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		auth: {
        		loginNodeId: '',	//ID of the <div> where the login form should be mounted to. default = 'buddi-login'
        		registerNodeId: '',	//ID of the <div> where checkout should be mounted to. default = buddi-register'
			cssFiles: [],		//default = ['css/ropis/tailwind.css']. Do not want to use our styles? Override them with your own style files. Pass an array of the needed css files which will automatically be imported by the main module. The file names must contain http:// or https:// prefix. Example: cssFiles: ['https://mysite.com/css/buddi-cart-styles.css']
      		},
    	},
    });
}

Or if you don’t mind to use the default values:

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		auth: true
}
    });
}

Profile Module

This moodule allows a customer to modify and review their profile information.

There are 2 ways to include this module:

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		profile: {
        		nodeId: '',	//ID of the <div> where the customer profile updating form should be mounted to. default = 'buddi-profile'
			cssFiles: [],		//default = ['css/ropis/tailwind.css', 'css/seo-ecommerce/modules/profile.css']. Do not want to use our styles? Override them with your own style files. Pass an array of the needed css files which will automatically be imported by the main module. The file names must contain http:// or https:// prefix. Example: cssFiles: ['https://mysite.com/css/buddi-cart-styles.css']
      		},
    	},
    });
}

Or if you don’t mind to use the default values:

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		profile: true
}
    });
}

Dynamic components rendering

Do you have a <div> with the needed ID at the moment when the needed Buddi module(let’s say cart) has just been loaded? Or do you insert the div dynamically, let's say when a customer opens a modal - you have it there, but initially the div is not in the DOM?

It doesn’t matter actually! Because the main Buddi module observes the DOM and automatically renders the needed component into the div with the needed ID once it appears in the DOM!

Ex: in your JS you dynamically build a div with id = buddi-cart-preview(default ID of the cart preview node), and then insert the div into the DOM. The main module will see it and mount the cart preview there immediately, you won’t need to do anything for it!