更新日: 2019 / 12 / 23

UICube Bootstrap4テンプレートとの連携方法

Bootstrap4対応無料テンプレート

Bootstrap4に対応した無料テンプレートを公開しています。カスタマイズのベースにしたり、UICubeと組み合わせてそのままネットショップのテーマとしてお使いいただけます。

Bootstrap4テンプレートとの連携

テンプレートに実装されている新着商品やランキングはデータと接続していないため新着一覧などを表示できません。

テンプレートのデザインそのままでデータと結びつけるには、Bootstrap4テンプレートのコードをUICubeのブロックにコピーし、商品名や価格の部分に変数をセットする必要があります。

実装例: 新着商品をBootstrap4テンプレートのコードに置き換える

基本的にはブロックのコードをコピーし、リンクURLや画像のsrcを書き換えるだけで置き換えることができます。

置き換え前

{% for Product in Products %}
    <div>
        <div class="uic-itemnew__image">
            <a href="{{ url('product_detail', {'id': Product.id}) }}">
                <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" class="img-responsive">
            </a>
        </div>
        <div class="uic-itemnew__body">
            {% if Config.item_name == 0 %}
            <a href="{{ url('product_detail', {'id': Product.id}) }}">
                <p class="item-title">{{ Product.name }}</p>
            </a>
            {% endif %}
            {% if Config.item_price == 0 %}
                <p class="price02-default">{{ Product.getPrice02IncTaxMax|price }}</p>
            {% endif %}
            {% if Config.item_description == 0 %}
                <p class="item-description">{{ Product.description_list }}</p>
            {% endif %}
        </div>
    </div>
{% endfor %}

置き換え後

{% for Product in Products %}
<div class="col-6 col-lg-3">
    <a class="card-item" href="{{ url('product_detail', {'id': Product.id}) }}z">
        <img class="img-fluid" src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
        {% if Config.item_name == 0 %}
            <p class="title">{{ Product.name }}</p>
        {% endif %}
        {% if Config.item_price == 0 %}
            <p class="price">{{ Product.getPrice02IncTaxMax|price }}</p>
        {% endif %}
    </a>
</div>
{% endfor %}

Bootstrap4テンプレート以外のテンプレートでも同様に置き換え可能です。