# TCG Emporium — WooCommerce Yu-Gi-Oh! Store

A WooCommerce store for Yu-Gi-Oh! card products, with a custom plugin for card data integration and Astra theme customizations.

---

## XAMPP Setup Guide

### Prerequisites

- **XAMPP** installed with Apache and MySQL running
- **PHP 8.1+** (XAMPP ships with this)
- **Git** for cloning

### 1. Clone the Repo

```bash
cd C:\xampp\htdocs
git clone <repo-url> woo
```

### 2. Install WordPress

Download and extract WordPress into the `woo` folder so it becomes the web root:

1. Download WordPress 6.9+ from https://wordpress.org/download/
2. Extract it so `C:\xampp\htdocs\woo\` contains `wp-admin/`, `wp-content/`, `wp-includes/`, `wp-config-sample.php`, etc.

### 3. Create the Database

1. Open phpMyAdmin at http://localhost/phpmyadmin
2. Create a new database called `woo` (collation: `utf8mb4_unicode_ci`)
3. Import the database dump:
   - Click the `woo` database
   - Go to **Import** tab
   - Select `database.sql` from this repo
   - Click **Go**

### 4. Configure wp-config.php

Copy `wp-config-sample.php` to `wp-config.php` and set:

```php
define( 'DB_NAME', 'woo' );
define( 'DB_USER', 'root' );
define( 'DB_PASSWORD', '' );       // XAMPP default has no password
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );
```

Generate fresh salts at https://api.wordpress.org/secret-key/1.1/salt/ and paste them in.

### 5. Fix Site URLs

The database dump has URLs pointing to `http://localhost:8080` (from Docker). Update them to match XAMPP:

Open phpMyAdmin, select the `woo` database, go to the **SQL** tab, and run:

```sql
UPDATE wp_options SET option_value = 'http://localhost/woo' WHERE option_name IN ('siteurl', 'home');
```

If you're serving from a different path or port, adjust accordingly.

### 6. Install the Custom Plugin

Copy the plugin from this repo into WordPress:

```
woo/wordpress/wp-content/plugins/yugioh-woocommerce/
  → C:\xampp\htdocs\woo\wp-content\plugins\yugioh-woocommerce\
```

Then activate it in **WP Admin → Plugins**.

### 7. Install MU-Plugins

Copy the must-use plugins:

```
woo/mu-plugins/hide-company-field.php
woo/mu-plugins/require-login-checkout.php
  → C:\xampp\htdocs\woo\wp-content\mu-plugins\
```

Create the `mu-plugins` folder if it doesn't exist. These load automatically — no activation needed.

### 8. Install the Astra Theme Override

Copy the template override:

```
woo/wordpress/wp-content/themes/astra/woocommerce/content-single-product.php
  → C:\xampp\htdocs\woo\wp-content\themes\astra\woocommerce\content-single-product.php
```

Create the `woocommerce` subdirectory inside the Astra theme folder if it doesn't exist.

### 9. Apply Theme & Customizer Settings

The database dump should already contain these, but if starting fresh, copy `setup-theme.php` into the WordPress root and visit it once via CLI or browser:

```bash
php C:\xampp\htdocs\woo\setup-theme.php
```

This sets:
- **Astra single product page**: no sidebar, breadcrumb at top
- **Customizer CSS**: product grid alignment, breadcrumb bold styling, header box-shadow, checkout/cart sidebar hiding

### 10. Verify

1. Visit http://localhost/woo — the shop should load
2. Visit http://localhost/woo/wp-admin — log in (credentials from the original setup)
3. Check a product page — breadcrumb should be at top, card info tab should appear, no sidebar

---

## Repo Structure

```
woo/
├── database.sql                          # Full MySQL dump (import into XAMPP)
├── setup-theme.php                       # Astra settings + Customizer CSS setup script
├── docker-compose.yml                    # Docker setup (alternative to XAMPP)
├── .env.example                          # Docker env vars template
├── mu-plugins/
│   ├── hide-company-field.php            # Hides company field, forces Indonesia
│   └── require-login-checkout.php        # Requires login to place orders
├── wordpress/wp-content/
│   ├── plugins/yugioh-woocommerce/
│   │   └── yugioh-woocommerce.php        # Yu-Gi-Oh! card selector plugin
│   └── themes/astra/woocommerce/
│       └── content-single-product.php    # Single product template override
├── yugioh-woocommerce.zip               # Original plugin archive
├── seed-cards.sh                         # Product seeding scripts
├── seed-products.sh
└── seed-yugioh.sh
```

## Active Plugins

| Plugin | Purpose |
|--------|---------|
| **WooCommerce** | Core e-commerce |
| **Yu-Gi-Oh! Card Products** | Card search, auto-fill title, card info tab on product pages |
| **OngkosKirim** | Indonesian shipping calculator |
| **WooCommerce PayPal Payments** | PayPal payment gateway |
| **Google Listings & Ads** | Google Shopping integration |

## Theme: Astra

Active theme with these customizations:
- Single product pages use **no sidebar** layout
- **Breadcrumb** displayed above product, bold with 1em margin
- **Product description** shown directly below title (default Description tab removed)
- **Card Info tab** added for products linked to Yu-Gi-Oh! cards
- Header nav has subtle box-shadow

## MU-Plugins

- `hide-company-field.php` — Removes company field from checkout, forces country to Indonesia
- `require-login-checkout.php` — Blocks guest checkout with a login prompt

---

## Product Upload Guide

### Required Fields

| Field | Where | Notes |
|-------|-------|-------|
| Product name | Title field | Include card name + rarity (e.g. "Dark Magician – Ultra Rare") |
| Price | Product data → General | No price = no Add to Cart button |
| Image | Product image (sidebar) | Min 600×600px; the Yu-Gi-Oh! plugin auto-sets official art if empty |
| Category | Product categories (sidebar) | Don't leave as "Uncategorized" |

### Recommended Fields

- **Short description**: 1–2 sentences, shown next to the image
- **Long description**: Shown below the title on the product page
- **Product gallery**: Multiple angles/photos
- **Weight**: Required for OngkosKirim shipping calculation
- **Stock quantity**: Enable under Product data → Inventory

### Yu-Gi-Oh! Card Selector

When adding a product, use the **Yu-Gi-Oh! Card Selector** metabox:
1. Search for a card name
2. Click a result — the product title auto-fills and card data is saved
3. On the storefront, a **Card Info** tab appears with official card art, stats, and description