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テンプレート以外のテンプレートでも同様に置き換え可能です。