@ditus/react-web-retail

This repo contains UI components based on Material UI for use in web-based retail applications. These components can be used when building a responsive, themed, and accessible web-based retail application. All components have multi-language/translation support and can be themed. The repo is open source and will remain so.

Installation

npm i @ditus/react-web-retail

Demo

To view the components, type:

npm i
npm run storybook

Components

The following components are included in the package. For demo's and to view components in actual size, run storybook as indicated above. Some components are internal and are not listed here since they are not exposed. If you don't see a component that you believe should be here or you would like to see an internal component made external, submit a request and we will respond promptly.

Add To Cart

The Add to Cart component displays a button that allows customers to add a product to their shopping cart.

Brand Link

The Brand Link component displays the brand name of a product.

It can also be displayed as a link, if there are many products of the same brand:

Cart Empty

The Cart Empty component displays a message stating that the customers shopping cart is empty.

Cart Icon

The Cart Icon component displays a shopping cart icon that can be clicked to redirect the customer to their shopping cart.

The Cart Icon with a badge specifying the number of products in the shopping cart:

Choking Hazard

The Choking Hazard component displays a warning on products that contain small parts and could be harmful to younger children.

Featured Product Attributes

The Featured Product Attributes component displays a subset of product attributes that consumers would be more interested in.

Featured Taxonomies

The Featured Taxonomies component displays related taxonomies used to categories products. Customers would usually click a taxonomy to view all products within that category.

Featured Taxonomy

The Featured Taxonomy component displays a single category or taxonomy of products, such as dog toys or cat food.

When the mouse is hovered over the component, it appears as:

Low Stock

The Low Stock component displays a message when a product is low on quantity.

Price

The Price component displays the price of a product.

Product

The Product component displays a product's information and is used in search results and lists of products.

Product Attribute

The Product Attribute component displays a single name/value pair representing an attribute of the product, such as the product's color or dimensions.

Product Attributes

The Product Attributes component displays a list of product attributes.

Product Image

The Product Image component displays a single image of a product.

Rating Bar

The Rating Bar component displays a product star rating and when the user presses or hovers over the component, a popup appears displaying more information on the ratings of the product.

Rating Linear Progress

The Rating Linear Progress component displays a styled Linear Progress bar that displays the rating for a product.

Rating Summary

The Rating Summary component displays the ratings for a product broken down by star rating, including the average rating and total number of ratings.

Rating Summary Bar

The Rating Summary Bar component displays the ratings for a single star (1 through 5) on the Rating Summary component.

Save Coupon

The Save Coupon component displays a message indicating how much the consumer will save with a coupon that is automatically applied at checkout.

Sponsored

The Sponsored component displays the word 'sponsored' and is meant to be displayed when a product is promoted for advertising reasons.

Swatch

The Swatch component displays a variant color or material for a product using a solid color or image.

This is an example of a solid color:

This is an example of an image:

Swatches

The Swatches component displays one or more swatches.

Wish List Icon

The Wish List Icon component displays a wish list icon that can be clicked to redirect the customer to their wish list.

The Wish List Icon with a badge specifying the number of products in the wish list:

Roadmap

See the open issues for a list of proposed features (and known issues).

License

This project is licensed under the terms of the MIT license.