Ignore:
Timestamp:
2009/09/02 18:26:38 (15 years ago)
Author:
Seasoft
Message:
  • 商品規格プルダウンに品切れを表示
  • 商品規格プルダウンの選択によって、関連項目を動的に更新

関連URL:  http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=3463&forum=10

  • 商品一覧と商品詳細のテンプレートをコードレベルで出来るだけ揃えた
  • 不要な処理を削除
File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/comu-ver2/data/Smarty/templates/default/list.tpl

    r18260 r18277  
    2121 *}--> 
    2222<script type="text/javascript">//<![CDATA[ 
    23 // セレクトボックスに項目を割り当てる。 
    24 function fnSetSelect(form, val) { 
    25     sele1 = form['classcategory_id1']; 
    26     sele2 = form['classcategory_id2']; 
    27     id = form['product_id'].value; 
    28     lists = eval('lists' + id); 
    29     vals = eval('vals' + id); 
    30  
    31     if(sele1 && sele2) { 
    32         index = sele1.selectedIndex; 
    33  
    34         // セレクトボックスのクリア 
    35         count = sele2.options.length; 
    36         for(i = count; i >= 0; i--) { 
    37             sele2.options[i] = null; 
    38         } 
    39  
    40         // セレクトボックスに値を割り当てる 
    41         len = lists[index].length; 
    42         for(i = 0; i < len; i++) { 
    43             sele2.options[i] = new Option(lists[index][i], vals[index][i]); 
    44             if(val != "" && vals[index][i] == val) { 
    45                 sele2.options[i].selected = true; 
     23// 規格2に選択肢を割り当てる。 
     24function fnSetClassCategories(form, classcat_id2_selected) { 
     25    sele1 = form.classcategory_id1; 
     26    sele2 = form.classcategory_id2; 
     27    product_id = form.product_id.value; 
     28 
     29    if (sele1) { 
     30        if (sele2) { 
     31            // 規格2の選択肢をクリア 
     32            count = sele2.options.length; 
     33            for(i = count; i >= 0; i--) { 
     34                sele2.options[i] = null; 
     35            } 
     36             
     37            // 規格2に選択肢を割り当てる 
     38            classcats = productsClassCategories[product_id][sele1.value]; 
     39            i = 0; 
     40            for (var classcat_id2_key in classcats) { 
     41                sele2.options[i] = new Option(classcats[classcat_id2_key].name, classcat_id2_key); 
     42                if (classcat_id2_key == classcat_id2_selected) { 
     43                    sele2.options[i].selected = true; 
     44                } 
     45                i++; 
    4646            } 
    4747        } 
     48        fnCheckStock(form); 
    4849    } 
    4950} 
    … …  
    7374    fnSetVal("product_id", productForm["product_id"].value); 
    7475    fnSubmit(); 
     76} 
     77function fnCheckStock(form) { 
     78    product_id = form.product_id.value; 
     79    classcat_id1 = form.classcategory_id1.value; 
     80    classcat_id2 = form.classcategory_id2 ? form.classcategory_id2.value : 0; 
     81    classcat2 = productsClassCategories[product_id][classcat_id1][classcat_id2]; 
     82     
     83    // 在庫(品切れ) 
     84    eleDefault = document.getElementById('cartbtn_default_' + product_id); 
     85    eleDynamic = document.getElementById('cartbtn_dynamic_' + product_id); 
     86    if ( 
     87           classcat2 
     88        && classcat2.stock_find === false 
     89    ) { 
     90        eleDefault.style.display = 'none'; 
     91        eleDynamic.innerHTML = '申し訳ございませんが、只今品切れ中です。'; 
     92    } else { 
     93        eleDefault.style.display = ''; 
     94        eleDynamic.innerHTML = ''; 
     95    } 
     96     
     97    // 販売価格 
     98    eleDefault = document.getElementById('price02_default_' + product_id); 
     99    eleDynamic = document.getElementById('price02_dynamic_' + product_id); 
     100    if ( 
     101           classcat2 
     102        && typeof classcat2.price02 != 'undefined' 
     103        && String(classcat2.price02).length >= 1 
     104    ) { 
     105        eleDefault.style.display = 'none'; 
     106        eleDynamic.innerHTML = classcat2.price02; 
     107    } else { 
     108        eleDefault.style.display = ''; 
     109        eleDynamic.innerHTML = ''; 
     110    } 
    75111} 
    76112//]]> 
    … …  
    107143        <ul class="pagecondarea"> 
    108144            <li><strong>商品カテゴリ：</strong><!--{$arrSearch.category|escape}--></li> 
    109             <!--{if $arrSearch.maker|strlen >= 1}--><li><strong>メーカー：</strong><!--{$arrSearch.maker|escape}--></li><!--{/if}--> 
     145        <!--{if $arrSearch.maker|strlen >= 1}--><li><strong>メーカー：</strong><!--{$arrSearch.maker|escape}--></li><!--{/if}--> 
    110146            <li><strong>商品名：</strong><!--{$arrSearch.name|escape}--></li> 
    111147        </ul> 
    … …  
    126162                    <!--{/if}-->&nbsp; 
    127163                    <!--{if $orderby != "date"}--> 
    128                         <a href="javascript:fnChangeOrderby('date');">新着順</a> 
     164                            <a href="javascript:fnChangeOrderby('date');">新着順</a> 
    129165                    <!--{else}--> 
    130166                        <strong>新着順</strong> 
    … …  
    134170                        <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}--> 
    135171                            <!--{if $num == $disp_number}--> 
    136                                 <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option> 
     172                            <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option> 
    137173                            <!--{else}--> 
    138                                 <option value="<!--{$num}-->" ><!--{$dispnum}--></option> 
     174                            <option value="<!--{$num}-->" ><!--{$dispnum}--></option> 
    139175                            <!--{/if}--> 
    140176                        <!--{/foreach}--> 
    … …  
    150186    <!--{foreach from=$arrProducts item=arrProduct}--> 
    151187        <!--{assign var=id value=$arrProduct.product_id}--> 
     188        <!--{assign var=arrErr value=$arrProduct.arrErr}--> 
    152189        <!--▼商品--> 
    153190        <div class="listarea"> 
    154             <a name="product<!--{$id|escape}-->" /> 
     191        <a name="product<!--{$id|escape}-->" /> 
    155192            <div class="listphoto"> 
    156193                <!--★画像★--> 
    157                 <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|escape}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> 
     194            <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|escape}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a> 
    158195            </div> 
    159196             
    160197            <div class="listrightblock"> 
    161                 <!--アイコン--> 
    162                 <!--商品ステータス--> 
     198                <!--▼商品ステータス--> 
    163199                <!--{if count($arrProduct.product_flag) > 0}--> 
    164200                    <ul class="status_icon"> 
    165201                        <!--{section name=flg loop=$arrProduct.product_flag|count_characters}--> 
    166202                            <!--{if $arrProduct.product_flag[flg] == "1"}--> 
    167                                 <!--{assign var=key value="`$smarty.section.flg.iteration`"}--> 
    168                                 <li><img src="<!--{$TPL_DIR}--><!--{$arrSTATUS_IMAGE[$key]}-->" width="65" height="17" alt="<!--{$arrSTATUS[$key]}-->"/></li> 
    169                                 <!--{assign var=sts_cnt value=$sts_cnt+1}--> 
     203                                <li> 
     204                                    <!--{assign var=key value="`$smarty.section.flg.iteration`"}--> 
     205                                    <img src="<!--{$TPL_DIR}--><!--{$arrSTATUS_IMAGE[$key]}-->" width="65" height="17" alt="<!--{$arrSTATUS[$key]}-->"/> 
     206                                </li> 
    170207                            <!--{/if}--> 
    171208                        <!--{/section}--> 
    172209                    </ul> 
    173210                <!--{/if}--> 
    174                 <!--商品ステータス--> 
    175                 <!--アイコン--> 
     211                <!--▲商品ステータス--> 
    176212                 
    177213                <!--★商品名★--> 
    178214                <h3> 
    179                     <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->"><!--{$arrProduct.name|escape}--></a> 
     215                    <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" name="product<!--{$arrProduct.product_id}-->"><!--{$arrProduct.name|escape}--></a> 
    180216                </h3> 
    181217                 
    … …  
    187223                        <!--{$smarty.const.SALE_PRICE_TITLE}--><span class="mini">(税込)</span>： 
    188224                        <span class="price"> 
    189                         <!--{if $arrProduct.price02_min == $arrProduct.price02_max}--> 
    190                             <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> 
    191                         <!--{else}--> 
    192                             <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> 
    193                         <!--{/if}-->円</span> 
     225                            <span id="price02_default_<!--{$id}-->"> 
     226                                <!--{if $arrProduct.price02_min == $arrProduct.price02_max}--> 
     227                                    <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> 
     228                                <!--{else}--> 
     229                                    <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> 
     230                                <!--{/if}--> 
     231                            </span><span id="price02_dynamic_<!--{$id}-->"></span> 
     232                            円</span> 
    194233                    </span> 
    195234                     
    196235                    <!--★詳細ボタン★--> 
    197236                    <span class="btnbox"> 
    198                         <!--{assign var=name value="detail`$id`"}--> 
    199                         <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_detail_on.gif','<!--{$name}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_detail.gif','<!--{$name}-->');"> 
    200                             <img src="<!--{$TPL_DIR}-->img/products/b_detail.gif" width="115" height="25" alt="詳しくはこちら" name="<!--{$name}-->" id="<!--{$name}-->" /></a> 
     237                    <!--{assign var=name value="detail`$id`"}--> 
     238                    <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_detail_on.gif','<!--{$name}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_detail.gif','<!--{$name}-->');"> 
     239                        <img src="<!--{$TPL_DIR}-->img/products/b_detail.gif" width="115" height="25" alt="詳しくはこちら" name="<!--{$name}-->" id="<!--{$name}-->" /></a> 
    201240                    </span> 
    202241                </p> 
    203242 
    204                 <!--{if $arrProduct.stock_max == 0 && $arrProduct.stock_unlimited_max != 1}--> 
    205                     <p class="soldout"><em>申し訳ございませんが、只今品切れ中です。</em></p> 
    206                 <!--{else}--> 
    207                     <!--▼買い物かご--> 
    208                     <form name="product_form<!--{$id|escape}-->" action="?"> 
    209                         <input type="hidden" name="product_id" value="<!--{$id|escape}-->" /> 
    210                         <div class="in_cart"> 
     243                <!--▼買い物かご--> 
     244                <form name="product_form<!--{$id|escape}-->" action="?" onsubmit="return false;"> 
     245                    <input type="hidden" name="product_id" value="<!--{$id|escape}-->" /> 
     246                    <div class="in_cart"> 
     247                        <!--{if $tpl_stock_find[$id]}--> 
    211248                            <dl> 
    212249                                <!--{if $tpl_classcat_find1[$id]}--> 
     250                                    <!--▼規格1--> 
    213251                                    <dt><!--{$tpl_class_name1[$id]|escape}-->：</dt> 
    214252                                    <dd> 
    215                                         <select name="classcategory_id1" style="<!--{$arrProduct.arrErr.classcategory_id1|sfGetErrorColor}-->" onchange="fnSetSelect(this.form);"> 
    216                                         <option value="">選択してください</option> 
    217                                         <!--{html_options options=$arrClassCat1[$id] selected=$arrProduct.classcategory_id1}--> 
     253                                        <select name="classcategory_id1" 
     254                                            style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->" 
     255                                            onchange="fnSetClassCategories(this.form);" 
     256                                        > 
     257                                            <!--{html_options options=$arrClassCat1[$id] selected=$arrProduct.classcategory_id1}--> 
    218258                                        </select> 
    219                                         <!--{if $arrProduct.arrErr.classcategory_id1 != ""}--> 
     259                                        <!--{if $arrErr.classcategory_id1 != ""}--> 
    220260                                            <br /><span class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</span> 
    221261                                        <!--{/if}--> 
    222262                                    </dd> 
     263                                    <!--▲規格1--> 
    223264                                <!--{/if}--> 
    224265                                <!--{if $tpl_classcat_find2[$id]}--> 
     266                                    <!--▼規格2--> 
    225267                                    <dt><!--{$tpl_class_name2[$id]|escape}-->：</dt> 
    226268                                    <dd> 
    227                                         <select name="classcategory_id2" style="<!--{$arrProduct.arrErr.classcategory_id2|sfGetErrorColor}-->"> 
    228                                         <option value="">選択してください</option> 
     269                                        <select name="classcategory_id2" 
     270                                            style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->" 
     271                                            onchange="fnCheckStock(this.form);" 
     272                                        > 
    229273                                        </select> 
    230                                         <!--{if $arrProduct.arrErr.classcategory_id2 != ""}--> 
     274                                        <!--{if $arrErr.classcategory_id2 != ""}--> 
    231275                                            <br /><span class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</span> 
    232276                                        <!--{/if}--> 
    233277                                    </dd> 
     278                                    <!--▲規格2--> 
    234279                                <!--{/if}--> 
    235280 
    236281                                <dt>数量：</dt> 
    237282                                <dd> 
    238                                     <input type="text" name="quantity" size="3" class="box54" value="<!--{$arrProduct.quantity|default:1|escape}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrProduct.arrErr.quantity|sfGetErrorColor}-->" /> 
    239                                     <!--{if $arrProduct.arrErr.quantity != ""}--> 
    240                                         <br /><span class="attention"><!--{$arrProduct.arrErr.quantity}--></span> 
     283                                    <input type="text" name="quantity" class="box54" value="<!--{$arrProduct.quantity|default:1|escape}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" /> 
     284                                    <!--{if $arrErr.quantity != ""}--> 
     285                                        <br /><span class="attention"><!--{$arrErr.quantity}--></span> 
    241286                                    <!--{/if}--> 
    242287                                </dd> 
    243288                            </dl> 
    244289                            <div class="cartbtn"> 
    245                                 <input 
    246                                     type="image" 
    247                                     id="cart<!--{$id}-->" 
    248                                     src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" 
    249                                     alt="カゴに入れる" 
    250                                     onclick="fnInCart(this.form); return false;" 
    251                                     onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif', this);" 
    252                                     onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif', this);" 
    253                                 /> 
     290                                <!--★カゴに入れる★--> 
     291                                <div id="cartbtn_default_<!--{$id}-->"> 
     292                                    <input 
     293                                        type="image" 
     294                                        id="cart<!--{$id}-->" 
     295                                        src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" 
     296                                        alt="カゴに入れる" 
     297                                        onclick="fnInCart(this.form); return false;" 
     298                                        onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif', this);" 
     299                                        onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif', this);" 
     300                                    /> 
     301                                </div> 
     302                                <div class="attention" id="cartbtn_dynamic_<!--{$id}-->"></div> 
    254303                            </div> 
    255                         </div> 
    256                     </form> 
    257                     <!--▲買い物かご--> 
    258                 <!--{/if}--> 
     304                        <!--{else}--> 
     305                            <div class="cartbtn attention">申し訳ございませんが、只今品切れ中です。</div> 
     306                        <!--{/if}--> 
     307                    </div> 
     308                </form> 
     309                <!--▲買い物かご--> 
    259310                 
    260311            </div> 
    … …  
    282333                     表示件数 
    283334                    <select name="disp_number" onchange="javascript:fnChangeDispNumber(this.value);"> 
    284                         <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}--> 
    285                             <!--{if $num == $disp_number}--> 
    286                                 <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option> 
    287                             <!--{else}--> 
    288                                 <option value="<!--{$num}-->" ><!--{$dispnum}--></option> 
    289                             <!--{/if}--> 
    290                         <!--{/foreach}--> 
     335                    <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}--> 
     336                    <!--{if $num == $disp_number}--> 
     337                    <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option> 
     338                    <!--{else}--> 
     339                    <option value="<!--{$num}-->" ><!--{$dispnum}--></option> 
     340                    <!--{/if}--> 
     341                <!--{/foreach}--> 
    291342                    </select> 
    292343                </li> 
Note: See TracChangeset for help on using the changeset viewer.