ecommerce

Implement Wix shopping cart and checkout flows for catalog collections.

Updated May 1, 2026
One-click install
npx skills add https://github.com/Rachit246-art/rvglobal1 --skill ecommerce-rachit246-art
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ecommerce
Source: https://github.com/Rachit246-art/rvglobal1/tree/main/.emdash/skills/ecommerce
Command: npx skills add https://github.com/Rachit246-art/rvglobal1 --skill ecommerce-rachit246-art

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of implementing reliable shopping cart and checkout flows for Wix-powered catalogs, so customers can add products, review totals, and complete purchases without fragile custom logic.

Core Features & Use Cases

  • Cart & Buy Now for catalog collections: Implements cart and checkout patterns that work only with collections marked as @catalog.
  • Price handling with correct currency formatting: Enforces fixed collection pricing and formats all currency display using useCurrency() + formatPrice() instead of hardcoded symbols.
  • Required UI integration: Provides the expected cart UI responsibilities (cart drawer/modal, header icon + count badge, and product-card add-to-cart buttons).
  • Production-ready interaction rules: Differentiates loading behavior for addToCart (server-confirmed) versus removeFromCart/updateQuantity (optimistic), and disables checkout during checkout progress.

Quick Start

Implement the cart/buyNow flow using the @catalog collection pattern, then create a cart UI component (drawer/modal) with header cart icon + item count, and wire Add to Cart buttons on product listings.

Frequently Asked Questions about ecommerce

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a shopping cart and checkout flow for a Wix catalog collection?

To implement shopping cart and checkout purchasing workflows, use the @catalog collection pattern and wire cart UI components with useCart() for cart state, applying @catalog-only rules for product browsing and purchasing workflows.

How do I format currency correctly when displaying product prices in an ecommerce app?

Currency formatting uses useCurrency() with formatPrice() instead of hardcoded symbols, applying a DEFAULT_CURRENCY fallback to ensure consistent price display across all cart and checkout interactions.

Does this cart and checkout implementation work with any React collection or only catalog collections?

Cart and checkout purchasing workflows work only with collections marked as @catalog, enforcing @catalog-only rules so that add-to-cart and buy-now actions rely strictly on catalog item price data.

How should I handle loading states for add-to-cart and checkout actions in a React integration?

Handle loading states using addingItemId for server-confirmed addToCart actions and isCheckingOut for checkout progress, while applying optimistic updates for removeFromCart and updateQuantity operations.

What UI components do I need to build for an ecommerce shopping cart workflow?

Shopping cart workflows require a cart drawer or modal, a header cart icon with an item count badge, and product-card add-to-cart buttons on catalog listings to support cart review and checkout.

Why does checkout get disabled during purchase progress in a catalog app?

Checkout is disabled during purchase progress by tracking isCheckingOut to prevent duplicate submissions, while addToCart uses addingItemId to show server-confirmed loading states per item.