# IM-Press WooCommerce Blocks - Code Examples

## How to Use These Blocks

### Plugin Registration (PHP)

In your main plugin file (`im-press.php`):

```php
<?php
/**
 * Plugin Name: IM-Press
 * Plugin URI: https://example.com
 * Description: Professional WooCommerce blocks for WordPress
 */

// Register all 6 WooCommerce blocks
function im_press_register_blocks() {
    $blocks = [
        'product-grid',
        'product-categories',
        'cart-button',
        'mini-cart',
        'account-page',
        'checkout-fields',
    ];
    
    foreach ( $blocks as $block ) {
        register_block_type( __DIR__ . '/src/blocks/' . $block );
    }
}
add_action( 'init', 'im_press_register_blocks' );
```

### Using in Gutenberg Editor

Once registered, blocks appear under **IM-Press** category:

1. Open any WordPress page/post in Gutenberg editor
2. Click "+" to add a block
3. Search for block name or scroll to "IM-Press" category
4. Click to add block
5. Configure in inspector panel (right sidebar)
6. Publish to see live rendering

### Example: Product Grid

```
Block Name: im-press/product-grid
Title: Product Grid
Features:
  - 3 columns, 3 rows
  - Order by: price (ascending)
  - Category: "electronics"
  - Show: price, rating, button, badge
  - Style: card
  - Hover: lift effect
  - Gap: 24px
  - Border radius: 8px
```

In Gutenberg, configure via Inspector:
- Grid Settings tab: columns, rows, order, filters
- Display tab: show/hide elements, styles
- Styling tab: gaps, colors, effects

### Example: Mini Cart

```
Block Name: im-press/mini-cart
Title: Mini Cart
Features:
  - Trigger: click
  - Style: dropdown
  - Position: bottom-right
  - Icon: cart (🛒)
  - Fixed position: yes
  - Show count badge: yes
  - Show total: yes
  - Icon color: #111827
  - Badge color: #ef4444
```

Renders as floating cart icon in bottom-right, opens dropdown on click.

### Example: Checkout

```
Block Name: im-press/checkout-fields
Title: Checkout
Features:
  - Layout: two-column
  - Style: modern
  - Label style: above
  - Show coupon: yes
  - Show order notes: yes
  - Show shipping: yes
  - Button text: "Complete Purchase"
  - Button color: #3b82f6
  - Trust badges: yes
```

Two-column layout with form on left, summary on right (mobile: single column).

---

## Block Attributes Reference

### Product Grid
```json
{
  "columns": 3,
  "rows": 3,
  "orderby": "date",
  "order": "desc",
  "category": "electronics",
  "tag": "featured",
  "onSale": false,
  "featured": false,
  "style": "card",
  "showPrice": true,
  "showRating": true,
  "showButton": true,
  "showBadge": true,
  "buttonText": "Add to Cart",
  "gap": "24px",
  "imageFit": "cover",
  "borderRadius": "8px",
  "hoverEffect": "lift",
  "pagination": false
}
```

### Product Categories
```json
{
  "columns": 4,
  "layout": "grid",
  "showCount": true,
  "showImage": true,
  "hideEmpty": true,
  "parentOnly": false,
  "style": "card",
  "gap": "20px",
  "borderRadius": "8px",
  "orderby": "name",
  "order": "asc"
}
```

### Cart Button
```json
{
  "productId": 123,
  "text": "Add to Cart",
  "style": "filled",
  "size": "medium",
  "color": "#3b82f6",
  "textColor": "#ffffff",
  "showPrice": true,
  "showQuantity": false,
  "fullWidth": false,
  "icon": true,
  "borderRadius": "8px",
  "hoverColor": "#2563eb",
  "ajax": true
}
```

### Mini Cart
```json
{
  "style": "dropdown",
  "iconStyle": "cart",
  "showCount": true,
  "showTotal": true,
  "position": "bottom-right",
  "iconColor": "#111827",
  "badgeColor": "#ef4444",
  "bgColor": "#ffffff",
  "trigger": "click",
  "width": "360px",
  "fixed": true
}
```

### Account Page
```json
{
  "style": "tabs",
  "accentColor": "#3b82f6",
  "showAvatar": true,
  "showOrders": true,
  "showDownloads": true,
  "showAddresses": true,
  "borderRadius": "12px",
  "cardStyle": true
}
```

### Checkout Fields
```json
{
  "layout": "two-column",
  "style": "modern",
  "accentColor": "#3b82f6",
  "showCoupon": true,
  "showOrderNotes": true,
  "showShipping": true,
  "buttonText": "Place Order",
  "buttonColor": "#3b82f6",
  "borderRadius": "8px",
  "labelStyle": "above",
  "trustBadges": true
}
```

---

## Customization Examples

### Change Product Grid Colors

In Gutenberg inspector:
1. Add Product Grid block
2. Open "Styling" panel
3. Adjust:
   - Border Radius: 12px (more rounded)
   - Gap: 32px (more spacing)
   - Hover Effect: zoom (instead of lift)

### Mini Cart with Hover Trigger

In Gutenberg inspector:
1. Add Mini Cart block
2. Open "Mini Cart Style" panel
3. Set Trigger: "hover" (instead of click)
4. Position: "top-right" (corner option)
5. Save and test

### Checkout with Classic Style

In Gutenberg inspector:
1. Add Checkout block
2. Open "Layout Settings"
3. Set Style: "classic" (cleaner look)
4. Set Label Style: "floating" (modern UX)
5. Save

---

## Server-Side Rendering Explained

All blocks use PHP `render.php` for rendering:

```
Editor (edit.js)         Preview in block editor
    ↓
Save (save.js)           Returns null (no static HTML)
    ↓
Render (render.php)      Server-side PHP generates HTML
    ↓
Frontend                 Live product data from WooCommerce
```

This approach ensures:
- Live product data on every page load
- Cart updates reflect immediately
- User-specific content (account, orders)
- No caching issues with dynamic content
- Server-side filtering and queries

---

## WordPress Coding Standards

All code follows:
- WordPress Plugin Handbook standards
- Gutenberg best practices
- Security: sanitization, escaping, nonces
- i18n: translatable strings with `__()` and `esc_html__()`
- PHPCS: WordPress-compliant formatting

---

## Files Generated

Total: 24 files

```
product-grid/
  block.json (2.1K)
  edit.js (8.0K)
  save.js (316 bytes)
  render.php (7.9K)

product-categories/
  block.json (1.4K)
  edit.js (5.2K)
  save.js (241 bytes)
  render.php (6.4K)

cart-button/
  block.json (1.4K)
  edit.js (5.8K)
  save.js (229 bytes)
  render.php (8.7K)

mini-cart/
  block.json (1.4K)
  edit.js (5.9K)
  save.js (228 bytes)
  render.php (14K)

account-page/
  block.json (1.1K)
  edit.js (8.2K)
  save.js (226 bytes)
  render.php (11K)

checkout-fields/
  block.json (1.4K)
  edit.js (7.9K)
  save.js (234 bytes)
  render.php (16K)
```

Total size: ~110KB (minified production code)

---

## Testing Checklist

- [ ] Blocks register without errors
- [ ] Blocks appear in Gutenberg editor
- [ ] Inspector controls work
- [ ] Editor preview displays
- [ ] Save block (returns null)
- [ ] Frontend renders with live data
- [ ] Responsive design works
- [ ] AJAX functionality (cart button)
- [ ] Form submission (checkout)
- [ ] i18n strings translate properly
- [ ] Security (no XSS vulnerabilities)
- [ ] Performance (no slowdowns)

---

## Support

For issues or questions:
1. Check WordPress error logs
2. Verify WooCommerce is active
3. Test with WordPress 6.0+ and Gutenberg 13.0+
4. Enable WordPress debug mode for more info
