bagisto-shop-theme-development

ショップテーマの開発

概要

Bagisto のショップテーマ開発では、Laravel パッケージとしてパッケージ化されたカスタムストアフロントテーマを作成します。最終的には、独立して配布・保守できる自己完結型のパッケージになります。

適用するタイミング

次の作業を行う際に、このスキルを有効にしてください。

• カスタムストアフロントテーマをパッケージとして作成する
• 配布用のテーマパッケージを構築する
• Vite を利用したアセットを扱う
• 顧客向けページをカスタマイズする
• デフォルトのショップテンプレートをオーバーライドする

Bagisto のショップテーマアーキテクチャ

コアコンポーネント

コンポーネント	目的	場所
テーマ設定	利用可能なテーマを定義します	config/themes.php
ビューのパス	Blade テンプレートファイル	テーマ設定で定義
アセットのパス	CSS、JS、画像	テーマ設定で定義
テーマミドルウェア	有効なテーマを解決します	packages/Webkul/Shop/src/Http/Middleware/Theme.php
テーマファサード	テーマの操作を管理します	packages/Webkul/Theme/src/Themes.php

主な設定プロパティ

// config/themes.php
use Webkul\Theme\Enums\SectionTypeEnum;

'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',
        ],
        'customize' => [
            'sections' => [
                SectionTypeEnum::IMAGE_CAROUSEL,
                SectionTypeEnum::PRODUCT_CAROUSEL,
                SectionTypeEnum::CATEGORY_CAROUSEL,
                SectionTypeEnum::FOOTER_LINKS,
                SectionTypeEnum::STATIC_CONTENT,
                SectionTypeEnum::SERVICES_CONTENT,
            ],
            'image_cache' => [
                'templates' => [],
                'product_images' => [],
            ],
        ],
    ],
],

customize は、テーマがストアフロントでカスタマイズする内容を登録する唯一の場所です。 config/themes.php では、各キーについて Laravel スタイルのコメントブロックで説明しています。配下のキーはすべて省略可能です。

customize.sections を指定しない場合、テーマでは SectionTypeEnum の順序で、すべてのコアセクションタイプを利用できます。テーマ独自のセクションタイプは、ここに記載する SectionType クラスです。詳細は bagisto-theme-sections スキルと UPGRADE.md → テーマへのセクションの追加 を参照してください。

customize.image_cache.templates は、cache/{template}/{path} 形式の名前と、公開 applyFilter() メソッドを持つクラスを対応付けるマップです。テーマを実行するチャネルに対して、コアの imagecache.templates（small、medium、large）に統合されます。テーマはコアの名前をオーバーライドするか、新しい名前を追加します。config/imagecache.php は編集しません。 Webkul\ImageCache\TemplateRegistry はリクエストごとにこれらを解決します。詳細は UPGRADE.md → テーマの画像キャッシュテンプレート を参照してください。

customize.image_cache.product_images は、テンプレートを商品画像配列の対象にします。商品画像ヘルパー（およびすべての商品 API、ギャラリー、カート項目）には、常に small、medium、large、original が含まれます。また、{name}_image_url はここに記載された名前に限って含まれ、登録済みのすべてのテンプレートが含まれるわけではありません。管理者のリクエストでは常にコアテンプレートが解決されます（管理者 URL では TemplateRegistry::currentTheme() が null になります）。CatalogApiCache はチャネルのテーマごとにリスティングをキャッシュします。

参考ファイル — 現在の作業に必要なものだけを読み込む

ファイル	読み込むタイミング
creating-a-theme.md	テーマパッケージのひな形を作成して登録するとき
assets.md	Vite のパイプライン、ビルド、開発サーバーのワークフローを扱うとき
layouts.md	ショップのレイアウト、Blade コンポーネント、カスタムレイアウトを扱うとき
reference.md	パッケージの構成、主要ファイル、注意点、テストを確認するとき

必須サブスキル： 変更を完了とする前に、bagisto-change-verification を使用してください。