shopjs / shop.js

🛍️ Ecommerce UI components and framework powered by React.

Shop.js

Shop.js is a front-end framework for Ecommerce powered by React and designed for Hanzo.

Examples

You can see a great example of Shop.js in action at damon.com and fund.karmabikinis.co.

shop.js's Issues

Cart must accept Coupon/Referral codes

The current functionality is fine, but it is not in React. We need a component for it.

Tasks:

• Completely rewrite existing functionality in React component
• Keep Coupon Codes and Referral Codes as separate things for the moment; it will probably be revisited later though.

Acceptance Criteria:

• Can process Coupon Code
• Can process Referral Code
• Functions properly inside of the parent Cart component

An in-range update of debug is breaking the build 🚨

Version 2.6.7 of debug just got published.

Branch	Build failing 🚨
Dependency	debug
Current Version	2.6.6
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As debug is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

An in-range update of postmortem is breaking the build 🚨

Version 0.2.5 of postmortem just got published.

Branch	Build failing 🚨
Dependency	postmortem
Current Version	0.2.4
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As postmortem is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 4 commits .

• 7db9fa0 0.2.5
• 9672122 Update to ES modules
• 30b0ea0 Update executive, mocha
• dbcfe97 Update build tools

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Payment information form

The current form requires a few changes. The CVC field should have an informational popup to show the user where the CVC is located. Also, the expiration date field should instead be a date picker.

Tasks:

• Copy existing design into subcomponent
• Ensure card number field auto-detects card type
• Create info pop-up for CVC to show where CVC is located on card
• Change expiration date field to a date picker

Acceptance criteria:

• Should be able to add valid card
• Should auto-detect type of valid card
• Should detect invalid card number
• Should show CVC info pop up
• Should be able to pick date, not be forced to enter it

An in-range update of commerce.js is breaking the build 🚨

Version 1.1.8 of commerce.js just got published.

Branch	Build failing 🚨
Dependency	commerce.js
Current Version	1.1.7
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

commerce.js is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 10 commits.

• ae8167b 1.1.8
• a79f313 Merge branch 'master' of github.com:hanzo-io/commerce.js
• 40eceb4 Update bebop, coffee-script, connect, coveralls, hanzo.js, mocha, sake-bundle, sake-cli, sake-core, sake-outdated, sake-publish, sake-version, serve-static
• 13fbac4 preserve previous/default tax and shipping rates
• 484d09a Remove sake-core
• 20eb27e Update bebop, connect, coveralls, mocha, sake-bundle, sake-cli, sake-core, sake-outdated, sake-version, serve-static
• 1e0715c Rename Sakefile
• 0576cfd Update gitignore
• 1d36c8b Update README
• 64659ff Update README

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Is shop.js suitable for digital goods ?

Hi, I've discovered shop.js recently, and it looks great and light weight :)

I was just wondering if it would be suitable for digital goods ( such as mp3, template, etc... )?

Thanks

An in-range update of sake-bundle is breaking the build 🚨

Version 0.5.3 of sake-bundle just got published.

Branch	Build failing 🚨
Dependency	sake-bundle
Current Version	0.5.2
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As sake-bundle is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 3 commits.

• f4e14d7 0.5.3
• abc1c4d Update handroll, sake-cli
• 42c05df Update coffee-script

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

An in-range update of hanzo.js is breaking the build 🚨

Version 2.3.24 of hanzo.js just got published.

Branch	Build failing 🚨
Dependency	hanzo.js
Current Version	2.3.23
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

hanzo.js is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Contact information form

The current information form is acceptable, it just needs to be in React.

Tasks:

• Add Name field
• Automatically split first name and last name based upon first space
• Add email field
• Use validators for valid email

Acceptance criteria

• Can enter name
• Name is split properly to provide discrete data fields
• Can enter email
• Invalid emails are not allowed

npm install error - shop.js

Hi!

i'am block on a error at install and my log's tell me that :

-> verbose type version
-> verbose stack el-controls: No matching version found for [email protected]

info :

node v8.9.4
npm v5.6.0

Thanks.

Billing information form

The current form requires a few changes. We should ask for country and state/province information first, so our validators for addresses can be geo-sensitive. We currently only follow the American standard.

This is functionally the same form as #239 with a few words changed to make it clear it's for Billing, not Shipping.

Tasks:

• Create Country and Locale information collectors
• Create Address information collectors; address, zip code/region code, etc, based on Locale info
• Validate Address information based upon Country/Locale standards
• Create 'same as Shipping address' checkbox
• Make 'same as Shipping address' checkbox populate data from the billing address

Acceptance Criteria:

• Can enter country and locale
• Can enter address information
• Address information is validated upon locale standards; test United States, Canada, UK
• Can click 'same as billing' checkbox
• 'Same as Shipping' checkbox populates from Shipping form created in #239

Sign Up Component

The existing functionality is fine, it just needs to be in React

Tasks:

• Create email field
• Create password field
• Check for user name uniqueness and reject if not unique
• Check for adherence to password policy
• Create Recaptcha infrastructure
• Create confirm button
• Create account on confirmation
• Send mail to confirm email to user after account creation

Acceptance Criteria:

• Can enter user name
• Duplicate user name is not accepted
• Can create password
• Cannot create weak or noncompliant password
• Account is created
• Email confirmation is received
• Recaptcha shows up when appropriate

An in-range update of el.js is breaking the build 🚨

Version 2.1.25 of el.js just got published.

Branch	Build failing 🚨
Dependency	el.js
Current Version	2.1.24
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

el.js is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 5 commits.

• 39b71ab 2.1.25
• 934d026 el.js
• 8445ed5 save el.js in root
• b4624bb Update riot, chai, chai-as-promised, coffee-script, express, mocha, sake-cli, sake-core, sake-outdated
• 831569f remove outdated package json

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Cart must display calculations for grand total

The current functionality is still fine, but it needs to be a React component.

Note: We currently cannot calculate shipping rates based upon API calls to courier services; we only handle flat shipping rates as part of this issue.

Tasks:

• Add line items to obtain subtotal
• Display all discounts including Coupons, etc
• Calculate and display shipping rates
• Calculate and display tax rates

Acceptance Criteria:

• Can see all line items
• Subtotal equals the sum of all line items
• Can see discounts from Coupons or special offers
• Can see shipping rate
• Can see tax rate
• Grand total is equal to sum of Subtotal, discounts, shipping, and tax rate

An in-range update of bebop is breaking the build 🚨

Version 1.12.8 of bebop was just published.

Branch	Build failing 🚨
Dependency	bebop
Current Version	1.12.7
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

bebop is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build is in progress Details
• ❌ ci/circleci Your tests failed on CircleCI Details

---

Commits

The new version differs by 3 commits.

• e4f1e27 1.12.8
• 41efde0 Remove newline
• ce6463d Update source-map-support, executive, morgan, serve-index, serve-static, sake-bundle, sake-cli

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of serve-static is breaking the build 🚨

Version 1.12.3 of serve-static just got published.

Branch	Build failing 🚨
Dependency	serve-static
Current Version	1.12.2
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As serve-static is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Release Notes

1.12.3

• deps: [email protected]
  • deps: [email protected]

Commits

The new version differs by 3 commits.

• 281475f 1.12.3
• b39c5c8 deps: [email protected]
• b28d2b0 build: [email protected]

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Cart must display individual items inside it

Our current cart functions, but requires React components to adhere to the modernization that we need out of shop.js.

Tasks

• Completely rebuild the existing line item functionality in a React component

Acceptance Critera

• Can add to cart
• Can remove from cart
• Can view inside of cart

An in-range update of sake-cli is breaking the build 🚨

Version 0.5.8 of sake-cli just got published.

Branch	Build failing 🚨
Dependency	sake-cli
Current Version	0.5.7
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As sake-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 4 commits.

• cc9ef95 0.5.8
• 37dccf5 Clean up error messages
• 0f7449b Update sake-core
• 9847fe1 Include sake-core typings automatically

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Login Component

Existing functionality is fine, we just need it to be in React.

Tasks:

• Create email field
• Create password field
• Create Recaptcha infrastructure
• Create login button
• Execute login logic upon click

Acceptance Criteria:

• Can enter email
• Can enter password
• Recaptcha shows up if enabled
• Login button will log in with valid credentials or error with invalid credentials

Need to add a new payment gateway

How can I customise the library to add a new payment gateway?

iOS scan credit card prompt option

Shipping information form

The current form requires a few changes. We should ask for country and state/province information first, so our validators for addresses can be geo-sensitive. We currently only follow the American standard.

Tasks:

• Create Country and Locale information collectors
• Create Address information collectors; address, zip code/region code, etc, based on Locale info
• Validate Address information based upon Country/Locale standards

Acceptance Criteria:

• Can enter country and locale
• Can enter address information
• Address information is validated upon locale standards; test United States, Canada, UK

An in-range update of es-selectize is breaking the build 🚨

Version 0.12.10 of es-selectize just got published.

Branch	Build failing 🚨
Dependency	es-selectize
Current Version	0.12.9
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

es-selectize is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

User Account widget

The existing functionality is fine, it just needs to be in React.

Tasks:

• Display all user information (Name, Address(es))
• Display all orders (including statuses)
• Allow editing of contact information (see #237 for specifics of what is considered contact information)

Acceptance Criteria:

• Can see user information
• Can edit contact information (again, see #237 for definition of that)
• Can see all orders

An in-range update of debug is breaking the build 🚨

Version 2.6.4 of debug just got published.

Branch	Build failing 🚨
Dependency	debug
Current Version	2.6.3
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As debug is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 6 commits .

• f311b10 release 2.6.4
• 1f01b70 Fix bug that would occure if process.env.DEBUG is a non-string value. (#444)
• 2f3ebf4 Update CHANGELOG.md
• f5ae332 Update CHANGELOG.md
• 9742c5f chore(): ignore bower.json in npm installations. (#437)
• 27d93a3 update "debug" to v0.7.3

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Cart

Unable to add items to cart
:(

Thank You form

The current form's reset button uses hacky functionality that should not be duplicated. It should clear the cart information without requiring a page reload.

Tasks:

• Should display order number
• Should say that a receipt will be emailed to you
• Should thank user
• Should display button to reset cart
• Button to reset cart should clear cart information upon click

Acceptance criteria:

• Displays order number
• Displays receipt display
• Displays thank you
• Can reset cart state with button click

Design goals

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

Modal Checkout Widget

Incorporates #237, #238, #239, #240, and #241 into a single widget that we can incorporate into a page easily.

This is functionally the same thing as our current checkout widget, only it needs to be in React.

Tasks:

• Flow from Contact Form to Payment Information to Shipping Information to Billing Information to Thank You forms smoothly
• Ensure responsivity at Mobile, Tablet, and Desktop breakpoints, per MaterialUI standards

Acceptance Criteria

• Checkout flows smoothly from form to form
• Information is saved appropriately
• Checkout does not look inappropriate on either side of Mobile, Tablet, and Desktop breakpoints, per MaterialUI standards