The WhatsApp ordering system allows customers to send their orders directly via WhatsApp with pre-formatted messages, streamlining the ordering process.
Configuration
WhatsApp settings are configured in src/config/whatsapp.js:
export const WHATSAPP_CONFIG = {
// WhatsApp phone number (with country code, without + sign)
phoneNumber: "905303099887" , // Example: Turkey (90) + phone number
// Default message template
defaultMessage: "Merhaba, {productName} sipariş etmek istiyorum." ,
// Custom messages per product
productMessages: {
"abc su" : "Merhaba! ABC Su ürününüz hakkında detaylı bilgi alabilir miyim? Fiyat ve teslimat koşulları nelerdir?" ,
// More product messages can be added here
}
};
Phone Number Format: Use international format without the + sign. For Turkey, use 90 followed by the 10-digit number.
Updating the Phone Number
To change the WhatsApp business number:
export const WHATSAPP_CONFIG = {
phoneNumber: "905551234567" , // Your new number
// ... rest of config
};
WhatsApp URL Generation
Create WhatsApp URL
Generate a WhatsApp Web URL with pre-filled message:
export const createWhatsAppURL = ( productName , customMessage = null ) => {
const message = customMessage ||
WHATSAPP_CONFIG . productMessages [ productName ] ||
WHATSAPP_CONFIG . defaultMessage . replace ( '{productName}' , productName );
const encodedMessage = encodeURIComponent ( message );
return `https://wa.me/ ${ WHATSAPP_CONFIG . phoneNumber } ?text= ${ encodedMessage } ` ;
};
Example Output:
https://wa.me/905303099887?text=Merhaba%2C%20Fuska%20Su%20sipari%C5%9F%20etmek%20istiyorum.
Custom Message - If provided as parameter
Product-Specific Message - From productMessages object
Default Template - Fallback with product name replacement
Open WhatsApp
Open WhatsApp in a new tab:
export const openWhatsApp = ( productName , customMessage = null ) => {
const url = createWhatsAppURL ( productName , customMessage );
window . open ( url , '_blank' , 'noopener,noreferrer' );
};
Always use noopener,noreferrer when opening external links to prevent security vulnerabilities.
The OrderButton component integrates cart data with WhatsApp:
src/components/OrderButton.js
import { useCart } from '../context/CartContext' ;
import { openWhatsApp } from '../config/whatsapp' ;
import { trackWhatsAppClick , trackError } from '../utils/analytics' ;
const OrderButton = () => {
const { getTotalItems , getTotalPrice , getCartMessage , clearCart , items } = useCart ();
const totalItems = getTotalItems ();
const totalPrice = getTotalPrice ();
const handleOrderClick = async () => {
try {
const message = getCartMessage ();
// Analytics tracking
trackWhatsAppClick ( 'Sepet Siparişi' );
// Open WhatsApp
openWhatsApp ( 'Sepet Siparişi' , message );
// Clear cart
clearCart ();
} catch ( error ) {
trackError ( error , 'Order Button Click Handler' );
// Fallback: Direct WhatsApp link
const message = getCartMessage ();
const fallbackUrl = `https://wa.me/905551234567?text= ${ encodeURIComponent ( message ) } ` ;
window . open ( fallbackUrl , '_blank' , 'noopener,noreferrer' );
clearCart ();
}
};
if ( totalItems === 0 ) return null ;
return (
< button onClick = { handleOrderClick } className = "order-button" >
Sipariş Ver - { totalPrice . toFixed ( 2 ) } TL
</ button >
);
};
The cart generates messages in this format:
src/context/CartContext.js
const getCartMessage = () => {
if ( state . items . length === 0 ) return '' ;
const itemMessages = state . items . map ( item =>
` ${ item . quantity } adet - ${ item . name } `
);
return ` ${ itemMessages . join ( ' \n ' ) } \n sipariş etmek istiyorum.` ;
};
Example Cart Message:
2 adet - Fuska Su 19Lt Damacana
1 adet - Pınar Su 24x0.5L Şişe
3 adet - Sultan Su 19Lt Tek Kullanımlık Damacana
sipariş etmek istiyorum.
Single Product Messages
Each product has its own WhatsApp message template:
{
id : 11 ,
name : "Fuska Su 19Lt Damacana" ,
whatsappMessage : "Merhaba Sultan Su 19L damacana sipariş etmek istiyorum. Adresim: "
}
Include “Adresim:” (My address:) in messages to prompt customers to add their delivery address.
Service Hours Integration
The order button respects service hours:
src/components/OrderButton.js
import { isServiceOpen , getServiceHoursText } from '../config/serviceHours' ;
const OrderButton = () => {
const [ serviceOpen , setServiceOpen ] = useState ( false );
useEffect (() => {
const checkServiceStatus = async () => {
const isOpen = await isServiceOpen ();
setServiceOpen ( isOpen );
};
checkServiceStatus ();
const interval = setInterval ( checkServiceStatus , 60000 ); // Check every minute
return () => clearInterval ( interval );
}, []);
const handleOrderClick = async () => {
if ( ! serviceOpen ) return ; // Block orders outside service hours
// ... order logic
};
return (
< button
onClick = { handleOrderClick }
disabled = { ! serviceOpen }
aria-label = {
! serviceOpen
? `Servis saatleri dışında, ${ getServiceHoursText () } `
: ` ${ totalItems } ürün ile sipariş ver`
}
>
{ ! serviceOpen
? 'Servis Saatleri Dışında'
: `Sipariş Ver - ${ totalPrice . toFixed ( 2 ) } TL`
}
</ button >
);
};
Service hours are checked every minute to ensure real-time status updates.
Order Validation
The order button includes multiple validation checks:
Service Hours
Minimum Order
Damacana Time Restriction
if ( ! serviceOpen ) {
return ; // Block order
}
Analytics Tracking
Track WhatsApp order events:
src/components/OrderButton.js
import { trackWhatsAppClick , trackError } from '../utils/analytics' ;
const handleOrderClick = async () => {
try {
trackWhatsAppClick ( 'Sepet Siparişi' );
openWhatsApp ( 'Sepet Siparişi' , message );
} catch ( error ) {
trackError ( error , 'Order Button Click Handler' );
}
};
Multi-Language Support
WhatsApp messages support multiple languages:
src/components/OrderButton.js
import { t } from '../config/language' ;
< button >
{ ! serviceOpen
? t ( 'orderUnavailable' )
: t ( 'orderButton' ) + ` - ${ totalPrice . toFixed ( 2 ) } TL`
}
</ button >
Turkish:
Arabic:
Error Handling
Implement fallback mechanisms for WhatsApp failures:
src/components/OrderButton.js
try {
openWhatsApp ( 'Sepet Siparişi' , message );
clearCart ();
} catch ( error ) {
trackError ( error , 'Order Button Click Handler' );
// Fallback: Direct link
const fallbackUrl = `https://wa.me/905551234567?text= ${ encodeURIComponent ( message ) } ` ;
window . open ( fallbackUrl , '_blank' , 'noopener,noreferrer' );
clearCart ();
}
Always clear the cart after opening WhatsApp to prevent duplicate orders, even if there’s an error.
Testing WhatsApp Integration
Test your WhatsApp integration:
Development Mode: Use your personal number
Check Message Encoding: Verify special characters display correctly
Mobile Testing: Test on both mobile and desktop
Error Scenarios: Test with blocked popups, offline mode
export const WHATSAPP_CONFIG = {
phoneNumber: "905551234567" , // Test number
// ... rest of config
};
Best Practices
Clear Messages Keep WhatsApp messages clear and concise. Include product details and prompt for delivery address.
URL Encoding Always use encodeURIComponent() for message text to handle special characters properly.
Analytics Track WhatsApp clicks to measure conversion rates and popular products.
Error Recovery Implement fallback URLs in case the primary WhatsApp link fails.
Customization Examples
Add Product Prices to Message
const getCartMessage = () => {
if ( state . items . length === 0 ) return '' ;
const itemMessages = state . items . map ( item =>
` ${ item . quantity } adet - ${ item . name } ( ${ item . price } )`
);
const totalPrice = getTotalPrice ();
return ` ${ itemMessages . join ( ' \n ' ) } \n\n Toplam: ${ totalPrice . toFixed ( 2 ) } TL \n\n sipariş etmek istiyorum. \n Adresim: ` ;
};
Add Order Timestamp
const getCartMessage = () => {
const timestamp = new Date (). toLocaleString ( 'tr-TR' );
const itemMessages = state . items . map ( item =>
` ${ item . quantity } adet - ${ item . name } `
);
return `Sipariş Tarihi: ${ timestamp } \n\n ${ itemMessages . join ( ' \n ' ) } \n\n sipariş etmek istiyorum.` ;
};
Shopping Cart Learn how cart data is collected for WhatsApp orders
Service Hours Understand how service hours affect order availability
Multi-Language See how WhatsApp messages support multiple languages