npm package: @krishtechnolabs/commercetools-strapi-connector
Description: Integrate Commercetools with Strapi.
Latest version: 1.0.5

# Strapi Commercetools Connector

This package provides a custom field for [Commercetools](https://commercetools.com/) in Strapi, that allows content editors to List Products and Category through the Content-Type Builder of Strapi

## 🏖️ Features

- **List Products:** Select Products that needs to be included in the API Data.
- **Select Category:** Select the category, Category ID will be included in the API Response.
- **List Category Specific Products:** Category Specific Products can be also be displayed.

---

## 🚀 Installation

_Step 1:_ Install the Package

```
npm i @krishtechnolabs/commercetools-strapi-connector
```

_Step 2:_ Inside Strapi's `.env` file, Add the commercetools credentials in the below format

```
CT_PROJECT_KEY=<Commercetools_Project_Key>
CT_CLIENT_ID=<Commercetools_Client_Id>
CT_CLIENT_SECRET=<Commercetools_Client_Secret>
CT_SCOPE=<Commercetools_Scope>
CT_REGION=<Commercetools_Region>
CT_DEFAULT_LOCALE=en-US
CT_CDN_URL=cdn
```

_Step 3:_ Update the Strapi's `config/plugin.js` file with the below code

```
commercetools: {
    enabled: true,
  },
```

The Updated `config/plugin.js` must look like

```
export default {
  // Other Packages here...

  commercetools: {
    enabled: true,
  },
};

```

_Step 4:_ Start the Strapi App

```
yarn develop
```

---

## 🏋️ Getting Started

_Step 1:_ Log in to Starpi CMS

_Step 2:_ Head on to `Content-Type Builder`

_Step 3:_ Click on `Add another field`
![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/starpiStep1.png?alt=media "Add Another Field")

_Step 4:_ Click on `Custom`
![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/strapiStep2.png?alt=media "Click on Custom")

_Step 5:_ Here You can see the `Products` and the `Category` Components here
![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/strapiComponents.png?alt=media "Components")

_Step 6:_ For this example click on `Product grid`
![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/productSelected.png?alt=media "Product grid button")

_Step 7:_ The `Product grid` has two main options
![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/productMenuOptions.png?alt=media "Product grid button")

**_Note: For the above options to work, Please make sure you have a `Commercetools Category Component`_ present at the same level of this `Product Component`**

- _Option 1:_ Enable `Display category specific products?` if you want to display the products of any particular category.
- _Option 2:_ In the `Enter the name of category field present at the same level` Enter the `name` of the category component which is present at the same level.

## ✨ Other UIs

- ### Product Component

![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/productComponent.png?alt=media "Product grid button")

- ### Product List

![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/productList.png?alt=media "Product grid button")

- ### Selected Product List

![alt text](https://firebasestorage.googleapis.com/v0/b/marketplace-web-app.appspot.com/o/selectedProducts.png?alt=media "Product grid button")

---

#### Developed By Krish Technolabs

Developers

- Saurabh Shukla
- [Midhun Nair](https://midhunnair.dev)
- Rachit Patel
- Nishtha Acharya
- Gaurav Jethva