-
-::grid{:columns="2"}
-#section-1
-:card{to="/sdk" title="SDK" description="Connect to Middleware and bring type-safety to your Storefront" icon="ri:terminal-box-fill"}
-
-#section-2
-:card{to="/middleware" title="Middleware" description="Integrate and orchestrate all your API's" icon="fa6-solid:layer-group"}
-
-#section-3
-:card{to="https://docs.storefrontui.io" title="Storefront UI" description="Our open-source component library built for e-commerce" icon="IconStorefrontUi"}
-
-#section-4
-:card{to="https://docs.storefrontui.io" title="Cloud Platform" description="Deploy with confidence with production-grade Cloud Platform for your Alokai applications" icon="material-symbols:cloud"}
-
-#section-5
-:card{to="https://docs.storefrontui.io" title="Console" description="Deploy, monitor, analyze and manage your Alokai Application." icon="material-symbols:frame-inspect"}
-::
-
-## Unified Data Layer
-
-In the world of eCommerce, businesses often find themselves shifting between various platforms like commercetools, SAP Commerce Cloud, BigCommerce, and others.
-
-Since each platform has its own unique data structure and APIs, migrating from one platform to another can be a long and error-prone process. The Unified Data Layer can help you solve this challenge by providing standardized data structures and methods that work across multiple platforms.
-
-The Unified Data Layer helps standardize two key aspects of eCommerce applications:
-
-* **Unified Data Model** - standardized data structures for common eCommerce elements
-* **Unified Methods** - standardized API calls for eCommerce operations
-
-:card{to="/unified-data-layer" title="Unified data Layer" description="Read how Unified Data Layer can future-proof your frotnend and reduce the effort of backend system updates and migrations" icon="fluent:puzzle-cube-piece-20-filled"}
-
-## Extending Alokai
-
-Alokai is built for custom use cases. It's safe to say that with Alokai you are able to build the same things that you could build from scratch.
-
-:card{to="/general/basics/extensibility" title="Extensibility" description="Learn how Alokai can be adjusted to your needs" icon="fa6-solid:layer-group"}
-
-## Integrations
-
-Our products are integrated with leading eCommerce and MACH vendors.
-
-:card{to="/integrations" title="Integrations" description="See available integrations" icon="fluent:puzzle-cube-piece-20-filled"}
-
diff --git a/docs/content/2.general/2.starting-new-project.md b/docs/content/2.general/2.starting-new-project.md
deleted file mode 100644
index e4d751bf9d..0000000000
--- a/docs/content/2.general/2.starting-new-project.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Starting new project
-layout: default
----
-
-# Starting new project
-
-## Enterprise Integrations
-
-Most of our integrations are available as part of Alokai Enterprise offering along with Alokai Frontend as a Service Platform. You can learn more or book a demo [here](/enterprise).
-
-## Open Source user
-
-[Some of our eCommerce integrations](/integrations) are available in an Open Source model under MIT licenses. These integrations use Alokai core but are maintained by different companies.
-
-Even though we closely collaborate with their creators, we cannot provide any support for these integrations as Alokai. When seeking support please use our [Discord Channel](https://discord.alokai.com).
-
-You can find installation instructions for open-source integrations in the respective docs.
diff --git a/docs/content/2.general/3.basics/2.philosophy.md b/docs/content/2.general/3.basics/2.philosophy.md
deleted file mode 100644
index 2f99715d9a..0000000000
--- a/docs/content/2.general/3.basics/2.philosophy.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Philosophy
-
-**We know that use cases leading to eCommerce excellence are often far from standard ones which involves a lot of custom development. On the other hand delivering tailored solutions costs a lot of money, takes a lot of time and involves a lot of risk. At Alokai we want to bridge this gap by providing opinionated and flexible framework for building eCommerce Storefronts.**
-
-Building a storefront requires solving multiple domain-specific problems separately and ensuring these solutions work well together. It’s not an easy task associated with considerable risk. This is precisely what Alokai was built to help with.
-
-## Alokai is a Platform
-
-Alokai is not just one product. **We provide an ecosystem of independent developer tools** adressing challenges that you will inevitably encounter when building an eCommerce storefront, such as:
-
-::list{type="success"}
-- Building a scalable **Design System** with accessible components to keep consistency between different user interface elements.
-- Building a fast and reliable **storefront** that delivers excellent User Experience to your customers.
-- **Integrating third-party vendors** into your integration layer and storefront.
-- **Managing infrastructure, CI/CD pipelines, and deployments** to keep the application fast and reliable even under heavy loads.
-- **Implementing engineering and architecture best practices** ensures that the project remains flexible and maintainable even on a large scale.
-::
-
-We will help you with all of the above and more. Our large ecosystem of developer tools and integrations will accelerate and simplify your development process without compromising quality and flexibility.
-
-:card{to="/general/basics/architecture" title="Architecture" description="Learn about our products, ecosystem and how they implement headless best practices." icon="carbon:reference-architecture"}
-
-## Alokai is built for custom use-cases
-
-Headless and Composable architectures are meant for tailored solutions. Instead of living with trade-offs of your monolithic eCommerce vendor you're choosing more granular tools that are best-suited to your needs. This way you can work more effectvely than your competitors.
-
-The same rule applies to your storefront. This is the part of the system that your customers will interact with the most. Instead of showing them a generic storefront with mediocre performace you have a chance to stand out and deliver outstanding user experience that they'll remember.
-
-After browsing countless landing pages of WYSIWYG Page Builders developers often come to the conslusion that **available tools are too limiting** and the only way to achieve outstanding user experience is building the storefront from scratch.
-
-While this idea could sound tempting at first glance it often leads to the opposite effect. **Developers tend to oversimplify the effort and complexity of building a storefront** and the end result often costs more, takes more time to finish and the final result is far from what they hoped it to be.
-
-We've built Alokai precisely for this kind of developer. **With Alokai you are able to build the same things that you could build from scratch. You build them faster and mitigate the risk that is always high for complex projects.** Every technical decision has major impact on the future of the project and its hard to make them all right for the first time. We spent years on making mistakes so you don't have to.
-
-:card{to="/general/basics/extensibility" title="Extensibility" description="Learn about the flexibility and extensibility of Alokai." icon="fa6-solid:layer-group"}
-
-## We aim for the best Developer Experience on the market
-
-If you ever worked with enterprise-grade software you know very well that it's usually not the most "exciting"" tooling to use. Enterprise-grade software focuses on flexibility and risk mitigation but it often comes with the cost of decreased developer experience and productivity.
-
-Many of us here at Alokai, including founders worked at eCommerce agencies before. We know the pain of working with such software and we know how much developer experience influences our productivity.
-
-Our goal at Alokai is to deliver software that is as flexible and reassuring as enterprise-grade software but also as pleasing to work with, simple and versatile as modern developer tools occupying highest slots in GitHub rankings.
-
-We want to take all the repetitive groundwork from you, set solid architectural foundations for your project that will set you for success and let you focus on the custom stuff that will make your project stand out.
-
-**We want developers to say with full confidence after using our software that we deliver the best developer experience in the eCommerce market.** We know that it's an ambitious goal and we know that it's not gonna happen overnight but we will to keep improving our tools until that happens.
-
-## We believe in Open Source
-
-We believe that the best solutions are built when people with different skillsets and perspectives can collaborate together. Alokai started in 2017 as Open Source project and quickly became one of the [most popular eCommerce repositories on GitHub](https://github.com/topics/ecommerce). All of our core products are Open Source under BSD-3 license.
-
-On top of our Open Source products we offer Enterprise-grade support, infrastructure and integrations for more demainding customers aka. [Alokai Enterprise](/enterprise).
-
-:card{to="https://github.com/vuestorefront" title="See our Github" description="Browse our Open Source repositories. Maybe you'd like to become a Alokai contributor? " icon="grommet-icons:github"}
diff --git a/docs/content/2.general/3.basics/3.architecture.md b/docs/content/2.general/3.basics/3.architecture.md
deleted file mode 100644
index f8e5440a80..0000000000
--- a/docs/content/2.general/3.basics/3.architecture.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: default
----
-
-# Architecture
-
-**We provide an ecosystem of independent developer tools** adressing challenges that you will inevitably encounter when building an eCommerce storefront. Each of the tools we provide is focused on solving a specific category of problems. They work best together, but they are independent from each other - each can be esily replaced with a different solution.
-
-## Typical Headless Architecture
-
-Building a great Storefront requires solving multiple domain-specific problems. These problems go far beyond the Storefront itself. For example, - Infrastructure and data layer significantly impact Storefront’s speed and reliability. We help with all of that!
-
-Let’s see what a typical, state-of-the-art headless eCommerce architecture looks like on a high level. You will learn in a moment that our product ecosystem is a reflection of it.
-
-Headless architecture is like an onion. It has layers. Each of them has strict responsibilities, and as long as these responsibilities are protected, they ensure flexibility and scalability of the whole system.
-
-
-- Of course, the **storefront** is the critical element of modern eCommerce architecture. This is the only part of the system that your customers interact with directly. It has to be fast, reliable, intuitive, and look great to deliver a great User Experience to your customers.
-- In headless and composable architectures, we compose our stack from multiple vendors. Each of them delivers its services through an API. Establishing all of those connections directly from the frontend often leads to performance problems and accelerated technical debt accumulation. It also makes our frontend a multi-purpose monolith which we would like to avoid when building for scalability. A separate **integration layer** keeps your frontend flexible and more abstracted from third-party vendors (which is essential if we want to avoid complete vendor lock-in). In addition, your frontend now has to connect to only one API that can be reused in other contexts like mobile applications or kiosks.
-- Headless **infrastructure** is much more complex than one needed to host the monolith. Now you have multiple applications with different requirements. Each works differently, consumes different resources, and handles different traffic. To ensure that your eCommerce store works well and delivers a great user experience, all components need to work well together. One bottleneck will affect the overall performance and reliability of your system.
-
-
-
-## Alokai Architecture
-
-Our goal is simple - make building a great storefront as easy and as fast as possible without compromising quality and flexibility. Everything we build is the reflection of this goal.
-
-Let’s see how our products fit into the typical headless architecture. Each addresses a different category of challenges related to building a storefront.
-
-- [**Storefront UI**](https://docs.storefrontui.io) (White-label Design System) - UI development acceleration with Vue / React components and Figma design.
-- [**SDK**](/sdk) (Frontend integration layer) - Ensures the connection with Middleware is stable, and responses are fully typed.
-- [**Middleware**](/middleware) (Backend integration layer) - Connects third-party vendors and exposes a single API for the frontend.
-- [**Unified Data Layer**](/unified-data-layer) (Data Model) - Fully decouples your storefront from the underlying API's simplifying use cases such as migration to a new backend, updates or multi-vendor setups.
-- [**Console and Cloud**](/console) - (Cloud and monitoring platform) - Multi-region SaaS Cloud Platform for your Alokai Application with observability, monitoring, analytics and more.
-- [**Storefront**](/storefront) (Project Accelerator) - A ready-to-use Storefront Accelerator that is using all of the above products and is already connected to your eCommerce, CMS, Search and Payment vendors (we will talk about integrations in a moment!)
-
-Storefront UI, SDK, Middleware, and Console are the barebones of your Alokai application. Using them ensures that you’re applying state-of-the-art architecture that will protect the scalability and flexibility of your project.
-
-::info
-We understand that every project is different, and headless's key benefits are the freedom and flexibility it brings to your tech stack. While Alokai products unleash their full potential when used together, each of them can be used independently of others**. You can take the parts that fit your needs best and replace the ones that don’t with something more tailored to your needs.
-
-#title
-:icon{name="ri:error-warning-fill" class="mr-2"}
-You can use each of our products independently
-::
-
-
-
-## Integration Architecture
-
-Another challenge you’ll inevitably face when going headless comes from the composable nature of this stack. Hundreds of vendors are out there, and almost countless combinations of how they can be used together.
-
-Integrating them with your data layer is a time-consuming process. This is why we offer out-of-the-box integrations with leading MACH vendors for all our products to save you from time-consuming integration work. We integrate with eCommerce vendors, Content Management Systems, Search & Personalisation vendors, and Payment providers.
-
-On the high level, every third-party vendor integration is similar and contains of two elements:
-
-- **Integration API Client** (middleware) that is responsible for calling the external service. Each API Client integrates different third-party API into the Middleware.
-- **Integration SDK Module** (storefront) that calls the Middleware and provides Typescript types related to specific middleware integration. Then calling an integration from the frontend is as easy as calling a function within your storefront. For example, to fetch products from BigCommerce integration, we simply write `sdk.bigCommerce.getProduct()`
-
-
-
-:card{to="/integrations" title="Integrations" description="Learn about available integrations and how they're built." icon="fluent:puzzle-cube-piece-20-filled"}
-
-::grid{:columns="2" class="mt-8"}
-#section-1
-:card{to="/middleware" title="Middleware" description="This abstraction layer lets you connect different backends." icon="fa6-solid:layer-group"}
-#section-2
-:card{to="/sdk" title="SDK" description="The SDK allows you to interact with the server middleware" icon="ri:terminal-box-fill"}
-::
-
-## Alokai Ecosystem
-
-Elements of our ecosystem generally fall into three categories:
-
-- **Libraries** offer easy-to-use abstractions over previously complicated elements of headless architecture. We build those for things that have established best practices allowing to abstract implementation details and focus on getting things done. A good example of such a product is API Gateway. Even though every project uses it differently the use cases can be easily covered by universal API abstraction. All of our libraries are Open Source projects under MIT license.
-- **Integrations** with third-party vendors. As a rule of thumb every integration with a platform that has a free or low-price tier is [Open Source](https://github.com/vuestorefront) and every integration with Enterprise-grade-only vendor is part of our [Enterprise License](/enterprise). [Here](/integrations) you can find available integrations.
-- **Storefronts** using our tools and integrations that save you from generic and repetitive groundwork and provide direct access to the source code. We build those for things that can look and work completely different in different projects. In such cases, abstractions are simply too limiting. A good example of a product that should be an accelerator is a UI library. There are too many ways to customize the UI to restrict its capabilities with abstractions and extension points, allowing you to adjust only certain aspects of your components.
-
-
\ No newline at end of file
diff --git a/docs/content/2.general/3.basics/4.data-flow.md b/docs/content/2.general/3.basics/4.data-flow.md
deleted file mode 100644
index fdda518cc1..0000000000
--- a/docs/content/2.general/3.basics/4.data-flow.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-layout: default
----
-
-# Data Flow
-
-The below document describes the data flow in the typical Alokai application using our SDK and Middleware.
-
-On a high level, the data flow in Alokai is relatively simple and has only two major steps:
-::steps
-#step-1
-**Storefront**
-
-On the Frontend layer, you call one of Alokai SDK methods (eg. `sdk.sapcc.getProducts()` ). This method is being translated into a REST API Call to Alokai Middleware (eg `vsf.com/api/sapcc/getproducts`).
-
-#step-2
-**Middleware**
-
-Alokai Middleware makes a REST call to the external API and returns the data retrieved from it.
-
-In most cases, there is also a Unified Middleware extension there that translates native data models from the underlying API to the [Unified Data Model](/unified-data-layer).
-::
-
-
-
-## Storefront Data Flow
-
-In the storefront we usually call a composable/hook (Vue/React) directly from a component. It’s responsible for binding the data returned by SDK with the framework-specific features like Vue.js reactivity system or state managment library.
-
-Every composable/hook in our storefront under the hood uses SDK methods. SDK methods retrieve data from the Middleware. Before the method is called, it runs all registered “before” interceptors from SDK extension that can modify its parameters (`args`). In the same way, it checks for “after” interceptors that can modify the response (`res`).
-
-
-
-At the very bottom of Storefront flow, an SDK method calls Alokai Middleware. Let’s see how the data flows there!
-
-
-## Middleware Data Flow
-
-On the Middleware side, each request is propagated to the API Client. The URL determines which API Client will be used. For example, calling `/sapcc/getProduct` endpoint will run `getProduct` method from the SAP Commerce Cloud integration represented by `sapcc` tag in the middleware configuration file.
-
-Each API Client and method exposes hooks that allow you to change the initial configuration of the integration, modify method arguments, change response, or just run other custom code.
-
-
-
-:card{to="/middleware" title="Middleware" description="Middleware is an integration layer of Alokai stack. It connects different third-party vendors and exposes one API to the Storefront (or other touchpoints) to increase performance and scalability of your application." icon="fa6-solid:layer-group"}
-
-## Using GraphQL
-
-You probably noticed that the protocol used to communicated with the middleware is REST protocol. **It doesn't mean you can't use GraphQL**.
-
-Our Middleware can connect to any data source, no matter what protocol it's using. If an integration is using GraphQL API it already has default queries/mutations associated to certain methods stored on the middleware layer. You can pass custom ones directly from the frontend or keep them in the middleware layer to reduce payloads and shave few kB's from your frontend bundle.
-
-```js
-// in the frontend
-const { search } = useProduct();
-
-search({
- customQuery: {
- products: 'my-products-query', // you can reference query on the middleware by string or just pass it directly
- metadata: { size: 'xl' },
- },
-});
-```
-
diff --git a/docs/content/2.general/3.basics/5.extensibility.md b/docs/content/2.general/3.basics/5.extensibility.md
deleted file mode 100644
index 89e19037aa..0000000000
--- a/docs/content/2.general/3.basics/5.extensibility.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# Extensibility
-
-::card{title="Learn extensibility in practice" icon="tabler:tool" }
-
-#description
-Learn how to customize Alokai Application in practical examples.
-
-#cta
-:::docs-button{to="/guides/customization-next-js"}
-Go to customization guide
-:::
-::
-
-We are in the eCommerce business more than we remember, and we know that different elements of eCommerce architecture need different levels of customization. To balance acceleration coming from simplification with the ability to build custom experiences, we grouped our products into two categories:
-
-- 
-
-Your Alokai project will be a mix of both. Let’s see how it translates to application layers:
-
-
-
-The whole storefront layer is just a boilerplate. You have direct access to the source code. You can remove, edit and add components, hooks, pages, plugins, etc. There are no limitations because it's just code that you can access without any restrictions or abstractions.
-
-Non-UI elements of third-party integrations are part of SDK and Middleware and do not expose their source code to the project. Most of their default behavior can be easily customized through extensions though.
-
-Let’s see how they work!
-
-## Extending Integrations
-
-Our integrations usually cover standard use cases in the most generic way, but it's very unlikely that the generic approach will fully match your business requirements. This is why we introdduced a flexible extensibility system that allows you to do things such as (but not limited to):
-
-- Change/override out-of-the-box business logic
-- Add completely new features
-- Do something before or after specific method is called
-- Modify the response and request parameters
-
-You can safely assume that almost any part of the integration can be adjusted to your needs. Now, let's see how such extensibility look like on the high level. You can also jump to one of the deep dives:
-::grid{:columns="2" class="mt-8"}
-#section-1
-:card{to="/sdk/advanced/extending-module" title="SDK Extensions" description="The SDK allows you to interact with the server middleware" icon="ri:terminal-box-fill"}
-#section-2
-:card{to="/middleware/guides/extensions" title="Middleware Extensions" description="This abstraction layer lets you connect different backends." icon="fa6-solid:layer-group"}
-::
-
-### Extending SDK
-
-Each integration is represented on a client side as SDK Module. SDK Modules can be extended with Module Extensions. You declare it as a single object that you can later pass to the module object.
-
-```jsx
-// sapccExtension.js
-export const sdkExtension = {
- // modify input params or a response
- interceptors: [],
- // add new methods not affected by interceptors
- utils: {},
- // add new methods affected by interceptors
- extend: {},
- // override existing methods
- override: {},
- // subscribe to methods
- subscribers: {}
-};
-```
-
-```js
-// sdk.js
-import { initSDK, buildModule } from '@vue-storefront/sdk';
-import { sapccModule, SAPCCModuleType } from '@vsf-enterprise/sapcc-sdk';
-import { sdkExtension } from './sdkExtension';
-
-const sdkConfig = {
- sapcc: buildModule(
- sapccModule,
- { apiUrl: "http://localhost:8181/sapcc" },
- sdkExtension
- ),
-};
-
-export const sdk = initSDK(sdkConfig);
-```
-
-### Extending Middleware
-
-Same way as SDK Module is a client-side part of the integration, API Client is a server-side part of it. You can extend it in the same way.
-
-```js
-// middlewareExtension.js
-export const middlewareExtension = {
- name: 'my-extension',
- // use separate anmespace for API methods, false by default
- isNamespaced: true,
- // add new or override existing methods
- extendApiMethods: {
- customMethod: (context, params) => { /* ... */ },
- },
- // extend Express instance
- extendApp: (app) => { /* ... */
- },
- // hook into middleware lifecycle
- hooks: (req, res) => {
- return {
- beforeCreate: ({ configuration }) => configuration,
- afterCreate: ({ configuration }) => configuration,
- beforeCall: ({ configuration, callName, args }) => args,
- afterCall: ({ configuration, callName, args, response }) => response
- }
- }
-}
-```
-
-```js
-// middleware.config.js
-import { middlewareExtension } from './middlewareExtension'
-
-export const integrations = {
- sapcc: {
- // ...
- extensions: (extensions) => [ ...extensions, middlewareExtension]
- }
- }
-}
-```
-
-
-
-
-
-
diff --git a/docs/content/3.middleware/2.guides/10.logging.md b/docs/content/3.middleware/2.guides/10.logging.md
deleted file mode 100644
index ea5fb38332..0000000000
--- a/docs/content/3.middleware/2.guides/10.logging.md
+++ /dev/null
@@ -1,344 +0,0 @@
-# Logger
-
-The middleware application provides a logger instance that automatically attaches metadata related to the scope of each call. By adding this contextual data, the logger makes it significantly easier to trace the origin of logs or errors, simplifying the debugging and monitoring process across the application.
-
-:::info
-The logger has been available since version 5.1.0. Please refer to the [middleware changelog](https://docs.alokai.com/middleware/reference/change-log#_510) for more details.
-:::
-
-## Using logger
-
-The middleware application provides access to the logger in various parts of the system, such as in extensions and integrations. This flexibility allows you to log important events, errors, and other data throughout the lifecycle of your application.
-
-In this section, we will explore how to access and use the logger in different parts of the application.
-
-The examples below demonstrate how to use the application logger to ensure that correct metadata is conveyed in the logs. To achieve that, we will use the `getLogger` function to extract the logger instance from the passed argument.
-
-:::tip
-The logger is integrated into the middleware to provide additional metadata about the scope of call with every log out of the box. In case of error, it also provides an error boundary.
-:::
-
-### Basic Logger usage
-
-To use the logger, you need to import the `getLogger` function from the middleware package. Depending on the context, you can obtain the logger from different sources, such as the `alokai` object, `context` object, or `params` object. All such cases are covered in the following examples. For this example, we will use the `context` object.
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-// Assume that `context` is available in the current scope
-const logger = getLogger(context);
-logger.info("Middleware is running!");
-```
-
-Prints:
-
-```json
-{
- "message": "Middleware is running!",
- "timestamp": "2024-10-22T19:04:18.791Z",
- "severity": "INFO",
- "alokai": {
- "context": "middleware",
- "scope": {
- // ...
- }
- }
-}
-```
-
-The provided logger has a second optional argument that allows you to include custom metadata to be attached to the JSON output.
-For example:
-
-```ts
-logger.info("I've just fetched a user!", {
- userId: "123",
-});
-```
-
-Prints:
-
-```json
-{
- "message": "I've just fetched a user!",
- "timestamp": "2024-10-22T19:04:18.791Z",
- "severity": "INFO",
- "alokai": {
- "context": "middleware",
- "scope": {
- // ...
- }
- },
- "userId": "123"
-}
-```
-
-:::warning
-It's forbidden to overwrite **alokai** key within provided metadata. Any attempt will be ineffective. If you need to provide additional metadata, use a different key. **alokai** key is reserved for internal use only.
-:::
-
-### `extendApp`
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-const someExtension = {
- name: "some-extension",
- extendApp(params) {
- const logger = getLogger(params);
-
- logger.info(
- "You can call a logger inside extendApp hook, called on bootstrap of the application"
- );
- },
-};
-```
-
-### Hooks
-
-Logger is available in hooks factory:
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-const paypalExtension = {
- name: "sapcc-paypal-extension",
- hooks(req, res, alokai) {
- const logger = getLogger(alokai);
- logger.info(
- "You can call a logger every time a hooks factory gets invoked"
- );
- return {
- // ...
- };
- },
-};
-```
-
-In order, to use logger in certain hooks like `beforeCall`, `beforeCreate`, `afterCall`, `afterCreate` obtain it from it's params:
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-const paypalExtension = {
- name: "sapcc-paypal-extension",
- hooks(req, res, alokai) {
- return {
- beforeCall(params) {
- const logger = getLogger(params);
- logger.info("You can log every time a beforeCall hook gets invoked");
- return params.args;
- },
- beforeCreate(params) {
- const logger = getLogger(params);
- logger.info("You can log every time a beforeCreate hook gets invoked");
- return params.configuration;
- },
- afterCall(params) {
- const logger = getLogger(params);
- logger.info("You can log every time a afterCall hook gets invoked");
- return params.response;
- },
- afterCreate(params) {
- const logger = getLogger(params);
- logger.info("You can log every time a afterCreate hook gets invoked");
- return params.configuration;
- },
- };
- },
-};
-```
-
-#### Caveat: Accessing logger via closure
-
-Consider the following snippet:
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-const someExtension = {
- name: "some-extension",
- hooks(req, res, alokai) {
- const hooksLogger = getLogger(alokai);
- hooksLogger.info(
- "You can call a logger every time a hooks factory gets invoked"
- );
- return {
- beforeCall(params) {
- // Never access via closure a logger belonging to the hooks factory:
- hooksLogger.info("Don't do that!");
- // Instead use own logger of every hook function:
- const logger = getLogger(params);
- logger.info("Do that!");
- return params.args;
- },
- };
- },
-};
-```
-
-:::warning
-Attempt of using `hooksLogger` inside `beforeCall` or other hooks via closure corrupts information about scope of call of the log. Always use logger provided in params to the hook.
-:::
-
-### extendApiMethods
-
-Inside extended api methods, obtain logger from `context` using `getLogger` function.
-
-```ts
-import { getLogger } from "@vue-storefront/middleware";
-
-const testingExtension = {
- name: "some-extension",
- extendApiMethods: {
- addedCustomEndpoint(context) {
- const logger = getLogger(context);
- logger.info("You can log inside newly created handler!");
- return {
- // ...
- };
- },
- },
-};
-```
-
-:::tip
-You can derive logger from context the same way if you are creating an integration.
-:::
-
-### onCreate
-
-The hook got a new parameter from which you can derive the logger with help of `getLogger` function.
-
-```ts
-import { type AlokaiContainer, getLogger } from "@vue-storefront/middleware";
-
-const onCreate = async (
- config: Record
-
-## Use Cases
-
-### Adding an Endpoint
-
-To register a new API endpoint, you can register a custom extension and use the `extendApiMethods` property. API
-endpoints cannot be registered directly. Let's look at an example:
-
-```ts
-export const integrations = {
- sapcc: {
- // ...
- extensions: (extensions) => [
- ...extensions,
- {
- name: "example-extension",
- extendApiMethods: {
- baseSites: async (context) => {
- // Using integration's HTTP client to make a request to SAP Commerce Cloud backend
- // SAPCC integration is using `axios` as an HTTP client, so we want to retreive only the `data` property from the response.
- const { data } = await context.client.get("/basesites");
- return data;
- },
- },
- },
- ],
- },
-};
-```
-
-All integrations can be extended, however, this example extends the SAP Commerce Cloud integration, to give more context about real-life usage. We registered `baseSites` in `extendApiMethods` which creates a new `/api/sapcc/baseSites` endpoint.
-
-This method accepts two parameters:
-
-- `context` - integration context which includes:
- - `config` - integration configuration
- - `client` - HTTP client used by the integration
- - `req` - HTTP request object
- - `res` - HTTP response object
- - `extensions` - extensions registered within an integration
- - `customQueries` - custom GraphQL queries registered within integration (used only with GraphQL)
- - `extendQuery` - helper function for handling custom queries (used only with GraphQL)
-- `params` - parameters passed in the request's body
-
-#### Using extension methods in the frontend
-
-To call the extension endpoint, you should use the [middlewareModule](/sdk/getting-strated/middlewareModule).
-
-First, you need to prepare the type definition for the extension methods. It will be necessary to pass this type to the `middlewareModule`. To do it, let's aggregate the extension methods in a single object:
-
-```typescript [storefront-middleware/middleware.config.ts]
-export const extensionMethods = {
- baseSites: async (context, params) => {
- const { data } = await context.client.get("/basesites");
- return data;
- },
-};
-
-export const integrations = {
- sapcc: {
- location: "@vsf-enterprise/sapcc-api/server",
- configuration: {
- // ...
- },
- extensions: (extensions) => [
- ...extensions,
- {
- name: "example-extension",
- extendApiMethods: {
- ...extensionMethods,
- },
- },
- ],
- },
-};
-```
-
-Then, let's use the `WithoutContext` type helper to prepare the type of the endpoints created by the extension methods. As a good practice, it's recommended to use a separate file for the types used in the middleware configuration:
-
-```typescript [storefront-middleware/types.ts]
-import { type WithoutContext } from "@vue-storefront/middleware";
-import { extensionMethods } from "./middleware.config";
-
-export { type Endpoints as SapccEndpoints } from "@vsf-enterprise/sapcc-api";
-export type ExtensionEndpoints = WithoutContext
-
- );
-}
-```
-
-The same approach can be used in hooks or any other components.
-
-#tab-2
-
-## Installation
-
-To use the State Manager within Nuxt, you need to have the `@vue-storefront/nuxt` package installed. This step is already done if you have followed the [getting started](/sdk/getting-started). If not, you'll find installation instructions there.
-
-## Usage
-
-To use it you don't need to do anything special. Just use the auto-imported `useSfState` composable in your components or composables. You can use parts of the state as refs so you can read and write to them easily. As mentioned before, the state is based on Pinia. To read more on how to use it, please refer to the [official documentation](https://pinia.vuejs.org/).
-
-Example usage of state management:
-
-```vue
-
- Cart total: {cart.total}
-- Customer name: {customer.firstName} {customer.lastName} -
-Currency: {currency}
-Locale: {locale}
-
-
-
-
-
-```
-
-The same approach can be used in composables or any other components.
-
-::
diff --git a/docs/content/4.sdk/2.getting-started/3.middleware-module.md b/docs/content/4.sdk/2.getting-started/3.middleware-module.md
deleted file mode 100644
index f25b9bcf99..0000000000
--- a/docs/content/4.sdk/2.getting-started/3.middleware-module.md
+++ /dev/null
@@ -1,512 +0,0 @@
-# The `middlewareModule`
-
-## Introduction
-
-The `middlewareModule` is an SDK module that ensures communication with the [Server Middleware](/middleware).
-
-## Setup
-
-Depending on which framework you are using, you can get the `middlewareModule` in different ways. However, the setup is always the same.
-
-In Next, `middlewareModule` is available in the `createSdk` function.
-
-```ts [Next]
-// sdk/sdk.config.ts
-import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
-import { UnifiedEndpoints } from "storefront-middleware/types";
-
-const options: CreateSdkOptions = {
- middleware: {
- apiUrl: "http://localhost:4000",
- },
-};
-
-export const { getSdk } = createSdk(
- options,
- ({ buildModule, config, middlewareModule, getRequestHeaders }) => ({
- commerce: buildModule(middlewareModuleCart total: {{ cart.total }}
-Customer name: {{ customer.firstName }} {{ customer.lastName }}
-Currency: {{ currency }}
-Locale: {{ locale }}
-
-
-
- Product List:
-
- );
-}
-
-```
-
-In the code above, we are using Alokai SDK's `getProducts` method to send a request to the Alokai Middleware `/getProducts` endpoint. The Middleware then sends a necessary request to SAP Commerce Cloud and returns response back to Storefront.
-
-To run the application, execute the following command (remember that the middleware has to be running as well):
-
-```bash
-npm run dev
-```
-
-Navigate to `http://localhost:3000` in your browser. You should see a list of products.
-
-
-
-::info
-You can find complete implementation in the [`first-request` branch](https://github.com/vuestorefront-community/nextjs-starter/tree/first-request)
-::
-
-## Summary
-
-In this guide we have successfully utilized Alokai Connect to create our first request to get data from SAP Commerce Cloud in Alokai Next.js application. We also got a better understanding of data flow and how to use SDK and Middleware to fetch data.
-
-In the next section, we will learn how to build UI with Storefront UI - Alokai UI components library for eCommerce applications.
-
-::card{title="Next: Build Product Details page with Storefront UI" icon="tabler:number-5-small" }
-
-#description
-Learn how to build responsive and accessible UI with Storefront UI components.
-
-#cta
-:::docs-button{to="/guides/alokai-essentials/alokai-next-js/product-page"}
-Next
-:::
-::
\ No newline at end of file
diff --git a/docs/content/guides/2.alokai-essentials/1.alokai-next-js/6.product-page.md b/docs/content/guides/2.alokai-essentials/1.alokai-next-js/6.product-page.md
deleted file mode 100644
index acf7c86c54..0000000000
--- a/docs/content/guides/2.alokai-essentials/1.alokai-next-js/6.product-page.md
+++ /dev/null
@@ -1,371 +0,0 @@
----
-title: Build Product Details Page
-layout: default
-navigation:
- icon: tabler:number-5-small
----
-
-# Build Product Details Page with Storefront UI
-
-Every eCommerce application needs appealing, fast and responsive UI to attract and retain customers. With Storefront UI building one is easy and fast! In this guide, let's learn how to build a Product Details page. We will learn how to use Storefront UI components, blocks and of course how to customise them.
-
-::info
-Already familiar with **Storefront UI**? You can skip this section and jump to [Connecting Product Details Page with SAP Commerce Cloud](./6.connecting-pdp). You can find the code for this guide in the [nextjs-starter/product-page branch](https://github.com/vuestorefront-community/nextjs-starter/tree/product-page)
-::
-
-## Installing Storefront UI
-
-First, in order to use Storefront UI we need to install and configure it. Luckily, it's very easy to do.
-
-### Install Storefront UI
-
-In the `storefront` directory, install Storefront UI by running the following command:
-
-```bash
-npm i @storefront-ui/react
-npm i -D tailwindcss postcss autoprefixer
-```
-
-This will install Storefront UI package for React based applications and Tailwind CSS with PostCSS and Autoprefixer.
-
-Next, initialize Tailwind CSS by running the following command:
-
-```bash
-npx tailwindcss init -p
-```
-
-All set! Now, let's configure Storefront UI.
-
-### Configure Storefront UI
-
-In the `storefront` directory, rename the `tailwind.config.js` file to `tailwind.config.ts` and update the file with the following content:
-
-```typescript
-const { tailwindConfig } = require('@storefront-ui/react/tailwind-config');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- presets: [tailwindConfig],
- content: [
- './app/**/*.{js,ts,jsx,tsx}',
- './components/**/*.{js,ts,jsx,tsx}',
- '../../node_modules/@storefront-ui/react/**/*.{js,mjs}',
- ],
- theme: {
- extend: {},
- },
- plugins: [],
-};
-```
-
-This will configure Tailwind CSS to work with Next.js App Router file structure and Storefront UI. This also means that only the Tailwind classes from the Storefront UI components you use will end up in your final CSS.
-
-### Add Tailwind CSS to the Project
-
-In the `app/globals.css` file, add the following code:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-### First Storefront UI Component
-
-Now, let's use the first Storefront UI component in the `app/page.tsx` file. Add the following code to the file:
-
-```diff
-import { getSdk } from "@/sdk/sdk";
-+ import { SfButton } from "@storefront-ui/react";
-
-const sdk = getSdk();
-
-export default async function Page() {
- const {
- data: { products },
- } = await sdk.sapcc.getProducts({});
-
- return (
- -
- {products?.map((product) =>
- {product.name} )} -
-+
- );
-}
-
-```
-
-This will import the `SfButton` component from Storefront UI. Here's how the result should look like:
-
-
-
-Great! Now, let's build the Product Details page with Storefront UI.
-
-## Building Product Details Page
-
-Storefront UI is a very versatile library that provides a lot of components and blocks to build a modern eCommerce application. In this guide, we will build a Product Details page using Storefront UI components and blocks.
-
-First, let's visit Storefront UI documentation to see what components and blocks are available. You can find the [SFUI Documentation here](https://docs.storefrontui.io/v2/react/components.html).
-
-Storefront UI provides two type of components: Base Components and Blocks. Base Components are the basic building blocks of the UI and Blocks are the pre-built components that can be used to build a page. Blocks are made up of Base Components. Blocks are very useful to build a page quickly and easily without writing a lot of code. This is exactly what we need to build a Product Details page.
-
-### Product Details Page Blocks
-
-To build the Product Details we will use the following Storefront UI Blocks:
-
-- [Product Details](https://docs.storefrontui.io/v2/react/blocks/ProductCard.html#details)
-- [Product Gallery with Vertical Thumbnails](https://docs.storefrontui.io/v2/react/blocks/Gallery.html#product-gallery-with-vertical-thumbnails)
-- [Product Slider](https://docs.storefrontui.io/v2/react/blocks/ProductSlider.html)
-
-Let's start building the page!
-
-### Product Details Page
-
-Storefront UI is not like most traditional UI libraries. Blocks are too complex to be used directly imported from the library. It would be very difficult and time consuming to customize them. So, instead, Storefront UI provides Blocks that can be copied and pasted into the project and then customized. Since all of the source code is available directly to you, including any styles - you have full control to change the styling.
-
-First, let's create new files for the Product Details page. In the `storefront` directory, create a new directory called `components` and inside it create a new file called `ProductDetails.tsx`. Add the code from the [Product Details](https://docs.storefrontui.io/v2/react/blocks/ProductCard.html#details) `Code` tab to the file:
-
-```tsx
-import {
- SfRating,
- SfButton,
- SfLink,
- SfCounter,
- SfIconShoppingCart,
- SfIconCompareArrows,
- SfIconFavorite,
- SfIconSell,
- SfIconPackage,
- SfIconRemove,
- SfIconAdd,
- SfIconWarehouse,
- SfIconSafetyCheck,
- SfIconShoppingCartCheckout,
-} from '@storefront-ui/react';
-import { useCounter } from 'react-use';
-import { useId, ChangeEvent } from 'react';
-import { clamp } from '@storefront-ui/shared';
-
-export default function ProductDetails() {
- const inputId = useId();
- const min = 1;
- const max = 999;
- const [value, { inc, dec, set }] = useCounter(min);
- function handleOnChange(event: ChangeEvent
-+ Click me
-+
- Product List:
- -
- {products?.map((product) =>
- {product.name} )} -
-
- - Mini Foldable Drone with HD Camera FPV Wifi RC Quadcopter -
- $2,345.99 -
-
- 123
-
-
- 123 reviews
-
-
- -
-
- HD Pictures & Videos and FPV Function -
- Intelligent Voice Control -
- Multiple Fun Flights -
- Easy to Use -
- Foldable Design & Double Flight Time -
-
-
-
-
-
-
-
-
- dec()}
- >
-
-
- = max}
- aria-controls={inputId}
- aria-label="Increase value"
- onClick={() => inc()}
- >
-
-
- - {max} in stock -
-
-
-
-
-
- Free shipping, arrives by Thu, Apr 7. Want it faster?
-
-
-
- Pickup not available at your shop.
-
-
-
- Free 30-days returns.
-
-
- );
-}
-
-```
-
-::info
-You may have noticed that we are using the `"use client"` directive at the top of the file. This is done to simplify the guide. In a real application, you would need to add `"use client"` directive on each SFUI Blocks files, since they are using a lot of client side interactions.
-::
-
-Open http://localhost:3000/product/123 Here's how the result should look like:
-
-
-
-It's ugly, right? That's because we haven't added any styles to the page. Since Storefront UI uses Tailwind CSS under the hood, we will be using it to add styles to the page. You can find the [Tailwind CSS documentation here](https://tailwindcss.com/docs).
-
-Let's add some styles to the page! In the `app/product/[id]/page.tsx` file, add the following code:
-
-```ts
-//... imports
-
-export default function Page() {
- return (
-
-
-
-
- )
-}
-
-//...
-```
-
-This will add some basic styles to the page. Here's how the result should look like:
-
-
-
-This looks much better!
-
-Our Product Details page is ready! With only a few simple steps and a bit of styling, we have built a modern and responsive Product Details page. In the next section, we will learn how to connect the Product Details page with the SAP Commerce Cloud.
-
-::info
-You can find the complete implementation in the [`product-page` branch](https://github.com/vuestorefront-community/nextjs-starter/tree/product-page)
-::
-
-
-## Summary
-
-In this guide, we have successfully installed and configured Storefront UI and built a Product Details page using Storefront UI components and blocks. We have also added some basic styles to the page to make it look more appealing and responsive.
-
-In the next section, we will learn how to connect the Product Details page with the SAP Commerce Cloud.
-
-::card{title="Next: Connecting Product Details Page with SAP Commerce Cloud" icon="tabler:number-6-small" }
-
-#description
-Learn how to use real data from SAP Commerce Cloud with Storefront UI
-
-#cta
-:::docs-button{to="/guides/alokai-essentials/alokai-next-js/connecting-pdp"}
-Next
-:::
-
-
-
diff --git a/docs/content/guides/2.alokai-essentials/1.alokai-next-js/7.connecting-pdp.md b/docs/content/guides/2.alokai-essentials/1.alokai-next-js/7.connecting-pdp.md
deleted file mode 100644
index 6bebb74c9b..0000000000
--- a/docs/content/guides/2.alokai-essentials/1.alokai-next-js/7.connecting-pdp.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: Connect Product Details Page
-layout: default
-navigation:
- icon: tabler:number-6-small
----
-
-# Connecting Product Details Page with SAP Commerce Cloud
-
-In the previous step, we have created a template for the a product details page using Storefront UI. Now, we will connect it with the SAP Commerce Cloud backend to display the product details.
-
-## Fetching Products from SAP Commerce Cloud
-
-In chapter 4 ([First Request](/guides/alokai-essentials/alokai-next-js/first-request)) we displayed a list of products
-from SAP CC on homepage. Now let's make that list link to product details pages
-
-Replace the content of the `app/page.tsx` with the following code:
-
-```tsx
-import { getSdk } from "@/sdk/sdk";
-import Link from "next/link";
-
-const sdk = getSdk();
-
-export default async function Page() {
- const {
- data: { products },
- } = await sdk.sapcc.getProducts({});
-
- return (
-
-
- );
-}
-```
-
-Now, when you click on a product, you will be redirected to the product details page.
-
-## Fetching Product Details from SAP Commerce Cloud
-
-Now, we need to fetch the product details from the SAP Commerce Cloud backend to display the product details on the product details page.
-
-We want to put data fetching logic on the server. To be able to so we need to move `"use client"` directive from `app/product/[id]/page.tsx`
-to the component files.
-
-Add `"use client"` on top of `ProductDetails.tsx`, `ProductGallery.tsx`, and `ProductSlider.tsx` files as follows:
-
-```tsx
-// ProductGallery.tsx
-"use client";
-
-// ... rest of the code
-```
-
-In the `app/product/[id]/page.tsx` file, let's make some changes to fetch the product details from the backend. The final code of the `app/product/[id]/page.tsx` file should look like this:
-
-```tsx
-import ProductDetails from "@/components/ProductDetails";
-import ProductGallery from "@/components/ProductGallery";
-import ProductSlider from "@/components/ProductSlider";
-import { getSdk } from "@/sdk/sdk";
-
-export default async function Page({ params }: { params: { id: string } }) {
- const sdk = getSdk();
-
- const { data } = await sdk.sapcc.getProduct({
- productCode: params.id,
- });
-
- console.log(data);
-
- return (
- Product List:
--
- {products?.map((product) => (
-
- - - {product.name} - - - ))} -
-
-
-
- );
-}
-
-```
-
-In the above code, we have used the `getSdk` function to create a new instance of the Alokai SDK. We have used the `getProduct` method to fetch the product details from the backend. We have used the `params` object to get the `code` of the product from the URL. We have used the `console.log` function to log the product details to the console. Once you visit the product details page, you will see the product details logged to the console as shown below:
-
-
-
-Now, we have successfully connected the product details page with the SAP Commerce Cloud backend. In the next step, we will display the product details on the product details page.
-
-## Displaying Product Details
-
-Storefront UI Blocks are designed to be used with any backend and it does not follow any specific data structure. We need to map the data from the SAP Commerce Cloud backend to the Storefront UI Blocks to display the product details.
-
-### ProductDetails Block
-
-Let's start by creating a TypeScript interface for the props of the `ProductDetails` Block.
-
-In order to simplify the type definition, we will install the `@vsf-enterprise/sap-commerce-webservices-sdk` type definitions package. This package contains all SAP Commerce Cloud native types. Run the following command in the root of your project to install the package:
-
-```bash
-npm install @vsf-enterprise/sap-commerce-webservices-sdk
-```
-
-Open the `app/components/ProductDetails.tsx` file and add the following code at the top of the file:
-
-```tsx
-import { Product } from '@vsf-enterprise/sap-commerce-webservices-sdk';
-
-interface ProductDetailsProps {
- product: Product;
-}
-```
-
-Now, we will use the `ProductDetailsProps` interface to define the type of the `props` of the `ProductDetails` component. Replace the content of the `app/components/ProductDetails.tsx` file with the following code:
-
-```diff
-- export default function ProductDetails() {
-+ export default function ProductDetails({ product }: ProductDetailsProps) {
-```
-
-Now, let's pass the `product` prop to the `ProductDetails` component in the `app/product/[id]/page.tsx` file. Replace the content of the `app/product/[id]/page.tsx` file with the following code:
-
-```diff
-- -
--
- HD Pictures & Videos and FPV Function --
- Intelligent Voice Control --
- Multiple Fun Flights --
- Easy to Use --
- Foldable Design & Double Flight Time --
-
-
-
-
-
- )
-}
-```
-
-Now, let's add the `NavBar` component to the `layout.tsx` file.
-
-```diff
-// ... rest of the code
-+ import NavBar from "../components/NavBar";
-
-// ... rest of the code
-
-
-
- );
-}
-```
-
-Now, if you run the application, you will see that the home page is working as expected. However, if you try to navigate to the product details page, you will see that we have an issue.
-
-## Using Unified Data Layer in Product Details Page
-
-Let's replace the types on the PDP with the Unified Data Model types. To do so, in the `ProductDetails` component, we replace the `Product` type with the `SfProduct` type from the Unified Data Model:
-
-```diff
-- import { Product } from '@vsf-enterprise/sap-commerce-webservices-sdk';
-+ import { SfProduct } from "middleware/types";
-
-interface ProductDetailsProps {
-- product: Product;
-+ product: SfProduct;
-}
-```
-
-This change will allow us to use the same `ProductDetails` component across different eCommerce platforms.
-
-Your IDE should show you a bunch of type errors in the `ProductDetails` component. Try figuring out how to fix the code yourself, it will help you get familiar with Unified Data Layer.
-But if you're in hurry here's the final code for `apps/storefront/components/ProductDetails.tsx`:
-
-```ts
-"use client";
-
-import {
- SfButton,
- SfCounter,
- SfIconAdd,
- SfIconCompareArrows,
- SfIconFavorite,
- SfIconPackage,
- SfIconRemove,
- SfIconSafetyCheck,
- SfIconSell,
- SfIconShoppingCart,
- SfIconShoppingCartCheckout,
- SfIconWarehouse,
- SfLink,
- SfRating,
-} from "@storefront-ui/react";
-import { clamp } from "@storefront-ui/shared";
-import { ChangeEvent, useId } from "react";
-import { useCounter } from "react-use";
-
-import { SfProduct } from "middleware/types";
-import useCart from "../hooks/useCart";
-
-interface ProductDetailsProps {
- product: SfProduct;
-}
-
-export default function ProductDetails({ product }: ProductDetailsProps) {
- const inputId = useId();
- const { addToCart } = useCart();
- const min = 1;
- const max = product.quantityLimit ?? 1;
- const [value, { inc, dec, set }] = useCounter(min);
- function handleOnChange(event: ChangeEventProduct List:
--
- {products?.map((product) => (
--
- -+
- - - {product.name} - - - ))} -
-
- {product.name}
- - - {product.price?.regularPrice.currency}{" "} - {product.price?.regularPrice.amount} - - -
-
- {product.rating?.count}
-
-
- {product.rating?.count} reviews
-
-
-
-
-
-
-
-
- await addToCart(product, 1)}
- size="lg"
- className="w-full xs:ml-4"
- slotPrefix={
-
-
-
-
- dec()}
- >
-
-
- = max}
- aria-controls={inputId}
- aria-label="Increase value"
- onClick={() => inc()}
- >
-
-
- - {max} in stock -
-
-
-
-
-
- Free shipping, arrives by Thu, Apr 7. Want it faster?
-
-
-
- Pickup not available at your shop.
-
-
-
- Free 30-days returns.
-
-
-
-
- );
-}
-```
-
-Finally, if you run the application, you will see that both home page and product details page are working as expected. Except for one thing. If you try to add a product to the cart, you will see that we have an issue with the `useCart` hook - nothing happens when you click the "Add to cart" button.
-
-As an additional exercise, you can use the approach we learned above to fix the `useCart` hook. As a starting point, you'll need to replace the `addToCart` method from the `sapcc` module with the `addToCart` method from the `unified` module and as well, you need to replace the `Cart` type with the `SfCart` type from the Unified Data Model. You can also find the solution here [udl branch](https://github.com/vuestorefront-community/nextjs-starter/tree/udl).
-
-You can find more information about different Unified Api Methods in the [Unified Cart Methods](https://docs.vuestorefront.io/storefront/unified-data-layer/unified-methods/cart) section of Storefront documentation.
-
-## Displaying Images
-
-So far, we've been displaying hardcoded images. But with the Unified Data Layer, we can easily access images from the e-commerce platform.
-
-Open the `storefront/components/ProductGallery.tsx` file and add the following code:
-
-```tsx
-// ... rest of the code
-import { Product } from '@vsf-enterprise/sap-commerce-webservices-sdk';
-
-interface ProductGalleryProps {
- images: SfProduct['gallery'];
-}
-// ... rest of the code
-```
-
-In the above code, we have created a TypeScript interface `ProductGalleryProps` for the props of the `ProductGallery` Block. We have used the `SfProduct` type from the UDL.
-
-Now, we will use the `ProductGalleryProps` interface to define the type of the `props` of the `ProductGallery` component. Replace the content of the `storefront/components/ProductGallery.tsx` file with the following code:
-
-```diff
-- export default function GalleryVertical() {
-+ export default function GalleryVertical({ images }: ProductGalleryProps) {
-```
-
-We can also remove the `images` constant and `withBase` function from the `ProductGallery` component as we are now passing the `images` prop from the parent component.
-
-Now, Replace all the occurrences of `imageThumbSrc` and `imageSrc` with `url`. The final shape of the `ProductGallery` component can be found in the [udl branch](https://github.com/vuestorefront-community/nextjs-starter/tree/udl).
-
-:::info
-Your IDE might throw a warning that we're using `- -::card{title="Alokai with React Native" icon="tabler:brand-react" to="/guides/alokai-essentials/alokai-react-native" } - -#description -Learn how to build Alokai application with React Native -:: - -
- -::card{title="Alokai with Nuxt" icon="tabler:brand-nuxt" to="/guides/alokai-essentials/alokai-nuxt" } - -#description -Learn how to build Alokai application with Nuxt -:: \ No newline at end of file diff --git a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/1.index.md b/docs/content/guides/2.alokai-essentials/2.alokai-react-native/1.index.md deleted file mode 100644 index 7caa433690..0000000000 --- a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/1.index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: -layout: default -lastReviewedBy: mostafil@alokai.com -lastReviewedOn: 2024-06-06 ---- - -# Alokai React Native Guide - -Welcome to the Alokai React Native guide. This guide will help you get started with building your first Alokai application from the ground up. - -This guide will allow you to understand how elements of Alokai stack play together by building a small version of a production storefront from scratch. We will cover everything from creating a new Alokai project to building a simple application that uses the Alokai products. - -Completing this guide takes about 3 hours. - -## What You Will Learn - -- How to create a new Alokai project -- How to build a simple Alokai application -- How to use the Alokai products - -## Framework of Choice - -This guide will focus on [React Native](https://reactnative.dev/) as the client framework of choice. React Native is a popular framework for building mobile applications for both iOS and Android platforms. It is a great choice for building Alokai applications because it is easy to use and has a large community of developers. - -Alokai, thanks to its modular [Architecture](/general/basics/architecture), can be used with any JavaScript framework. -If you are interested in using Alokai with other JavaScript frameworks, check out our [guides](/guides) section for more information. - -## Enterprise vs Open Source - -Alokai comes in two editions: Enterprise and Open Source. This guide will focus on the Enterprise edition, but the same principles apply to the Open Source edition. - -You can find all available Alokai integrations in the [integrations](/integrations) section. - -## Prerequisites - -Before you start, you will need to have the following installed on your machine: - -- Node.js - we recommend using the latest LTS version - [download](https://nodejs.org/) -- Package manager - we will use yarn in this guide - [download](https://yarnpkg.com/) - -Let's get started! - -::card{title="Next: Create Alokai React Native project" icon="tabler:number-1-small" } - -#description -Setup new React Native Alokai project and learn more about our architecture, products, and all of the ways that the Alokai ecosystem can help you build better storefronts. - -#cta -:::docs-button{to="/guides/alokai-essentials/alokai-react-native/create-project"} -Start building -::: -:: - diff --git a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/2.create-project.md b/docs/content/guides/2.alokai-essentials/2.alokai-react-native/2.create-project.md deleted file mode 100644 index 53ff7103b2..0000000000 --- a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/2.create-project.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Create Alokai Project -layout: default -navigation: - icon: tabler:number-1-small ---- - -# Create new Alokai React Native Project - -For the base of our project, we will use the Alokai React Native project created specifically for this guide. It includes everything you need to get started, including a basic project structure, configuration files, and a set of pre-configured tools. - -You can find the Alokai React Native guide project on GitHub. - -**React Native Project** - [https://github.com/vuestorefront-community/alokai-rn-guide](https://github.com/vuestorefront-community/alokai-rn-guide) - -This is a bare minimum setup containing folder for React Native (Expo) application and a placeholder for the Alokai Middleware. During this guide, we will use the `alokai-rn-guide` project to create a new Alokai project. - -## Prerequisites - -For this guide we will use SAP Commerce Cloud as the backend, but you can use any backend of your choice. Make sure you have your SAP Commerce Cloud instance up, running and accessible via REST API. - -## Get the Alokai React Native Guide Project - -To create a new Alokai project with React Native, you will need to clone the `alokai-rn-guide` project from GitHub. You can do this by running the following command in your terminal: - -```bash -git clone git@github.com:vuestorefront-community/alokai-rn-guide.git -``` - - - -Once you have cloned the `alokai-rn-guide` project, navigate to the project directory and install the project dependencies. Since the root project folder contains two projects and not a monorepo, you will need to install the dependencies for both the `storefront-react-native` and `storefront-middleware` projects. It is recommended to keep 2 temrinal windows open, one for each project. - -```bash -# React Native project terminal -cd alokai-rn-guide/storefront-react-native -yarn -``` - -```bash -# Middleware project terminal -cd alokai-rn-guide/storefront-middleware -yarn -``` - -This will install all the necessary dependencies for the project. - -## Test the React Native Application - -To test the React Native application, you can run the following command in the `storefront-react-native` project terminal: - -```bash -npx expo start -``` - -This will start the Expo development server and open the simulator. You can also use the Expo Go app on your mobile device to test the application. - - - -:::tip -If you are not familiar with React Native or Expo, you can refer to the official documentation for more information: -- React Native - https://reactnative.dev/ -- Expo - https://expo.dev/ -::: - -## Summary - -In this section, we have learned how to create a new Alokai project with React Native. We have cloned the `alokai-rn-guide` project from GitHub and installed all the necessary dependencies. - -In the next section, we will configure the `storefront-middleware` application and run it alongside the React Native application. - -::card{title="Next: Install and Configure Alokai Middleware" icon="tabler:number-2-small" } - -#description -Learn what the Alokai Middleware is and how to install and configure it in your Alokai project. - -#cta -:::docs-button{to="/guides/alokai-essentials/alokai-react-native/install-middleware"} -Next -::: -:: \ No newline at end of file diff --git a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/3.install-middleware.md b/docs/content/guides/2.alokai-essentials/2.alokai-react-native/3.install-middleware.md deleted file mode 100644 index 67030b4184..0000000000 --- a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/3.install-middleware.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Install Alokai Middleware -layout: default -navigation: - icon: tabler:number-2-small ---- - -# Install and Configure Alokai Middleware - -In the last section, we have installed the React Native application and created a new Alokai project. In this section, we will install and configure the Alokai Middleware. - -The Alokai Middleware is a Node.js application that acts as a bridge between the frontend application and the backend. It is responsible for handling all the API requests and responses, as well as managing the state of the application. - -In this guide, we will install the Alokai Middleware and configure it to work with SAP Commerce Cloud. - -## Install Alokai Middleware - -Navigate to a newly generated `middleware` directory and install the project dependencies by running the following command: - -```bash -cd storefront-middleware -yarn add @vue-storefront/middleware consola ts-node-dev dotenv typescript -yarn add -D @types/node -``` - -This will install all the necessary dependencies for the `middleware` application. - - - -## Install Alokai SAP Commerce Cloud Integration - -So far, we have installed the `storefront-middleware` application. But in order for it to run and communicate with SAP Commerce Cloud, we need to install the `@vsf-enterprise/sapcc-api` package. This package is an Alokai integration for SAP Commerce Cloud. - -It will add endpoints to your Middleware that will communicate directly with SAP. - -SAP Commerce Cloud integration is part of our Enterprise offering. To access this package, you will need to have Alokai license to access to our private npm registry. - -:::info -If you don't have access to our private npm registry, please [contact our sales team](https://vuestorefront.io/contact/sales). -::: - -Inside `storefront-middleware` directory, create `.npmrc` file and add the following line: - -```bash -@vsf-enterprise:registry=https://registrynpm.storefrontcloud.io -auto-install-peers=true -``` - -Now you can install the `@vsf-enterprise/sapcc-api` package by running the following command from `storefront-middleware` directory: - -```bash -yarn add @vsf-enterprise/sapcc-api -``` - -## Configure Alokai Middleware - -Now that you have installed the `middleware` application and the SAP Commerce Cloud integration, you need to configure the `middleware` application to work with SAP Commerce Cloud. - -To do this, you will need to create a new configuration file in the `storefront-middleware` directory. Create a new file called `middleware.config.ts` and add the following code: - -```typescript -require('dotenv').config(); - -export const integrations = { - sapcc: { - location: '@vsf-enterprise/sapcc-api/server', - configuration: { - OAuth: { - uri: process.env.SAPCC_OAUTH_URI, - clientId: process.env.SAPCC_OAUTH_CLIENT_ID, - clientSecret: process.env.SAPCC_OAUTH_CLIENT_SECRET, - tokenEndpoint: process.env.SAPCC_OAUTH_TOKEN_ENDPOINT, - tokenRevokeEndpoint: process.env.SAPCC_OAUTH_TOKEN_REVOKE_ENDPOINT, - cookieOptions: { - 'vsf-sap-token': { secure: process.env.NODE_ENV !== 'development' } - } - }, - api: { - uri: process.env.SAPCC_API_URI, - baseSiteId: process.env.DEFAULT_BASE_SITE_ID, - catalogId: process.env.DEFAULT_CATALOG_ID, - catalogVersion: process.env.DEFAULT_CATALOG_VERSION, - defaultLanguage: process.env.DEFAULT_LANGUAGE, - defaultCurrency: process.env.DEFAULT_CURRENCY - } - } - } -}; -``` - -This configuration file will include all of the necessary options for the `middleware` application to work with SAP Commerce Cloud. - -You will also need to create a new `.env` file in the `storefront-middleware` directory and add the following environment variables: - -```bash -SAPCC_OAUTH_URI= -SAPCC_OAUTH_CLIENT_ID= -SAPCC_OAUTH_CLIENT_SECRET= -SAPCC_OAUTH_TOKEN_ENDPOINT=/oauth/token -SAPCC_OAUTH_TOKEN_REVOKE_ENDPOINT=/oauth/revoke -SAPCC_API_URI= - -DEFAULT_BASE_SITE_ID= -DEFAULT_CATALOG_ID= -DEFAULT_CATALOG_VERSION= -DEFAULT_LANGUAGE= -DEFAULT_CURRENCY= -``` - -Replace the environment variables with your SAP Commerce Cloud credentials. - -## Run Alokai Middleware - -Our `middleware` application is now fully configured and ready to run. To start the `middleware` application, we need to create an entry point file in the `storefront-middleware` directory. Create a new file called `index.ts` in the `storefront-middleware/src` directory: - -```bash -mkdir src -touch src/index.ts -``` - -Add the following code to the `index.ts` file: - -```typescript -import { createServer } from '@vue-storefront/middleware'; -import { integrations } from '../middleware.config'; -const consola = require('consola'); -const cors = require('cors'); - -(async () => { - const app = await createServer({ integrations }); - // By default it's running on the localhost. - const host = process.argv[2] ?? 'localhost'; - // By default it's running on the port 8181. - const port = process.argv[3] ?? 8181; - const CORS_MIDDLEWARE_NAME = 'corsMiddleware'; - - const corsMiddleware = app._router.stack.find( - (middleware: { name: string }) => middleware.name === CORS_MIDDLEWARE_NAME - ); - - // You can overwrite the cors settings by defining allowed origins. - corsMiddleware.handle = cors({ - origin: ['http://localhost:3000'], - credentials: true - }); - - app.listen(port, host, () => { - consola.success(`API server listening on http://${host}:${port}`); - }); -})(); -``` - -This code will create a new server instance and start the `middleware` application. It will also configure the CORS settings to allow requests from `http://localhost:3000`. - -The last step is to run the `middleware` application. In order to help you with that, we will use a `"dev"` script in the `package.json` file. Add the following script to the `package.json` file: - -```json -"scripts": { - "dev": "ts-node-dev src/index.ts" -} -``` - -Now you can run the `middleware` application by running the following command from the root directory. Go to the root directory and run the following command: - -```bash -yarn dev -``` - -This will start the `middleware` application. - - - -To test if the `middleware` application is running correctly, open your terminal and run the following command: - -```bash -curl http://localhost:8181/sapcc/searchProduct -``` - -This will send a request to the `middleware` application and return a response from SAP Commerce Cloud. - -::info -You can find complete implementation in the [`install-middleware` branch](https://github.com/vuestorefront-community/alokai-rn-guide/tree/install-middleware) -:: - -## Summary - -In this section, we have installed and configured the Alokai Middleware. We have installed all the necessary dependencies for the `middleware` application and configured it to work with SAP Commerce Cloud. We have also created a new configuration file and added all the necessary environment variables. - -In the next section, we will install and configure the Alokai SDK in the React Native application. - -::card{title="Next: Install and Configure Alokai SDK" icon="tabler:number-3-small" } - -#description -Let's install and configure the Alokai SDK in the React Native application and learn how to use the Alokai products. - -#cta -:::docs-button{to="/guides/alokai-essentials/alokai-react-native/install-sdk"} -Next -::: -:: \ No newline at end of file diff --git a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/4.install-sdk.md b/docs/content/guides/2.alokai-essentials/2.alokai-react-native/4.install-sdk.md deleted file mode 100644 index 99d56ba5a6..0000000000 --- a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/4.install-sdk.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Install Alokai SDK -layout: default -navigation: - icon: tabler:number-3-small ---- - -# Install and Configure Alokai SDK - -In the last sections, we have configured Alokai React Native project and installed the Alokai Middleware. In this section, we will install and configure the Alokai SDK. - -The Alokai SDK and Alokai Middleware, together called Alokai Connect, allow your frontend to interact with your SAP Backend. The SDK is responsible for establishing the connection with the Middleware, while Middleware is responsible to orchestrate the communication with the backend. - -By using the SDK, we can have full-stack type-safety and also have predefined ways to customize data fetching. - -In this guide, we will install the Alokai SDK and configure it to work with SAP Commerce Cloud and Alokai Middleware. - -## Install Alokai SDK - -This time we will solely focus on `react-native` application. Navigate to a newly generated `storefront-react-native` directory and install the SDK package by running the following command: - -```bash -cd storefront-react-native -yarn add @vue-storefront/sdk -``` - -And that's it! You have successfully installed the Alokai SDK. Now let's configure it to work with SAP Commerce Cloud and Alokai Middleware. - -## Configure Alokai SDK - -Now that you have successfully installed the Alokai SDK and SAP Commerce Cloud integration, you need to configure the SDK. - -Before we begin, we need to install the `@vsf-enterprise/sapcc-api` package. This is the same package that we have installed in the `storefront-middleware` application. This package allows us to get the `Endpoints` type, which is used to define the API endpoints for SAP Commerce Cloud. - -```bash -yarn add @vsf-enterprise/sapcc-api -``` - -Create a new directory in the `storefront-react-native` directory called `sdk`. Inside the `sdk` directory, create a new file named `sdk.config.ts` and add the following code: - -```typescript -import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk"; -import { Endpoints as SapccEndpoints } from "@vsf-enterprise/sapcc-api"; - -const sdkConfig = { - sapcc: buildModule(middlewareModule
-
-We have successfully fetched the list of products from the SAP Commerce Cloud backend and displayed them in the UI. But, the UI is not looking good. Let's use pre-built UI component `ProductCard` from `components` folder to display the product details.
-
-### Using ProductCard Component
-
-We will use the `ProductCard` component to display the product details. Open the `components/ProductCard.tsx` file. As you can see, right now it doesn't accept any props. Let's add the props to the `ProductCard` component.
-
-Replace `ProductCard` in `components/ProductCard.tsx` with:
-
-```tsx
-import { Product } from "@vsf-enterprise/sap-commerce-webservices-sdk";
-import { transformImageUrl } from "@/utils/transformImage";
-
-export default function ProductCard({
- product,
-}: {
- product: Product;
-}) {
- return (
-
- 
-
-It's up to you to style the `ProductCard` component as you like, as well as to add more details to it and style the `ProductListingPage` as you like.
-
-Next, let's create a Product Details Page to display the product details.
-
-## Creating a Product Details Page
-
-To create a Product Details Page, we need to create a new dynamic route for the product details page. Create a new directory `app/Product Details/[product_code]` in the `app` directory. Inside the `app/Product Details/[product_code]` directory, create a new file `index.tsx` and add the following code:
-
-```tsx
-import { Text, View } from "@/components/Themed";
-import { sdk } from "@/sdk/sdk.config";
-import { Product } from "@vsf-enterprise/sap-commerce-webservices-sdk";
-import { useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-
-export default function ProductDetails() {
- const { product_code } = useLocalSearchParams();
- const [product, setProduct] = useState
-
-Let's complete the Product Details Page by adding the following code:
-
-:::info
-For the sake of this guide, all the necessary third-party libraries are already installed. You are free to use any other third-party libraries to display the product images.
-:::
-
-To simplify the guide, we already prepared the `ProductDetails` page. You can find the complete code for the `ProductDetails` page below:
-
-```tsx
-import { Text, View } from "@/components/Themed";
-import { sdk } from "@/sdk/sdk.config";
-import { transformImageUrl } from "@/utils/transformImage";
-import { Product } from "@vsf-enterprise/sap-commerce-webservices-sdk";
-import { useLocalSearchParams } from "expo-router"
-import { useEffect, useState } from "react";
-import { Dimensions, Image, ScrollView, StyleSheet } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
-
-export default function ProductScreen() {
- const { product_code } = useLocalSearchParams();
- const [product, setProduct] = useState
-
-::info
-You can find complete implementation in the [`product-page` branch](https://github.com/vuestorefront-community/alokai-rn-guide/tree/product-page)
-::
-
-
-## Summary
-
-In this section, we have successfully built a Product Listing Page and Product Details Page with Alokai. We have fetched the list of products from the SAP Commerce Cloud backend and displayed them in the UI using the `ProductCard` component. We have also created a dynamic route for the Product Details Page and displayed the product details on the Product Details Page.
-
-In the next section, we will learn how to work with the cart and add products to the cart.
-
-::card{title="Next: Add product to Cart" icon="tabler:number-6-small" }
-
-#description
-Learn how to use Alokai Connect to add product to cart
-
-#cta
-:::docs-button{to="/guides/alokai-essentials/alokai-react-native/add-to-cart"}
-Next
-:::
diff --git a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/7.add-to-cart.md b/docs/content/guides/2.alokai-essentials/2.alokai-react-native/7.add-to-cart.md
deleted file mode 100644
index 4af6121264..0000000000
--- a/docs/content/guides/2.alokai-essentials/2.alokai-react-native/7.add-to-cart.md
+++ /dev/null
@@ -1,311 +0,0 @@
----
-title: Add product to Cart
-layout: default
-navigation:
- icon: tabler:number-7-small
----
-
-# Add Product to Cart
-
-Just getting the data from the API is not enough. Ecommerce websites are feature rich and one of the most important features is the ability to add products to the cart. In this guide, we will learn how to add products to the cart in Alokai React Native application.
-
-## Add to Cart
-
-First, let's understand the process of adding a product to the cart. When a user clicks on the "Add to Cart" button, the product is added to the cart by it's `cartId`. The cart is a collection of products that the user wants to buy. The cart is stored in the backend and the frontend communicates with the backend to add products to the cart.
-
-In order to achieve this, we will use Alokai SDK method `addToCart`. It will then send a request to Alokai Middleware and the middleware will add the product to the cart.
-
-But that's not all. Since we are building a real-world application, we need to have a cart in a global state. So, let's first do some preparation.
-
-## Preparation
-
-We will create a new `CartContextProvider` component that will provide the cart to the entire application. We will also create a new `useCart` hook that will be used to access the cart from any component.
-
-First, let's create a new `CartContextProvider` component. Create a new file inside `storefront-react-native/providers/CartContextProvider.tsx` and add the following code.
-
-```tsx
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { Cart } from "@vsf-enterprise/sap-commerce-webservices-sdk";
-import { createContext, useEffect, useState } from "react";
-import { sdk } from "@/sdk/sdk.config";
-
-export const CartContext = createContext<{
- cart: Cart;
- updateCart: (cart: Cart) => void;
-}>({
- cart: {} as Cart,
- updateCart: () => { },
-});
-
-export default function CartContextProvider({ children }: { children: React.ReactNode }) {
- const [cart, setCart] = useState
-
-
-
-
-```
-
-In the code above, we are using `useSdk` composable to access Alokai SDK's. Via sdk we call `getProducts` method to send a request to the Alokai Middleware `/getProducts` endpoint. The Middleware then sends a necessary request to SAP Commerce Cloud and returns response back to Storefront.
-
-To run the application, execute the following command (remember that the middleware has to be running as well):
-
-```bash
-npm run dev
-```
-
-Navigate to `http://localhost:3000` in your browser. You should see a list of products.
-
-
-
-::info
-You can find complete implementation in the [`first-request` branch](https://github.com/vuestorefront-community/nuxt-starter/tree/first-request)
-::
-
-## Summary
-
-In this guide we have successfully utilized Alokai Connect to create our first request to get data from SAP Commerce Cloud in Alokai Nuxt application. We also got a better understanding of data flow and how to use SDK and Middleware to fetch data.
-
-In the next section, we will learn how to build UI with Storefront UI - Alokai UI components library for eCommerce applications.
-
-::card{title="Next: Build Product Details page with Storefront UI" icon="tabler:number-5-small" }
-
-#description
-Learn how to build responsive and accessible UI with Storefront UI components.
-
-#cta
-:::docs-button{to="/guides/alokai-essentials/alokai-nuxt/product-page"}
-Next
-:::
-::
\ No newline at end of file
diff --git a/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/6.product-page.md b/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/6.product-page.md
deleted file mode 100644
index 6e42f0d08b..0000000000
--- a/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/6.product-page.md
+++ /dev/null
@@ -1,329 +0,0 @@
----
-title: Build Product Details Page
-layout: default
-navigation:
- icon: tabler:number-5-small
----
-
-# Build Product Details Page with Storefront UI
-
-Every eCommerce application needs appealing, fast and responsive UI to attract and retain customers. With Storefront UI building one is easy and fast! In this guide, let's learn how to build a Product Details page. We will learn how to use Storefront UI components, blocks and of course how to customise them.
-
-::info
-Already familiar with **Storefront UI**? You can skip this section and jump to [Connecting Product Details Page with SAP Commerce Cloud](./6.connecting-pdp). You can find the code for this guide in the [nuxt-starter/product-page branch](https://github.com/vuestorefront-community/nuxt-starter/tree/product-page)
-::
-
-## Installing Storefront UI
-
-First, in order to use Storefront UI we need to install and configure it. Luckily, it's very easy to do.
-
-### Install Storefront UI
-
-In the `storefront` directory, install Storefront UI by running the following command:
-
-```bash
-npm i -D @storefront-ui/nuxt
-```
-
-Add the Nuxt Tailwind module to your `nuxt.config.ts`:
-
-```diff[nuxt.config.ts]
-export default defineNuxtConfig({
-- modules: ["@vue-storefront/nuxt"]
-+ modules: ["@vue-storefront/nuxt", "@storefront-ui/nuxt"],
-})
-```
-
-Next, initialize Tailwind CSS by running the following command:
-
-```bash
-npx tailwindcss init
-```
-
-All set! Now, let's configure Storefront UI.
-
-### Configure Storefront UI
-
-In the `storefront` directory, rename the `tailwind.config.js` file to `tailwind.config.ts` and update the file with the following content:
-
-```typescript
-import type { Config } from "tailwindcss";
-
-export default Product List:
--
-
- {{ product.name }} -
-+ Hello
-
-
-
-
-
-```
-
-Here's how the result should look like:
-
-
-
-Great! Now, let's build the Product Details page with Storefront UI.
-
-## Building Product Details Page
-
-Storefront UI is a very versatile library that provides a lot of components and blocks to build a modern eCommerce application. In this guide, we will build a Product Details page using Storefront UI components and blocks.
-
-First, let's visit Storefront UI documentation to see what components and blocks are available. You can find the [SFUI Documentation here](https://docs.storefrontui.io/v2/components).
-
-Storefront UI provides two type of components: Base Components and Blocks. Base Components are the basic building blocks of the UI and Blocks are the pre-built components that can be used to build a page. Blocks are made up of Base Components. Blocks are very useful to build a page quickly and easily without writing a lot of code. This is exactly what we need to build a Product Details page.
-
-### Product Details Page Blocks
-
-To build the Product Details we will use the following Storefront UI Blocks:
-
-- [Product Details](https://docs.storefrontui.io/v2/vue/blocks/productcard)
-- [Product Gallery with Vertical Thumbnails](https://docs.storefrontui.io/v2/vue/blocks/gallery)
-- [Product Slider](https://docs.storefrontui.io/v2/vue/blocks/productslider)
-
-Let's start building the page!
-
-### Product Details Page
-
-Storefront UI is not like most traditional UI libraries. Blocks are too complex to be used directly imported from the library. It would be very difficult and time consuming to customize them. So, instead, Storefront UI provides Blocks that can be copied and pasted into the project and then customized. Since all of the source code is available directly to you, including any styles - you have full control to change the styling.
-
-First, let's create new files for the Product Details page. In the `storefront` directory, create a new directory called `components` and inside it create a new file called `ProductDetails.vue`. Add the code from the [Product Details](https://docs.storefrontui.io/v2/vue/blocks/ProductCard.html#details) `Code` tab to the file:
-
-```vue
-
- Product List:
--
-
- {{ product.name }} -
-
- Mini Foldable Drone with HD Camera FPV Wifi RC Quadcopter
- $2,345.99 -
- 123
- 123 reviews
-
- -
-
- HD Pictures & Videos and FPV Function -
- Intelligent Voice Control -
- Multiple Fun Flights -
- Easy to Use -
- Foldable Design & Double Flight Time -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ max }} in stock -
-
-
-
-
-
-
-
-
-
-
- Free shipping, arrives by Thu, Apr 7. Want it faster?
-
-
-
- Pickup not available at your shop.
-
-
-
- Free 30-days returns.
-
-
-
-
-
-```
-
-This will add some basic styles to the page. Here's how the result should look like:
-
-
-
-This looks much better!
-
-Our Product Details page is ready! With only a few simple steps and a bit of styling, we have built a modern and responsive Product Details page. In the next section, we will learn how to connect the Product Details page with the SAP Commerce Cloud.
-
-::info
-You can find the complete implementation in the [`product-page` branch](https://github.com/vuestorefront-community/nuxt-starter/tree/product-page)
-::
-
-## Summary
-
-In this guide, we have successfully installed and configured Storefront UI and built a Product Details page using Storefront UI components and blocks. We have also added some basic styles to the page to make it look more appealing and responsive.
-
-In the next section, we will learn how to connect the Product Details page with the SAP Commerce Cloud.
-
-::card{title="Next: Connecting Product Details Page with SAP Commerce Cloud" icon="tabler:number-6-small" }
-
-#description
-Learn how to use real data from SAP Commerce Cloud with Storefront UI
-
-#cta
-:::docs-button{to="/guides/alokai-essentials/alokai-nuxt/connecting-pdp"}
-Next
-:::
diff --git a/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/7.connecting-pdp.md b/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/7.connecting-pdp.md
deleted file mode 100644
index 39145629a2..0000000000
--- a/docs/content/guides/2.alokai-essentials/3.alokai-nuxt/7.connecting-pdp.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Connect Product Details Page
-layout: default
-navigation:
- icon: tabler:number-6-small
----
-
-# Connecting Product Details Page with SAP Commerce Cloud
-
-In the previous step, we have created a template for the a product details page using Storefront UI. Now, we will connect it with the SAP Commerce Cloud backend to display the product details.
-
-## Fetching Products from SAP Commerce Cloud
-
-In chapter 4 ([First Request](/guides/alokai-essentials/alokai-nuxt/first-request)) we displayed a list of products
-from SAP CC on homepage. Now let's make that list link to product details pages
-
-Replace the content of the `pages/index.vue` with the following code:
-
-```vue
-
-
-
-
-
-
-
-```
-
-Now, when you click on a product, you will be redirected to the product details page.
-
-## Fetching Product Details from SAP Commerce Cloud
-
-Now, we need to fetch the product details from the SAP Commerce Cloud backend to display the product details on the product details page.
-
-In the `/pages/product/[id].vue` file, let's make some changes to fetch the product details from the backend. The final code of the `apps/storefront/pages/product/[id].vue` file should look like this:
-
-```vue
-
- Product List:
--
-
-
-
{{ product.name }} -
-
-
-
-
-
-
-
-```
-
-In the above code, we have used the `useSdk` function to obtain an instance of the Alokai SDK. We have used the `getProduct` method to fetch the product details from the backend. We have used the `useRoute` composable to get the `id` of the product from the URL. We have used the `console.log` function to log the product details to the console. Once you visit the product details page, you will see the product details logged to the console as shown below:
-
-
-
-Now, we have successfully connected the product details page with the SAP Commerce Cloud backend. In the next step, we will display the product details on the product details page.
-
-## Displaying Product Details
-
-Storefront UI Blocks are designed to be used with any backend and it does not follow any specific data structure. We need to map the data from the SAP Commerce Cloud backend to the Storefront UI Blocks to display the product details.
-
-### ProductDetails Block
-
-Let's start by creating a TypeScript interface for the props of the `ProductDetails` Block.
-
-In order to simplify the type definition, we will install the `@vsf-enterprise/sap-commerce-webservices-sdk` type definitions package. This package contains all SAP Commerce Cloud native types. Run the following command in the root of your project to install the package:
-
-```bash
-npm install @vsf-enterprise/sap-commerce-webservices-sdk
-```
-
-Open the `apps/storefront/components/ProductDetails.vue` file and add the following code to the component script:
-
-```ts
-import type { Product } from "@vsf-enterprise/sap-commerce-webservices-sdk";
-
-interface ProductDetailsProps {
- product: Product;
-}
-
-const props = defineProps-
--
- HD Pictures & Videos and FPV Function --
- Intelligent Voice Control --
- Multiple Fun Flights --
- Easy to Use --
- Foldable Design & Double Flight Time --
-
-
-
-
-
-
-```
-
-Now, let's create new layout add `NavBar` there. Create `apps/storefront/layouts/default.vue` file with the following content:
-
-```vue
-
-
-
-+ Product List:
--
-
-
-
{{ product.name }} -
-
-
-
-
-+
-
- Product List:
--
--
- -+
-
-
{{ product.name }} -
-
-
- - {{ product.name }} -
- {{ product.price?.value.currency }} - {{ product.price?.value.amount }} -
- {{ product.rating?.count }}
-
- {{ product.rating?.count }} reviews
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {{ max }} in stock -
-
-
-
-
-
-
-
-
-
-
- Free shipping, arrives by Thu, Apr 7. Want it faster?
-
-
-
- Pickup not available at your shop.
-
-
-
- Free 30-days returns.
-
-
-
-
- - -::card{title="Alokai with Next.js app router" icon="tabler:cube" to="/guides/customization/app-router" } - -#description -Learn how to customize Alokai application with Next.js app router -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/1.pages-router/1.index.md b/docs/content/guides/4.customization/1.pages-router/1.index.md deleted file mode 100644 index eb6a24652b..0000000000 --- a/docs/content/guides/4.customization/1.pages-router/1.index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Alokai Customization Guide -layout: default ---- - -# Alokai Customization Guide - -Alokai is not a cookie-cutter solution, it is meant to flexible enough to handle even the complex use cases. This guide will take you through the most common customization scenarios. We aim to cover end-to-end implementation of realistic business requirements. - -Some of the customizations you'll do throughout this guide are: - -::list{type="success"} -- Customizing the logo image -- Adjusting the theme colors -- Inserting a pre-header -- Implementing i18n (internationalization) -- Modifying the look and feel of various components -- Implementing a filter search feature -- Creating a new page with a list of brands -- Adding an "available for pickup" feature - add custom fields to our unified data model -- Customizing the product slug to change the PDP URL -- Fetching product reviews from an external service -- Building a completely new feature from scratch. You will mock a "social product images" feature -:: - -::info -Please bear in mind that this guide is not exhaustive - Alokai offers some more features that you can find in our -documentation:
-
- );
-}
-```
-
-2. Add `PreHeader` component to `NavbarTop`:
-
-
-```ts
-export function NavbarTop({ className, children, filled }: NavbarTopProps) {
- const { t } = useTranslation();
-
- return (
- <>
-
-
-
-
-
- Limited offer. Use code: ALOKAI2024
-
-
- );
-}
-```
-
-## Modifying the product card on PLP
-
-As a challenge, try to implement these design changes on your own by making the changes to the `ProductCardVertical` component.
-
-
-
-To check your solution, you can look at [our implementation](https://github.com/vsf-customer/extensibility-demo/blob/main/apps/storefront-unified-nextjs/components/ui/ProductCard/ProductCardVertical.tsx).
-
-## Facet search on PLP
-
-Now let's try something more ambitious - we'll extend facet's (aka filters) behavior. We want to be able to filter/search through the facets.
-
-Before jumping to the solution I encourage you to think about how would you do this yourself. Investigate the application and which parts you need to modify.
-
-### Solution
-
-1. Under `storefront-unified-nextjs/components/CategoryFilters/Filters` create a new `FilterSearch` component that would be our searchbox. As a starting point, you can use [Storefront UI's Search Block](https://docs.storefrontui.io/v2/react/blocks/search).
-
-
-```ts [storefront-unified-nextjs/components/CategoryFilters/Filters/FilterSearch.tsx]
-import { useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
-import { SfIconCancel, SfIconSearch, SfInput } from '@storefront-ui/react';
-import { FilterSearchProps } from '../types';
-
-export default function FilterSearch({ onSearch }: FilterSearchProps) {
- const inputRef = useRef
- {children({
- itemsToRender,
- onItemClick: onSelect,
- selected: selectedValues,
- })}
- {isButtonVisible && (
-
- {showMore ? t('showLess') : t('showMore')}
-
- )}
-
- - - -::card{title="Next: Adding new page" icon="tabler:number-2-small" } - -#description -Learn how to create a custom Alokai page. - -#cta -:::docs-button{to="/guides/customization/pages-router/brands-page"} -Create a new page -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/1.pages-router/3.brands-page.md b/docs/content/guides/4.customization/1.pages-router/3.brands-page.md deleted file mode 100644 index 22497ac222..0000000000 --- a/docs/content/guides/4.customization/1.pages-router/3.brands-page.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -layout: default -navigation: - icon: tabler:number-2-small ---- - -# Adding a New Page - -In this chapter, we will create a new custom page. It will be a page listing all the brands that will look like this: - - - -The process of creating a new page with Alokai is no different than creating one with [Next.js](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts). However, when building your page, Alokai offers a few useful features that you'll want to take advantage of. - - -1. Create `storefront-unified-nextjs/pages/brands.tsx` file with the following content: - - -```tsx [storefront-unified-nextjs/pages/brands.tsx] -import { SfLink } from '@storefront-ui/react'; -import { SfCategory } from 'storefront-middleware/types'; -import { NarrowContainer } from '~/components'; -import { appRoutes } from '~/config'; -import { useCategories } from '~/hooks'; -import { DefaultLayout } from '~/layouts'; -import { Maybe } from '~/types'; - -type BrandsAlphabetically = Record
All Brands
-
- {letters.map((letter) => (
-
- {letter}
-
- ))}
-
-
- {letters.map((letter) => (
-
-
-
- ))}
- {letter}
-
- {brands[letter].map((brand) => (
-
-
- {brand.name}
-
- ))}
- All Brands
-
- {letters.map((letter) => (
-
- {letter}
-
- ))}
-
-
- {letters.map((letter) => (
-
-
-
- ))}
- {letter}
-
- {brands[letter].map((brand) => (
-
-
- {brand.name}
-
- ))}
-
-+
- All Brands
-+
-
-```
-
-::warning
-Import the `Trans` component from `next-i18next` rather than `react-i18next` as this might lead to SSR issues.
-::
-
-::info
-You can find a complete project example in this repository: - - -::card{title="Next: Customizing Unified Data Model" icon="tabler:number-3-small" } - -#description -Learn how to add custom fields to the Unified Data Model - -#cta -:::docs-button{to="/guides/customization/pages-router/add-custom-field"} -Customize UDL -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/1.pages-router/4.add-custom-field.md b/docs/content/guides/4.customization/1.pages-router/4.add-custom-field.md deleted file mode 100644 index b5867f6da8..0000000000 --- a/docs/content/guides/4.customization/1.pages-router/4.add-custom-field.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Adding custom fields -layout: default -navigation: - icon: tabler:number-3-small ---- - -# Adding custom fields to the Unified Data Model / Implementing "Available for pickup" feature - -It's a common case to enrich the default data models with custom fields. - -In this chapter, you will learn: - -::list{type="success"} -- how to add a custom field to the unified product data model in the middleware -- how to utilize that field in the storefront -:: - -By adding a "pickup availability" feature. - - - -1. Open `apps/storefront-middleware/integrations/sapcc/extensions/unified.ts` file and modify the code accordingly: - - -```diff [apps/storefront-middleware/integrations/sapcc/extensions/unified.ts] -export const unifiedApiExtension = createUnifiedExtension({ - normalizers: { - addCustomFields: [ -+ { -+ normalizeProduct(context, input) { -+ return { -+ availableForPickup: input.availableForPickup, -+ }; -+ }, -+ }, - ], - }, -``` - -Within `addCustomFields`, we extend the normalizer functions. We take the raw input (coming from eCommerce) and have to -return a set of custom fields. - - -::info -Read more about normalizers and custom fields here: https://docs.alokai.com/storefront/unified-data-layer/normalizers -:: - -2. Now, `availableForPickup` field should be available in the front end, so let's use it. Replace the hardcoded placeholder -in the `PurchaseCard` component: - - -```diff [storefront-unified-nextjs/components/PurchaseCard/PurchaseCard.tsx] --
Pickup {product.$custom?.availableForPickup ? '' : 'not'} available
-``` - -And that's it. You can find a complete project example in this repository:- - -::card{title="Next: Calling custom endpoint" icon="tabler:number-5-small" } - -#description -Learn how to call a 3rd party back-end service and replace OOTB API method. - -#cta -:::docs-button{to="/guides/customization/pages-router/method-overriding"} -Next -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/1.pages-router/6.method-overriding.md b/docs/content/guides/4.customization/1.pages-router/6.method-overriding.md deleted file mode 100644 index afa9574c29..0000000000 --- a/docs/content/guides/4.customization/1.pages-router/6.method-overriding.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Calling custom endpoints -layout: default -navigation: - icon: tabler:number-5-small ---- - -# Overriding API methods / Getting product reviews from an external source - -Alokai Middleware is called an integration layer - it's responsible for combining data from different sources and -presenting it to the front end in a simple form. In this chapter, we will tackle a common business case - fetching reviews -from an external system. It is a common scenario that product reviews are managed by a dedicated service rather than the -eCommerce platform. - -Thanks to the Unified Data Model we won't need to touch the front end at all to implement this. - -1. Open `apps/storefront-middleware/integrations/sapcc/extensions/unified.ts` and add this code: - - -```diff [apps/storefront-middleware/integrations/sapcc/extensions/unified.ts] -+ interface DummyReview { -+ rating: number; -+ comment: string; -+ date: string; -+ reviewerName: string; -+ reviewerEmail: string; -+ } -+ interface DummyProduct { -+ reviews: DummyReview[]; -+ } - -// ... - -export const unifiedApiExtension = createUnifiedExtension({ - - // ... - -+ methods: { -+ override: { -+ getProductReviews: async (context, args) => { -+ const product: DummyProduct = await ( -+ await fetch(`https://dummyjson.com/products/${args.productId.slice(0, 2)}`) -+ ).json(); -+ const reviews: SfProductReview[] = product.reviews.map((review) => ({ -+ id: crypto.randomUUID().toString(), -+ createdAt: review.date, -+ rating: review.rating, -+ reviewer: review.reviewerName, -+ text: review.comment, -+ title: review.comment.slice(0, 10), -+ })); -+ return { -+ pagination: { -+ currentPage: 1, -+ pageSize: reviews.length, -+ totalPages: 1, -+ totalResults: reviews.length, -+ }, -+ reviews: reviews, -+ }; -+ }, -+ }, -+ }, -``` - -What we do here is overwrite the OOTB `getProductReviews` that by default fetches reviews from the eCommerce platform. -We used [DummyJSON API](https://dummyjson.com) to fetch some random product data and extract reviews from it. Imagine that it could be any review -service. Then we transform the proprietary data model into the Unified Data Model. - -2. Open a product page and expand "Customer Reviews". You should see some random reviews now. - - - -3. To make our code more scalable we can extract the new method from the `unified.ts` file with the help of the `defineApi` -function. - -```ts -const getProductReviews = defineApi.getProductReviews(async (context, args) => { - // function body -}); -``` - -You can find a complete project example in this repository:
-
- );
-}
-```
-
-Add this component in `ProductAccordion` component (`/storefront-unified-nextjs/components/ProductAccordion/ProductAccordion.tsx`)
-
-
-```diff [/storefront-unified-nextjs/components/ProductAccordion/ProductAccordion.tsx]
- By {socialImage.data?.author}
-
-
-
- )}
-
-+
-
- );
-}
-```
-
-2. Add `PreHeader` component to `NavbarTop`:
-
-```tsx
-export default function NavbarTop({ children, className, filled }: NavbarTopProps) {
- const t = useTranslations('NavbarTop');
- const messages = useMessages();
-
- return (
- <> /* [!code ++] */
-
-
-
-
-
-
-
- );
-}
-
-```
-
-## Modifying the product card on PLP
-
-As a challenge, try to implement these design changes on your own by making the changes to the `ProductCardVertical` component.
-
-
-
-To check your solution, you can look at [our implementation](https://github.com/vsf-customer/extensibility-demo-v2/blob/main/apps/storefront-unified-nextjs/components/product-card-vertical.tsx).
-
-## Facet search on PLP
-
-Now let's try something more ambitious - we'll extend facet's (aka filters) behavior. We want to be able to filter/search through the facets.
-
-Before jumping to the solution, think about how would you do this yourself. Investigate the application and which parts you need to modify.
-
-### Solution
-
-1. Under `apps/storefront-unified-nextjs/components/products-listing` create a new `FilterSearch` component that would be our searchbox. As a starting point, you can use [Storefront UI's Search Block](https://docs.storefrontui.io/v2/react/blocks/search).
-
- ```tsx [apps/storefront-unified-nextjs/components/products-listing/filter-search.tsx]
- import { SfIconCancel, SfIconSearch, SfInput } from '@storefront-ui/react';
- import { useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from 'react';
-
- export type FilterSearchProps = {
- onSearch: (value: string) => void;
- };
-
- export default function FilterSearch({ onSearch }: FilterSearchProps) {
- const inputRef = useRef
-
- {facet.values.map((item) => (/* [!code --] */
- {values.map((item) => ( /* [!code ++] */
- toggleFacet(item.value)}
- selected={selected.includes(item.value)}
- />
- ))}
-
-
- - - -::card{title="Next: Adding new page" icon="tabler:number-2-small" } - -#description -Learn how to create a custom Alokai page. - -#cta -:::docs-button{to="/guides/customization/app-router/brands-page"} -Create a new page -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/2.app-router/3.brands-page.md b/docs/content/guides/4.customization/2.app-router/3.brands-page.md deleted file mode 100644 index 1c6f300eac..0000000000 --- a/docs/content/guides/4.customization/2.app-router/3.brands-page.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -layout: default -navigation: - icon: tabler:number-2-small ---- - -# Adding a New Page - -In this chapter, we will create a new custom page. It will be a page listing all the brands that will look like this: - - - -The process of creating a new page with Alokai is no different than creating one with [Next.js](https://nextjs.org/docs/app/building-your-application/routing/pages). However, when building your page, Alokai offers a few useful features that you'll want to take advantage of. - -1. Create `apps/storefront-unified-nextjs/app/[locale]/(default)/brands` folder and `page.tsx` file with the folowing content: - -```tsx [apps/storefront-unified-nextjs/app/[locale]/(default)/brands/page.tsx] -import { Link } from '@/config/navigation'; -import { getSdk } from '@/sdk'; -import { Maybe } from '@/types'; -import { SfCategory } from 'storefront-middleware/types'; - -type BrandsAlphabetically = Record
-
- );
-}
-```
-
-This code uses `sdk.unified.getCategories` method to fetch the 'brands' category. The subcategories represent different brands.
-
-Your backend might not have such a special category so you need to figure out yourself where to fetch the list of brands from.
-
-`categoriesToBrands` transforms the category data into a structure that is easier to render in the way we want.
-
-2. Open `http://localhost:3000/brands` and check if it works.
-
-3. Lastly, we would like to add some custom translations to our page. We will translate the "All Brands" heading.
-We've learned how to add translations in the previous chapter.However, this time we're using translations in an `async`
-component and it requires slightly different syntax
-
-Open both `en/base.json` and `de/base.json` files and add a new translation there:
-
-```diff [en/base.json]
-},
-+ "Brands": {
-+ "allBrands": "All Brands"
-+ },
-```
-
-```diff [de/base.json]
- },
-+ "Brands": {
-+ "allBrands": "Alle Marken"
- },
-```
-
-Modify `apps/storefront-unified-nextjs/app/[locale]/(default)/brands/page.tsx`:
-
-```tsx [apps/storefront-unified-nextjs/app/[locale]/(default)/brands/page.tsx]
-//...
- const categories = await sdk.unified.getCategories({ ids: ['brands'] });
- const t = await getTranslations('Brands'); // [!code ++]
- const brands = categoriesToBrands(categories?.[0]?.subcategories);
-// ...
-All Brands
-
- {letters.map((letter) => (
-
- {letter}
-
- ))}
-
-
- {letters.map((letter) => (
-
-
-
- ))}
- {letter}
-
- {brands[letter].map((brand) => (
-
-
-
- {brand.name}
-
-
- ))}
- All Brands
// [!code --] -{t('allBrands')}
// [!code ++] -// ... -``` - - - - -::info -You can find a complete project example in this repository:- - -::card{title="Next: Customizing Unified Data Model" icon="tabler:number-3-small" } - -#description -Learn how to add custom fields to the Unified Data Model - -#cta -:::docs-button{to="/guides/customization/app-router/add-custom-field"} -Customize UDL -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/2.app-router/4.add-custom-field.md b/docs/content/guides/4.customization/2.app-router/4.add-custom-field.md deleted file mode 100644 index 2ac4355aca..0000000000 --- a/docs/content/guides/4.customization/2.app-router/4.add-custom-field.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Adding custom fields -layout: default -navigation: - icon: tabler:number-3-small ---- - -# Adding custom fields to the Unified Data Model / Implementing "Available for pickup" feature - -It's a common case to enrich the default data models with custom fields. - -In this chapter, you will learn: - -::list{type="success"} -- how to add a custom field to the unified product data model in the middleware -- how to utilize that field in the storefront -:: - -By adding a "pickup availability" feature. - - - -1. Open `apps/storefront-middleware/integrations/sapcc/extensions/unified.ts` file and modify the code accordingly: - -```diff [apps/storefront-middleware/integrations/sapcc/extensions/unified.ts] -export const unifiedApiExtension = createUnifiedExtension({ - normalizers: { - addCustomFields: [ -+ { -+ normalizeProduct(context, input) { -+ return { -+ availableForPickup: input.availableForPickup, -+ }; -+ }, -+ }, - ], - }, -``` - -Within `addCustomFields`, we extend the normalizer functions. We take the raw input (coming from eCommerce) and have to -return a set of custom fields. - -::info -Read more about normalizers and custom fields here: https://docs.alokai.com/storefront/unified-data-layer/normalizers -:: - -2. Now, `availableForPickup` field should be available in the front end, so let's use it. Replace the hardcoded placeholder -in the `PurchaseCard` component: - - -```diff [apps/storefront-unified-nextjs/components/purchase-card.tsx] -- {t.rich('additionalInfo.pickup', { -- link: (chunks) => ( --
Pickup {product.$custom?.availableForPickup ? '' : 'not'} available
-``` - -And that's it. You can find a complete project example in this repository:- - -::card{title="Next: Calling custom endpoint" icon="tabler:number-5-small" } - -#description -Learn how to call a 3rd party back-end service and replace OOTB API method. - -#cta -:::docs-button{to="/guides/customization/app-router/method-overriding"} -Next -::: -:: \ No newline at end of file diff --git a/docs/content/guides/4.customization/2.app-router/6.method-overriding.md b/docs/content/guides/4.customization/2.app-router/6.method-overriding.md deleted file mode 100644 index 9b7ef2bc50..0000000000 --- a/docs/content/guides/4.customization/2.app-router/6.method-overriding.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Calling custom endpoints -layout: default -navigation: - icon: tabler:number-5-small ---- - -# Overriding API methods / Getting product reviews from an external source - -Alokai Middleware is called an integration layer - it's responsible for combining data from different sources and -presenting it to the front end in a simple form. In this chapter, we will tackle a common business case - fetching reviews -from an external system. It is a common scenario that product reviews are managed by a dedicated service rather than the -eCommerce platform. - -Thanks to the Unified Data Model we won't need to touch the front end at all to implement this. - -1. Open `apps/storefront-middleware/integrations/sapcc/extensions/unified.ts` and add this code: - -```diff [apps/storefront-middleware/integrations/sapcc/extensions/unified.ts] -- import { createUnifiedExtension } from "@vsf-enterprise/unified-api-sapcc"; -+ import { createUnifiedExtension, SfProductReview } from "@vsf-enterprise/unified-api-sapcc"; -+ import crypto from "crypto" -// ... - -+ interface DummyReview { -+ rating: number; -+ comment: string; -+ date: string; -+ reviewerName: string; -+ reviewerEmail: string; -+ } -+ interface DummyProduct { -+ reviews: DummyReview[]; -+ } - -// ... - -export const unifiedApiExtension = createUnifiedExtension({ - - // ... - -+ methods: { -+ override: { -+ getProductReviews: async (context, args) => { -+ const product: DummyProduct = await ( -+ await fetch(`https://dummyjson.com/products/${args.productId.slice(0, 2)}`) -+ ).json(); -+ const reviews: SfProductReview[] = product.reviews.map((review) => ({ -+ id: crypto.randomUUID().toString(), -+ createdAt: review.date, -+ rating: review.rating, -+ reviewer: review.reviewerName, -+ text: review.comment, -+ title: review.comment.slice(0, 10), -+ })); -+ return { -+ pagination: { -+ currentPage: 1, -+ pageSize: reviews.length, -+ totalPages: 1, -+ totalResults: reviews.length, -+ }, -+ reviews: reviews, -+ }; -+ }, -+ }, -+ }, -``` - -What we do here is overwrite the OOTB `getProductReviews` that by default fetches reviews from the eCommerce platform. -We used [DummyJSON API](https://dummyjson.com) to fetch some random product data and extract reviews from it. Imagine that it could be any review -service. Then we transform the proprietary data model into the Unified Data Model. - -2. Open a product page and expand "Customer Reviews". You should see some random reviews now. - - - -3. To make our code more scalable we can extract the new method from the `unified.ts` file with the help of the `defineApi` -function. - -```ts -const getProductReviews = defineApi.getProductReviews(async (context, args) => { - // function body -}); -``` - -You can find a complete project example in this repository:
-
- );
-}
-```
-
-Add this component to Product Details Page. Open `apps/storefront-unified-nextjs/app/[locale]/(default)/product/[slug]/[id]/page.tsx` and use
-`AccordionItem` component to add `SocialImages` component.
-
-```tsx [apps/storefront-unified-nextjs/app/[locale]/(default)/product/[slug]/[id]/page.tsx]
-
- /* [!code ++:9] */
- By {socialImage.author}
--In reality, requesting a full app route as part of a liveness check - especially during periods of heavy traffic - can lead to new connection being opened that will never be resolved. A full page app can take hundreds of miliseconds to respond and contain a few kilobytes of payload. The simple route described below will respond in a few miliseconds with a two byte body size. -
-Do not make `/healthz` or `/readyz` a full app route. Instead keep it as simple as possible, by following the instructions below. Do not consider liveness probes as a fully fledged application smoke test, but as a simple check if the app can serve a basic HTTP request. -:: - -#### Nuxt - -In Nuxt, to create a `/healthz` endpoint, use [server endpoints](https://nuxt.com/docs/getting-started/server#server-endpoints-middleware). Create a
-
-The `Storefront` is a Next/Nuxt application. Api is any 3rd party system.
-
-Animation below visualizes the difference between server and client side fetching. Product data is fetched on the server and rendered to HTML, so the product data is visible immediately after page load. Cart data is fetched client side, so we see a spinner that is replaced by content when cart data is loaded.
-
-
-
-## How to pick data fetching strategy
-
-The rule of thumb is: _always use server-side fetching except for_:
-
-- **lazy loaded data** - data that is not visible immediately on page load and can be removed from server-side rendered html to reduce its size. For example:
- - product reviews should appear only when user clicks expand on the “reviews accordion”
- - content below the fold is fetched on scroll
-
-- **personalized data** - data that is different for each user or group. Fetching such data server side would not only cause flickering but also might cause problem with caching ([read more about caching](/storefront/features/cdn/making-ssr-cacheable)). For example:
- - pricing data might be different for each customer group
- - product recommendations are based on individual user’s journey
- - cart content is specific for each user
-
-## Data fetching in Alokai
-
-Alokai architecture introduces the Middleware in between the front-end application and the APIs. This adds two additional possible routes to our diagram, but most of the traffic should go through the middleware, because:
-
-
-
-- it keeps your architecture simple
-- you can easily monitor middleware traffic in the console
-- enables [data federation](/middleware/guides/federation)
-- ensures middleware reusability and omnichannel capabilities
-
-
-
-Fortunately, we can reject the route between the server and the API, because:
-
-- effectively it is similar to reaching through the middleware, but adds unnecessary complexity to the architecture,
-- tightly couples the storefront with the API.
-
-The direct route between the browser and API should be avoided, because it:
-
-- tightly couples storefront with the API,
-
-
-
-Use direct direct browser to API calls only when communicating via middleware is not possible or requires unnecessary effort. Sample scenarios when it might be valid to communicate directly between client and API:
-
-- the communication requires extremely low latency - e.g. voice or video stream
-- communication with API is done via some SDK that requires direct client (browser) interaction - e.g. analytics or authentication services
-
-
-
-
-
-## Examples
-
-### Server-Side fetching in Next.js
-
-In this example we fetch product data on the server and display it's name.
-
-```tsx
-import { getSdk } from '@/sdk';
-
-export default async function ServerSideDataFetching() {
- const sdk = getSdk(); // get the SDK instance on the server side.
-
- const response = await sdk.unified.getProductDetails({ id: '300013358' }); // fetch product data
- const product = response?.product ?? null;
-
- return Product name: {product.name}
; // display product name -} -``` - -### Client-side fetching in Next.js - -In this example we fetch product data on the client. We display loader while data is being fetched. Tanstack query is used to fetch data and manage component state. - -```tsx -'use client'; // tell nextjs to render this component on the client side - -import { SfLoaderCircular } from '@storefront-ui/react'; -import { useQuery } from '@tanstack/react-query'; - -import { useSdk } from '@/sdk/alokai-context'; - -export default function ClientSideDataFetching() { - const sdk = useSdk(); // get the SDK instance on the client side. - - // use tanstack query to fetch product data and manage the loading state - const { data: productData, isLoading } = useQuery({ - queryFn: () => sdk.unified.getProductDetails({ id: '300013358' }), - queryKey: ['product'], - }); - - // display a loader while product data is loading - if (isLoading || !productData) { - returnProduct name: {productData.product.name}
; // display product name -} -``` \ No newline at end of file diff --git a/docs/content/guides/6.best-practices/3.performance/1.index.md b/docs/content/guides/6.best-practices/3.performance/1.index.md deleted file mode 100644 index d1680be8d3..0000000000 --- a/docs/content/guides/6.best-practices/3.performance/1.index.md +++ /dev/null @@ -1,90 +0,0 @@ -# Introduction to Web Performance -::subheader -Improve your website's user experience and increase conversions by optimizing your website's performance. -:: - -Web performance is an ever-important subject in modern web. There are [multiple case studies](https://wpostats.com/) proving that storefront performance has a direct correlation with sales conversion. The bigger the sales volume the more impact it has. For example, back in 2006, Amazon found that every 100ms in added page load time cost them 1% in sales. While your Alokai application is built with the best practices in mind and delivers great speed out of the box, it's important to understand some of the basics of web performance so that as you build out your custom storefront, you can ensure that it remains fast your users have a great experience. - -On the following pages you will find list of good practices that will help you optimize your website performance. - -## Performance in Your Alokai Application - -Alokai Storefronts are built with performance in mind and implement best practices to ensure that your storefront is performant and delivers a great user experience. - -Some of the ways that the Alokai ecosystem can help you build and maintain performant e-commerce storefronts are: - -::list{type="success"} -- Alokai Connect allows you to move logic to the server, shipping less code to the browser and improving performance. -- Alokai Storefront implements practices like lazy loading, code splitting, optimized fonts/images, and avoids layout shifts with static content -- Alokai Console allows you to monitor your storefront's performance and identify areas for improvement -:: - -## Monitoring Performance - -When building your storefront, you should be monitoring your application's performance as you develop new features and make changes to your application. This will help you identify any performance issues early on and allow you to make necessary optimizations before they become a problem. - -There are many tools available for monitoring performance, and they can either capture **lab-data** - data collected from tests on your application - or **field-data** - data collected from real users visiting your live application. - -### Lighthouse - -Lighthouse allows you to test for best SEO, performance, and accessibility practices. These tests run by simulating a user's experience with a specific CPU speed, network speed, and device type. - -::info -#title -These tests may not accurately reflect your users' experience -#default -These tests run in an isolated environment - so while they can be a way to identify issues, they may not give you a complete picture of how your site performs for real users. -:: - -We recommend using tools like [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) to run performance checks during your CI/CD pipeline. - -While it's possible to run Lighthouse locally using Chrome DevTools, the results may [differ depending on the device](https://vueschool.io/articles/vuejs-tutorials/understanding-and-measuring-nuxt-performance-vue-js-3-performance/). In order for your performance metrics to have meaningful results over time, it's important to run them in a consistent environment. - -In regards to performance, Lighthouse will give you a score for five different metrics: - -1. First Contentful Paint (FCP) - the time it takes for the browser to paint the first text or image -3. Speed Index - how quickly the contents are visible to the user -4. Total Blocking Time (TBT) - the amount of time after the FCP that the page is blocked from receiving user input -5. Largest Contentful Paint (LCP) - when the largest contentful element is painted to the viewport -6. Cumulative Layout Shift (CLS) - the movement of visible elements on the page. - - -**You should optimize Lighthouse metrics in projects that are not yet live. Despite it being a synthetic data it can give you a rough idea of how the real-user experience will look like.** - -**See More**: -- [Lighthouse Docs](https://developer.chrome.com/docs/lighthouse/overview) -- [Lighthouse Metrics](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint) - -### Core Web Vitals - -Core Web Vitals uses user data to measure the performance of your website. By aggregating data from real browsers into the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux) - you can get a real understanding of how your site is performing for real users. -You can audit your application's to check the Core Web Vitals using [https://pagespeed.web.dev/](https://pagespeed.web.dev/). - -**See More**: -- [Web Vitals](https://web.dev/articles/vitals) -- [Defining the Core Web Vitals Thresholds](https://web.dev/articles/defining-core-web-vitals-thresholds) - -**You should optimize Core Web Vitals metrics in projects that are already live as it's the actual representation of the experience that your users has when browsing your website** - - - -### Performance Auditing in Alokai Console - -Alokai Console is the cloud hosting platform that helps e-commerce storefront developers streamline their workflow and maximize their development potential. - -One of the key features of Alokai Console is Performance Auditing that allows you to keep track of your website performance. - -::info -Audits are conducted automatically after each new deployment of the application for all configured URL's or can be scheduled manually. -:: - -Performance audits enable the discovery and improvement of the quality of a website or application by examining metrics that highlight the key areas of user experience. Audits can be compared which allows to continously monitor and audit the performance of websites which helps avoid bad performance after releasing into production or identify what impacted your site's performance. - -For each instance, you can add a maximum of 3 URLs, each with a customizable name for easy identification. Each URL will be provide reports for the desktop and mobile versions of the website. - -Alokai Performance Auditing uses _Google PageSpeed Insights_ to provide performance insights into two sections; `Real users experience` and `Lab data`. The first one corresponds to `Core Web Vitals` and in general is gathered from real user devices, while the second one corresponds to `Lighthouse` and is gathered while auditing the page in an isolated environment. To better understand your website performance, it is recommended that you take both into consideration. - -**See More**: -- [Alokai Console](/console) - - diff --git a/docs/content/guides/6.best-practices/3.performance/2.core-web-vitals.md b/docs/content/guides/6.best-practices/3.performance/2.core-web-vitals.md deleted file mode 100644 index a2f19dd7ce..0000000000 --- a/docs/content/guides/6.best-practices/3.performance/2.core-web-vitals.md +++ /dev/null @@ -1,169 +0,0 @@ -# Improving Core Web Vitals - -Web Vitals are unified and simplified metrics created by Google to help site owners understand the quality of experience they are delivering to their users. Core Web Vitals are the subset of Web Vitals focused on three aspects of the user experience - loading (LCP), interactivity (INP), and visual stability (CLS). - - -## Largest Contentful Paint (LCP) - -Largest Contentful Paint (LCP) is the time it takes for the browser to paint the largest contentful element on the page. To improve the LCP metric, you need to start loading that element as fast as possible. - -If it needs an asset like JavaScript, CSS, image, or font, use the "preloading". It's a technique for telling a browser to download a resource before it discovers it's needed. - -For example, you might have a font that the browser can discover late (because it first needs to download and parse the CSS file), but you know that it's critical to your website. You can preload it, so once the browser parses the CSS and finds out that the font is needed, it will already have it downloaded. - - -### Identifying the Largest Contentful Paint - -The easiest way to learn which element is the Largest Contentful Paint is using [PageSpeed Insights](https://pagespeed.web.dev/) page. After generating the report, the LCP metric and what element it relies on is displayed under the "Largest Contentful Paint element" diagnostic. - -Another option is to run Lighthouse in Chrome DevTools, described on [Google Developers](https://developers.google.com/web/tools/lighthouse#devtools) website. - -### Preloading Images - -If there is an image in the viewport, preloading it will help the browser load it as soon as possible. - -Frameworks like [Next.js](https://nextjs.org/docs/pages/api-reference/components/image#priority) and [Nuxt](https://image.nuxt.com/usage/nuxt-img#preload) have image libraries that provide preloading functionality, but it is also possible to preload images manually using the `` tag. - -::code-group -```html[Next.js] -https://nextjs.org/docs/pages/api-reference/components/image#priority -
-
-
-```
-::
-
-
-
-**See More**:
-- [Google's Guide on Optimizing CLS](https://web.dev/articles/optimize-cls)
\ No newline at end of file
diff --git a/docs/content/guides/6.best-practices/3.performance/_dir.yml b/docs/content/guides/6.best-practices/3.performance/_dir.yml
deleted file mode 100644
index 5b858af8d0..0000000000
--- a/docs/content/guides/6.best-practices/3.performance/_dir.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-title: Performance
-sidebarRoot: true
-
diff --git a/docs/content/guides/6.best-practices/_dir.yml b/docs/content/guides/6.best-practices/_dir.yml
deleted file mode 100644
index 4b149c4163..0000000000
--- a/docs/content/guides/6.best-practices/_dir.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-title: Best Practices
-sidebarRoot: true
-navigation:
- icon: tabler:rosette-discount-check
-
diff --git a/docs/content/guides/6.best-practices/images/data-fetching-alokai-strategies.svg b/docs/content/guides/6.best-practices/images/data-fetching-alokai-strategies.svg
deleted file mode 100644
index 6f480b4ad4..0000000000
--- a/docs/content/guides/6.best-practices/images/data-fetching-alokai-strategies.svg
+++ /dev/null
@@ -1 +0,0 @@
-