EC-CUBE4デザインテンプレート SPRO01

EC-CUBE4の管理画面にログインし、オーナーズストア ＞ テンプレート ＞ アップロードを選択してください。

以下の情報を入力してテンプレートファイル（.tar.gz）をアップロードします：

SPROブロックエディタープラグインをインストールするには、専用の認証キーが必要です。この認証キーは、ご購入いただいたSPROデザインテンプレートに同梱されているReadme.txtファイル内に記載されています。

----------------------------------------------------------
テンプレート名: EC-CUBE4デザインテンプレート SPRO
デモサイト: https://smartit-group.tech/
提供：SmartITGroup
認証キー: XXXXX
----------------------------------------------------------

上記の例では「XXXXX」が認証キーになります。

管理画面にログインし、オーナーズストア → プラグイン → プラグインを探すに移動して、キーワード欄に「SPROブロックエディター for EC-CUBE4」を入力してプラグインを検索し、見つかった後にインストールを行います。

管理画面のオーナーズストア → プラグイン → プラグイン一覧に移動し、SproBlock42プラグインを見つけて有効化ボタンをクリックします。

有効化が完了すると、コンテンツ管理メニューにSproBlock42が追加されます。

コンテンツ管理 → ブロック拡張 → ブロック設定で以下の設定を行います：

プラグインが正常に動作しない場合は、コンテンツ管理 → キャッシュ管理でキャッシュ削除を実行してください。

管理画面にログインし、コンテンツ管理 → ページ管理 → TOPページを選択してください。

ページ編集画面で以下のコードを見つけて変更してください：

const SPRO_THEME_CUSTOM = false;

↓ 以下のように変更

const SPRO_THEME_CUSTOM = true;

変更を保存した後、サイトのホームページに戻り、画面左下のテーマ設定ボタンをクリックしてカスタマイズを開始してください。

管理画面にログインし、コンテンツ管理 → ブロック拡張 → ブロック設定を選択してください。

フロントエンドエディターを有効にするのチェックボックスをオンにして設定を保存してください。

ホームページに戻り、編集したいエリアをクリックしてください。編集可能なブロックには編集用のポップアップが表示されます。

ポップアップ内でHTMLコードを直接編集し、編集完了後は変更を保存ボタンをクリックして変更内容を保存してください。

管理画面にログインし、コンテンツ管理 → ブロック拡張 → ブロック設定を選択してください。

フロントエンドエディターを有効にするのチェックボックスをオンにして設定を保存してください。

ホームページに戻り、コンポーネントを追加したいエリアを選択してください。利用可能なエリア：

コンポーネント一覧から希望するコンポーネントを選択し、追加するボタンをクリックしてコンポーネントを追加してください。

追加されたコンポーネントをクリックして編集モードに入ります。リアルタイム編集モードを選択することで、変更内容をリアルタイムで確認しながら編集できます。

コンポーネント内の画像を変更する場合は、画像をクリックしてください。画像選択ポップアップが表示され、既存の画像ライブラリから選択するか、新しい画像をアップロードできます。

管理画面にログインし、コンテンツ管理 → ブロック拡張を選択してください。

商品一覧サイドバーフィルターを有効にするのチェックボックスをオンにして設定を保存してください。

新しい価格帯を追加する場合は、コンテンツ管理 → ブロック拡張 → 価格帯設定を選択してください。

管理画面にログインし、コンテンツ管理 → ページ管理を選択し、カスタマイズしたいページを選んで編集をクリックしてください。

ページのHTMLコード内で、<div class="ec-role">を見つけて、以下のようにpage-customクラスを追加してください：

<div class="ec-role">

<div class="ec-role page-custom">

以下のパスにあるファイルを開いてください：

app/Plugin/RelatedProduct42/Resource/template/front/related_product.twig

ファイルの内容を以下のコードで置き換えてください：

<script>
    $(function () {
        $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));

        // Initialize Swiper after it's been appended to the DOM
        if (typeof Swiper !== 'undefined') {
            new Swiper('.swiper-container-related', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: false,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination-related',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next-related',
                    prevEl: '.swiper-button-prev-related',
                },
                breakpoints: {
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    // when window width is >= 768px
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    // when window width is >= 992px
                    992: {
                        slidesPerView: 4,
                        spaceBetween: 20,
                    }
                }
            });
        }
    });
</script>

{% set hasVisibleRelatedProducts = false %}
{% for RelatedProduct in Product.RelatedProducts %}
    {% if not hasVisibleRelatedProducts and RelatedProduct.ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
        {% set hasVisibleRelatedProducts = true %}
    {% endif %}
{% endfor %}

{% if hasVisibleRelatedProducts %}
<div id="RelatedProduct-product_area" class="ec-shelfRole">
    <div class="ec-secHeading">
        <span class="ec-secHeading__en">RELATED PRODUCTS</span>
        <h2 class="ec-secHeading__ja">関連商品</h2>
    </div>
    
    <div class="swiper-container swiper-container-related">
        <div class="swiper-wrapper">
            {% for RelatedProduct in Product.RelatedProducts %}
                {% set ChildProduct = RelatedProduct.ChildProduct %}
                {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
                    <div class="swiper-slide">
                        <div class="ec-shelfGrid__item">
                            <a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
                                <div class="ec-shelfGrid__item-image">
                                    <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
                                    
                                    {# Product tags #}
                                    {% if ChildProduct.Tags is not empty %}
                                        <div class="ec-productTag">
                                            {% for Tag in ChildProduct.Tags %}
                                                <span class="ec-productTag__item tag_{{ Tag.id }}">{{ Tag }}</span>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    
                                    {# Sold out tag #}
                                    {% if ChildProduct.stock_find == false %}
                                        <div class="ec-soldOutTag">
                                            <span class="ec-soldOutTag__label">{{ 'SOLD OUT'|trans }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="ec-shelfGrid__item-content">
                                    <h3 class="ec-shelfGrid__item-title">{{ RelatedProduct.ChildProduct.name }}</h3>
                                    <p class="ec-shelfGrid__item-price">
                                        {% if RelatedProduct.ChildProduct.hasProductClass %}
                                            {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                                                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                            {% else %}
                                                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                                            {% endif %}
                                        {% else %}
                                            {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                        {% endif %}
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        
        <div class="swiper-pagination swiper-pagination-related"></div>
        <div class="swiper-button-next swiper-button-next-related"></div>
        <div class="swiper-button-prev swiper-button-prev-related"></div>
    </div>
</div>
{% endif %}

管理画面にログインし、コンテンツ管理 → レイアウト管理を選択し、トップページ用レイアウトを選択してください。

カテゴリを希望するエリアにドラッグ&ドロップしてください。