Laioutr App Commercetools

Commercetools integration for Laioutr frontends using Nuxt. Connects to the Commercetools Platform API via the orchestr system, enabling backend-agnostic ecommerce functionality.

Read the full documentation

• Release Notes

Features

• Anonymous and client credentials authentication flows with secure cookie-based token caching
• Product queries by slug and category with variant resolution
• Cart management with line item support
• Menu and category browsing
• Faceted search with customizable filters and sorting
• Canonical type resolvers for Cart, MenuItem, Product, and ProductVariant

Quick Setup

Before installing dependencies, you need to create a copy of the .npmrc.config file called .npmrc and fill in the NPM_LAIOUTR_TOKEN with your npm token. You can find this token in your project settings.

• pnpm i
• npx @laioutr/cli project fetch-rc -p <organization slug>/<project slug> -s <project secret key> - This will load the laioutrrc.json file with the current remote project configuration.
• pnpm dev:prepare
• pnpm orchestr-dev

That's it! You can now use the Commercetools App in your Laioutr Frontend.

You can find a thorough guide on getting started with Laioutr development in our developer guide.

Commercetools Prerequisites

You will need the following from the Commercetools Merchant Center:

• Project Key
• API URL and Auth URL (region-specific)
• Client ID and Client Secret

Your Commercetools project should have:

• Published products with locale-specific slugs
• Categories with keys and slugs
• Inventory/availability configured
• Searchable attributes marked in product types
• Anonymous sessions enabled (for guest cart functionality)

For detailed configuration instructions, see the documentation.

Linting and Formatting

We use ESLint and Prettier to lint and format the code. This repository contains opinionated configurations for both tools. You can replace them with your own configurations.

Publishing

To publish a new version, run pnpm release. This will:

• Run the tests
• Update the changelog
• Publish the package to npmjs.org
• Push the changes to the repository

Private publishing

If you want to publish a private package to npm.laioutr.cloud, you need to:

1. Make sure you have a .npmrc with your private npm registry token.
2. Add this line to the root of the package.json file: "publishConfig": { "registry": "https://npm.laioutr.cloud/" }
3. Make sure your package-name follows the @laioutr-org/<organization-slug>_<package-name> format.

After that you can run pnpm release to publish the package to npm.laioutr.cloud.

Contribution

Follow the setup guide to get started.