shreerang / vue-nuggets Goto Github PK
View Code? Open in Web Editor NEWE-commerce UI Nuggets based on Vue
Home Page: https://ecommerce-vue-nuggets.herokuapp.com/
E-commerce UI Nuggets based on Vue
Home Page: https://ecommerce-vue-nuggets.herokuapp.com/
Add props :
Great work, keep it up, looking good
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.
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.
This is confusing for the end user
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.
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.
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.
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.
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.
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
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.