### Import Map Configuration for Product Recommendations
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/installation
Configure the import map in your `head.html` to point to the product recommendations packages. This example demonstrates pointing to the local `node_modules` directory.
```html
```
--------------------------------
### Import Map Configuration for Product Recommendations (CDN)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/installation
Configure the import map in your `head.html` to point to the product recommendations packages. This example demonstrates pointing to a CDN.
```html
```
--------------------------------
### Importing Product Recommendations Files
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/installation
Import necessary JavaScript files from the drop-in components for your product recommendations block. This example shows imports for fetching GraphQL data and initializing components.
```javascript
import {
fetchGraphql
} from '@dropins/tools/fetch-graphql.js';
import {
ProductRecommendations
} from '@dropins/storefront-recommendations';
import {
initialize
} from '@dropins/tools/initializers.js';
// ... rest of your product-recommendations.js file
```
--------------------------------
### Registering and Loading Product Recommendations Component
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/installation
Register the product recommendations component and load it onto the page. This code snippet shows how to register the component and set up an event listener to mount it after the page loads.
```javascript
function registerRecommendations() {
// Register the component
initialize('product-recommendations', ProductRecommendations);
}
window.addEventListener('load', () => {
// Mount the component after the page has loaded
initialize.mount();
});
registerRecommendations();
```
--------------------------------
### Connecting to Catalog Service GraphQL Endpoint
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/installation
Establish a connection to your Adobe Commerce Catalog Service GraphQL endpoint. Ensure you replace placeholder values with your actual endpoint URL and required headers.
```javascript
const endpoint = 'https://your-commerce-instance.com/graphql';
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_TOKEN'
};
fetchGraphql(endpoint, YOUR_QUERY, headers).then(response => {
// Handle the response
});
```
--------------------------------
### Import Map for PDP Component (HTML)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Example of an import map added to an `head.html` file. This map points both the drop-in component tools and the PDP drop-in component to local directories within `node_modules`.
```html
```
--------------------------------
### Example CartSummaryList Configuration
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/containers/cart-summary-list
This example demonstrates how to render the CartSummaryList container with routeProduct and routeEmptyCartCTA callbacks. It showcases basic usage and setup for navigation and empty cart actions.
```javascript
import React from 'react';
import { CartSummaryList } from '@magento/venia-ui/lib/components/CartSummary';
const MyCart = (props) => {
const routeProduct = (productId) => {
console.log('Navigating to product:', productId);
// Implement navigation logic here
};
const routeEmptyCartCTA = () => {
console.log('Navigating to empty cart action');
// Implement empty cart action logic here
};
const initialCartData = {
items: [
{
sku: 'TEST001',
name: 'Test Product',
quantity: 1,
price: { regular: { amount: 100 } },
customizable_options: []
}
]
};
return (
);
};
export default MyCart;
```
--------------------------------
### Install Dependencies using npm
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Installs all required Node.js packages for the drop-in component project. Ensure Node.js is installed and available in your system's PATH.
```bash
npm install
```
--------------------------------
### Install Storefront SDK Package
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Installs the `@adobe-commerce/elsie` package, which provides reusable and customizable shared components for building consistent user interfaces within your Adobe Commerce Cloud storefront project.
```bash
npm install @adobe-commerce/elsie
```
--------------------------------
### Connecting to Catalog Service GraphQL (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/installation
This example illustrates how to establish a connection to the Catalog Service GraphQL endpoint. It involves setting up the endpoint URL and required headers, which are necessary for the wishlist component to fetch product data and interact with your e-commerce backend.
```javascript
initializers.connect([{
name: 'graphql-storefront',
endpoint: 'YOUR_CATALOG_SERVICE_GRAPHQL_ENDPOINT',
headers: {
'x-api-key': 'YOUR_API_KEY',
'content-type': 'application/json'
}
}]);
```
--------------------------------
### Rendering Wishlist Component (HTML with JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/installation
This example shows the minimal HTML structure and associated JavaScript required to render the default wishlist components on your page. It includes a placeholder element where the wishlist will be mounted, along with the necessary script to initiate the rendering process.
```html
```
--------------------------------
### Rendering the Default Cart Drop-in (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/installation
This JavaScript example illustrates the minimal configuration options required to render the default Cart drop-in component. It also shows how to render the Mini-Cart component.
```javascript
cartInitializer.mount({
// Minimal configuration for Cart drop-in
});
// To render Mini-Cart:
// const miniCartInitializer = new Initializer(MiniCart);
// miniCartInitializer.mount({});
```
--------------------------------
### Render Wishlist Container Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/containers/wishlist
This example demonstrates how to render the Wishlist container. It assumes the necessary functions for routing and product data retrieval are defined elsewhere. The primary purpose is to show the instantiation and basic setup of the Wishlist component.
```javascript
import React from 'react';
import Wishlist from '@adobe/magento-storefront-core/dist/components/Wishlist';
const App = () => {
const moveProductToCart = (productId) => {
console.log(`Moving product ${productId} to cart`);
// Add logic to move product to cart
};
const routeToProductDetail = (productId) => {
console.log(`Routing to product detail page for ${productId}`);
return `/products/${productId}`;
};
const getProductInformation = async (productId) => {
console.log(`Getting data for product ${productId}`);
// Replace with actual API call to fetch product data
return {
id: productId,
name: `Product ${productId}`,
price: `$${productId * 10}`,
imageUrl: `https://example.com/product-image-${productId}.jpg`
};
};
const routeToWishlistPage = '/wishlist';
const routeWhenEmpty = '/empty-wishlist';
return (
);
};
export default App;
```
--------------------------------
### Connecting PDP Component to GraphQL Endpoint (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Example code snippet for connecting your product details component to the Catalog Service GraphQL endpoint. Ensure you replace placeholder values with your actual Commerce backend service credentials.
```javascript
const endpoint = 'YOUR_COMMERCE_GRAPHQL_ENDPOINT_URL';
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY'
};
const pdp = new ProductDetails(endpoint, headers);
```
--------------------------------
### Import Map for PDP Component using CDN (HTML)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Example of an import map pointing both the drop-in component tools and the PDP drop-in component to a Content Delivery Network (CDN). This is suitable for run-time environments.
```html
```
--------------------------------
### Render SignIn Container Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/user-auth/containers/sign-in
This example demonstrates how to render the SignIn container with basic configuration options. It utilizes React for the frontend implementation and expects certain props to be passed for functionality.
```jsx
import React from 'react';
import { SignIn } from '@adobe/commerce-ui-react';
const MySignInComponent = () => {
const handleSignInSuccess = (userName, status) => {
console.log(`Sign in successful for ${userName} with status: ${status}`);
};
const handleSignInError = (error) => {
console.error('Sign in error:', error);
};
return (
'/forgot-password'}
routeSignUp={() => '/sign-up'}
/>
);
};
export default MySignInComponent;
```
--------------------------------
### Start Sandbox Environment
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Command to spin up the Sandbox environment for previewing and testing your drop-in components. It runs on `http://127.0.0.1:3000` and uses the `examples/html-host/index.html` file for rendering.
```bash
npm run serve
```
--------------------------------
### fstab.yaml Store View Mapping Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/multistore
This example demonstrates how to add a new store view mapping to the `fstab.yaml` file. It specifies the mapping between a URL path and its corresponding content path, ensuring correct routing for the new store view.
```yaml
folders:
/en_ca:
paths:
- /en_ca/products/
default: /en_ca/products/default
```
--------------------------------
### Install reCAPTCHA Module for Adobe Commerce
Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/reference/recaptcha
This command installs the reCAPTCHA module, enabling native reCAPTCHA protection for Adobe Commerce. Ensure you have the necessary package manager configured.
```bash
composer require adobe/commerce-ca-recaptcha
```
--------------------------------
### Configuration Service Store View Mapping Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/multistore
This example shows how to update the Configuration Service to include a new store view mapping. It defines the folder mapping for a new store view, directing traffic to the appropriate content path.
```json
{
"folders": [
{
"name": "en_ca",
"paths": [
"/en_ca/products/"
],
"default": "/en_ca/products/default"
}
]
}
```
--------------------------------
### Start Development Server using npm
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Launches the local development server, providing a preconfigured HTML page to test your frontend components. This command assumes the necessary `package.json` scripts are configured.
```bash
npm run start
```
--------------------------------
### Add Experiment to Metadata Block - Commerce Storefront
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/get-started/experiments
This example demonstrates how to add an A/B experiment to the metadata block of a commerce page, specifically for the cart drop-in block. It defines the 'Experiment' name and 'Experiment Variants' URLs, which the Experimentation plugin uses for tracking and setup.
```html
```
--------------------------------
### Start Storybook Environment
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Command to launch the Storybook development environment. Storybook allows you to develop and test UI components in isolation. It runs on `http://localhost:6006/` and uses `.stories.tsx` files generated with components/containers.
```bash
npm run storybook
```
--------------------------------
### Rendering PDP Component with Minimal Configuration (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Provides the basic configuration options required to render the default product details components on the page. This code initializes and displays the PDP.
```javascript
const pdp = new ProductDetails('YOUR_COMMERCE_GRAPHQL_ENDPOINT_URL', {
headers: {
'Authorization': 'Bearer YOUR_API_KEY'
}
});
initializers.mount(pdp, {
enableLogger: true
});
```
--------------------------------
### Import Map for Wishlist Component (HTML)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/installation
This example demonstrates how to configure an import map within the `` section of an HTML file to point to the @dropins/tools and @dropins/storefront-wishlist packages. This mapping is crucial for both browser run-time and build-time environments, allowing the application to locate and load the necessary component files.
```html
Your Store
```
--------------------------------
### Importing Drop-in Component Files (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/installation
This JavaScript example illustrates how to import the necessary files from the drop-in component tools (`@dropins/tools`) and the cart (`@dropins/storefront-cart`) packages into a `cart.js` file. These imports are essential for cart functionality.
```javascript
import {
fetchGraphQL,
Initializer
} from '@dropins/tools';
import {
Cart
} from '@dropins/storefront-cart';
// ... rest of your cart logic
```
--------------------------------
### Import Map for CDN Installation (HTML)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/installation
This HTML snippet shows how to configure an import map in `head.html` to use a CDN for the `@dropins/tools` and `@dropins/storefront-cart` packages. This is suitable for runtime environments.
```html
```
--------------------------------
### Shell Script to Run PDP Metadata Generator
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/seo/metadata
This command-line instruction guides you through navigating to the metadata generator tool's directory, installing its dependencies, and running it to create an Excel file containing product metadata. Ensure you are in the correct directory before executing.
```bash
cd tools/pdp-metadata/
npm install
node generate-metadata.js
```
--------------------------------
### Import Map for Local Installation (HTML)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/installation
This HTML snippet demonstrates how to configure an import map in the `head.html` file to point to local `node_modules` directories for the `@dropins/tools` and `@dropins/storefront-cart` packages. This is used for both runtime and build-time environments.
```html
```
--------------------------------
### CartSummaryTable Configuration Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/containers/cart-summary-table
This example demonstrates how to configure and render the CartSummaryTable container with initial data and custom callbacks for quantity updates and item removal. It utilizes several slots to customize the display of cart items.
```javascript
import React from 'react';
import { CartSummaryTable } from '@magento/venia-ui/lib/components/CartPage/OrderSummary/cartSummary';
const MyCart = (props) => {
const { initialData, onQuantityUpdate, onItemRemove } = props;
return (
(
<>
{item.product.small_image ? (
) : (
No Image
)}
{item.product.name}
)}
renderPrice={({ item }) => ${item.prices.price.value.toFixed(2)}}
renderSubtotal={({ item }) => ${item.prices.row_total.value.toFixed(2)}}
/>
);
};
export default MyCart;
```
--------------------------------
### Front-end Blocks Example - Plain JavaScript
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/discovery/architecture
Example demonstrating the use of plain JavaScript for front-end blocks in Edge Delivery Services projects. This approach is recommended for blocks that do not require complex state management, ensuring optimal performance and Lighthouse scores.
```javascript
// Example of a simple content block using plain JavaScript
function MyContentBlock(props) {
return `
${props.title}
${props.text}
`;
}
```
--------------------------------
### Front-end Blocks Example - Preact with HTM
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/discovery/architecture
Example showcasing the use of a buildless version of Preact with HTM for front-end blocks. This is suitable for blocks that involve complex state management and multiple render states, offering a more declarative way to build UI components within Edge Delivery Services.
```javascript
// Example of a commerce block using buildless Preact and HTM
import { h } from 'preact';
import htm from 'htm';
const html = htm.bind(h);
function ProductCard(props) {
const { product } = props;
return html`
${product.name}
${product.price}
`;
}
```
--------------------------------
### Pulling Fastly Snippets via API (Fastly CLI Example)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/content-delivery-network
This example demonstrates how to use the Fastly API to pull all VCL snippets. This is a troubleshooting step for resolving issues with missing or out-of-sync local VCL snippets.
```shell
# Ensure you have the Fastly CLI installed and authenticated
fastly service list
# Find your Service ID
fastly snippet list --service-id
fastly snippet download --service-id --version --id
```
--------------------------------
### YAML Configuration for Folder Mapping (fstab.yaml)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/get-started/multistore
Example of how to map content paths to URLs in an fstab.yaml file for a new store view. This ensures that product detail pages are correctly served for the specified store view.
```yaml
folders:
/: /content/dam/wknd/en
/en_ca/: /content/dam/wknd/en_ca
/products/: /en_ca/products/default
```
--------------------------------
### Example JSON-LD for Schema.org Product Data
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/seo/metadata
This example demonstrates how to structure JSON-LD data for a product according to Schema.org specifications. This format helps search engines understand product details like name, price, and ratings. It is typically embedded within a script tag in the HTML head.
```json
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Example Product Name",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "Example product description.",
"sku": "SKU12345",
"mpn": "MPN12345",
"brand": {
"@type": "Brand",
"name": "Example Brand"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/product/sku12345",
"priceCurrency": "USD",
"price": "119.99",
"priceValidUntil": "2024-12-31",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Example Seller"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"review": [
{
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "5"
},
"author": {
"@type": "Person",
"name": "Jane Doe"
}
},
{
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4"
},
"author": {
"@type": "Person",
"name": "John Smith"
}
}
]
}
```
--------------------------------
### config.json Store View Configuration Override Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/multistore
This example illustrates how to add a new store view configuration override in `config.json`. It defines store-specific settings, such as headers and analytics, for the `/en_ca/` store view, which will merge with the default configuration.
```json
{
"public": {
"/en_ca/": {
"analytics": {
"environment": "ca"
},
"service-headers": {
"X-Service-Header": "Value"
}
}
}
}
```
--------------------------------
### PlaceOrder Container Configuration Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/checkout/containers/place-order
This example demonstrates how to configure the PlaceOrder container with validation and order placement handlers. It shows how to disable the button, implement custom validation logic, and handle the asynchronous order placement process. The context object passed to handlePlaceOrder includes cart details and payment method information.
```javascript
import { PlaceOrder } from '@magento/venia-ui/lib/components/PlaceOrder';
const MyPlaceOrderComponent = (props) => {
const handleValidation = () => {
// Perform validation checks (e.g., login, shipping, billing, terms)
const loginFormValid = validateLoginForm();
const shippingFormValid = validateShippingForm();
const billingFormValid = validateBillingForm();
const termsAccepted = acceptTermsAndConditions();
return loginFormValid && shippingFormValid && billingFormValid && termsAccepted;
};
const handlePlaceOrder = async (context) => {
try {
// Call your order placement API using context.cartId and context.paymentMethodCode
await placeOrderApi(context.cartId, context.paymentMethodCode);
// Redirect to success page or show confirmation
} catch (error) {
// Handle order placement errors
console.error('Order placement failed:', error);
// Show error message to the user
}
};
return (
);
};
```
--------------------------------
### Importing PDP Component Files (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Demonstrates how to import essential files from the drop-in components tools and the PDP drop-in component into a JavaScript file (`product-details.js`) for your PDP implementation.
```javascript
import { initializers } from '@dropins/tools/initializers.js';
import { ProductDetails } from '@dropins/storefront-pdp';
// Default imports for PDP component
```
--------------------------------
### Update Storefront Compatibility Package
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/storefront-compatibility/install
Updates the Storefront Compatibility Package to the latest patch version. This command should be run after adding or updating the package.
```bash
composer update am Adobe-Commerce-enterprise/storefront-compatibility-package
```
--------------------------------
### Initialize Product Discovery Drop-in Component - JavaScript
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-discovery/installation
Registers the Product Discovery drop-in, configures placeholders and translations, and sets the GraphQL endpoint and headers. This script can be added to your website and imported into blocks where Product Discovery components are rendered.
```javascript
import { DropinProductDiscovery } from '@dropins/storefront-product-discovery';
import { DropinTools } from '@dropins/tools';
// Initialize the DropinTools
DropinTools.initialize();
// Initialize the Product Discovery drop-in
DropinProductDiscovery.initialize({
// Configuration options
// e.g., placeholders, translations, GraphQL endpoint, headers
});
console.log('Product Discovery drop-in initialized.');
```
--------------------------------
### JSON Configuration for Site Settings (config.json)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/merchants/get-started/multistore
Example of updating the config.json file to include store-specific settings for a new store view. This allows for customization of headers, analytics, and other values that override the default configuration.
```json
{
"public": {
"/": {
"analytics": {
"analyticsCloudId": "YOUR_ANALYTICS_ID"
}
},
"/en_ca/": {
"analytics": {
"analyticsCloudId": "YOUR_CANADIAN_ANALYTICS_ID"
},
"serviceHeaders": {
"Content-Type": "application/json"
}
}
}
}
```
--------------------------------
### Configure Import Map for Drop-in
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Example configuration for the import map in `examples/html-host/index.html`. This tells the browser how to resolve imports for Adobe Commerce tools (e.g., `@dropins/tools/`) and your drop-in code (e.g., `my-pkg/`). Adjust `my-pkg/` to your drop-in's npm name.
```html
```
--------------------------------
### Clone New Repository using Git
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Clones the newly created repository from GitHub to your local machine, preparing it for development.
```bash
git clone
```
--------------------------------
### VComponent Usage Example (Preact)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/reference/vcomponent
Illustrates how to use a component that accepts VNodes via VComponent for props like 'header' and 'footer'. This allows consumers to provide custom rendering logic for different parts of the component.
```javascript
import { h } from 'preact';
import { Card } from './Card';
import { Text } from '@adobe/stickers-web';
const MyPage = () => (
My Custom Header}
footer={Learn more}
>
This is the main content of the card.
);
```
--------------------------------
### General CLI Help Command
Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/get-started/cli
Displays all available CLI commands and their usage instructions. This is the primary command for discovering the functionality of the CLI tool.
```bash
npx elsie --help
```
--------------------------------
### Configure ProductQuantity Container
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/containers/product-quantity
This example demonstrates how to initialize and configure the ProductQuantity container. It shows how to pass initial product data and set up a callback function for quantity changes. The `scope` option ensures that the container only responds to product events within its specific context.
```javascript
const productQuantity = new ProductQuantity({
// Initial product data (e.g., from API response)
initialData: {
productId: 'SKU123',
quantity: 1
},
// Callback function to handle quantity changes
onValue: (newQuantity) => {
console.log('New quantity selected:', newQuantity);
// Update cart or other UI elements here
},
// Optional: Scope for event handling
scope: 'product-detail-page-context'
});
```
--------------------------------
### UI Initialization and Mounting (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/releases
Provides a function to immediately mount drop-in components onto the storefront UI. This is useful for scenarios where components need to be visible and interactive without delay.
```javascript
import { mountImmediately } from '@dropins/tools/initializer.js';
// Example Usage:
// mountImmediately('your-component-selector', { /* props */ });
```
--------------------------------
### Upgrade Adobe Commerce and Clear Cache
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/storefront-compatibility/install
Upgrades Adobe Commerce to apply package changes and clears the cache. This command is typically run after updating or installing packages.
```bash
bin/magento setup:upgrade
```
```bash
bin/magento cache:clean
```
--------------------------------
### Configure Content Mountpoint using fstab.yaml
Source: https://experienceleague.adobe.com/developer/commerce/storefront/get-started/create-storefront
This snippet shows how to define the content mountpoint in the `fstab.yaml` file. This configuration links your GitHub repository to your content source, enabling features like content editing and publishing. Ensure the `mountpoint` URL correctly points to your content folder.
```yaml
mountpoints:
/:
url: "https://main--your-repo-name--your-org.hlx.live"
type: "markup"
suffix: ".html"
```
--------------------------------
### Registering and Loading the Cart Component (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/installation
This JavaScript code shows how to register the cart component for loading and then initiate the mounting process using `initializers.mount`. It includes an event listener to ensure the cart loads after the page is ready. The logger can be enabled for debugging.
```javascript
const cartInitializer = new Initializer(Cart);
window.addEventListener('DOMContentLoaded', () => {
cartInitializer.mount({
// Configuration options here
});
});
// To enable the logger for debugging:
// Initializer.setLogger(true);
```
--------------------------------
### Validate CDN Setup with Curl
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/content-delivery-network
Validates the CDN setup by making `curl` requests to check expected responses from configured paths. This is a command-line utility for testing.
```bash
curl -I https://your-storefront.com/some/path
curl -I https://your-storefront.com/graphql
```
--------------------------------
### AddressForm Container Configuration Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/user-account/containers/address-form
This example demonstrates how to render the AddressForm container with several custom configurations, including controlling button visibility, setting default values, and handling submission callbacks.
```jsx
import React from 'react';
import { AddressForm } from '@adobe/commerce-react-components';
const MyAddressForm = () => {
const handleFormSubmit = (formData) => {
console.log('Form submitted with data:', formData);
// Handle form submission logic
};
const handleFormError = (error) => {
console.error('Form submission error:', error);
// Handle form error logic
};
const handleFormChange = (formData) => {
console.log('Form data changed:', formData);
// Handle form data change logic
};
const handleCloseClick = () => {
console.log('Close button clicked');
// Handle close button click logic
};
return (
);
};
export default MyAddressForm;
```
--------------------------------
### PaymentMethods Container Configuration Example
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/checkout/containers/payment-methods
Demonstrates how to configure the PaymentMethods container with various options like enabling/disabling, title display, and custom event handlers. This example showcases basic usage and customization.
```javascript
import { PaymentMethods } from '@adobe/commerce-ui-react';
const App = () => (
{
console.error('Cart sync error:', error);
}}
onSelectionChange={(paymentMethod) => {
console.log('Payment method selected:', paymentMethod);
}}
UIComponentType="ToggleButton"
slots={{
Methods: {
creditcard: {
displayLabel: false,
enabled: true,
icon: 'creditcard_icon',
autoSync: true,
render: (props) =>
}
}
}}
/>
);
```
--------------------------------
### Build Production Bundles
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Command to build optimized production-ready assets for your application. This command generates a `dist/` directory containing all necessary files for deployment to a production environment.
```bash
npm run build
```
--------------------------------
### Run Unit Tests with Jest
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating
Command to execute unit tests for your project. The project is configured to use the Jest testing framework, and `.test.tsx` files are generated alongside components, containers, and API functions to facilitate testing.
```bash
npm run test
```
--------------------------------
### Conditional Redirect Example for Authentication Status
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/user-auth/containers/sign-up
This example demonstrates how to redirect a user based on their authentication status. If authenticated, they are sent to the account page. Otherwise, they are first redirected to the login page, and then to the account page.
```javascript
const redirectUser = () => {
if (isAuthenticated) {
window.location.href = '/account';
} else {
window.location.href = '/login?redirect=/account';
}
};
// Assuming isAuthenticated is a boolean variable that holds the authentication status.
// Example usage:
// redirectUser();
```
--------------------------------
### Example AC-Policy Header for Product Filtering
Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/commerce-configuration
This example demonstrates an optional policy trigger header used for filtering products based on attributes. The format is `AC-Policy-[AttributeName]:[AttributeValue]`. Refer to the Policies documentation for more details.
```text
AC-Policy-Brand:Cruz
```
--------------------------------
### Registering and Loading PDP Component (JavaScript)
Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/installation
Illustrates how to register the product details component, load (mount) it onto the page, and enable the logger for debugging. This code can be placed within a `