TCB Shopz — Developer & SEO Documentation

1. Project Overview

TCB Shopz (The Coins Bureau Shopz, tcbshopz.com) is a PHP/HTML5/CSS3/JavaScript website with no framework dependency, running on standard Apache/Linux hosting. It connects the USA and Cameroon through personal shopping (Shop-For-Me), two-way shipping, gift delivery, and gift card exchange. See Project Transmission Document_ TCB Shopz Website Development.md for the full historical build log (V1–V8), and all_forms_to_crm.md for the original Zoho CRM integration brief this build follows.

Forms POST via AJAX to process_*.php handlers, which send email through Brevo, log leads into Zoho CRM, and redirect the browser (client-side, via JSON redirect field) to thank-you.php.

2. File Structure

3. Quick Start by Role

4. Integrations

Run diagnostics.php any time to see which of the above are configured, and check_server.php to verify the PHP/hosting environment itself.

5. Zoho CRM Setup

Full step-by-step is in all_forms_to_crm.md; summary below.

1. Log in to api-console.zoho.com with the account that owns Org 888320108 (The Coins Bureau Shopz).
2. Open the Self Client → Generate Code tab.
3. Scope: ZohoCRM.modules.leads.ALL,ZohoCRM.modules.deals.ALL,ZohoCRM.settings.READ
4. Duration: 10 minutes. Copy the generated code (starts with 1000.) — it is single-use and expires fast.
5. Immediately exchange it:

   curl -X POST "https://accounts.zoho.com/oauth/v2/token" \
     -d "grant_type=authorization_code" \
     -d "client_id=1000.IR6C6WKA5T16NNMJXTNY9D4RP7SCZL" \
     -d "client_secret=<client secret>" \
     -d "code=PASTE_GRANT_CODE_HERE"

6. Paste the returned refresh_token into includes/zoho-config.php. This is the only credential the site needs long-term — it does not expire unless revoked.
7. Confirm on diagnostics.php with the "Test Zoho Connection" button.

TODO As of this build, includes/zoho-config.php ships with client_id/client_secret filled in but an empty refresh_token — the CRM push is currently a safe no-op (logged, never breaks the visitor flow) until someone with Zoho console access completes the steps above. Two different Client IDs were found across project docs during this build (...R7SCZL in all_forms_to_crm.md vs ...KPEG in self_client_CRM+ZOHO.json) — the guide's ID was used; confirm this is the intended one before generating the grant code.

6. WhatsApp Lead Capture

The floating WhatsApp button (assets/js/whatsapp-button.js) is bottom-right, green, pulsing/bouncing to draw attention. Clicking it opens a modal asking for name, WhatsApp number, and email (optional) before handing the visitor off to wa.me. On submit:

1. A fetch(..., {keepalive: true}) POST fires to process_whatsapp_lead.php — fire-and-forget, survives the page navigation.
2. process_whatsapp_lead.php emails contact@tcbshopz.com + thecoinsbureau@icloud.com via Brevo, and pushes a Lead to Zoho CRM with Lead_Source = "Website - WhatsApp Button".
3. window.open() immediately sends the visitor to wa.me/237670931202 with a pre-filled, personalized message.

The handler is designed to always respond success even if Brevo/Zoho fail — a backend hiccup must never block someone from reaching WhatsApp.

Tawk.to live chat is pinned bottom-left via Tawk_API.customStyle in includes/footer.php, specifically so it never overlaps the WhatsApp button.

7. Testing the Submission Pipeline

This build's automated verification covered UI/JS behavior only (modal open/validate, form submit → redirect) via browser automation against a local php -S server — it did not make live calls to Brevo/Zoho with real secrets. Run the manual checklist on thank-you.php?debug=1 against a live/staging deployment before considering the CRM/email pipeline fully verified.

8. SEO & GEO (AI Search) Setup

On-page

Every page sets $pageTitle and $pageDesc before including includes/header.php, which auto-generates: <title>, meta description, canonical URL, Open Graph tags, Twitter Card tags, and a sitewide LocalBusiness JSON-LD block. Content pages use a single <h1>, <h2> for major sections, <h3>/<h4> for sub-points, and comparison tables (.pricing-table / .table-responsive) where structured data helps both users and AI summarizers.

Crawler access

Content depth guideline

Primary service/landing pages target ~800–1200 words of unique content with a full heading hierarchy and at least one data table where relevant (pricing, comparisons, process steps). Utility pages (privacy, terms) prioritize completeness and clarity over word count. thank-you.php, diagnostics.php, and check_server.php are intentionally noindex — they're conversion/dev tooling, not search-facing content.

9. Brand Identity Reference

Logo: https://tcb-media.s3.us-east-1.amazonaws.com/images/TCBSHOPZ/the_coin_bureau_shopz_logo.png (rectangular, transparent background). Used at ~54px height in the header and ~44px in the footer with a filter: brightness(0) invert(1) applied so the transparent-background mark reads clearly on the dark footer gradient. A local copy also lives in /logo/ for design reference — the live site pulls from the S3 URL directly, consistent with how every other site image is served.

10. Responsive / Mobile Notes

• Mobile nav: hamburger button (.mobile-menu-btn) appears under 768px and toggles a slide-down .nav-links.active panel — previously the nav had no way to reopen on mobile at all.
• Hero: real multi-slide crossfade rotation (assets/js/main.js) with dot indicators and prev/next arrows — previously only one static slide existed despite the "slider" markup.
• Forms: two-column field rows use .form-row-2 / .two-col-grid, which collapse to one column under 768px (previously inline grid-template-columns: 1fr 1fr could not be responsively overridden).
• Global img { max-width: 100%; height: auto; } and .table-responsive { overflow-x: auto; } prevent wide tables/images from breaking mobile layout.

11. Known TODOs & Open Items