bagisto-shop-theme-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

在Bagisto中开发店铺主题，涉及创建打包为Laravel包的自定义店铺前端主题。最终成果是一个可独立分发和维护的自包含包。

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

在以下场景中启用此技能：

创建作为包的自定义店铺前端主题
构建用于分发的主题包
处理基于Vite的资源
自定义面向客户的页面
重写默认店铺模板

Bagisto Shop Theme Architecture

Bagisto店铺主题架构

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`

组件	用途	位置
主题配置	定义可用主题	`config/themes.php`
视图路径	Blade模板文件	在主题配置中定义
资源路径	CSS、JS、图片	在主题配置中定义
主题中间件	解析激活的主题	`packages/Webkul/Shop/src/Http/Middleware/Theme.php`
Theme Facade	管理主题操作	`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',
        ],
    ],
],

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',
        ],
    ],
],

Reference files — load only what the current task needs

参考文件——仅加载当前任务所需的文件

File	Load when
creating-a-theme.md	Scaffolding the theme package and registering it
assets.md	The Vite pipeline, the build, and the dev-server workflow
layouts.md	Shop layouts, Blade components, custom layouts
reference.md	Package layout, key files, pitfalls, testing

REQUIRED SUB-SKILL: Use bagisto-change-verification before calling any change done.

文件	加载时机
creating-a-theme.md	搭建主题包并注册时
assets.md	处理Vite管道、构建及开发服务器工作流时
layouts.md	处理店铺布局、Blade组件、自定义布局时
reference.md	处理包布局、关键文件、陷阱问题、测试时