Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial BigCommerce #27

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 27 additions & 60 deletions docs/3-integration-with-ecom/01-introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,64 +2,40 @@
sidebar_position: 1
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# 3.1. Introduction

## What's this module about?

This module is designed to improve knowledge of modern technologies MACH (Microservices, API-first, Cloud-native, and Headless), focusing on Commercetools, a leading platform in the industry.
This offers a hands-on approach to integrating Commercetools with applications, enriching understanding and capabilities in crafting scalable and flexible e-commerce solutions.
This module is designed to improve knowledge of modern technologies MACH (Microservices, API-first, Cloud-native, and Headless), focusing on commerce provider, a leading platform in the industry.
This offers a hands-on approach to integrating commerce provider with applications, enriching understanding and capabilities in crafting scalable and flexible e-commerce solutions.

By the end of this module, you will have acquired the skills and knowledge necessary to utilize Commercetools to build e-commerce solutions. This includes a thorough understanding of product modeling, API integration, and the implementation of scalable architectures in modern e-commerce platforms.
By the end of this module, you will have acquired the skills and knowledge necessary to utilize commerce solution provider to build e-commerce solutions. This includes a thorough understanding of product modeling, API integration, and the implementation of scalable architectures in modern e-commerce platforms.

## What you will do?
Undertake practical tasks to set up and integrate Commercetools with an existing application.
Undertake practical tasks to set up and integrate commerce provider with an existing application.

- **Initial setup with Commercetools**
- **Initial setup with commerce provider**
This includes creating an account, initializing a project with sample data for a hands-on experience, and generating an API client. Generate an API client for the authentication process

- **Migration and implementation**
Migration of products from Magento to Commercetools. Services implementation that connect with Commercetools and integrate with UI.

## Commercetools

**[Commercetools](https://commercetools.com/)** company vision is to provide the products that growing and innovative companies need to build outstanding and scalable commerce experiences. They give customers a portfolio of commerce technologies at a fraction of the costs compared to building that in-house.
Commercetools was made with a strong focus on MACH principles, especially the "API-First" idea. This means all its features are built to be easily accessible through APIs. Plus, because it's a SaaS (Software as a Service) solution, it was created to work seamlessly with cloud technology right from the start.

Understanding Commercetools starts with grasping its foundation on MACH principles, emphasizing flexibility, speed, and a broad toolkit for developers. With a plethora of resources like GitHub repositories for SDKs, Postman Collections for API testing, comprehensive documentation, a Merchant Center for project management, and an Integration Marketplace, Commercetools sets the stage for robust, scalable e-commerce platforms. The platform's approach to product modeling, crucial for e-commerce success, showcases its emphasis on a detailed, customizable setup to cater to specific business needs.

### API and touchpoints

![api.png](assets/api.png)

Commercetools offers various tools for developers to easily learn and start using the platform.

<Tabs>
<TabItem value="Github" label="Github" default>
**[Github](https://github.com/commercetools)** this is where you can find the source code for different Software Development Kits (SDKs) and examples. A tip: you can look in the test folder for examples of how to use different classes and functions, thanks to thorough testing.
</TabItem>
<TabItem value="postman-collections" label="Postman collections">
**[Postman Collections](https://github.com/commercetools/commercetools-postman-collection)** Commercetools provides ready-made sets of requests for their different APIs. These collections cover a wide range of possible requests you might make through the Composable Commerce API.
</TabItem>
<TabItem value="Documentation" label="Documentation">
**[Documentation](https://docs.commercetools.com/api/)** this is a go-to resource for any developer working with Commercetools. It's where you'll find detailed information on how to use the platform effectively.
</TabItem>
<TabItem value="Merchant" label="Merchant Center">
**[Merchant Center](https://mc.commercetools.com/)** this is a special application that helps you manage all aspects of your project within Commercetools.
</TabItem>
<TabItem value="Marketplace" label="Integration Marketplace">
**[Integration Marketplace](https://marketplace.commercetools.com/)** here, you'll find a range of different tools and integrations that can help speed up the process of connecting with other systems. This can be a real time-saver.
</TabItem>
<TabItem value="Playground" label="Playground">
**[Playground](https://impex.commercetools.com)** where you could easily test APIs, and import/export data.
</TabItem>
</Tabs>
Migration of products from Magento to commerce provider (**[Commercetools](https://commercetools.com/)** or **[BigCommerce](https://www.bigcommerce.com/)**). Services implementation that connect with commerce provider and integrate with UI.

### How to model?

![product-modeling-example.png](assets/product-modeling-example.png)

1. The first option suggests using one `Generic Product Type` for all variants and both `Siz`e and `Color` as attributes.
2. The second option recommends having a `Product Type` for each `Color`, and `Size` as an attribute.
3. The third option advises having a `Product Type` for each `Size`, and `Color` as an attribute.
4. The fourth option proposes having separate product types for each combination of color and size.

When defining the product data model, you should consider factors like the number of products, variants per product, update actions per product, how products will be displayed on the PLP, potential response size, bundling of products, publishing workflow, maintainability as the catalog grow, and the integration of data from the PIM system. This step is crucial and will impact nearly every aspect of the e-commerce business.

![impact-product-model.png](assets/impact-product-model.png)

### Basics of product modelling

There are a few basic definitions that will explain the basics of product modelling in Commercetools and in e-commerce in general.
There are a few basic definitions that will explain the basics of product modelling in e-commerce in general.

`Product Type`: Think of this as a class in Object-Oriented Programming (OOP).
It contains the essential properties your product. In the image below, for instance, the Product Type is identified as `Clothing`, which contains two additional attributes: `Color` and `Size`.
Expand All @@ -72,30 +48,21 @@ In e-commerce, the concept of master and variant products is crucial for managin

Product Variants are essentially different versions of a product that share some common attributes. In our example we are selling a t-shirt, the variants include different sizes (small, medium, large) and colors (red, blue, purple). Each variant has its own unique **`SKU`**, which is necessary for inventory management, for instance.

Product end-point holds all the common information about the product. It typically contains details like the product name, description, images, and any attributes that are common across all variants (like brand name, material, etc.). In Commercetools product must contain at least one Product Variant.
Product end-point holds all the common information about the product. It typically contains details like the product name, description, images, and any attributes that are common across all variants (like brand name, material, etc.).

:::info
- **`SKU`** stands for Stock Keeping Unit. It is a unique code or identifier assigned to each product in a retailer's inventory. This code is used to track and manage the product in the supply chain.
:::
In Commercetools product must contain at least one Product Variant.
:::

### How to model?

![product-modeling-example.png](assets/product-modeling-example.png)

1. The first option suggests using one `Generic Product Type` for all variants and both `Siz`e and `Color` as attributes.
2. The second option recommends having a `Product Type` for each `Color`, and `Size` as an attribute.
3. The third option advises having a `Product Type` for each `Size`, and `Color` as an attribute.
4. The fourth option proposes having separate product types for each combination of color and size.

When defining the product data model, you should consider factors like the number of products, variants per product, update actions per product, how products will be displayed on the PLP, potential response size, bundling of products, publishing workflow, maintainability as the catalog grow, and the integration of data from the PIM system. This step is crucial and will impact nearly every aspect of the e-commerce business.

![impact-product-model.png](assets/impact-product-model.png)
:::info
- **`SKU`** stands for Stock Keeping Unit. It is a unique code or identifier assigned to each product in a retailer's inventory. This code is used to track and manage the product in the supply chain.
:::

## Prerequisites

Before you proceed to Module 3, ensure that you have fulfilled the following conditions

- Completed **[Module 1: Project setup](/docs/1-basic-magento-store/01-introduction.md)**
- Completed **[Module 1: Project setup](/docs/1-basic-magento-store/01-introduction.md)**
- Completed **[Module 2: Implement BFF](/docs/2-BFF/01-introduction.md)**


Expand Down
6 changes: 3 additions & 3 deletions docs/3-integration-with-ecom/02-dod-for-practical-tasks.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ sidebar_position: 2

Before module as completed, it's crucial to ensure that several key criteria have been met. This collective set of conditions ensures that the necessary infrastructure is in place, you are acquainted with essential functionalities, and the project's primary components are configured as required.

1. Commercetools created and initiated:
1. Commerce platform created and initiated:
- API credentials (client_id and client_secret) are generated and validated.

2. Your task is to migrate your BFF solution(**[Module 2: BFF](/docs/2-BFF-and-new-frontend/01-introduction.md)**) to commercetools.
2. Your task is to migrate your BFF solution(**[Module 2: BFF](/docs/2-BFF-and-new-frontend/01-introduction.md)**) to commerce platform.

- The solution should be designed in a way that it can switch between Magento and Commercetools.
- The solution should be designed in a way that it can switch between Magento and commerce platform.
This means that the solution should be platform-agnostic and should not have any hard dependencies on a specific platform.
The switching can be done through configuration changes. This will allow the solution to be flexible and adaptable to different platforms.
- This approach ensures that components such as:
Expand Down
4 changes: 2 additions & 2 deletions docs/3-integration-with-ecom/_category_.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"label": "Module 3 - Integration with e-Commerce Engine Commercetools",
"label": "Module 3 - Integration with e-Commerce Engine",
"position": 4,
"link": {
"type": "generated-index",
"description": "Integration with e-Commerce Engine Commercetools"
"description": "Integration with e-Commerce Engine"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# 3.4.1 BigCommerce Introduction

**[BigCommerce](https://www.bigcommerce.com/)** aims to provide innovative and scalable commerce solutions for growing businesses. With BigCommerce, companies can access a comprehensive suite of e-commerce technologies at a fraction of the cost of building them in-house. BigCommerce is designed with a strong focus on modern e-commerce principles, particularly the "API-First" approach. This means all its features are accessible through APIs, ensuring seamless integration with various platforms and technologies. As a SaaS (Software as a Service) solution, BigCommerce is optimized for cloud environments, offering flexibility and reliability.

Understanding BigCommerce involves recognizing its commitment to flexibility, speed, and an extensive toolkit for developers. The platform provides numerous resources, including GitHub repositories for SDKs, Postman Collections for API testing, comprehensive documentation, a Merchant Center for project management, and an Integration Marketplace. BigCommerce sets the stage for creating robust, scalable e-commerce platforms with a detailed, customizable setup to meet specific business needs.

### API and Touchpoints

BigCommerce offers various tools for developers to quickly learn and start using the platform.

<Tabs>
<TabItem value="Github" label="Github" default>
**[GitHub](https://github.com/bigcommerce)** is where you can find the source code for different Software Development Kits (SDKs) and examples. Tip: check the test folder for examples of using different classes and functions, thanks to thorough testing.
</TabItem>
<TabItem value="API-collections" label="API Collections">
**[API Collections](https://developer.bigcommerce.com/docs/rest-management)** BigCommerce provides ready-made sets of requests for their various APIs. These collections cover a wide range of potential requests you might make through the BigCommerce API.
</TabItem>
<TabItem value="Documentation" label="Documentation">
**[Documentation](https://developer.bigcommerce.com/api-docs)** is the go-to resource for any developer working with BigCommerce. Here, you'll find detailed information on how to effectively use the platform.
</TabItem>
<TabItem value="Merchant" label="Merchant Center">
**[Merchant Center](https://login.bigcommerce.com/)** is a specialized application that helps you manage all aspects of your project within BigCommerce.
</TabItem>
<TabItem value="Marketplace" label="Integration Marketplace">
**[Integration Marketplace](https://www.bigcommerce.com/apps/)** is where you'll find a variety of tools and integrations that can help speed up the process of connecting with other systems, saving valuable time.
</TabItem>
<TabItem value="Playground" label="Playground">
**[GraphQL Playground](https://developer.bigcommerce.com/graphql-storefront/playground)** is a place where you can easily test APIs, and import/export data.
</TabItem>
</Tabs>

Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
sidebar_position: 3
---

import BigCommerceInit from '../assets/bigcommerce-initiate.png';
import BigCommerceAPI from '../assets/bigcommerce-api.png';

# 3.4.2 Practical Task - BigCommerce Initial Setup

## What is this task about

This task focuses on setting up and configuring a BigCommerce project effectively. It involves ensuring access to the project, verifying the visibility and structure of sample data, obtaining and authenticating API requests using client credentials, and activating and configuring search functionality within BigCommerce.

## What should be done

1. Ensure the BigCommerce project is accessible and that sample data (such as predefined categories and products) is visible and correctly structured within the project.
2. Ensure that the `client_id` and `client_secret` are correctly retrieved and are able to authenticate API requests effectively.
3. Obtain an access token using the provided credentials (client ID and secret).
4. Activate and configure search functionality within BigCommerce to use the specified endpoint.

## Task

1. Create a BigCommerce [trial account](https://www.bigcommerce.com/essentials/free-trial/).

2. Once you've created an account, you'll have the option to initiate a Sandbox Store.

<img src={BigCommerceInit} alt="Description of image" style={{
width: 600,
margin: '0 auto 20px',
display: 'block'
}} />

Every active API account has at least one `access_token`. [Store-level API accounts](https://developer.bigcommerce.com/docs/start/authentication/api-accounts#store-level-api-accounts) include a static access token that does not change. [App-level API accounts](https://developer.bigcommerce.com/docs/start/authentication/api-accounts#app-level-api-accounts) expect each application to generate a unique access token for every store that installs the app. [Account-level API accounts](https://developer.bigcommerce.com/docs/start/authentication/api-accounts#account-level-api-accounts) include a single access token that belongs to the parent account of the store that the user is signed in to at the time of creation.

3. Create API account to obtain the `client_id` and `client_secret` required for the authentication process.

<img src={BigCommerceAPI} alt="API BigCommerce API of image" style={{
width: 600,
margin: '0 auto 20px',
display: 'block'
}} />

- The `client_id` uniquely identifies the app or user, or the client, making a request.
- The `client_secret` is a cryptographically secure value known only to the client and BigCommerce.

4. **[Obtain an access token](https://developer.bigcommerce.com/api-docs/getting-started/authentication/rest-api-authentication)** from BigCommerce. Use the provided client ID and secret to get the access token.

5. Activate Search in the **Store-settings > Search** to use the endpoint `https://api.bigcommerce.com/stores/{store_hash}/v3/settings/storefront/search`.

Use [Search configuration link](https://support.bigcommerce.com/s/article/Store-Search?language=en_US#search-settings) to check search setting configuration.

By following these steps, you will successfully set up your BigCommerce project with sample data, authenticate API requests, and configure the search functionality.
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
sidebar_position: 4
---

# 3.4.3 Practical Task - Migrate Data from Magento to BigCommerce

## What is this task about

This task focuses on migrating data related to categories and products from Magento to BigCommerce seamlessly. It involves ensuring the accurate transfer of data without corruption or alteration, maintaining correct categorization, and preventing duplication of entries in BigCommerce during the migration process.

## What should be done

- All data pertaining to `Categories` and `Products` from Magento must be successfully transferred to BigCommerce.
- The data in BigCommerce should accurately reflect the source data in Magento without any corruption or alteration.
- Products must be correctly categorized under the appropriate Categories as they were in Magento.
- The migration script should not create duplicate entries for any category or product.

## Task

# **//TODO: rewrite!!!**
1. Delete existing `Categories` and `Products` in BigCommerce (otherwise, the migration script will fail).

2. Execute the script to migrate products from Magento to BigCommerce: **[Magento2-to-bigcommerce-lib](https://git.epam.com/Anton_Zhirkov/magento2-to-bigcommerce-lib)**

- Rename `.env-copy` to `.env` and fill it with your credentials.
- Run `npm install`.
- Run `npm migrate-magento-to-bigcommerce`.

By following these steps, you will ensure a smooth migration of your Magento data to BigCommerce, maintaining data integrity and correct categorization throughout the process.
Loading