{"id":13314676,"url":"https://github.com/kontent-ai/integration-magento","last_synced_at":"2026-05-13T20:35:00.601Z","repository":{"id":43893550,"uuid":"176495431","full_name":"kontent-ai/integration-magento","owner":"kontent-ai","description":"Magento product selector for Kontent.ai","archived":false,"fork":false,"pushed_at":"2023-08-30T06:35:35.000Z","size":4066,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-10-29T03:41:55.902Z","etag":null,"topics":["headless-cms","javascript","kontent-ai","kontent-ai-integration","magento"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kontent-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-19T11:17:44.000Z","updated_at":"2022-10-24T11:27:32.000Z","dependencies_parsed_at":"2025-01-18T22:33:11.522Z","dependency_job_id":null,"html_url":"https://github.com/kontent-ai/integration-magento","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kontent-ai/integration-magento","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-magento","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-magento/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-magento/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-magento/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kontent-ai","download_url":"https://codeload.github.com/kontent-ai/integration-magento/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-magento/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32999515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["headless-cms","javascript","kontent-ai","kontent-ai-integration","magento"],"created_at":"2024-07-29T18:11:53.342Z","updated_at":"2026-05-13T20:35:00.586Z","avatar_url":"https://github.com/kontent-ai.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Core integration][core-shield]](https://kontent.ai/integrations/magento)\n\n![Last modified][last-commit]\n[![Issues][issues-shield]][issues-url]\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![MIT License][license-shield]][license-url]\n\n[![Stack Overflow][stack-shield]](https://stackoverflow.com/tags/kontent-ai)\n[![Discord][discord-shield]](https://discord.gg/SKCxwPtevJ)\n\n\u003cp align=\"center\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs/kai-logo-hor-neg-rgb.svg\"\u003e\n  \u003cimg alt=\"Kontent.ai logo for dark/light scheme.\" src=\"docs/kai-logo-hor-pos-rgb.svg\" width=\"290\"\u003e\n\u003c/picture\u003e\n\u003cimage src=\"docs/magento-logo.png\" alt=\"magento logo\" width=\"300\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#demo\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"#quick-deploy\"\u003eDeploy\u003c/a\u003e •\n  \u003ca href=\"#setup\"\u003eSetup\u003c/a\u003e •\n  \u003ca href=\"#what-is-saved\"\u003eSaved value\u003c/a\u003e •\n  \u003ca href=\"#contributors\"\u003eContributors\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e •\n  \u003ca href=\"#additional-resources\"\u003eResources\u003c/a\u003e\n\u003c/p\u003e\n\nThis repository contains the source code of Magento product selector custom element for Kontent.ai.\n\nIt also includes a node.js proxy function (see [Netlify functions](https://docs.netlify.com/functions/overview/)) that routes requests from the element to your Magento instance while adding required authentication.\n\n## Features\n\nThis [custom element](https://kontent.ai/learn/tutorials/develop-apps/integrate/integrating-your-own-content-editing-features) allows the user to search and link products from their [Magento e-commerce](https://magento.com/) instance into [Kontent.ai](https://kontent.ai).\n\n- Editors can\n  - Search for products in Magento commerce\n  - Select a single or multiple products (or one of its variants)\n\n## Demo\n\n![Demo Animation][product-demo]\n\n## Getting started\n\n### Quick Deploy\n\nNetlify 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.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kontent-ai/integration-magento)\n\n### Running manually\n\nYou will need to [deploy](https://docs.netlify.com/functions/deploy/?fn-language=ts) the [Netlify function](https://docs.netlify.com/functions/overview/) in the `src/functions` directory.\nOr [run it locally](https://docs.netlify.com/functions/build/#test-locally).\n\nThe integration's custom element is created with [Create React App](https://create-react-app.dev/). 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.\n\n## Setup\n\n1. ### Create a new Integration inside of your Magento Instance\n\n_If you don't have a Magento account, you can leverage the public Magento demo available at mageplaza.com._\n\n- 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.\n- Select **Integrations** from the sub-menu and create a new integration.\n- Fill out the **Integration info** as you see fit\n\n![Magento setup 01](docs/magento-admin01.jpg)\n\n- Select the **API** tab and configure the following:\n  - From the **Resource** access dropdown, select **Custom**.\n  - Select the following options: **Catalog \u003e Inventory \u003e Products**.\n\n![Magento setup 02](docs/magento-admin02.jpg)\n\n\u003e **⚠ 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.**\n\n- Choose the **Save \u0026 Activate** option from the Save button.\n- Copy the **access token** as you will need it in the next step.\n\nAt this point, the Magento Product API can be queried for products provided that the call includes the access token you just created.\n\n2. ### Netlify/server setup\n   Since you don't want to store the API secret inside the custom element config, we are using [Netlify function](https://docs.netlify.com/functions/overview/) 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](https://docs.netlify.com/configure-builds/environment-variables/). 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**.\n\n   The expected variable name for the function is `MAGENTO_TOKEN`.\n\n   How this all can be done is described in our [Kontent.ai-Netlify example repository](https://github.com/kontent-ai/netlify-webhook-processor#setup), or can be observed on the animation below (_a different API example was used in the animation_).\n\n![Netlify variable setup](docs/function_setup.gif?raw=true)\n\n3. ### Configure the Custom Element\n   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](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions).\n\n   The custom element has to be also configured. The supported configuration values are as follows:\n\n```\n{\n    \"storeUrl\": \"\u003cYOUR MAGENTO DOMAIN\u003e\",\n    \"urlKeyAttribute\": \"url_key\",\n    \"isMultiSelect\": false,\n}\n```\n\nNote that **urlKeyAttribute** and **isMultiSelect** are optional, if not provided, they will be automatically generated with the value shown above.\n\n_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._\n\n## What is Saved\n\nThe element will contain a json array with objects describing your selected Magento products. See example below:\n\n```\n[\n  {\n    \"id\": 37,\n    \"title\": \"Endurance Watch\",\n    \"previewUrl\": \"https://my-store/pub/media/catalog/product/37.jpg\",\n    \"sku\": \"37-MG01\",\n    \"urlKey\": \"endurance-watch\"\n  }\n]\n```\n\n## Contributors\n\n\u003ca href=\"https://github.com/kontent-ai/integration-magento/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=kontent-ai/integration-magento\" /\u003e\n\u003c/a\u003e\n\nWe have collected notes on how to contribute to this project in [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\n[MIT](https://tldrlegal.com/license/mit-license)\n\n## Additional Resources\n\n- [Kontent.ai's Integration documentation](https://kontent.ai/learn/tutorials/develop-apps/integrate/integrations-overview)\n- [Custom Element documentation](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions)\n- [Custom Element API reference](https://kontent.ai/learn/reference/custom-elements-js-api)\n\n[last-commit]: https://img.shields.io/github/last-commit/kontent-ai/integration-magento?style=for-the-badge\n[contributors-shield]: https://img.shields.io/github/contributors/kontent-ai/integration-magento.svg?style=for-the-badge\n[contributors-url]: https://github.com/kontent-ai/integration-magento/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/kontent-ai/integration-magento.svg?style=for-the-badge\n[forks-url]: https://github.com/kontent-ai/integration-magento/network/members\n[stars-shield]: https://img.shields.io/github/stars/kontent-ai/integration-magento.svg?style=for-the-badge\n[stars-url]: https://github.com/kontent-ai/integration-magento/stargazers\n[issues-shield]: https://img.shields.io/github/issues/kontent-ai/integration-magento.svg?style=for-the-badge\n[issues-url]: https://github.com/kontent-ai/integration-magento/issues\n[license-shield]: https://img.shields.io/github/license/kontent-ai/integration-magento.svg?style=for-the-badge\n[license-url]: https://github.com/kontent-ai/integration-magento/blob/master/LICENSE\n[core-shield]: https://img.shields.io/static/v1?label=\u0026message=core%20integration\u0026color=FF5733\u0026style=for-the-badge\n[stack-shield]: https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow\u0026logoColor=white\u0026style=for-the-badge\n[discord-shield]: https://img.shields.io/discord/821885171984891914?label=Discord\u0026logo=Discord\u0026logoColor=white\u0026style=for-the-badge\n[product-demo]: docs/demo.gif?raw=true\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-magento","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkontent-ai%2Fintegration-magento","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-magento/lists"}