vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

Overview

| vue-products-grid

vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different options and reactive with full integration in your template/project (4 events emitted)

Features

  • fully responsive grid ready (CSS) for desktop, laptop, mobile
  • data mapping with your data structure
  • many custom options for visual impact (colors, etc.)
  • fullprice/sale price display
  • sale box option (can be disabled)
  • rating stars included with emit event (can be disabled)
  • 1 configurable HTML toggle button with emit event (i.e. favorite item)
  • 1 configurable HTML button with emit event (i.e. add to cart)
  • 1 clickable area with emit event
  • HTML injection available for some elements

Demo

Demo

Installation

npm install vue-products-grid

Usage

Import component

import ProductsGrid from 'vue-products-grid'

In template (for options and configuration see Docs below)

... ">
...
  
  
...

Docs

vue-products-grid has many features and options that you can control in order to fit with your template/layout/app.

We designed the component in order to make compatible with a clean project so we decided to not include any dependency. For this reason you can add to any Vue project as is, without depending on third libraries, or simply using yours.

For any issue please open an issue on github repository.

* Remarks

The rating element has been forked and included in the component from the vue-star-rating component [https://github.com/craigh411/vue-star-rating] by craigh411.

Props

Prop Required Description Type Default
items YES Array of objects
(see table below)
Array []
mapping NO Objects for fields mapping Object
options NO Object for configuration purpose Object

items prop definition

items prop as array of objects requires a defined structure for each object. If your data don't match the following structure use mapping as described below

Field Description Type Info
id Product ID String/Number Converted to string by component
name Product name String injected HTML available
label Product label (category, ecc) String* injected HTML available
abstract Product abstract String injected HTML available
image Product image URL URL/URI
price Product price Number float 2 decimals format applied
sale_price Product sale price Number float 2 decimals format applied
rating Product rating Number Integer or float
isfavorite Product in the favorite user list Boolean

* With name, label and abstract fields you can inject HTML code directly

Example of HTML injection on title field:

My title', ... }, ... ] ">
items:[
  {
    id: '1',
    title: '',
    ...
  },
  ...
]

Mapping prop definition

When your data don't match the items prop definition you can map your data structure directly without making any conversion and pass to the component with the mapping prop.

Mapping Fields example:

... data:()=>({ ... //mapping data structure mapping: { id: 'your id field', name: 'your product name field', label: 'your label field', abstract: 'your abstract field' price: 'your price field', sale_price: 'your sale price field', image: 'your image field', isfavorite: 'your favorite field', rating: 'your rating field' }, }) ">

  
...
  data:()=>({
    ...
    //mapping data structure
    mapping: {
      id:   'your id field',
      name: 'your product name field',
      label: 'your label field',
      abstract: 'your abstract field'
      price: 'your price field',
      sale_price: 'your sale price field',
      image: 'your image field',
      isfavorite: 'your favorite field',
      rating: 'your rating field'
    },
  })

Configuration params for options prop

With the options object you can customize your grid widgets with the following params.

Option Description Type Default
color background color String #fff
title_color title color String #555
text_color all text color String #ccc
price price color String #555
sale_color sale price color String #ff0000
rating_color rating stars color String #ffd055
rating show rating Boolean true
favorite show favorite Boolean true
salebox show SALE box if item is on sale Boolean false
currency prepend currency to price String $
elevation add box shadow effect
- '0' = no effect
- '1 thru 3' = 3 box shadow effects available
String '1'
btn_1* you can assign your html icon String favorite_border*
btn_1_on* btn_1 toggle String favorite*
btn_2* assign your icon html code String shopping_cart*

Note

* to use default values you need to add the Google Material Icons to your project.

Example:

...
 data: ()=>({
    config : {
      color: '#fafafa',
      title_color: '#ff0000',
      ....
    }
 })

Events

vue-products-grid emits 4 events (this.$emit(...)) in order to get the following user actions:

  • click on image or title
  • click add to cart (shopping cart icon)
  • click on rating (user set rating)
  • click on favorite icon (add to favorite)

The above events needs to be declared in the component bindings to connect your template. Your template needs to have the functions declared in the binding in the methods section (see complete examble below)

Event Required Description Type Return
@widgetSelected NO Clicked on image or title Function Object (product)
@widgetClick NO Click on btn_2 Function Object (product)
@widgetRating NO Set rating click Function -Integer (rating): rating selected by user
-Object (product): product clicked
@widgetFavorite NO Click on btn_1 Function --Integer (index): index of the items array clicked
- Boolean (true/false): product favorite

You can assign your custom logic to each emitted event. Example : you can change the add to cart event emitted behavior to open the single product page instead to add to cart logic.

Full Example

">

  

Roadmap

  • add themes options (predefined themes)

Notes

Development or demo Component uses Google Material Design icons. If you don't have any icons library you can add to your index.html

">

   

License

Released under MIT license.

You might also like...
A pure vue native horizontal list implementation for mobile/touch and responsive web.
A pure vue native horizontal list implementation for mobile/touch and responsive web.

👋 You might want to use Vue Horizontal instead! Vue Horizontal is another take on the horizontal layout written by me with an ultra simple implementa

Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs)

Starter Responsive Dashboard Layout Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs) See live Another projects Alpine versi

Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Responsive masonry layout with SSR support and zero dependencies for Vue 3.

Responsive masonry layout with SSR support and zero dependencies for Vue 3.

An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)

An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)

A Vue plugin that provides responsive design helpers, based on breakpoints.

A Vue plugin that provides responsive design helpers, based on breakpoints.

Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use

A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Emmanuel Olaojo 172 Aug 17, 2022
Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Ben Sladden 231 Oct 4, 2022
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 935 Sep 28, 2022
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 27 Sep 11, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Yev Vlasenko 935 Sep 28, 2022
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 87 Dec 20, 2021
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Danny Funkat 0 Feb 22, 2022
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Fuxing Loh 182 Sep 14, 2022