shreerang / vue-nuggets Goto Github PK

Add props :

• Step interval (Step up/down by X)
• Steps Array (Allow stepper to traverse an array of possible values)

Great work, keep it up, looking good

When accessing the alert examples it'd be nice if they were in-line or had fixed position so they did not lose my place on page, or had a mechanism to return me to where I was on page.

Here's and idea:

The current Item Basket widget could be extended with a quick overview of shopping cart items that are in the list. These items could be passed on in an array through a property. Additionally two optional links could be passed on via prop to display buttons that link to a cart items overview page and to a checkout page.

Example:

items: [{
  id: 1,
  title: 'Product A',
  price: '100.00',
  discount: '20.00',
  image: 'example.jpg',
  quantity: 2,
}]

links: [{
cart: {
  url: 'http://example.com/cart',
  variant: 'secondary'
},
checkout: {
  url: 'http://example.com/checkout',
  variant: 'primary'
}

Concerns: Not sure how to go about making the removal of individual items work in a generic way.

A Core part of e-commerce is selling products. It'd be nice to see a listing product card for core attributes as part of this

Issue reported by Tetracyclic on Reddit

On Android Firefox, repeatedly tapping the + or - buttons in the quantity selectors causes the text selection dialogue to pop up. You probably want to disable text selection in the CSS for these.

This doesn't happen in Android Chrome, except on the penultimate demo with the +2 and -2 options.

when using the https://ecommerce-vue-nuggets.herokuapp.com/ variance selector for colour, even if the colour visually looks disabled, I can still select it and interact with it as-if it were a valid choice.

Why report this

This is confusing for the end user

Expected behaviour

• tab-selectable & keyboard interaction with colour variant
• disabled / not available variant cannot be selected or tabbed to (standard form behaviour)
• use of custom-styled form-elements with labels for accessibility

When maxCount is not a multiple of count or stepInterval, the last increment should not increase the count beyond maxCount and the last decrement should not decrease the count below count.

Example, count starts at 2, stepInterval is 2 and maxCount is 15. When at 14, and user clicks on the "+2" button, the count should increment only by 1 to make count equal to maxCount which is 15 and not make it 16. Same is true with decrement as well.

E-commerce needs proof of customer satisfaction. Testimonials / Reviews are an integral part of this. Interested to see what you might come up with for this.

Try using the <tab> key to navigate the example https://ecommerce-vue-nuggets.herokuapp.com/

It skips many form elements, which means for EU & US consumers the components do not allow disabled consumers to use the site and so the site could be fined.

Many sites have product-image selection. A Lot of them use normal DOM elements which load when the page loads, taking bandwidth, which then on hover load a larger image each hover to allow the person looking to purchase to see finer details without compromising the layout of the product page.

• Core assignable Product image
• Optional scaling interaction for selected image
• ability to display thumbnails of other images
• ability to select other images, which are assigned to the currently displayed image
• ability to signify state(s)
• ability to use keyboard and other accessibility (zoom, aria / labels)

Issue reported by DigitalHeadSet on Reddit

For the Variance Selectors, if you add a transparent border of same attributes to all the items, then just change the color on click, it wont jump around.

Another common feature on e-commerce sites is the ability to compare products and present product suggestions. While the grid can be used for this, it'd be nice to have a higher-order component as part of a frontend kit for this.