商品一覧を表示させる方法
トップページやカテゴリーページに以下のような商品一覧を表示させる方法をご説明します。
トップページに商品一覧を表示させる
トップページのテンプレート上部に下記パラメータを設置
【setParameter(‘id’, ●●)】にカテゴリーIDを指定
ここでは例としてID 7を指定しています【setParameter(‘id’, 7)】
|
1 2 3 |
{% set featured_products = qb.where('c.id = :id').andWhere('p.deleted_at is NULL').andWhere(qb.expr().orx(qb.expr().eq('p.release_status', '0'),qb. expr().andx(qb.expr().eq('p.release_status', '2'),qb.expr().lte('p.released_at', '?1')))).orderBy('p.released_at', 'desc').setMaxResults(10).setParameter('id', 7). setParameter('1', now).getQuery().getResult() %} {% if (featured_products | length > 0) %} |
トップページの商品情報を表示したい部分へ以下のコードを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{% for product in featured_products %} {% set productskus = get_entity_manager().getRepository('EcCoreBundle:ProductSku').createQueryBuilder('ps').innerJoin('ps.product', 'p').where(' p.id = :id').setParameter('id', product.id).getQuery().getResult() %} {% set productAvailable = false %} {% set price_min = 0 %} {% set price_max = 0 %} {% for productsku in productskus %} {% if (productsku.getStockUnlimited or (productsku.getStock > 0))%} {% set productAvailable = true %} {% if price_max == 0 %} {% set price_min = productsku.getPrice %} {% set price_max = productsku.getPrice %} {% else %} {% if (productsku.getPrice < price_min) %} {% set price_min = productsku.getPrice %} {% endif %} {% if (productsku.getPrice > price_max) %} {% set price_max = productsku.getPrice %} {% endif %} {% endif %} {% endif %} {% endfor %} {% if productAvailable == true %} <ul> <li> <figure class="fig-archive"><img src="{% if product.attribute('商品画像') %}{{ ('/uploads/media/'~get_entity_manager().find(" alt="" /></figure> <h3 class="ttl-archive">{% if product.attribute('商品名_' ~ language) %}{{ product.attribute('商品名_' ~ language) }}{% else %}{{ product.name }}{% endif %}</h3> <p class="txt-price">{{ unitFront }} {{ (curRatio * price_min)|price_format(decimalPoint) }} {{ unitBack }}{% if not (price_min == price_max) %} -{% endif %}</p> </li> </ul> {% endif %} {% endfor %} |
アーカイブページ「カテゴリーページ」に商品一覧を表示させる
アーカイブページにはデフォルトで商品一覧が設定されています。
特に編集する必要はありませんがデザインを変更したい場合など、必要に応じて調整してください。
商品一覧ページのURLは
「https://ドメイン名/ec/product/category/カテゴリーid」です。
|
1 2 3 4 5 6 7 8 9 10 |
{% for product in _pager.getResults %} {% set productskus = get_entity_manager().getRepository('EcCoreBundle:ProductSku').createQueryBuilder('ps').innerJoin('ps.product', 'p').where('p.id = :id').setParameter('id', product.id).getQuery().getResult() %} <ul> <li> <figure class="fig-archive"><img src="{% if product.attribute('商品画像') %}{{ ('/uploads/media/'~get_entity_manager().find(" alt="" /></figure> <h3 class="ttl-archive">{% if product.attribute('商品名_' ~ language) %}{{ product.attribute('商品名_' ~ language) }}{% else %}{{ product.name }}{% endif %}</h3> <p class="txt-price">{{ unitFront }} {{ (curRatio * productskus[0].getPrice)|price_format(decimalPoint) }} {{ unitBack }}</p> </li> </ul> {% endfor %} |
商品数と表示順
商品一覧で、1ページに表示する商品数と表示順を変えることができます。
セレクトボックスのデザインを変更する場合以下のコードを調整してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="archiveControl"> <div class="displayArea"> <p class="displayDesc">{% if language == "en" %}In products of all {{ _pager.adapter.getTotalResults }} items, displayed from {{ (_pager.page-1)*_pager.limit+1 }} to {% if (_pager.page*_pager.limit>_pager.adapter.getTotalResults) %}{{ _pager.adapter.getTotalResults }}{% else %}{{ _pager.page*_pager.limit }}{% endif %} items{% else %}{{ _pager.adapter.getTotalResults }}{% if language == "zh-hk" %}商品中 的 {% elseif language == "zh-cn" %}商品中 的 {% endif %}{{ (_pager.page-1)*_pager.limit+1 }}-{% if (_pager.page*_pager.limit>_pager.adapter.getTotalResults) %}{{ _pager.adapter.getTotalResults }}{% else %}{{ _pager.page*_pager.limit }}{% endif %}{% if language == "zh-hk" %}件{% elseif language == "zh-cn" %}件{% endif %}{% endif %}</p> <div class="displayVol"> {% if language == "zh-hk" %}排序順序{% elseif language == "zh-cn" %}排序顺序{% elseif language == "en" %}Sort Order{% endif %}<select class="orderBy" onchange="fnChangeOrderby();"> <option selected="selected" value="sort_new">{% if language == "zh-hk" %}新訂單{% elseif language == "zh-cn" %}新订单{% elseif language == "en" %}New{% endif %}</option> <option selected="selected" value="sort_price_low">{% if language == "zh-hk" %}價格從低到高{% elseif language == "zh-cn" %}价格从低到高{% elseif language == "en" %}Price Low to High{% endif %}</option> <option selected="selected" value="sort_price_high">{% if language == "zh-hk" %}價格從高到低{% elseif language == "zh-cn" %}价格从高到低{% elseif language == "en" %}Price High to Low{% endif %}</option> </select></div> <div class="displayVol">{% if language == "zh-hk" %}顯示號碼{% elseif language == "zh-cn" %}显示号码{% elseif language == "en" %}Displayed Results{% endif %}<select class="searchNum" onchange="fnChangeDispNumber();">{% for i in 1..4 %} <option selected="selected" value="{{ dispNum * i }}">{{ dispNum * i }}</option> {% endfor %}</select></div> </div> </div> |
「1ページあたりの商品表示件数」は、
【設定】－【基本設定】で変更できます。
検索結果ページに商品一覧を表示させる
アーカイブページと同様に、検索結果ページにもデフォルトで商品一覧が設定されています。
特に編集する必要はありませんがデザインを変更したい場合など、必要に応じて調整してください。