Web制作メモ -トップへ-

[SOY Shop] 詳細ページでページャーを使用した時の備忘録

Web全般2015.02.21 23:35

商品詳細ページで「次の商品」や「前の商品」といったページャーを使用した時の備忘録です。

ページャー機能はSOY Shop本体に付いており、それを使用します。

ページャーの仕様

「次の商品」や「前の商品」が表示される範囲は、商品カテゴリ毎です。

カテゴリをまたいで「次の商品」や「前の商品」は表示されません。

並び順は商品IDの番号順になります。

※商品IDは管理画面の商品詳細の編集画面のURL欄で確認できます。

最小限のコード

ページャーはcommon.pager_navigationというモジュールです。

aタグにcms:id="prev_link"またはcms:id="next_link"を付ければ、「次の商品」や「前の商品」へのURLが出力されます。

cms:id="prev_item_name"またはcms:id="next_item_name"で、「次の商品」や「前の商品」の商品名を出力できます。

最小限のコード

<!-- shop:module="common.pager_navigation" -->
<a href="#" cms:id="prev_link"><!-- cms:id="prev_item_name" /--></a>
<a href="#" cms:id="next_link"><!-- cms:id="next_item_name" /--></a>
<!-- /shop:module="common.pager_navigation" -->

SOY Shop内の場所

ページャーがSOY Shopの中のどこにあるかというと、以下の場所にあります。

[SOY Shopのインストールディレクトリ]
  - soyshop
    - webapp
      - src
        - module
          - site
            - common
              - pager_navigation.php

このpager_navigation.phpを見れば、ページャーにどういった機能があるか確認できます。

ページャーのカスタマイズ

最小限のコードでページャーを使用した場合、「次の商品」や「前の商品」が無い場合、visibility:hidden;付きの空のaタグが出力されます。

空のaタグ

<a style="visibility:hidden;" href="-"></a>

visibilityはボックスを残したまま非表示にするプロパティで、display:none;はボックス自体無くして非表示にするプロパティです。

今回作っているWebサイトでは、ボックス自体も無くしたかったので、pager_navigation.phpをカスタマイズすることにしました。

設定されている場所は170行目付近で、以下のように設定されています。

visibility:hidden;の設定箇所

//詳細ページの場合
if($pageObject->getType() == SOYShop_Page::TYPE_DETAIL){
    $nextItem = $page->getNextItem();
    $prevItem = $page->getPrevItem();

    $obj->addLabel("next_item_name", array(
        "text" => (!is_null($nextItem)) ? $nextItem->getName() : null,
        "soy2prefix" => SOYSHOP_SITE_PREFIX,
        "style" => ($hasNext) ? "" : "visibility:hidden;"
    ));

    $obj->addLabel("prev_item_name", array(
        "text" => (!is_null($prevItem)) ? $prevItem->getName() : null,
        "soy2prefix" => SOYSHOP_SITE_PREFIX,
        "style" => ($hasPrev) ? "" : "visibility:hidden;"
    ));
}

9行目と15行目のvisibility:hidden;をdisplay:none;に書き換えれば完了です。

ただし、ここを書き換えてしまうと、SOY Shopのバージョンアップ時に毎回修正しなければなりません。

pager_navigation.phpを見ていたら、とても便利な機能を発見したので、次の章でご紹介します。

その機能を使えば、このようなカスタマイズは不要です。

ページャー完成

pager_navigation.phpを見てみると、便利な機能が色々あります。

中でも、has_nexthas_prevはとても使いやすい機能です。

has_nextとhas_prevは「次の商品」や「前の商品」がある時のみ表示する機能です。つまり、無い時には何も表示しない(空のaタグすら出力しない)とすることができます。

no_nextやno_prevという機能もありました。こちらは、has_nextとhas_prevの逆で、商品が無い時のみ表示する機能と思われます。

今回はhas_prevとhas_nextを使い、これでページャー完成です。

完成版ページャー

<!-- shop:module="common.pager_navigation" -->
<div id="item_pager">
    <!-- cms:id="has_prev" -->
    <a href="#" class="prev" cms:id="prev_link"><!-- cms:id="prev_item_name" /--></a>
    <!-- /cms:id="has_prev" -->
    <!-- cms:id="has_next" -->
    <a href="#" class="next" cms:id="next_link"><!-- cms:id="next_item_name" /--></a>
    <!-- /cms:id="has_next" -->
</div>
<!-- /shop:module="common.pager_navigation" -->