A comprehensive e-commerce SDK for building product search, category pages, and recommendation interfaces with Depict AI's services.

Please see https://www.loom.com/share/7970c891825c4147a51a4beda7f31181 and direct questions to us on Slack.

What you want to change is probably in browser-tags-v2/packages/ui.

We initially used snake_case for variable names, but have since switched to camelCase. So newer code is and should use camelCase.

This repository contains multiple components for building modern e-commerce experiences:

The main SDK implementation built with Solid.js:

• Core Framework: Solid.js components for high performance and minimal bundle size
• Build System: Custom build scripts for production and development environments
• Testing: Lighthouse performance testing and TestCafe end-to-end tests
• Polyfills: Browser compatibility layer for older environments
• DevTools: Chrome extension and development utilities
• React Wrapper: React components that wrap the Solid.js core implementation

A SolidStart-based application for previewing and testing Depict UI components:

• Hosted at https://demo.depict.ai
• Live Preview: Preview of search, category, and recommendation components for any merchant.
• Market/Locale Testing: Test different markets and locales
• Component Showcase: Visual testing of product cards, headers, and cart functionality
• Dark Mode Support: Theme switching capabilities

Example implementations used for end-to-end testing the SDK (note these tests are broken due to bugs in testcafe):

• vanilla-js: Pure JavaScript implementation with TypeScript support
• vanilla-js-double-pages: Extended vanilla JS example with multiple page layouts
• react-web: React-based single-page application (using React wrappers around Solid.js components)
• next-web: Next.js implementation with server-side rendering
• next-commerce: Full-featured Next.js commerce site with cart, checkout, and authentication

Comprehensive API and integration documentation:

• API Guide: RESTful API documentation for recommendations, search, and tracking
• SDK Guides: React and JavaScript UI integration guides
• Shopify Integration: Complete Shopify app integration guide
• Data Ingestion: Setup guides for various e-commerce platforms (Shopify, Centra, Google Analytics)
• OpenAPI Specification: Complete API reference in OpenAPI 3.1 format

• Product Search: Full-text search with filters, facets, and sorting
• Category Pages: Dynamic product listing pages with pagination
• Query Suggestions: Real-time search suggestions
• Content Blocks: Rich content integration within search results

• Product Recommendations: Context-aware product suggestions
• Category Recommendations: Related category suggestions
• User-Based Recommendations: Personalized recommendations based on user behavior

• Event Tracking: Product views, add-to-cart, and purchase tracking
• Session Management: User session tracking for personalization
• Performance Monitoring: Built-in error reporting and performance metrics

• Core Framework: Solid.js - A declarative, efficient, and flexible JavaScript library
• React Integration: React wrapper components for Solid.js core
• Languages: TypeScript, JSX, SCSS
• Testing/dev tool Frameworks: SolidStart, React, Next.js, vanilla JavaScript
• Build Tools: Parcel, Babel, custom build scripts
• Testing: TestCafe, Lighthouse
• Documentation: MDX, OpenAPI

Each storefront example includes its own setup instructions. The SDK supports:

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Server-side rendering (Next.js)
• Legacy browser support through polyfills
• Multiple locales and markets

The SDK connects to Depict's API endpoints for:

• Product search and filtering
• Category listings and navigation
• Personalized recommendations
• Analytics and tracking events