omni-sync-sdk 0.6.1 → 0.6.2

package/README.md

@@ -212,6 +212,7 @@ interface Product {
   id: string;
   name: string;
   description?: string | null;
+  descriptionFormat?: 'text' | 'html' | 'markdown'; // Format of description content
   sku: string;
   basePrice: number;
   salePrice?: number | null;
@@ -249,6 +250,30 @@ interface InventoryInfo {
 }
 ```
 
+#### Rendering Product Descriptions
+
+**IMPORTANT**: Product descriptions may contain HTML (from Shopify/WooCommerce) or plain text. Always check `descriptionFormat` before rendering:
+
+```tsx
+// Correct way to render product descriptions
+{product.description && (
+  product.descriptionFormat === 'html' ? (
+    // HTML content from Shopify/WooCommerce - render as HTML
+    <div dangerouslySetInnerHTML={{ __html: product.description }} />
+  ) : (
+    // Plain text - render normally
+    <p>{product.description}</p>
+  )
+)}
+```
+
+| Source Platform | descriptionFormat | Rendering |
+|-----------------|-------------------|-----------|
+| Shopify | `'html'` | Use `dangerouslySetInnerHTML` |
+| WooCommerce | `'html'` | Use `dangerouslySetInnerHTML` |
+| TikTok | `'text'` | Render as plain text |
+| Manual entry | `'text'` | Render as plain text |
+
 ---
 
 ### Local Cart (Guest Users) - RECOMMENDED
@@ -980,8 +1005,13 @@ export default function ProductPage({ params }: { params: { id: string } }) {
           ${product.salePrice || product.basePrice}
         </p>
 
+        {/* Render description based on format (HTML from Shopify/WooCommerce, text otherwise) */}
         {product.description && (
-          <p className="mt-4 text-gray-600">{product.description}</p>
+          product.descriptionFormat === 'html' ? (
+            <div className="mt-4 text-gray-600" dangerouslySetInnerHTML={{ __html: product.description }} />
+          ) : (
+            <p className="mt-4 text-gray-600">{product.description}</p>
+          )
         )}
 
         {/* Variant Selection */}
@@ -1832,6 +1862,7 @@ When building a store, implement these pages:
 - Handle loading states and errors
 - Persist cart ID in localStorage
 - Persist customer token after login
+- **Check `descriptionFormat` and render HTML with `dangerouslySetInnerHTML` when format is `'html'`**
 
 ### DON'T:
 
@@ -1840,6 +1871,7 @@ When building a store, implement these pages:
 - Skip implementing required pages
 - Write `const products = [...]` - use the API!
 - Use `@apply group` in CSS - Tailwind doesn't allow 'group' in @apply. Use `className="group"` on the element instead
+- **Render `product.description` as plain text without checking `descriptionFormat` - HTML will show as raw tags!**
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omni-sync-sdk",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Official SDK for building e-commerce storefronts with OmniSync Platform. Perfect for vibe-coded sites, AI-built stores (Cursor, Lovable, v0), and custom storefronts.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",