shop-theme-development
Shop theme development in Bagisto. Activates when creating custom storefront themes, modifying shop layouts, building theme packages, or working with Vite-powered assets for the customer-facing side of the application.
What this skill does
# Shop Theme Development
## Overview
Shop theme development in Bagisto involves creating custom storefront themes packaged as Laravel packages. The end result is a self-contained package that can be distributed and maintained independently.
## When to Apply
Activate this skill when:
- Creating custom storefront themes as packages
- Building theme packages for distribution
- Working with Vite-powered assets
- Customizing customer-facing pages
- Overriding default shop templates
## Bagisto Shop Theme Architecture
### Core Components
| Component | Purpose | Location |
|-----------|---------|----------|
| **Theme Configuration** | Defines available themes | `config/themes.php` |
| **Views Path** | Blade template files | Defined in theme config |
| **Assets Path** | CSS, JS, images | Defined in theme config |
| **Theme Middleware** | Resolves active theme | `packages/Webkul/Shop/src/Http/Middleware/Theme.php` |
| **Theme Facade** | Manages theme operations | `packages/Webkul/Theme/src/Themes.php` |
### Key Configuration Properties
```php
// config/themes.php
'shop-default' => 'default',
'shop' => [
'default' => [
'name' => 'Default',
'assets_path' => 'public/themes/shop/default',
'views_path' => 'resources/themes/default/views',
'vite' => [
'hot_file' => 'shop-default-vite.hot',
'build_directory' => 'themes/shop/default/build',
'package_assets_directory' => 'src/Resources/assets',
],
],
],
```
## Creating Shop Theme Package
### Goal: Complete Self-Contained Package
The end result should be a complete package with:
- All views inside the package
- All assets inside the package
- Service provider for publishing
- Vite configuration for asset compilation
### Step 1: Create Package Structure
```bash
mkdir -p packages/Webkul/CustomTheme/src/{Providers,Resources/views}
```
### Step 2: Copy Complete Shop Assets
Copy all shop assets to your package to have full control:
```bash
# Copy complete shop assets folder
cp -r packages/Webkul/Shop/src/Resources/assets/* packages/Webkul/CustomTheme/src/Resources/assets/
# Copy complete shop views folder
cp -r packages/Webkul/Shop/src/Resources/views/* packages/Webkul/CustomTheme/src/Resources/views/
# Copy shop package.json for dependencies
cp packages/Webkul/Shop/package.json packages/Webkul/CustomTheme/
```
This gives you:
- Complete CSS foundation with Tailwind
- All JavaScript functionality
- Shop components and layouts
- Images, fonts, and static assets
- Complete Blade template structure
- Dependencies for asset compilation
### Step 3: Add Custom Home Page (Boilerplate)
After copying, create a custom home page to show it's a new theme:
**File:** `packages/Webkul/CustomTheme/src/Resources/views/home/index.blade.php`
```blade
<x-shop::layouts>
<x-slot:title>
Custom Theme Home
</x-slot>
{{-- Hero Section --}}
<div class="hero-section bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
<div class="container mx-auto px-4 text-center">
<h1 class="text-5xl font-bold mb-6">
Welcome to Our Store
</h1>
<p class="text-xl mb-8 opacity-90">
Professional theme with modern design
</p>
<a href="{{ route('shop.search.index') }}"
class="bg-white text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300">
Start Shopping
</a>
</div>
</div>
{{-- Featured Products --}}
<div class="container mx-auto px-4 py-16">
<h2 class="text-3xl font-bold text-center mb-12">
Featured Products
</h2>
<!-- Product grid -->
</div>
</x-shop::layouts>
```
### Step 4: Create Custom Layout (Optional)
Create your own master layout for complete control:
**File:** `packages/Webkul/CustomTheme/src/Resources/views/layouts/master.blade.php`
```blade
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
{{-- Load theme assets manually --}}
@bagistoVite([
'src/Resources/assets/css/app.css',
'src/Resources/assets/js/app.js'
])
@stack('meta')
@stack('styles')
</head>
<body class="{{ $bodyClass ?? '' }}">
@if($hasHeader ?? true)
@include('custom-theme::layouts.header')
@endif
<main class="main-content">
{{ $slot }}
</main>
@if($hasFooter ?? true)
@include('custom-theme::layouts.footer')
@endif
@stack('scripts')
</body>
</html>
```
### Step 5: Create Service Provider
**File:** `packages/Webkul/CustomTheme/src/Providers/CustomThemeServiceProvider.php`
```php
<?php
namespace Webkul\CustomTheme\Providers;
use Illuminate\Support\ServiceProvider;
class CustomThemeServiceProvider extends ServiceProvider
{
/**
* Register services.
*/
public function register(): void
{
//
}
/**
* Bootstrap services.
*/
public function boot(): void
{
// Publish views to resources/themes/custom-theme/views
$this->publishes([
__DIR__ . '/../Resources/views' => resource_path('themes/custom-theme/views'),
], 'custom-theme-views');
}
}
```
### Step 6: Configure Autoloading
Update `composer.json`:
```json
"autoload": {
"psr-4": {
"Webkul\\CustomTheme\\": "packages/Webkul/CustomTheme/src"
}
}
```
Run: `composer dump-autoload`
### Step 7: Register Service Provider
Add to `bootstrap/providers.php`:
```php
Webkul\CustomTheme\Providers\CustomThemeServiceProvider::class,
```
### Step 8: Update Theme Configuration
**File:** `config/themes.php`
```php
'shop-default' => 'custom-theme',
'shop' => [
'default' => [
'name' => 'Default',
'assets_path' => 'public/themes/shop/default',
'views_path' => 'resources/themes/default/views',
'vite' => [
'hot_file' => 'shop-default-vite.hot',
'build_directory' => 'themes/shop/default/build',
'package_assets_directory' => 'src/Resources/assets',
],
],
'custom-theme' => [
'name' => 'Custom Theme Package',
'assets_path' => 'public/themes/shop/custom-theme',
'views_path' => 'resources/themes/custom-theme/views',
'vite' => [
'hot_file' => 'custom-theme-vite.hot',
'build_directory' => 'themes/custom-theme/build',
'package_assets_directory' => 'src/Resources/assets',
],
],
],
```
### Step 9: Publish Views
```bash
php artisan vendor:publish --provider="Webkul\CustomTheme\Providers\CustomThemeServiceProvider"
```
### Step 10: Clear Cache
```bash
php artisan optimize:clear
```
### Step 11: Activate Theme
1. Login to admin panel
2. Go to Settings → Channels
3. Edit channel and select your theme
4. Save
### Step 12: Build Assets
```bash
# Navigate to package
cd packages/Webkul/CustomTheme
# Install dependencies
npm install
# Build assets for production
npm run build
```
This will compile your theme assets and create the build directory. After building, your custom theme will be ready to use with the custom home page you created.
## Vite-Powered Assets
### Step 1: Create Asset Configuration Files
Create in your package root:
**File:** `package.json`
```json
{
"name": "custom-theme",
"private": true,
"description": "Custom Theme Package for Bagisto",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
"vite": "^4.0.0"
}
}
```
**File:** `vite.config.js`
```javaRelated in Sales & CRM
process-mapper
IncludedUse when a BizOps lead, COO, or process-improvement owner needs to document an end-to-end business process (procurement, employee onboarding, incident handoff, customer-onboarding, claims adjudication) in BPMN-style notation, measure cycle times by stage, surface where work spends most of its time waiting vs. being worked, and quantify the gap between processing time and total elapsed time. Pairs Lean / Six Sigma / Theory-of-Constraints canon with deterministic stdlib-only Python tools to produce a process map, a ranked bottleneck list (with severity + root-cause hypothesis), and a cycle-time analysis (P50, P90, value-add ratio, Little's-Law throughput). Distinct from sales-pipeline, system-reliability (SLO), and strategic-OKR work — this is tactical process documentation for internal operations.
payment-integration
IncludedIntegrate payments with SePay (VietQR), Polar, Stripe, Paddle (MoR subscriptions), Creem.io (licensing). Checkout, webhooks, subscriptions, QR codes, multi-provider orders.
customer-success-manager
IncludedMonitors customer health, predicts churn risk, and identifies expansion opportunities using weighted scoring models for SaaS customer success
sales-engineer
IncludedAnalyzes RFP/RFI responses for coverage gaps, builds competitive feature comparison matrices, and plans proof-of-concept (POC) engagements for pre-sales engineering. Use when responding to RFPs, bids, or proposal requests; comparing product features against competitors; planning or scoring a customer POC or sales demo; preparing a technical proposal; or performing win/loss competitor analysis. Handles tasks described as 'RFP response', 'bid response', 'proposal response', 'competitor comparison', 'feature matrix', 'POC planning', 'sales demo prep', or 'pre-sales engineering'.
customer-success-manager
IncludedMonitors customer health, predicts churn risk, and identifies expansion opportunities using weighted scoring models for SaaS customer success
sales-engineer
IncludedAnalyzes RFP/RFI responses for coverage gaps, builds competitive feature comparison matrices, and plans proof-of-concept (POC) engagements for pre-sales engineering. Use when responding to RFPs, bids, or proposal requests; comparing product features against competitors; planning or scoring a customer POC or sales demo; preparing a technical proposal; or performing win/loss competitor analysis. Handles tasks described as 'RFP response', 'bid response', 'proposal response', 'competitor comparison', 'feature matrix', 'POC planning', 'sales demo prep', or 'pre-sales engineering'.