Utility functions for Shopify live preview functionality
npm install @contentstack/shopify-live-preview-sdkA utility package for Shopify live preview functionality that provides a singleton instance for configuring a Liquid template engine and integrating with Contentstack for live preview data.
``bash`
npm install @contentstack/shopify-live-preview-sdk
`typescript
import { LivePreviewShopify, LivePreviewShopifyConfig } from '@contentstack/shopify-live-preview-sdk';
// Initialize with configuration
const config: LivePreviewShopifyConfig = {
deliveryToken: process.env.CS_DELIVERY_TOKEN!,
previewToken: process.env.CS_PREVIEW_TOKEN!,
environment: 'development',
apiKey: process.env.CS_API_KEY!,
// optional
previewUrl: 'https://api.contentstack.io',
liquidEngineOptions: {
// Set your views directories; absolute paths recommended
root: ['/absolute/path/to/views'],
extname: '.liquid'
}
};
// Get the singleton instance
const livePreview = LivePreviewShopify.getInstance(config);
// The same instance will be returned everywhere in your application
const sameInstance = LivePreviewShopify.getInstance();
// sameInstance === livePreview // true
`
`typescript`
// Fetch entry data for live preview
const data = await livePreview.fetchData(
'content_type_uid',
'entry_uid',
'live_preview_hash',
'en-us'
);
`typescript
// Access the configured Liquid engine
const engine = livePreview.getLiquidEngine();
// Render a template file with context
const html = await engine.renderFile('templates/index.liquid', {
product: { title: 'Shirt' }
});
`
- Singleton pattern ensures consistent state across your application
- TypeScript support with full type definitions
- Liquid template engine configuration with custom filters/tags
- Contentstack data fetching for live preview
- Metaobject and metafield helper utilities
- Comprehensive test coverage
1. Clone the repository
2. Install dependencies:
`bash`
npm install
src
3. Make your changes in the directory`
4. Build the package:
bash`
npm run build
`
5. Run tests:
bash`
npm test
- npm run build - Builds the package using TypeScriptnpm test
- - Runs the test suitenpm run lint
- - Lints the code using ESLintnpm run format
- - Formats the code using Prettier
The main class that implements the singleton pattern.
#### Methods
- getInstance(config?: LivePreviewShopifyConfig): Get the singleton instancegetLiquidEngine()
- : Get the Liquid template engine instancefetchData(ctUID: string, entryUID: string, hash: string, locale: string)
- : Fetch entry data from ContentstackcreateMetaobjectEntries(contentType, entries, type, path, entryMetaObject, dataCSLPMapping, extraData)
- : Create metaobject entriesgetUpdatedProductMetafields(currentMetafields, keyBasedCt, entry, options)
- : Compute updated product metafieldsgetUpdatedMetaobject(currentMetaobjects, keyBasedCt, entry, options)
- : Compute updated metaobjectcreateContentTypeKeyBased(fieldSchemas)
- : Build key-based content type helper
#### LivePreviewShopifyConfig
`typescript`
interface LivePreviewShopifyConfig {
deliveryToken: string;
previewToken: string;
environment: string;
apiKey: string;
previewUrl?: string;
liquidEngineOptions?: LiquidEngineOptions;
}
#### LiquidEngineOptions (subset)
`typescript``
interface LiquidEngineOptions {
extname?: string; // default: '.liquid'
root?: string | string[]; // template search paths
cache?: boolean;
dynamicPartials?: boolean;
strictFilters?: boolean;
strictVariables?: boolean;
trimTagRight?: boolean;
trimTagLeft?: boolean;
trimOutputRight?: boolean;
trimOutputLeft?: boolean;
}
MIT