Bootstrap Cards:

Bootstrap Shops Cart and Cards

If you have already started an online shop, this post can be helpful. So, pay attention to this card and use it to gain more customers. These Bootstrap Shops Cart and Cards are the best ones to have an attractive website for sale. By using this Bootstrap Shopping Card, you can add your products and have access to the customers. They can look at these products and buy what they like. This Bootstrap Shopping Cart has a gray background and you can use it if you have a dark website. Using this code eases your job and speeds up attracting customers.

You can add your product in this CSS Shopping Cart with their images. At the bottom of each product, there is its name and then you can see the number of available products. Then, you can see the cost of each one, and all texts are white. At the bottom of this information, there is a button in blue color and white text. This is the “Add to Cart” option. This means that if you want to buy this product, you should click on it. At the top of this Bootstrap Shop Page, there is an option that shows your selected products. You also can search in these JavaScript Shop Carts.

Bootstrap Shopping Card

Bootstrap Shopping Cart

CSS Shopping Card

Javascript Shop Carts

Bootstrap Shop Page

<!-- This script got from frontendfreecode.com -->
<div id="app" class="min-vh-100">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <!-- Logo -->
        <a class="navbar-brand" href="#">
            <i class="fab fa-html5 fa-3x"></i>
        </a>
        <!-- Navbar toggler -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-between" id="navbar">
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#"> Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Cart</a>
                </li>
            </ul>
            <!-- Search Product -->
            <div class="d-flex justify-content-between search my-2">
                <input class="form-control mr-1" type="search" placeholder="Search Product......" />
                <button class="btn btn-success flex-25">Search</button>
            </div>
            <!-- Cart Button -->
            <div class="dropdown">
                <button class="btn btn-info btn-block dropdown-toggle d-flex justify-content-around align-items-center" data-toggle="dropdown">
                    <i class="fas fa-shopping-cart fa-3x mx-3"></i>
                    <div class="mx-2 text-left">
                        <p class="m-0">Productos: ({{cantProductsInCart}})</p>
                        <p class="m-0">Total: $ {{totalPriceCart}}</p>
                    </div>
                </button>
                <!-- items products cart -->
                <div class="dropdown-menu w-100 p-2">
                    <!-- ------------- -->
                    <!-- item product cart -->
                    <div class="d-flex align-items-center border border-info mb-1 p-1 justify-content-around" v-for="productCart in cart">
                        <i class="fas fa-hamburger fa-3x"></i>
                        <div class="text-left">
                            <p class="m-0 text-center">{{productCart.name}}</p>
                            <p class="m-0 fs-14">Cant: {{productCart.cant}}</p>
                            <p class="m-0 fs-14">
                                Precio: {{productCart.moneda}}{{productCart.price}}
                            </p>
                        </div>
                        <span class="delte-item" @click="removeCart(productCart)">X</span>
                    </div>
                    <!-- ------------- -->
                    <div class="dropdown-divider"></div>
                    <button class="btn btn-info btn-block">Go to Cart</button>
                    <button class="btn btn-danger btn-block" @click="cleanCart">
                        Clean Cart
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <!-- Products -->
    <div class="grid-products p-3">
        <!-- ------------- -->
        <!-- card-product -->
        <div class="card" v-for="product in products">
            <img src="https://picsum.photos/seed/picsum/200" class="card-img-top h-50 px-4" alt="logo-product" />
            <div class="card-body">
                <h3 class="card-title text-center">{{product.name}}</h3>
                <p class="card-text">Stock: {{product.stock}}</p>
                <p class="card-text text-center">
                    {{product.moneda}}{{product.price}}
                </p>
                <button v-if="product.stock > 0" class="btn btn-primary btn-block" @click="addCart(product)">
                    Add to Cart
                </button>
                <button v-else class="btn btn-primary btn-block" disabled>
                    Out Stock
                </button>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, 360px);
  gap: 16px;
}
.search {
  width: 50%;
}
.delte-item {
  color: var(--danger);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}
.fs-14 {
  font-size: 14px;
}
.flex-25 {
  flex: 25%;
}

/* data */
const products = [
    {
        id: 1,
        name: "meat pie",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 2,
        name: "chitterlings",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 3,
        name: "Milanese",
        price: 300,
        moneda: "$",
        stock: 5
    },
    {
        id: 4,
        name: "Locro",
        price: 500,
        moneda: "$",
        stock: 5
    },
    {
        id: 5,
        name: "Pizza",
        price: 500,
        moneda: "$",
        stock: 5
    },
    {
        id: 6,
        name: "Fainá",
        price: 400,
        moneda: "$",
        stock: 5
    },
    {
        id: 7,
        name: "Polenta",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 8,
        name: "gnocchi",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 9,
        name: "Ravioli",
        price: 300,
        moneda: "$",
        stock: 5
    },
    {
        id: 10,
        name: "Chicken empanada",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 11,
        name: "Ham and Cheese Empanada",
        price: 200,
        moneda: "$",
        stock: 5
    }
];
const app = new Vue({
    el: "#app",
    data: {
        products: [],
        cart: [],
        user: {
            name: "user",
            dinero: 1000
        }
    },
    created() {
        this.fetchApi();
    },
    methods: {
        fetchApi() {
            const dataApi = localStorage.getItem("db");
            if (dataApi != null) {
                this.products = JSON.parse(dataApi);
            } else {
                this.products = products;
                localStorage.setItem("db", JSON.stringify(data.products));
            }
        },
        addCart(product) {
            const itemCart = this.cart.filter((item) => item.id == product.id)[0];
            if (itemCart != undefined) {
                itemCart.cant++;
            } else {
                const itemCart = {
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    moneda: product.moneda,
                    cant: 1
                };
                this.cart.push(itemCart);
            }
            product.stock--;
        },
        removeCart(product) {
            const itemCart = this.products.filter((item) => item.id == product.id)[0];
            itemCart.stock += product.cant;
            let indiceProduct = 0;
            this.cart.forEach((item, i) =>
                item.id == product.id ? (indiceProduct = i) : null
            );
            this.cart.splice(indiceProduct, 1);
        },
        cleanCart() {
            this.cart = [];
        }
    },
    computed: {
        cantProductsInCart() {
            return this.cart.reduce((acc, item) => acc + item.cant, 0);
        },
        totalPriceCart() {
            return this.cart.reduce((acc, item) => acc + item.cant * item.price, 0);
        }
    }
});

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.0/css/all.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-reboot.min.css'>
<link rel='stylesheet' href='https://bootswatch.com/4/darkly/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.15.0/css/all.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-reboot.min.css'>
<link rel='stylesheet' href='https://bootswatch.com/4/darkly/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
<style>
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, 360px);
  gap: 16px;
}
.search {
  width: 50%;
}
.delte-item {
  color: var(--danger);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}
.fs-14 {
  font-size: 14px;
}
.flex-25 {
  flex: 25%;
}
</style>

</head>
<body>
<div id="app" class="min-vh-100">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <!-- Logo -->
        <a class="navbar-brand" href="#">
            <i class="fab fa-html5 fa-3x"></i>
        </a>
        <!-- Navbar toggler -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-between" id="navbar">
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#"> Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Cart</a>
                </li>
            </ul>
            <!-- Search Product -->
            <div class="d-flex justify-content-between search my-2">
                <input class="form-control mr-1" type="search" placeholder="Search Product......" />
                <button class="btn btn-success flex-25">Search</button>
            </div>
            <!-- Cart Button -->
            <div class="dropdown">
                <button class="btn btn-info btn-block dropdown-toggle d-flex justify-content-around align-items-center" data-toggle="dropdown">
                    <i class="fas fa-shopping-cart fa-3x mx-3"></i>
                    <div class="mx-2 text-left">
                        <p class="m-0">Productos: ({{cantProductsInCart}})</p>
                        <p class="m-0">Total: $ {{totalPriceCart}}</p>
                    </div>
                </button>
                <!-- items products cart -->
                <div class="dropdown-menu w-100 p-2">
                    <!-- ------------- -->
                    <!-- item product cart -->
                    <div class="d-flex align-items-center border border-info mb-1 p-1 justify-content-around" v-for="productCart in cart">
                        <i class="fas fa-hamburger fa-3x"></i>
                        <div class="text-left">
                            <p class="m-0 text-center">{{productCart.name}}</p>
                            <p class="m-0 fs-14">Cant: {{productCart.cant}}</p>
                            <p class="m-0 fs-14">
                                Precio: {{productCart.moneda}}{{productCart.price}}
                            </p>
                        </div>
                        <span class="delte-item" @click="removeCart(productCart)">X</span>
                    </div>
                    <!-- ------------- -->
                    <div class="dropdown-divider"></div>
                    <button class="btn btn-info btn-block">Go to Cart</button>
                    <button class="btn btn-danger btn-block" @click="cleanCart">
                        Clean Cart
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <!-- Products -->
    <div class="grid-products p-3">
        <!-- ------------- -->
        <!-- card-product -->
        <div class="card" v-for="product in products">
            <img src="https://picsum.photos/seed/picsum/200" class="card-img-top h-50 px-4" alt="logo-product" />
            <div class="card-body">
                <h3 class="card-title text-center">{{product.name}}</h3>
                <p class="card-text">Stock: {{product.stock}}</p>
                <p class="card-text text-center">
                    {{product.moneda}}{{product.price}}
                </p>
                <button v-if="product.stock > 0" class="btn btn-primary btn-block" @click="addCart(product)">
                    Add to Cart
                </button>
                <button v-else class="btn btn-primary btn-block" disabled>
                    Out Stock
                </button>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
/* data */
const products = [
    {
        id: 1,
        name: "meat pie",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 2,
        name: "chitterlings",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 3,
        name: "Milanese",
        price: 300,
        moneda: "$",
        stock: 5
    },
    {
        id: 4,
        name: "Locro",
        price: 500,
        moneda: "$",
        stock: 5
    },
    {
        id: 5,
        name: "Pizza",
        price: 500,
        moneda: "$",
        stock: 5
    },
    {
        id: 6,
        name: "Fainá",
        price: 400,
        moneda: "$",
        stock: 5
    },
    {
        id: 7,
        name: "Polenta",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 8,
        name: "gnocchi",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 9,
        name: "Ravioli",
        price: 300,
        moneda: "$",
        stock: 5
    },
    {
        id: 10,
        name: "Chicken empanada",
        price: 200,
        moneda: "$",
        stock: 5
    },
    {
        id: 11,
        name: "Ham and Cheese Empanada",
        price: 200,
        moneda: "$",
        stock: 5
    }
];
const app = new Vue({
    el: "#app",
    data: {
        products: [],
        cart: [],
        user: {
            name: "user",
            dinero: 1000
        }
    },
    created() {
        this.fetchApi();
    },
    methods: {
        fetchApi() {
            const dataApi = localStorage.getItem("db");
            if (dataApi != null) {
                this.products = JSON.parse(dataApi);
            } else {
                this.products = products;
                localStorage.setItem("db", JSON.stringify(data.products));
            }
        },
        addCart(product) {
            const itemCart = this.cart.filter((item) => item.id == product.id)[0];
            if (itemCart != undefined) {
                itemCart.cant++;
            } else {
                const itemCart = {
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    moneda: product.moneda,
                    cant: 1
                };
                this.cart.push(itemCart);
            }
            product.stock--;
        },
        removeCart(product) {
            const itemCart = this.products.filter((item) => item.id == product.id)[0];
            itemCart.stock += product.cant;
            let indiceProduct = 0;
            this.cart.forEach((item, i) =>
                item.id == product.id ? (indiceProduct = i) : null
            );
            this.cart.splice(indiceProduct, 1);
        },
        cleanCart() {
            this.cart = [];
        }
    },
    computed: {
        cantProductsInCart() {
            return this.cart.reduce((acc, item) => acc + item.cant, 0);
        },
        totalPriceCart() {
            return this.cart.reduce((acc, item) => acc + item.cant * item.price, 0);
        }
    }
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars