WordPress Frontend - Scope Document

Project: Coneflower Creamery Shopify Integration Component: WordPress Theme Development Status: Ready to Build (pending design)

Objective

Build the WordPress frontend that displays Shopify products, manages the shopping cart, and handles the checkout flow transition to Shopify.

Prerequisites

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                     WordPress (Frontend)                      │
├─────────────────────────────────────────────────────────────┤
│  Product Listing    │  Single Product   │    Mini Cart       │
│  - Fetch from API   │  - Variant select │  - Slide-out panel │
│  - Display grid     │  - Add to cart    │  - Quantity +/-    │
│  - Filter/sort      │  - Upsells        │  - Remove items    │
└─────────────────────┴──────────────────┴────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Shopify (Backend)                         │
│  Storefront API: Products, Cart, Checkout                    │
│  Checkout hosted on Shopify → Redirect back to WP Thank You  │
└─────────────────────────────────────────────────────────────┘

Components to Build

1. Shopify Configuration

Task Details Est. Hours
Create shopify-config.php API credentials, store domain 0.5
Enqueue Shopify Buy SDK CDN or local 0.25
Initialize Shopify client In shopify.js 0.25

Config File Structure:

// inc/shopify-config.php
define('SHOPIFY_STORE_DOMAIN', 'coneflower-creamery.myshopify.com');
define('SHOPIFY_STOREFRONT_ACCESS_TOKEN', 'xxxxx');

2. Product Listing Page

Task Details Est. Hours
Create archive template archive-shopify_product.php or custom page 1
Fetch products from Storefront API GraphQL query for products 1
Product card component Image, title, price, variants preview 1.5
Grid layout Responsive 2-3-4 column grid 0.5
Loading state Skeleton loaders while fetching 0.5
Error state Friendly message if API fails 0.25

Design Requirements: - Product image (aspect ratio TBD) - Product title - Price - "View Details" or direct variant selection - Responsive grid

3. Single Product Page

Task Details Est. Hours
Create single template single-shopify_product.php or custom 1
Product image display Main image, possibly gallery 0.5
Product info section Title, price, description 0.5
Variant selector Dropdown or buttons for flavors 1
Quantity selector +/- buttons, input field 0.5
Add to Cart button Triggers cart add, opens mini cart 0.5
Pickup info display Location, dates from config 0.5
Upsell section "Pair with seasonal pints" (see UPSELLS.md) included separately

Design Requirements: - Large product image - Clear variant selection (flavor) - Prominent Add to Cart - Pickup information block - Mobile-optimized layout

4. Mini Cart (Slide-out)

Task Details Est. Hours
Cart panel structure Fixed position, slides from right 1
Cart header Title, close button, item count 0.25
Line items display Image, title, variant, price, quantity 1
Quantity controls +/- buttons per item 0.5
Remove item X button, confirmation optional 0.25
Cart totals Subtotal display 0.25
Checkout button Links to Shopify checkout URL 0.25
Empty cart state Friendly message, continue shopping link 0.25
Cart persistence localStorage for cart ID 0.5
Overlay/backdrop Dim background when cart open 0.25
Animation Smooth slide in/out 0.5

Design Requirements: - Clean, scannable layout - Easy quantity adjustment - Clear path to checkout - Works on mobile (full-width on small screens)

5. Cart Toggle Button

Task Details Est. Hours
Header cart icon Shopping bag/cart icon 0.25
Item count badge Number bubble showing cart quantity 0.25
Click handler Opens mini cart 0.25
Position in header Integrate with existing nav 0.25

6. Checkout Flow

Task Details Est. Hours
Checkout redirect Navigate to checkout.webUrl from Shopify 0.5
Post-purchase redirect Configure Shopify to return to WP thank you page 1
Thank you page template Display order confirmation message 1
Order details display Optional - show what was ordered 0.5

Shopify Checkout Redirect Script:

// In Shopify Admin → Settings → Checkout → Additional scripts
<script>
  Shopify.Checkout.OrderStatus.addContentBox(
    '<script>window.location.href = "https://coneflowercreamery.com/thank-you/?order=" + Shopify.checkout.order_id;<\/script>'
  );
</script>

7. JavaScript Integration (shopify.js)

Task Details Est. Hours
Shopify client initialization Using Buy SDK 0.5
Product fetching functions fetchProducts(), fetchProduct(handle) 1
Cart management createCart(), addToCart(), updateQuantity(), removeItem() 2
Cart state management Track cart ID, line items, totals 0.5
UI update functions Render cart, update badge, etc. 1
Event handlers Add to cart clicks, quantity changes, etc. 1
Error handling API failures, network issues 0.5
localStorage integration Persist cart across sessions 0.5

Estimated JS file size: ~400-500 lines

8. Responsive Implementation

Task Details Est. Hours
Mobile product grid 1-2 columns 0.5
Mobile single product Stacked layout 0.5
Mobile mini cart Full-width slide-out 0.5
Touch targets Minimum 44px tap areas 0.25
Mobile checkout flow Test on actual devices included in testing

9. Loading & Error States

Task Details Est. Hours
Skeleton loaders Product grid placeholder 0.5
Spinner/loading indicator For cart operations 0.25
Error messages User-friendly, actionable 0.25
Retry functionality "Try again" for failed loads 0.25

10. Gravity Forms Removal

Task Details Est. Hours
Disable/remove GF ordering Remove or hide existing order forms 0.5
Update navigation Point to new Shopify product pages 0.25
Redirect old URLs If needed for SEO 0.25

Note: Keep GF data in database for historical reference.

File Structure

theme/
├── inc/
│   ├── shopify-config.php         # API credentials
│   └── shopify-enqueue.php        # Script/style enqueue
├── js/
│   └── shopify.js                 # Main integration (~400-500 lines)
├── css/
│   └── shopify.css                # Component styles (or in Tailwind)
├── template-parts/
│   ├── shopify/
│   │   ├── product-card.php       # Product grid item
│   │   ├── product-single.php     # Single product layout
│   │   ├── mini-cart.php          # Cart slide-out
│   │   └── cart-toggle.php        # Header cart button
├── page-shop.php                   # Product listing (or archive)
├── page-product.php                # Single product (or single-*)
└── page-thank-you.php              # Post-purchase confirmation

Deliverables

  1. Product listing page - Grid of Shopify products
  2. Single product page - Detail view with variant selection
  3. Mini cart component - Slide-out cart with full functionality
  4. Cart toggle button - Header integration with item count
  5. Thank you page - Post-purchase confirmation
  6. Shopify.js - Complete JavaScript integration
  7. Responsive CSS - Mobile-first implementation

Hour Estimate

Component Hours
Config & setup 1
Product listing 3
Single product 3
Mini cart 4
Cart toggle 1
Checkout/thank you 2.5
JavaScript integration 6.5
Responsive CSS 2
Loading/error states 1.25
GF removal 1
Total 25.25

Dependencies

Blocks

Design Requirements Summary

Needed from G&M: - [ ] Product listing page layout - [ ] Product card design - [ ] Single product page layout - [ ] Mini cart design - [ ] Cart toggle button design - [ ] Empty cart state - [ ] Loading states - [ ] Error states - [ ] Mobile responsive breakpoints - [ ] Thank you page layout

References