shopjs / shop.js

🛍️ Ecommerce UI components and framework powered by React.

https://shop.js.org

Other

456 stars 66 forks source link

Design goals #1

Closed zeekay closed 4 years ago

zeekay commented 8 years ago

Goals

Unified design across elements
Composable
Smaller elements create larger ones
Yieldable
Sensible places for user to inject own content/blocks
Framework-free
No grid
No JavaScript for styling, easily styled
Should work interchangeably with:
Bootstrap, Semantic, other CSS frameworks
React, Angular other JS frameworks
Minimal CSS styles for all elements
"Core" required CSS necessary for sane usage
Polished, minimal default theme
Major Components

Cart
Right side, slide-out, Links to Checkout/Back
Similar to foxycart.com
Should animate into view nicely
Display cart button (Bag, Cart button, etc)
Hover preview?
Add to cart buttons with nice animations (ala skully.com)
Occupies right side of window by default
Line items should be editable
Quantity, remove
Buttons to go to checkout
Upsell spaces
Related/Similar products
Checkout
Fullscreen by default
Easily overlays any site
Logo area
Lightly themable
Split pane
Steps on left, Order summary/invoice on right
Should be responsive (stack)
Needs to support:
Gifts
Product recommendations
Coupons
Tax/shipping rates
Shipping information
Multiple payment processors
Address validation
Thank you page
Social sharing
Modal Checkout
Checkout.js, not detailed here, but should be composable from base elements
Secondary Components
Slider for featured products
Product search
Heterogeneous results
Few different inline product displays
Card, Thumbnail, List
Filters for product types
Filter by color
Gender
Product type (Collections)
Discount modals
Suggested products widget (eg: you might also like)
- Have API for this, need design:
- by category
- by size
- by color
- by type
- by price
Review widget
- star rating
- comments
Deal Countdown (remove item from cart)
Featured Products Widget
Checkout steps display how far you are from completing your order
- Numbered steps
Bar, Slider
Generic modal
Size guide modal
Product Galleries
Mixed media, video+photo (music?)
Like Share Save product widget
Wishlist also shareable
Like/Heart/Favorite/Save buttons
Shopping Bag (itemized view)
Order summary widget
Shipping details widget
Referral to discount
Send as gift checkout option
Message
Card (Physical/Digital), Email, Link
Bundles
Display bundle-style products with all components
Full price/discounted savings, etc
Subscriptions
Product cards
Countdown to flash sales
Coupon alert
multiple views on single item
Profile?
Delivery select widget
Real-time rates
Address validation widget
Lock widget (Secure checkout elements)
Smaller components

Add to Cart Button
Adds new product to cart
Show Cart Button
Displays Cart
Line Item
Quantity, Name, SKU, Price, controls for editing
Text Control
Generic text input
Checkbox Control
Generic checkbox
Quantity Select Control
Dropdown
State Select Control
Autocomplete Dropdown
Country Select
Autocomplete Dropdown

tmesser commented 4 years ago

ancient, closing.