Skip to main content

​
Overview

Products in the Bİ DOLU İÇECEK application are managed through the src/data/products.js file. Each product can have multiple sub-products (variants) that customers can choose from.

​
Product Structure

The application uses a two-level product hierarchy:
  • Main Products: Category-level products displayed on the home page (e.g., “Fuska Su”, “Pınar Su”)
  • Sub-Products: Specific variants within each main product (e.g., “19Lt Damacana”, “24x0.5L Şişe”)

​
Main Product Object

Here’s the structure of a main product:
src/data/products.js
{
  id: 1,                                    // Unique identifier
  name: "Fuska Su",                         // Product name
  price: "Seçenekleri Görün",              // Display text (not actual price)
  image: "/images/fuska.jpeg",              // Path to product image
  imagePlaceholder: "🍓",                   // Emoji shown while image loads
  whatsappMessage: "Merhaba Sultan Su sipariş etmek istiyorum. Adresim: ",
  subProducts: [ /* array of sub-products */ ]
}

​
Sub-Product Object

Each sub-product within a main product:
src/data/products.js
{
  id: 11,                                   // Unique identifier
  name: "Fuska Su 19Lt Damacana",          // Full product name
  price: "160 TL",                         // Actual price
  image: "/images/f19.png",                // Path to product image
  imagePlaceholder: "🏺",                   // Emoji placeholder
  whatsappMessage: "Merhaba Sultan Su 19L damacana sipariş etmek istiyorum. Adresim: "
}

​
Required Fields

All product objects must include these required fields to work properly:
FieldTypeDescriptionExample
idNumberUnique identifier1, 11, 21
nameStringProduct display name"Fuska Su"
priceStringPrice or text to display"160 TL" or "Seçenekleri Görün"
imageStringPath to product image"/images/fuska.jpeg"
imagePlaceholderStringEmoji shown during loading"🍓"
whatsappMessageStringPre-filled WhatsApp message"Merhaba..."

​
Adding a New Product

1

Open products.js

Navigate to src/data/products.js in your project.
2

Add product to array

Add a new product object to the PRODUCTS array:
src/data/products.js
export const PRODUCTS = [
  // ... existing products
  {
    id: 10,                              // Use next available ID
    name: "Saka Su",
    price: "Seçenekleri Görün",
    image: "/images/saka.jpeg",
    imagePlaceholder: "💧",
    whatsappMessage: "Merhaba Saka Su sipariş etmek istiyorum. Adresim: ",
    subProducts: []
  }
];
3

Add sub-products

Create sub-product variants within the subProducts array:
src/data/products.js
subProducts: [
  {
    id: 101,
    name: "Saka Su 19Lt Damacana",
    price: "150 TL",
    image: "/images/saka-19.png",
    imagePlaceholder: "🏺",
    whatsappMessage: "Merhaba Saka Su 19L damacana sipariş etmek istiyorum. Adresim: "
  },
  {
    id: 102,
    name: "Saka Su 24x0.5L Şişe",
    price: "180 TL",
    image: "/images/saka-24.png",
    imagePlaceholder: "🍼",
    whatsappMessage: "Merhaba Saka Su 24x0.5L şişe sipariş etmek istiyorum. Adresim: "
  }
]
4

Add product images

Place your product images in the public/images/ directory. See Adding Images for details.
5

Test the product

Run your development server and verify the product appears correctly:
npm start

​
Product ID Best Practices

Product IDs must be unique across all products and sub-products to avoid conflicts.

​
ID Naming Convention

Follow these patterns for consistent ID management: Main Products: Use simple incremental numbers 
id: 1   // Fuska Su
id: 2   // Pınar Su
id: 3   // Buzdağı Su
Sub-Products: Use main product ID as prefix 
// Fuska Su (id: 1) sub-products
id: 11  // Fuska Su 19Lt Damacana
id: 12  // Fuska Su 15Lt Cam Damacana (if exists)
id: 13  // Fuska Su 24x0.5L Şişe

// Pınar Su (id: 2) sub-products
id: 21  // Pınar Su 19Lt Damacana
id: 22  // Pınar Su 15Lt Cam Damacana
id: 23  // Pınar Su 24x0.5L Şişe

​
Special ID Pattern: Damacana Products

Damacana (water jug) products use IDs ending in 1 for time-based ordering restrictions.
Products with IDs matching the pattern /1$/ (ending in 1) are treated as damacana products: 
id: 11  // Fuska Su 19Lt Damacana ✓ (recognized as damacana)
id: 21  // Pınar Su 19Lt Damacana ✓ (recognized as damacana)
id: 91  // Pınar Su 15Lt Cam Damacana ✓ (recognized as damacana)
id: 13  // Fuska Su 24x0.5L Şişe ✗ (NOT damacana)
These products have ordering hour restrictions configured in src/config/damacanaLimits.js.

​
Real Example from Codebase

Here’s a complete product example from the actual codebase:
src/data/products.js
{
  id: 1,
  name: "Fuska Su",
  price: "Seçenekleri Görün",
  image: "/images/fuska.jpeg",
  imagePlaceholder: "🍓",
  whatsappMessage: "Merhaba Sultan Su sipariş etmek istiyorum. Adresim: ",
  subProducts: [
    {
      id: 11,
      name: "Fuska Su 19Lt Damacana",
      price: "160 TL",
      image: "/images/f19.png",
      imagePlaceholder: "🏺",
      whatsappMessage: "Merhaba Sultan Su 19L damacana sipariş etmek istiyorum. Adresim: "
    },
    {
      id: 13,
      name: "Fuska Su 24x0.5L Şişe",
      price: "200 TL",
      image: "/images/f1204.jpeg",
      imagePlaceholder: "🍼",
      whatsappMessage: "Merhaba Sultan Su 1.5L şişe sipariş etmek istiyorum. Adresim: "
    },
    {
      id: 14,
      name: "Fuska Su 12x1Lt Şişe",
      price: "200 TL",
      image: "/images/f121.jpeg",
      imagePlaceholder: "🥤",
      whatsappMessage: "Merhaba Sultan Su 500ml şişe sipariş etmek istiyorum. Adresim: "
    }
  ]
}

​
Modifying Existing Products

1

Locate the product

Find the product in src/data/products.js by searching for the product name or ID.
2

Update fields

Modify any field you need:
{
  id: 11,
  name: "Fuska Su 19Lt Damacana",
  price: "175 TL",  // Updated price
  // ... other fields
}
3

Save and test

Save the file and refresh your browser to see the changes.

​
Common Patterns

​
Empty Sub-Products

If a main product has no variants yet, use an empty array: 
subProducts: []

​
Placeholder Emojis

Choose relevant emojis for visual appeal:
  • Water jugs/damacana: 🏺, 🪣
  • Bottles: 🍼, 🥤, 🍶
  • Water/liquid: 💧, 💦, 🌊
  • Luxury/premium: 💎, ✨, 👑

​
WhatsApp Message Templates

Keep messages consistent and pre-filled: 
// Main product message
whatsappMessage: "Merhaba [Brand Name] sipariş etmek istiyorum. Adresim: "

// Sub-product message
whatsappMessage: "Merhaba [Brand Name] [Size/Type] sipariş etmek istiyorum. Adresim: "

​
Next Steps

Adding Images

Learn how to add product images to your application

Styling Products

Customize how products look and feel

Build docs developers (and LLMs) love

Get started for freeTalk to us