---
title: "ショップフロントにブロックを追加する"
description: "アドオンからショップフロントにカスタムブロック（ドロップダウン形式など）を追加するスキーマとテンプレート。"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.cs-cart.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# ショップフロントにブロックを追加する

アドオンから、ショップフロントにカスタムブロックを追加する方法です。カートのアイコンやマイアカウントのような、ドロップダウン形式のブロックを例にします。

## 1. ブロックのスキーマを定義する

`app/addons/<アドオン名>/schemas/block_manager/blocks.post.php`

```php
<?php
defined('BOOTSTRAP') or die('Access denied');

$schema['my_custom_block'] = [
    'templates' => [
        'addons/my_addon/blocks/my_custom_block.tpl' => [],
    ],
    'wrappers' => 'blocks/wrappers',
    'cache'    => false, // ユーザーごとに内容が変わる場合
];

return $schema;
```

## 2. ブロックのテンプレートを作る

`design/themes/responsive/templates/addons/<アドオン名>/blocks/my_custom_block.tpl`

`responsive` は例です。別のテーマを使っている場合は、使用するテーマの名前に置き換えてください。

```smarty
{** block-description:my_custom_block **}

{assign var="dropdown_id" value=$block.snapping_id}

<div class="ty-dropdown-box" id="my_block_{$dropdown_id}">
    <div id="sw_dropdown_{$dropdown_id}" class="ty-dropdown-box__title cm-combination">
        {* きっかけとなる部分 *}
    </div>
    <div id="dropdown_{$dropdown_id}" class="cm-popup-box ty-dropdown-box__content hidden">
        {* ドロップダウンの内容 *}
    </div>
</div>
```

## 3. 言語変数を追加する

`var/langs/ja/addons/<アドオン名>.po`

```po
msgctxt "Languages::block_my_custom_block"
msgid "My Custom Block"
msgstr "カスタムブロック"

msgctxt "Languages::my_custom_block"
msgid "My Custom Block"
msgstr "カスタムブロック"
```

## 4. テーマリポジトリにも同期する

`var/themes_repository/<使用するテーマ>/`（例：`responsive`）の下にも、同じ構造でコピーします。詳しくは [ショップフロントのテンプレートを themes_repository にも置く](/addon-development/tips/themes-repository-sync/) を参照してください。

## ポイント

* `{** block-description:<言語変数のキー> **}` で、ブロックの説明を定義します。
* ドロップダウンは、`cm-combination` と `cm-popup-box` のクラスで、CS-Cart 標準の動作になります。
* `$block.snapping_id` で一意な ID を取得できます。同じブロックを複数配置しても ID が衝突しません。

## 参考にするコアのファイル

`app/schemas/block_manager/blocks.php`（`cart_content`、`my_account` など）

## 関連ページ

* [ブロック](/core/shop-front/blocks/)
* [管理画面とショップフロントのテンプレートの違い](/addon-development/tips/backend-and-storefront-templates/)

Source: https://docs.cs-cart.jp/addon-development/tips/adding-a-block/index.mdx