E-commerce Catalog

Overview

This example shows how to build a complete product catalog with:

Product grid layout
Search functionality
Category filtering
Price sorting
Pagination

Collection Structure

Create a collection called products with these fields:

Field	Type	Description
name	string	Product name
description	string	Product description
price	number	Product price
image	string	Product image URL
category	string	Product category
onSale	boolean	Is on sale
stock	number	Stock quantity
url	string	Product page URL

Complete Example

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Product Catalog</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://dbindly.com/dbindly.min.js"></script>
</head>
<body>
  <div class="catalog">
    <!-- Header -->
    <header class="catalog-header">
      <h1>Our Products</h1>
      <input
        type="text"
        dbind_search="products"
        placeholder="Search products..."
        class="search-input"
      >
    </header>

    <!-- Products Grid -->
    <div
      class="products-grid"
      dbind_repeat="products"
      dbind_sort="price:asc"
      dbind_paginate="12"
    >
      <div class="product-card">
        <div class="product-image">
          <img dbind_src="image" dbind_alt="name">
          <span dbind_if="onSale==true" class="sale-badge">Sale</span>
        </div>

        <div class="product-info">
          <span dbind_data="category" class="category"></span>
          <h3 dbind_data="name"></h3>
          <p dbind_data="description"></p>
        </div>

        <div class="product-footer">
          <span dbind_data="price" class="price"></span>
          <span dbind_if="stock<5" class="low-stock">Only a few left!</span>
          <span dbind_if="stock==0" class="out-of-stock">Out of Stock</span>
        </div>

        <a dbind_href="url" class="btn-primary">View Product</a>
      </div>
    </div>
  </div>

  <script>
    DBindly.init({
      apiUrl: 'https://dbindly.com/api',
      apiKey: 'pk_live_your_key',
      cache: true,
      onError: (error) => {
        document.querySelector('.products-grid').innerHTML =
          '<p class="error">Failed to load products. Please try again.</p>';
      }
    });
  </script>
</body>
</html>

CSS

.catalog {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.search-input {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 300px;
  font-size: 14px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  padding-top: 100%;
  background: #f5f5f5;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4444;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.product-info {
  padding: 16px;
}

.category {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
}

.product-info h3 {
  margin: 8px 0;
  font-size: 18px;
}

.product-info p {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.product-footer {
  padding: 0 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.low-stock {
  font-size: 12px;
  color: #ff9900;
}

.out-of-stock {
  font-size: 12px;
  color: #ff4444;
}

.btn-primary {
  display: block;
  margin: 0 16px 16px;
  padding: 12px;
  background: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
}

.btn-primary:hover {
  background: #0056b3;
}

/* Pagination styles */
.dbindly-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.dbindly-pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.dbindly-pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

Sample Data

[
  {
    "name": "Wireless Headphones",
    "description": "Premium noise-canceling headphones with 30-hour battery life.",
    "price": 299.99,
    "image": "https://example.com/headphones.jpg",
    "category": "Electronics",
    "onSale": true,
    "stock": 15,
    "url": "/products/wireless-headphones"
  },
  {
    "name": "Smart Watch",
    "description": "Track your fitness and stay connected with this sleek smartwatch.",
    "price": 199.99,
    "image": "https://example.com/watch.jpg",
    "category": "Electronics",
    "onSale": false,
    "stock": 3,
    "url": "/products/smart-watch"
  }
]

Variations

Add category buttons to filter products:

<div class="filters">
  <button onclick="filterCategory('all')">All</button>
  <button onclick="filterCategory('electronics')">Electronics</button>
  <button onclick="filterCategory('clothing')">Clothing</button>
</div>

<script>
function filterCategory(category) {
  const container = document.querySelector('[dbind_repeat="products"]');
  if (category === 'all') {
    container.removeAttribute('dbind_filter');
  } else {
    container.setAttribute('dbind_filter', `category:${category}`);
  }
  DBindly.render();
}
</script>

With Load More

Replace pagination with a load more button:

<div
  class="products-grid"
  dbind_repeat="products"
  dbind_loadmore="12"
>
  <!-- product cards -->
</div>

Next Steps

Team Directory - Another complete example
Interactive Features - More interactive options