挑戰ec-cube的套餐組合part1

Posted on 由
LINEで送る
[`evernote` not found]

其實沒有這個功能真的蠻不方便的
現在很多不管大店小店都會推出所謂的套餐來促銷
但說歸說….要自己無中生有還真的很難
要新版型,要新增資料庫表格,要用JAVASCRIPT及時變更價格,要…..
面對這個目前為止最困難的任務
也不能說一句辦不到就算了
只好一步一步慢慢來試試看囉
首先參考YAHOO購物的電腦DIY可以自由搭配的程式碼
研究了一下javascript控制表單
做出三種選擇
有select跟radioBTN和兩者的綜合
程式碼筆記一下…..

<form name="form1" action="gdsale01.asp?ofp=gdsale01_home&amp;" method="post">
  <div class="Prod_Price">
    <div style="font-size:28px; color:#FF0000">JustBuy : <span class="StorePrice" id="TOTAL_Price_SGST">10000</span> 元</div>
  </div>
  <div class="DivSpec">
    <ul>
      <li>
        <div class="SpecSet">
          <div class="SpecDetail">
            <div class="Head">
              <div id="PARTS_NAME1">SET 1 Group</div>
            </div>
            <font id="PRICE_1"></font> </div>
          <div class="SelectFunc">
            <select name="gdattid" id="_PRICE1"  onChange="ChangeAtt('selectonly','1',this)">
              <option value="0" selected="selected">NONE</option>
              <option value="11">s1_sub1　$199</option>
              <option value="12">s1_sub2　$1699</option>
              <option value="13">s1_sub3　$3199</option>
            </select>
          </div>
        </div>
      </li>
      <li>
        <div class="SpecSet">
          <div class="SpecDetail">
            <div class="Head">
              <div id="PARTS_NAME2">SET 2 Group</div>
            </div>
            <font id="PRICE_2"></font> </div>
          <div class="SelectFunc">
            <input type="radio" name="_PRICE2" value="0" onChange="ChangeAtt('radioonly','2',this)" />
            NONE
            <input type="radio" name="_PRICE2" value="21" onChange="ChangeAtt('radioonly','2',this)" />
            s4_sub1　$1599
            <input type="radio" name="_PRICE2" value="22" onChange="ChangeAtt('radioonly','2',this)" />
            s4_sub2　$1799
            <input type="radio" name="_PRICE2" value="23" onChange="ChangeAtt('radioonly','2',this)" />
            s4_sub3　$1999
            <input type="radio" name="_PRICE2" value="24" onChange="ChangeAtt('radioonly','2',this)" />
            s4_sub4　$2199 </div>
        </div>
      </li>
      <li>
        <div class="SpecSet">
          <div class="SpecDetail">
            <div class="Head">
              <div id="PARTS_NAME3">SET 3 Group</div>
            </div>
            <font id="PRICE_3"></font></div>
          <div class="SelectFunc" style="float:left; width:200px">
            <input type="radio" name="_PRICE3" value="s3_1" onchange="csel(3,2,s3_1)"/>
            <select name="gdattid" id="s3_1"  onChange="ChangeAtt('selectonly','3',this)">
              <option value="0" selected="selected">NONE</option>
              <option value="31">s3_sub1　$1899</option>
              <option value="32">s3_sub2　$7299</option>
            </select>
          </div>
          <div class="SelectFunc" style="float:left; width:200px">
            <input type="radio" name="_PRICE3" value="s3_2" onchange="csel(3,2,s3_2)"/>
            <select name="gdattid" id="s3_2"  onChange="ChangeAtt('selectonly','3',this)">
              <option  value="0" selected="selected" >NONE</option>
              <option  value="41">s4_sub1　$299</option>
              <option  value="42">s4_sub2　$399</option>
            </select>
          </div>
        </div>
      </li>
    </ul>
  </div>
</form>
<script language="JavaScript">
<!--
arrATT = new Array("0","11","12","13","0","21","22","23","24","0","31","32","0","41","42");
 
arrATTPrice = new Array("0","199","1699","3199","0","1599","1799","1999","2199","0","1899","7299","0","299","399");
 
var PRICESGST = 10000;
 
function ChangeAtt(k,i,s){
	var TotalPrice = 0;
	var TotalPriceSGST = 0;
 
var index;
switch (k){
	case 'selectonly':
		for (j=0;j<arrATT.length;j++) if (arrATT[j] == s[s.selectedIndex].value) index = j;
		break;
	case 'radioonly':
		for (j=0;j<arrATT.length;j++) if (arrATT[j] == s.value) index = j;
		break;
}
 
eval("document.getElementById(\"PRICE_" + i + "\").innerTEXT = '"+ arrATTPrice[index] + "'");
 
for(var i=1;i<4;i++){
	eval("var ATTPRICE = document.getElementById(\"PRICE_"+i+"\").innerTEXT");
	if (ATTPRICE==null) ATTPRICE=0;
	TotalPrice = TotalPrice + eval(ATTPRICE);
 
}
TotalPriceSGST = PRICESGST + TotalPrice;
 
eval("document.getElementById(\"TOTAL_Price_SGST\").innerHTML = '" + TotalPriceSGST + "'");
 
}
 
function csel(i,j,s){//3,2,this
 
for(var k=1;k<=j;k++){
eval("document.getElementById(\"s\"+i+\"_\"+k).disabled = '" + true + "'");
}
s.disabled=false;
}
//-->
</script>

現在是可以透過select跟radioBTN的控制來動態改變顯示的價錢
再來是先拿現有的LIST頁面來實驗一下新版型吧
下禮拜在試試囉~~