[Feature] 360 plant viewer ticket

[johnnguyencodes]

Feature: 360-Degree Interactive Plant Viewer

🧩 Summary

Create a 360-degree interactive viewer for plant product pages, inspired by StockX.com. The goal is to allow users to click and drag to rotate the plant and view it from multiple angles in real-time. Images will be captured, uploaded, and served dynamically in sequence to simulate rotation.

---

🎯 Goals

• Add an interactive image viewer to the product detail page.
• Display 360-degree rotation using image sequences.
• Load images efficiently and responsively.
• Support drag and swipe interaction.

---

📸 Image Naming Convention

All 360 images should follow a strict naming pattern to allow programmatic detection and loading:

plants--<slug>--360--<angleIndex>.webp

Example:

plants--mammillaria-crucigera-tlalocii-3--360--01.webp
plants--mammillaria-crucigera-tlalocii-3--360--02.webp
...
plants--mammillaria-crucigera-tlalocii-3--360--36.webp

---

🔌 Integration Plan

Option A: SpriteSpin (recommended for MVP)

1. Use [spritespin](https://github.com/jacksleight/PhotoSphereViewer.Spritespin) JS plugin.
2. Load images via JavaScript array.
3. Allow drag/swipe to rotate through frames.
4. Integrate into Hydrogen component at top of product page.

$('#plant-360-view').spritespin({
  source: [
    'url/to/360--01.webp',
    'url/to/360--02.webp',
    // ...
    'url/to/360--36.webp'
  ],
  width: 600,
  height: 600,
  frameTime: 60,
  animate: false,
  sense: -1,
  responsive: true
});

Option B: Shopify App Integration

• Consider third-party Shopify apps like Sirv, Magic 360, or Cloudinary.
• Useful for built-in zooming, CDN hosting, and drag/scroll support.

---

📦 Image Hosting Options

1. Shopify Files

• Uploaded via Admin > Content > Files
• Static URLs, easy to batch upload
• Ideal for metafield-backed or pattern-based filename querying

2. Cloudinary (optional)

• Advanced transformation support (e.g. background removal, responsive rendering)
• Foldered structure can reflect plant slugs or ID
• Integrate using SDK or raw URL

---

🧪 To Do

• Define standard image capture flow (e.g. 36 angles per plant)
• Automate naming + export process
• Add metafield to enable 360-view toggle per product
• Add 360 image viewer to plants.$handle.tsx
• Implement responsive image loading
• Lazy-load 360 images on user interaction

---

🚧 Future Considerations

• Add zoom + pan controls
• Add loading spinner while images preload
• Add fallback static image if 360-view fails

---

📂 References

• https://github.com/jacksleight/PhotoSphereViewer.Spritespin
• https://www.npmjs.com/package/react-360-view
• https://cloudinary.com/documentation/360_product_views
• https://apps.shopify.com/sirv