Features • Demo • Deploy • Setup • Saved value • Contributors • License • Resources
This repository contains the source code of Magento product selector custom element for Kontent.ai.
It also includes a node.js proxy function (see Netlify functions) that routes requests from the element to your Magento instance while adding required authentication.
This custom element allows the user to search and link products from their Magento e-commerce instance into Kontent.ai.
- Editors can
- Search for products in Magento commerce
- Select a single or multiple products (or one of its variants)
Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your account as well.
You will need to deploy the Netlify function in the src/functions directory.
Or run it locally.
The integration's custom element is created with Create React App. First you will need to install npm dependencies with npm install. Then use npm run build to build the integration or npm run start to start a local development server. See https://create-react-app.dev/docs/available-scripts for more scripts.
If you don't have a Magento account, you can leverage the public Magento demo available at mageplaza.com.
- Navigate to the Magento admin and select System from the main menu. Our custom product selector will run outside of Magento so you need to register it as an integration.
- Select Integrations from the sub-menu and create a new integration.
- Fill out the Integration info as you see fit
- Select the API tab and configure the following:
- From the Resource access dropdown, select Custom.
- Select the following options: Catalog > Inventory > Products.
⚠ WARNING: The extension does not require any special permissions but to read your product data. Keep in mind it is always better to keep the necessary permissions to a minimum for security reasons.
- Choose the Save & Activate option from the Save button.
- Copy the access token as you will need it in the next step.
At this point, the Magento Product API can be queried for products provided that the call includes the access token you just created.
-
Since you don't want to store the API secret inside the custom element config, we are using Netlify function to act as a proxy between your custom element and the Magento Product API. In order to make the function work, you'll need to provide it with the Secret you obtained in the previous step. For that, we'll use Netlify's Build environment variable. The only issue with these variables are that they are being loaded on build, so whenever you change the variables, you'll need to manually trigger a rebuild.
The expected variable name for the function is
MAGENTO_TOKEN.How this all can be done is described in our Kontent.ai-Netlify example repository, or can be observed on the animation below (a different API example was used in the animation).
-
After your function is setup, you'll need to create and configure your Magento custom element. The process of adding a custom element into your project is described in Kontent.ai's official documentation.
The custom element has to be also configured. The supported configuration values are as follows:
{
"storeUrl": "<YOUR MAGENTO DOMAIN>",
"urlKeyAttribute": "url_key",
"isMultiSelect": false,
}
Note that urlKeyAttribute and isMultiSelect are optional, if not provided, they will be automatically generated with the value shown above.
The url of the Netlify function should be equal to your custom element's Hosted URL with /.netlify/functions/magento-client added to it (if you are using the provided quick deploy). If not, you'll have to update the code of the custom element.
The element will contain a json array with objects describing your selected Magento products. See example below:
[
{
"id": 37,
"title": "Endurance Watch",
"previewUrl": "https://my-store/pub/media/catalog/product/37.jpg",
"sku": "37-MG01",
"urlKey": "endurance-watch"
}
]
We have collected notes on how to contribute to this project in CONTRIBUTING.md.