{"id":13314682,"url":"https://github.com/kontent-ai/integration-commercetools","last_synced_at":"2025-05-03T07:31:31.838Z","repository":{"id":40908080,"uuid":"232384640","full_name":"kontent-ai/integration-commercetools","owner":"kontent-ai","description":"Custom element for Kontent.ai to allow selection of commercetools products","archived":false,"fork":false,"pushed_at":"2023-08-30T06:36:03.000Z","size":3142,"stargazers_count":4,"open_issues_count":4,"forks_count":5,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-04-07T13:11:14.920Z","etag":null,"topics":["hacktoberfest","kontent-ai","kontent-ai-integration"],"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":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-01-07T18:00:59.000Z","updated_at":"2024-05-02T20:39:20.000Z","dependencies_parsed_at":"2023-02-08T18:46:03.550Z","dependency_job_id":null,"html_url":"https://github.com/kontent-ai/integration-commercetools","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ChristopherJennings/kontent-custom-element-vue-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-commercetools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-commercetools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-commercetools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-commercetools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kontent-ai","download_url":"https://codeload.github.com/kontent-ai/integration-commercetools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252156920,"owners_count":21703375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hacktoberfest","kontent-ai","kontent-ai-integration"],"created_at":"2024-07-29T18:11:53.397Z","updated_at":"2025-05-03T07:31:26.830Z","avatar_url":"https://github.com/kontent-ai.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Core integration][core-shield]](https://kontent.ai/integrations/commercetools)\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=\"300\"\u003e\n\u003c/picture\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs/logo_no_claim_commercetools_RGB_horizontal_color-on-dark.svg\"\u003e\n  \u003cimg alt=\"Commercetool logo for dark/light scheme.\" src=\"docs/logo_no_claim_commercetools_RGB_horizontal_color-on-white.svg\" width=\"300\"\u003e\n\u003c/picture\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=\"#configuring-the-custom-element\"\u003eConfiguration\u003c/a\u003e •\n  \u003ca href=\"#what-is-saved\"\u003eSaved value\u003c/a\u003e •\n  \u003ca href=\"#developing\"\u003eDeveloping\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 [custom element](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions/) extension for [Kontent.ai](https://kontent.ai) allows users to search and link selected products from [commercetools](https://commercetools.com) into their structured content.\n\n## Features\n\n- Editors can\n  - Search for products in the commercetools project in all languages\n  - Select a single product (or one of its variants)\n  - Select multiple products (or their variants)\n\nThe element also offers an optional debug panel for diagnostics.\n\n## Demo\n\n![Demo Animation][product-demo]\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-commercetools)\n\n## Commercetools setup\n\nIn order to use this custom element extension with your commercetools account, you'll need to set up the integration in your [Merchant Center](https://mc.commercetools.com/).\n\n### Adding a new API client\n\n- The custom element will be connecting to your commercetools account and searching for products to include into your Kontent.ai content item element. In order to set up this communication, a new API client has to be created under **Settings** -\u003e **Developer settings** -\u003e **Create new API client**.\n\n![Add new Api client](docs/commercetools-setup-1.png)\n\n- Next, a dialog for your Kontent.ai API client will be opened. Fill out the **Name** input field and under **Scopes** select **Products(all)** and **Project Settings** under the **View** category. This will give the extension read-only access to your product list, so it can be searched through while linking products to your content in Kontent.ai.\n- After your scopes and client name has been put in, click the **Create API client** button in the top right of the screen.\n\n![Create new Api client](docs/commercetools-setup-2.png)\n\n- All the important information you'll need to set up the custom element will be right in front of you.\n\n![Api client settings](docs/commercetools-setup-3.png)\n\n- Copy all the generated credentials as these will be needed for the custom element setup that takes place inside the Kontent.ai application. The [following section](#configuring-the-custom-element) describes each of the generated settings and shows you, how to create the final configuration object for your element.\n\n\u003e **⚠ WARNING: You won't be able to access the credentials screen once you close it.**\n\u003e Be sure to copy and place all the generated credentials into your custom element configuration, otherwise, you'll be forced to re-create the API client.\n\n![Created Api client](docs/commercetools-setup-4.png)\n\n- Once you configure your custom element with the generated credentials, you can close the credentials window and confirm, that your API client has been successfully created.\n\n## Configuring the Custom Element\n\nYou will need to add the custom element to a content type filling in the hosted code URL and the following JSON parameters:\n\n| Name                         | Type    | Description                                                                                                                                                                                                                                                                                                                                                                    |\n| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| isMultiSelect                | boolean | If set to true, it will be possible to select multiple products. If set to false, it will be possible to only select a single product                                                                                                                                                                                                                                          |\n| commercetools                | object  | This contains all the details required to connect to the [commercetools API](https://docs.commercetools.com/http-api). The values for this object will be derived from an API client that you configure in commercetools with the exception of the `defaultCulture`. When generating the API client, be sure to select the `view_products` and `view_project_settings` scopes. |\n| commercetools.defaultCulture | string  | Set this to the IETF language tag of the language in commercetools to use by default for search.                                                                                                                                                                                                                                                                               |\n| commercetools.projectKey     | string  | This is the commercetools project key.                                                                                                                                                                                                                                                                                                                                         |\n| commercetools.clientId       | string  | This is the commercetools API client ID.                                                                                                                                                                                                                                                                                                                                       |\n| commercetools.secret         | string  | This is the commercetools API client secret.                                                                                                                                                                                                                                                                                                                                   |\n| commercetools.oauthUrl       | string  | This is the base URL to use for authenticating with commercetools.                                                                                                                                                                                                                                                                                                             |\n| commercetools.apiUrl         | string  | This is the base URL to use for commercetools API calls.                                                                                                                                                                                                                                                                                                                       |\n| commercetools.scope          | string  | This is the list of scopes that the client has. This should include the `view_products` and `view_project_settings` scopes.                                                                                                                                                                                                                                                    |\n\nSample parameters JSON:\n\n```json\n{\n  \"isMultiSelect\": true,\n  \"commercetools\": {\n    \"defaultCulture\": \"en\",\n    \"projectKey\": \"your-project\",\n    \"clientId\": \"your-client-id\",\n    \"secret\": \"your-client-secret\",\n    \"oauthUrl\": \"https://auth.sphere.io\",\n    \"apiUrl\": \"https://api.sphere.io\",\n    \"scope\": \"view_products:your-project view_project_settings:your-project\"\n  }\n}\n```\n\n## What is Saved\n\nThe custom element will store the selected product's information in the following format:\n\n```json\n[{\n  \"id\": \"\u003cGUID_OF_PRODUCT\u003e\",\n  \"variantId\": \"\u003cVariant_ID\u003e\",\n  \"culture\": \"\u003cIETF_LANGUAGE_TAG\u003e\"\n}]\n```\n\nThis value will be accessible though the [Kontent.ai Delivery API](https://kontent.ai/learn/reference/delivery-api) once the content item, containing the custom element, will be saved (through preview), or published (production).\n\n## Developing\n\n```bash\n# Initial project setup\n$ npm install\n\n# Compile and minify for production\n$ npm run build\n\n# Compile and run on local server\n$ npm start\n```\n\nThe custom element is created with [Create React App](https://create-react-app.dev/).\n\n## Contributors\n\nWe have collected notes on how to contribute to this project in [CONTRIBUTING.md](CONTRIBUTING.md).\n\n\u003ca href=\"https://github.com/kontent-ai/integration-commercetools/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=kontent-ai/integration-commercetools\" /\u003e\n\u003c/a\u003e\n\n## License\n\n[MIT](https://tldrlegal.com/license/mit-license)\n\n## Additional Resources\n\n- [Kontent.ai 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-commercetools?style=for-the-badge\n[contributors-shield]: https://img.shields.io/github/contributors/kontent-ai/integration-commercetools.svg?style=for-the-badge\n[contributors-url]: https://github.com/kontent-ai/integration-commercetools/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/kontent-ai/integration-commercetools.svg?style=for-the-badge\n[forks-url]: https://github.com/kontent-ai/integration-commercetools/network/members\n[issues-shield]: https://img.shields.io/github/issues/kontent-ai/integration-commercetools.svg?style=for-the-badge\n[issues-url]: https://github.com/kontent-ai/integration-commercetools/issues\n[license-shield]: https://img.shields.io/github/license/kontent-ai/integration-commercetools.svg?style=for-the-badge\n[license-url]: https://github.com/kontent-ai/integration-commercetools/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/commercetools-demo.gif?raw=true\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-commercetools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkontent-ai%2Fintegration-commercetools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-commercetools/lists"}