Changeset 21050 for branches/version-2_11-dev/data/Smarty/templates/sphone/products/list.tpl

Timestamp:

2011/07/27 13:49:38 (13 years ago)

Author:

468

Message:

#1413 スマートフォン版テンプレートファイル変更（HTML5対応）

File:

• branches/version-2_11-dev/data/Smarty/templates/sphone/products/list.tpl (modified) (3 diffs)

branches/version-2_11-dev/data/Smarty/templates/sphone/products/list.tpl

@@ -20 +20 @@
  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
  *}-->
+<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/products.js"></script>
 <script type="text/javascript">//<![CDATA[
 // 並び順を変更
@@ -37 +38 @@
 
 <!--▼CONTENTS-->
-<div id="undercolumn" class="product product_list">
-    <form name="form1" id="form1" method="get" action="?">
+<section id="product_list">
+    <form name="form1" id="form1" method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">
         <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
         <input type="hidden" name="mode" value="<!--{$mode|h}-->" />
-        <!--{* ▼検索条件 *}-->
         <input type="hidden" name="category_id" value="<!--{$arrSearchData.category_id|h}-->" />
         <input type="hidden" name="maker_id" value="<!--{$arrSearchData.maker_id|h}-->" />
         <input type="hidden" name="name" value="<!--{$arrSearchData.name|h}-->" />
-        <!--{* ▲検索条件 *}-->
-        <!--{* ▼ページナビ関連 *}-->
         <input type="hidden" name="orderby" value="<!--{$orderby|h}-->" />
         <input type="hidden" name="disp_number" value="<!--{$disp_number|h}-->" />
         <input type="hidden" name="pageno" value="<!--{$tpl_pageno|h}-->" />
-        <!--{* ▲ページナビ関連 *}-->
-        <!--{* ▼注文関連 *}-->
         <input type="hidden" name="product_id" value="" />
         <input type="hidden" name="classcategory_id1" value="" />
@@ -57 +53 @@
         <input type="hidden" name="product_class_id" value="" />
         <input type="hidden" name="quantity" value="" />
-        <!--{* ▲注文関連 *}-->
         <input type="hidden" name="rnd" value="<!--{$tpl_rnd|h}-->" />
     </form>
-
-    <!--★タイトル★-->
+    
     <h2 class="title"><!--{$tpl_subtitle|h}--></h2>
-
-    <!--▼検索条件-->
-    <!--{if $tpl_subtitle == "検索結果"}-->
-        <ul class="pagecondarea">
-            <li><strong>商品カテゴリ：</strong><!--{$arrSearch.category|h}--></li>
-        <!--{if $arrSearch.maker|strlen >= 1}--><li><strong>メーカー：</strong><!--{$arrSearch.maker|h}--></li><!--{/if}-->
-            <li><strong>商品名：</strong><!--{$arrSearch.name|h}--></li>
-        </ul>
+            <p class="intro clear"><span class="attention"><span id="productscount"><!--{$tpl_linemax}--></span>件</span>の商品がございます。</p>
+
+<!--▼ページナビ(本文)-->
+<section class="pagenumberarea clearfix">
+ <ul>
+    <!--{if $orderby != 'price'}-->
+        <li><a href="javascript:fnChangeOrderby('price');" rel="external">価格順</a></li>
+    <!--{else}-->
+        <li class="on_number">価格順</li>
     <!--{/if}-->
-    <!--▲検索条件-->
-
-    <!--▼ページナビ(本文)-->
-    <!--{capture name=page_navi_body}-->
-        <div class="pagenumberarea">
-            <div class="change">
-                <!--{if $orderby != 'price'}-->
-                    <a href="javascript:fnChangeOrderby('price');">価格順</a>
-                <!--{else}-->
-                    <strong>価格順</strong>
-                <!--{/if}-->
-                <!--{if $orderby != "date"}-->
-                        <a href="javascript:fnChangeOrderby('date');">新着順</a>
-                <!--{else}-->
-                    <strong>新着順</strong>
-                <!--{/if}-->
-            </div>
-            <div class="navi"><!--{$tpl_strnavi}--></div>
-        </div>
-    <!--{/capture}-->
-    <!--▲ページナビ(本文)-->
-
-    <!--{foreach from=$arrProducts item=arrProduct name=arrProducts}-->
-
-        <!--{if $smarty.foreach.arrProducts.first}-->
-            <!--▼件数-->
-            <div>
-                <span class="pagenumber"><!--{$tpl_linemax}--></span>件の商品
-
-                <select name="disp_number" onchange="javascript:fnChangeDispNumber(this.value);">
-                    <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}-->
-                        <!--{if $num == $disp_number}-->
-                        <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option>
-                        <!--{else}-->
-                        <option value="<!--{$num}-->" ><!--{$dispnum}--></option>
-                        <!--{/if}-->
-                    <!--{/foreach}-->
-                </select>
-            </div>
-            <!--▲件数-->
-
-            <!--▼ページナビ(上部)-->
-            <form name="page_navi_top" id="page_navi_top" action="?">
-                <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
-                <!--{if $tpl_linemax > 0}--><!--{$smarty.capture.page_navi_body|smarty:nodefaults}--><!--{/if}-->
-            </form>
-            <!--▲ページナビ(上部)-->
-        <!--{/if}-->
-
-        <!--{assign var=id value=$arrProduct.product_id}-->
-        <!--{assign var=arrErr value=$arrProduct.arrErr}-->
-        <!--▼商品-->
-        <div class="listarea" class="clearfix">
-        <a name="product<!--{$id|h}-->" />
-            <div class="listphoto">
-                <!--★画像★-->
-                <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
-            </div>
-
-            <div class="listrightblock">
-                <!--▼商品ステータス-->
-                <!--{if count($productStatus[$id]) > 0}-->
-                    <ul class="status_icon">
-                            <li>
-                        <!--{foreach from=$productStatus[$id] item=status}--> 
-                                <img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="60" height="17" alt="<!--{$arrSTATUS[$status]}-->"/>
-                        <!--{/foreach}-->
-                            </li>
-                    </ul>
-                <!--{/if}-->
-                <!--▲商品ステータス-->
-
-                <!--★商品名★-->
-                <h3>
-                    <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" name="product<!--{$arrProduct.product_id}-->"><!--{$arrProduct.name|h}--></a>
-                </h3>
-
-                <!--★コメント★-->
-                <p>
-                    <span class="pricebox sale_price">
-                        販売価格(税込):</span>
-                        <span class="price">
-                            <span id="price02_default_<!--{$id}-->">
-                                <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
-                                    <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
-                                <!--{else}-->
-                                    <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
-                                <!--{/if}-->
-                            </span><span id="price02_dynamic_<!--{$id}-->"></span>
-                            円</span>
+    <!--{if $orderby != "date"}-->
+        <li><a href="javascript:fnChangeOrderby('date');" rel="external">新着順</a></li>
+    <!--{else}-->
+        <li class="on_number">新着順</li>
+    <!--{/if}-->
+ </ul>
+</section>
+<!--▲ページナビ(本文)-->
+
+<!--{foreach from=$arrProducts item=arrProduct name=arrProducts}-->
+    <!--{assign var=id value=$arrProduct.product_id}-->
+    <!--{assign var=arrErr value=$arrProduct.arrErr}-->
+    <!--▼商品-->
+    <div class="list_area clearfix">
+     <!--★画像★-->
+       <p class="listphoto"><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" width="80" height="80" alt="<!--{$arrProduct.name|h}-->" /></p>
+    
+     <div class="listrightblock">
+      <div class="statusArea">
+      <!--▼商品ステータス-->
+       <!--{if count($productStatus[$id]) > 0}-->
+            <ul class="status_icon">
+                <!--{foreach from=$productStatus[$id] item=status}--> 
+                     <li><!--{$arrSTATUS[$status]}--></li>
+             <!--{/foreach}-->
+            </ul>
+      <!--{/if}-->
+      <!--▲商品ステータス-->
+      </div>
+
+      <!--★商品名★-->
+        <h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" name="product<!--{$arrProduct.product_id}-->" class="productName"><!--{$arrProduct.name|h}--></a></h3>
+        
+      <!--★商品価格★-->
+        <p><span class="pricebox sale_price"><span class="mini">販売価格(税込):</span></span> 
+        <span class="price"> 
+            <span id="price02_default_<!--{$id}-->">
+              <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
+                <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
+              <!--{else}-->
+                <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
+              <!--{/if}-->
+            </span><span id="price02_dynamic_<!--{$id}-->">
+            </span>円
+        </span></p>
+      <!--★商品コメント価格★-->
+         <p class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></p>
+     </div>
+     </div>
+    <!--▲商品-->
+    
+<!--{foreachelse}-->
+    <!--{include file="frontparts/search_zero.tpl"}-->
+<!--{/foreach}-->
+
+<!--{if count($arrProducts) < $tpl_linemax}-->
+<p><a rel="external" href="javascript: void(0);" class="btn_more" id="btn_more_product" onClick="getProducts(<!--{$disp_number|h}-->); return false;">もっとみる(＋<!--{$disp_number|h}-->件)</a></p>
+<!--{/if}-->
+</section>
+<!--▲CONTENTS-->
+
+<script>
+var pageNo = 2;
+var url = "<!--{$smarty.const.P_DETAIL_URLPATH}-->";
+var imagePath = "<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/";
+var statusImagePath = "<!--{$TPL_URLPATH}-->";
+
+function getProducts(limit) {
+    $.mobile.pageLoading();
+    var i = limit;
+    //送信データを準備
+    var postData = {};
+    $('#form1').find(':input').each(function(){  
+        postData[$(this).attr('name')] = $(this).val();  
+    });
+    postData["mode"] = "json";
+    postData["pageno"] = pageNo;
+
+    $.ajax({
+        type: "POST",
+           data: postData,
+           cache: false,
+           dataType: "json",
+           error: function(XMLHttpRequest, textStatus, errorThrown){
+            alert(textStatus);
+            $.mobile.pageLoading(true);
+           },
+           success: function(result){
+           
+            var productStatus = result.productStatus;
+             for (var j = 0; j < i; j++) {
+                 if (result[j] != null) {
+                     var product = result[j];
+                     var productHtml = "";
+                    var maxCnt = $(".list_area").length - 1;
+                    var productEl = $(".list_area").get(maxCnt);
+                    productEl = $(productEl).clone(true).insertAfter(productEl);
+                    maxCnt++;
                     
-                </p>
-
-                <p class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></p>
-
-            </div>
-        </div>
-        <!--▲商品-->
-
-        <!--{if $smarty.foreach.arrProducts.last}-->
-            <!--▼ページナビ(下部)-->
-            <form name="page_navi_bottom" id="page_navi_bottom" action="?">
-                <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
-                <!--{if $tpl_linemax > 0}--><!--{$smarty.capture.page_navi_body|smarty:nodefaults}--><!--{/if}-->
-            </form>
-            <!--▲ページナビ(下部)-->
-        <!--{/if}-->
-
-    <!--{foreachelse}-->
-        <!--{include file="frontparts/search_zero.tpl"}-->
-    <!--{/foreach}-->
-
-</div>
-<!--▲CONTENTS-->
+                     //商品写真をセット
+                     $($(".list_area .listphoto img").get(maxCnt)).attr({
+                                                                 src: imagePath + product.main_list_image, 
+                                                                 alt: product.name
+                                                             });
+
+                     //ステータスをセット
+                     var statusAreaEl = $($(".list_area div.statusArea").get(maxCnt));
+                    //ステータスの削除
+                    statusAreaEl.empty();
+
+                     if (productStatus[product.product_id] != null) {
+                         var statusEl = '<ul class="status_icon">';
+                         var statusCnt = productStatus[product.product_id].length;
+                         for (var k = 0; k < statusCnt; k++) {
+                             var status = productStatus[product.product_id][k];
+                             var statusImgEl = '<li>' + status.status_name + '</li>' + "\n";
+                             statusEl += statusImgEl;
+                         }
+                         statusEl += "</ul>";
+                         statusAreaEl.append(statusEl);
+                     }
+                     
+                     //商品名をセット
+                     $($(".list_area a.productName").get(maxCnt)).text(product.name);
+                     $($(".list_area a.productName").get(maxCnt)).attr("href", url + product.product_id);
+                     
+                     //販売価格をセット
+                     var price = $($(".list_area span.price").get(maxCnt));
+                    //販売価格をクリア
+                     price.empty();
+                     var priceVale = "";
+                    //販売価格が範囲か判定
+                     if (product.price02_min == product.price02_max) {
+                         priceVale = product.price02_min_tax_format + '円';
+                     } else {
+                         priceVale = product.price02_min_tax_format + '～' + product.price02_max_tax_format + '円';
+                     }
+                     price.append(priceVale);
+                     
+                     //コメントをセット
+                     $($(".list_area .listcomment").get(maxCnt)).text(product.main_list_comment);
+
+                 }
+             }
+             pageNo++;
+
+             //すべての商品を表示したか判定
+             if (parseInt($("#productscount").text()) <= $(".list_area").length) {
+                 $("#btn_more_product").hide();
+             }
+             $.mobile.pageLoading(true);
+           }
+});
+}
+</script>