BuyMore Storefront (WordPress Plugin)

A custom-coded WordPress plugin that renders a full-page "BuyMore" fashion/e-commerce dashboard UI through a single shortcode: [buymore_storefront]. No page builder, no WooCommerce, no custom theme — just PHP, WP APIs, CSS and vanilla JavaScript.

1. Project Overview

The plugin registers a custom post type for products, a Settings page for storefront copy, and a shortcode that outputs the entire dashboard markup. When the shortcode is placed on a WordPress Page, the plugin strips the active theme's header/footer/title so the storefront behaves like a standalone application, while keeping the WP admin bar visible for logged-in users.

2. Features

• Pixel-oriented recreation of the reference dashboard: sidebar nav, orders summary, Dashboard/Website toggle, Explore heading with All/Men/Women filter pills, promo banners, a dynamic product grid, a Favourites panel, and a fashion promo banner.
• Fully responsive (desktop / tablet / mobile) via CSS media queries — no duplicated markup.
• Dynamic content: products, categories, and all storefront copy/images are editable from wp-admin and reflected immediately on the front end.
• Vanilla JS interactions: category filtering, favourite toggle, mobile sidebar menu, and Dashboard/Website pill state.
• Clean, prefixed (bm_ / BM_), escaped, sanitized, nonce-protected WordPress code.

3. Plugin Structure

buymore-storefront/
├── buymore-storefront.php        # Bootstraps the plugin, loads includes, hooks
├── README.md
├── includes/
│   ├── class-bm-post-types.php   # `bm_product` CPT + `bm_category` taxonomy + demo seed
│   ├── class-bm-settings.php     # Settings → BuyMore page (Settings API)
│   └── class-bm-shortcode.php    # [buymore_storefront] shortcode + full-page behavior
├── templates/
│   └── storefront.php            # The actual HTML output (uses WP_Query + settings)
└── assets/
    ├── css/storefront.css        # All storefront styling + responsive rules
    └── js/storefront.js          # Filtering, favourites, mobile menu, toggle

Each class has one job: post types, settings, or shortcode/rendering. The template file is pure output — no business logic lives there beyond loops.

4. Installation

1. Zip the buymore-storefront folder (already provided as buymore-storefront.zip).
2. In WordPress: Admin → Plugins → Add New Plugin → Upload Plugin.
3. Choose the ZIP file and click Install Now.

5. Activation

Click Activate after install. On activation the plugin:

• Registers the bm_product custom post type and bm_category taxonomy.
• Seeds 8 demo products (Men/Women/Clothing/Shoes) with images, prices and badges, only once (guarded by a bm_demo_seeded option so reactivating won't duplicate data).
• Flushes rewrite rules so the CPT's URLs work immediately.

6. How to Create the Storefront Page

1. Pages → Add New.
2. Title it anything (e.g. "Storefront") — the title is auto-hidden on this page.
3. In the content editor, add a single block with:

   [buymore_storefront]

4. Publish and view the page. The plugin detects the shortcode, hides the theme's header/footer/title on that page only, and enqueues its CSS/JS.

7. Shortcode

[buymore_storefront] — takes no attributes. It:

• Queries the 8 most recent bm_product posts via WP_Query.
• Reads all copy (brand name, order count, promo/banner text, image URLs) from Settings → BuyMore.
• Outputs the full dashboard markup, scoped under a single .bm-app wrapper so the CSS never leaks into the rest of the site.

8. How Products Work

Go to Products (left admin menu, cart icon) → Add New:

• Title → product name shown on the card.
• Featured Image → product photo (falls back to a bundled placeholder gradient if none is set, so the layout never breaks).
• Category (bm_category taxonomy box) → Men / Women / Clothing / Shoes.
• Price and Badge → set in the "Product Details" meta box on the right side of the edit screen.
• Excerpt → shown as the small tag above the product title (e.g. "Our Picks").

Any edit here is reflected on the storefront the next time the page loads — nothing is cached or hardcoded.

9. How Categories Work

Categories are a standard hierarchical taxonomy (bm_category) attached to bm_product. The sidebar's "Clothing and Shoes" link and the Explore section's All / Men / Women pills filter the product grid client-side by matching each card's data-categories attribute (populated server-side from the product's real terms) — so filtering always reflects actual WordPress taxonomy data.

10. How BuyMore Settings Work

Settings → BuyMore exposes editable fields for:

• Brand name, order count, order period label
• Main promo title + button text + promo banner image URL
• Winter banner title/subtitle + image URL
• Fashion banner title/subtitle + image URL

All fields are registered with the WordPress Settings API (register_setting, add_settings_section, add_settings_field), sanitized on save (sanitize_text_field / esc_url_raw), and read on the front end through BM_Settings::get( $key ).

11. Responsive Behavior

• Desktop (>1024px): 3-column grid matching the reference proportions — promo/winter banners on the left, 2×2 product grid center-right, favourites + fashion banner along the bottom.
• Tablet (≤1024px): grid collapses to 2 columns, sidebar narrows, product grid becomes single column, no horizontal overflow.
• Mobile (≤680px): sidebar becomes an off-canvas menu triggered by a hamburger button (with a dimmed overlay), topbar wraps, product grid becomes 2-then-1 columns, typography scales down.

All handled via CSS media queries in assets/css/storefront.css — no duplicated HTML for different breakpoints.

12. JavaScript Interactions

assets/js/storefront.js (vanilla JS, no dependencies):

• Category filtering — pill buttons and the sidebar link filter product cards.
• Favourite toggle — heart icon on each card adds/removes a thumbnail in the Favourites panel.
• Mobile sidebar — hamburger button opens/closes the off-canvas nav with an overlay; auto-closes on link tap.
• Dashboard/Website toggle — visual active-state switch on the topbar pill.

13. Technologies Used

• PHP (WordPress Plugin API, Settings API, Custom Post Types, Taxonomies, WP_Query)
• HTML5 (semantic markup, alt text, ARIA attributes)
• CSS3 (custom properties/variables, Grid, Flexbox, media queries)
• Vanilla JavaScript (no frameworks, no build step)

14. Demonstrating Dynamic Content (Interview Walkthrough)

1. Open Products in wp-admin, edit an existing product's title/price/image, or add a new one and assign it a category.
2. Reload the storefront page — the change appears immediately (grid is built via WP_Query on every request, not cached HTML).
3. Open Settings → BuyMore, change the "Main Promo Title" or "Brand Name", save, and reload — the storefront text updates instantly, proving the copy isn't hardcoded in the template.
4. Show the templates/storefront.php file to point out there is no literal product data or copy in the markup — everything is pulled through get_post_meta(), get_the_terms(), and BM_Settings::get().

15. Deactivating / Removing the Plugin

• Settings → Plugins → Deactivate: flushes rewrite rules; all product data and settings remain in the database (safe to reactivate later).
• Delete: removes the plugin files only. Product posts, the taxonomy terms, and the bm_settings / bm_demo_seeded options are left in place by design (no destructive uninstall routine), so re-installing restores the exact same content.

---

Note on images: demo products and banners use stable Unsplash CDN URLs as placeholder fashion imagery for demonstration purposes. Replace them with your own licensed assets (via the Featured Image field or Settings → BuyMore) before using this in production.