Description:
To make our desktop shopping experience more interactive and tactile, we should implement a drag-and-drop feature. Allowing users to physically grab a product card and drop it directly onto the navbar cart icon is a highly engaging interaction pattern that modern e-commerce sites use to drive conversions.
Proposed Implementation:
Product Cards: Leverage the native HTML5 Drag and Drop API by setting draggable={true} on the main product card wrapper and passing the productId in the dataTransfer payload.
Drop Target: Turn the navbar Cart icon into a valid drop zone (onDragOver, onDrop).
Action: When the drop event fires, extract the productId and directly trigger our existing addToCart function from the Zustand store. Add CSS transitions to highlight the cart when a dragged item hovers over it.
@niharika-mente could you please assign this to me?
Description:
To make our desktop shopping experience more interactive and tactile, we should implement a drag-and-drop feature. Allowing users to physically grab a product card and drop it directly onto the navbar cart icon is a highly engaging interaction pattern that modern e-commerce sites use to drive conversions.
Proposed Implementation:
Product Cards: Leverage the native HTML5 Drag and Drop API by setting draggable={true} on the main product card wrapper and passing the productId in the dataTransfer payload.
Drop Target: Turn the navbar Cart icon into a valid drop zone (onDragOver, onDrop).
Action: When the drop event fires, extract the productId and directly trigger our existing addToCart function from the Zustand store. Add CSS transitions to highlight the cart when a dragged item hovers over it.
@niharika-mente could you please assign this to me?