Source code

This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

The Affiliates app enables your store to operate under a partner structure. The app creates affiliate stores that have an access page and a URL parameter for them to share with their clients. When something is purchased, a commission is generated for the client's purchase. The app also adds configuration and management pages for the store owner and affiliates.

Example of an affiliate page

This is the main page that the affiliate will share with their clients. It's a page that can be customized to show some products and guide the customer.

Example of the affiliate profile page

This is the page where the affiliate can view the orders associated with their account, with a totalizer and dashboard for a better experience.

Example of the affiliate form

This page contains a form that can be filled out by anyone who wants to become an affiliate

1. Search for the Affiliate app on our app store and install it on your account.
2. Open your store's Store Theme app directory in your code editor.
3. Add the Affiliates app to your theme's manifest.json file inside peerDependencies as shown below:

The Affiliates app can export several theme blocks when added as a dependency. There are some responsible for creating several pages on the storefront, like affiliate, affiliate-profile, and affiliate-form, and several functionality blocks that will be used within these pages' context as well. We will show more about them in the advanced section.

3. After installing the app, the main pages will be available with a default layout. You can access them by /affiliates/:slug and /affiliates/profile/:slug.
4. If you want your affiliates to have the possibility to send any URL of the site for the client, you will have to add the affiliate-url-monitoring block into the header of your theme, as shown below:

_The affiliate_url_monitoring app adds a logic that will seek a specific parameter on the URL. If the parameter is found with a valid affiliate slug as its value, it will add the affiliate information to the purchase.

5. Now your affiliate can send any URL with the parameter targeting with their slug as value, which will add the affiliate information to be linked to the purchase

Example URL	Behavior
https://mystore.com/product/p	Just a simple product URL
https://mystore.com/product/p?targeting=affiliateName	URL with the parameter, will link this client to the affiliate

6. If you want to change the parameter that will be used for the affiliate to share, you can edit the parameter property from the Affiliate Monitoring block inside the Site Editor.
   

   After the affiliate sends their URL for the client, their Affiliate ID will be linked to this client for some time and will be prioritized even if another Affiliate sends a URL to the same client. The Affiliate ID usually persists for 60 days.

According to the Affiliate app composition, the /affiliates/:slug page can be highly customizable using other blocks. Currently, its default implementation is as follows:

store.affiliates interface for the route /affiliates/:slug, store.affiliates-profile for the route affiliates/profile/:slug, and store.affiliate-form for the route affiliate/form.

store.affiliates

store.affiliates-profile

store.affiliate-form

By "default implementation," we mean that when you install the Affiliate app in your store, you're actually using the jsons above behind the scenes to build the new pages.

Therefore, in order to customize these pages, you should:

1. Create a affiliates.jsonc, affiliates-profile.jsonc, or affiliates-form.jsonc file under store/blocks.
2. Copy the code above, paste it into the new file, and change it as you wish.
3. Deploy your changes.

There a two specific component types with props that must be configured to work properly.

affiliate-validator and affiliate-profile-validator props

Prop name	Type	Description	Default value
valid	string	Set the block name that will be rendered if the affiliate is valid	affiliate-template
invalid	string	Set the block name that will be rendered if the affiliate is invalid	affiliate-invalid-template

affiliate_url_monitoring props

Prop name	Type	Description	Default value
parameter	string	Parameter name that will be used to validate the URL the affiliate shared	targeting

For the export function to work properly and be able to send the exported sheets to the user via email, it is needed to create two new templates on the message center, based on the examples below:

Affiliate Orders Export Template

Commissions By Sku Export Template

In order to apply CSS customizations to this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
affiliateStoreName
affiliateProfileTitle
profileButtonContainer

https://www.notion.so/vtexhandbook/Errors-that-the-affiliate-app-may-present-128f8223cee9800a93e7f9a32ea99fba?pvs=4