本文へスキップ

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

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

更新日: Markdown で表示

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

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

app/addons/<アドオン名>/schemas/block_manager/blocks.post.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 は例です。別のテーマを使っている場合は、使用するテーマの名前に置き換えてください。

{** 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

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 にも置く を参照してください。

ポイント

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

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

app/schemas/block_manager/blocks.php(cart_content、my_account など)

関連ページ

ナビゲーション

検索語を入力してください…

↑↓ 移動↵ 開くEsc 閉じる