Different PRICE based on size of product (dropdown field)

Completed modifications to the NOP Shopping Cart. Additions, modifications, and more.

Moderators: Koibito, Stefko, Randy, Rosey

Different PRICE based on size of product (dropdown field)

Postby sertac73 » Fri Dec 04, 2009 9:42 pm

Hi,

I do have several sizes for every of my products.
Customer will have to choose a size S,L, XL, XXL on the product page.

I wish to change the PRICE of the product based on the selected size from the drop-down field.
Could not figure it out yet. Any help appreciated. :oops:
sertac73
WebMaster
 
Posts: 7
Joined: Thu Jul 09, 2009 10:54 am

Re: Different PRICE based on size of product (dropdown field)

Postby Koibito » Sat Dec 05, 2009 2:20 am

The Product Selector Mod does exactly what you want.

viewtopic.php?f=5&t=2527
John
Koibito
Site Admin / Guru
 
Posts: 918
Joined: Sun May 28, 2006 1:59 am
Location: New Jersey, USA

Re: Different PRICE based on size of product (dropdown field)

Postby sertac73 » Sat Dec 05, 2009 2:42 pm

Ok I have seen that Mod but my code was simply like that:

----------------------------------------------------

<script language="javascript">
function pricecheck()
{
if (document.forms[0].ADDITIONALINFO.selectedIndex.value = 25 x 25){
document.order.PRICE.value = 12.90;
}
else if (document.forms[0].ADDITIONALINFO.selectedIndex.value = 35 x 35){
document.order.PRICE.value = 14.90;
}
else {
document.order.PRICE.value = 15.90;
}
}
</script>


<table border="0" cellpadding="2" width="584" background="GRAY.JPG" style="border-collapse: collapse" height="112">
<tr>
<td align="right" valign="top" width="580" height="30" colspan="2">
<p align="left"><span lang="tr">&nbsp;&nbsp;
</span>
<font face="Arial">
<b>Your </b></font></td>
</tr>
<tr>
<td align="right" valign="middle" width="379" height="181" background="gray.gif">
<img src="Webimages/katalogs/y/<%=imgID%>.jpg" name="targetimage" border=0 width="350" height="350" align="right"></td>
<td align="right" valign="top" width="197" height="181" background="gray.gif">
<p align="center"><br>
<img border="0" src="price2390.jpg"></td>
</tr>
<tr>
<td align="right" valign="bottom" width="580" height="1" background="gray.gif" colspan="2">
<FORM NAME=order ACTION="cart.html" onclick="pricecheck()" onSubmit="AddToCart(this);">
<p align="left"><br>
<br>
<span lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;<b><font size="2" face="Arial"> Amount:
</font><font face="Arial">
<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1" ></font><font size="2" face="Arial">&nbsp;&nbsp;
Size:&nbsp; </font><font face="Arial">
<select name=ADDITIONALINFO>
<option value="25 x 25"> 25 x 25
<option value="35 x 35"> 35 x 35
<option value="45 x 45">45 x 45</option>
</select></font><font size="2" face="Arial">&nbsp; </font></b>
&nbsp;&nbsp;
<input type="image" src="webimages/icons/crtadd.gif"
border=0 align="absbottom" name="listadd" width="89" height="21">&nbsp;&nbsp;
<a href="cart.html">
<img border="0" src="webimages/icons/crtsee.gif" align="absbottom" width="89" height="21"></a><a href="liste.html" style="text-decoration: none"> </a>
<input type=hidden name=PRICE value="">
<input type=hidden name=NAME value="Fx Katalog">
<input type=hidden name=ID_NUM value="<%=ucase(imgID)%>">
<input type=hidden name=SHIPPING value="0.00">
<input type=hidden name=IMAGESRC value="Webimages/katalogs/y/<%=imgID%>.jpg" ID="Hidden5">
<input type=hidden name=FILENAME value="<%=imgID%>.jpg" ID="Hidden6">
<input type=hidden name=EXT value="jpg" ID="Hidden1">
<input type=hidden name=CTYPE value="image/pjpeg" ID="Hidden2">
</p>
</FORM>
<!--Shopping Cart End-->

----------------------

The result gives me 0 with the product prices and a total price of "NaN.aN" within the shopping cart.
Any ideas about this behaviour?
sertac73
WebMaster
 
Posts: 7
Joined: Thu Jul 09, 2009 10:54 am

Re: Different PRICE based on size of product (dropdown field)

Postby Stefko » Sun Dec 06, 2009 4:56 am

First thing is remove the onclick="pricecheck()" from the form and place it on the submit button.
Code: Select all
<input type="image" src="webimages/icons/crtadd.gif" onclick="pricecheck()"
border=0 align="absbottom" name="listadd" width="89" height="21">



Next change the js to this:
Code: Select all
<script language="javascript">
function pricecheck()
{
if (document.order.ADDITIONALINFO.selectedIndex.value = 0){
document.order.PRICE.value = 12.90;
}
else if (document.order.ADDITIONALINFO.selectedIndex.value = 1){
document.order.PRICE.value = 14.90;
}
else {
document.order.PRICE.value = 15.90;
}
}
</script>



And also close your options tag:
<select name=ADDITIONALINFO>
<option value="25 x 25"> 25 x 25</option>
<option value="35 x 35"> 35 x 35</option>
<option value="45 x 45">45 x 45</option> </select>
KFL Technologies
Web-Enabled Solutions
e-Commerence Solutions
Stefko
Contributor / Guru
 
Posts: 833
Joined: Wed Sep 18, 2002 1:11 am
Location: Wichita, KS

Re: Different PRICE based on size of product (dropdown field)

Postby sertac73 » Sun Dec 06, 2009 6:50 am

Ok it works but partially. (Takes only the PRICE.value = 14.90 into consideration) No matter what selection has been chosen from the dropdown field, every price is taken as 14.90.
-----------------------------------

<script language="javascript">
function pricecheck()
{
if (document.order.ADDITIONALINFO.selectedIndex.value = 0){
document.order.PRICE.value = 12.90;
}
else if (document.order.ADDITIONALINFO.selectedIndex.value = 1){
document.order.PRICE.value = 14.90;
}
else {
document.order.PRICE.value = 15.90;
}
}
</script>


<table border="0" cellpadding="2" width="584" background="BGS/GRAY.JPG" style="border-collapse: collapse" height="112">
<tr>
<td align="right" valign="top" width="580" height="30" colspan="2">
<p align="left"><span lang="tr">&nbsp;&nbsp;
</span>
<font face="Arial">
<b>Your Product</b></font></td>
</tr>
<tr>
<td align="right" valign="middle" width="379" height="181" background="gray.gif">
<img src="Webimages/katalogs/y/<%=imgID%>.jpg" name="targetimage" border=0 width="350" height="350" align="right"></td>
<td align="right" valign="top" width="197" height="181" background="gray.gif">
<p align="center"><br>
<img border="0" src="fyt2390.jpg"></td>
</tr>
<tr>
<td align="right" valign="bottom" width="580" height="1" background="gray.gif" colspan="2">
<FORM NAME=order ACTION="cart.html" onSubmit="AddToCart(this);">
<p align="left"><br>
<br>
<span lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;<b><font size="2" face="Arial"> Adet:
</font><font face="Arial">
<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1" ></font><font size="2" face="Arial">&nbsp;&nbsp;
Ebat:&nbsp; </font><font face="Arial">
<select name=ADDITIONALINFO>
<option value="25 x 25"> 25 x 25</option>
<option value="35 x 35"> 35 x 35</option>
<option value="45 x 45"> 45 x 45</option></select>
</font><font size="2" face="Arial">&nbsp; </font></b>
&nbsp;&nbsp;
<input type="image" src="webimages/icons/crtadd.gif" onclick="pricecheck()"
border=0 align="absbottom" name="listadd" width="89" height="21">&nbsp;&nbsp;
<a href="cart.html">
<img border="0" src="webimages/icons/crtsee.gif" align="absbottom" width="89" height="21"></a><a href="cart.html" style="text-decoration: none"> </a>
<input type=hidden name=PRICE value="">
<input type=hidden name=NAME value="Fx Katalog">
<input type=hidden name=ID_NUM value="<%=ucase(imgID)%>">
<input type=hidden name=SHIPPING value="0.00">
<input type=hidden name=IMAGESRC value="Webimages/katalogs/y/<%=imgID%>.jpg" ID="Hidden5">
<input type=hidden name=FILENAME value="<%=imgID%>.jpg" ID="Hidden6">
<input type=hidden name=EXT value="jpg" ID="Hidden1">
<input type=hidden name=CTYPE value="image/pjpeg" ID="Hidden2">


</p>
</FORM>
<!--Shopping Cart End-->

------------------------------------------------

Thank you for the next comments
sertac73
WebMaster
 
Posts: 7
Joined: Thu Jul 09, 2009 10:54 am

Re: Different PRICE based on size of product (dropdown field)

Postby Stefko » Sun Dec 06, 2009 7:58 pm

PM me your URL for troubleshooting, thanks
KFL Technologies
Web-Enabled Solutions
e-Commerence Solutions
Stefko
Contributor / Guru
 
Posts: 833
Joined: Wed Sep 18, 2002 1:11 am
Location: Wichita, KS

Re: Different PRICE based on size of product (dropdown field)

Postby sertac73 » Tue Dec 08, 2009 7:55 pm

Unfortunately no url since the site is not live yet.

But let me paste the original code here: (excluding the part until </head>)
The fact is that the price of the product is being fixed after the first selection has been made.
After that no matter what you select from the dropdown field, the price stays the same for the next added products.

-----------------------------------------------------------

Code: Select all
<script language="javascript">
function pricecheck()
{
if (document.order.ADDITIONALINFO.selectedIndex.value = 0){
document.order.PRICE.value = 12.90;
}
else if (document.order.ADDITIONALINFO.selectedIndex.value = 1){
document.order.PRICE.value = 14.90;
}
else if (document.order.ADDITIONALINFO.selectedIndex.value = 2){
document.order.PRICE.value = 15.90;
}
else  {
document.order.PRICE.value = 17.90;
}
}
</script>


<body background="webimages/BGS/Gray.jpg">

<table border="0" cellpadding="2" width="584" background="BGS/GRAY_BG.JPG" style="border-collapse: collapse" height="112">
  <tr>
    <td align="right" valign="top" width="580" height="30" colspan="2">
    <p align="left"><span lang="tr">&nbsp;&nbsp;
    </span>
<font face="Arial">
<b>Your Great Choice:</b></font></td>
  </tr>
  <tr>
    <td align="right" valign="middle" width="379" height="181" background="gray.gif">
    <p align="center">
    <span lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </span>
    <img src="Webimages/katalogs/y/<%=imgID%>.jpg" name="targetimage" border=0 width="350" height="350" align="right"></td>
    <td align="right" valign="top" width="197" height="181" background="gray.gif">
    <p align="center"><br>
    <img border="0" src="fyt2390.jpg"></td>
  </tr>
  <tr>
    <td align="right" valign="bottom" width="580" height="1" background="gray.gif" colspan="2">
    <FORM NAME=order ACTION="liste.html" onSubmit="AddToCart(this);">
      <p align="left"><br>
      <br>
      <span lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;<b><font size="2" face="Arial"> Adet:
      </font><font face="Arial">
      <input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1" ></font><font size="2" face="Arial">&nbsp;&nbsp;
      Ebat:&nbsp; </font><font face="Arial">
      <select name=ADDITIONALINFO>
        <option value="25 x 25">25 x 25</option>
        <option value="35 x 35">35 x 35</option>
        <option value="45 x 45">45 x 45</option>
        <option value="55 x 55">55 x 55</option>
        </select></font><font size="2" face="Arial">&nbsp; </font></b>
      &nbsp;&nbsp;   
      <input type="image" src="webimages/icons/listekle.gif" onclick="pricecheck()"
      border=0 align="absbottom" name="listeyeekle" width="89" height="21">&nbsp;&nbsp;
      <a href="LISTE.HTML">
      <img border="0" src="webimages/icons/listeduzen.gif" align="absbottom" width="89" height="21"></a><a href="liste.html" style="text-decoration: none"> </a>
     <input type=hidden name=PRICE value="">
      <input type=hidden name=NAME value="Fx Katalog">
      <input type=hidden name=ID_NUM value="<%=ucase(imgID)%>">
      <input type=hidden name=SHIPPING value="0.00">
      <input type=hidden name=IMAGESRC value="Webimages/katalogs/y/<%=imgID%>.jpg" ID="Hidden5">
      <input type=hidden name=FILENAME value="<%=imgID%>.jpg" ID="Hidden6">
     <input type=hidden name=EXT value="jpg" ID="Hidden1">
     <input type=hidden name=CTYPE value="image/pjpeg" ID="Hidden2">
    
    
      </p>
      </FORM>
      <!--Shopping Cart End-->
      </td>
  </tr>
  </table>

</body>

</html>
sertac73
WebMaster
 
Posts: 7
Joined: Thu Jul 09, 2009 10:54 am

Re: Different PRICE based on size of product (dropdown field)

Postby Stefko » Wed Dec 09, 2009 1:09 am

Tested, works

Code: Select all
<script language="javascript">
function pricecheck() {
var v = document.order.ADDITIONALINFO[order.ADDITIONALINFO.selectedIndex].value;
var p = document.order.PRICE;
switch(v) {
case "25 x 25":  p.value = 12.90;
  break;
case "35 x 35":  p.value = 14.90;
  break;
case "45 x 45":  p.value = 15.90;
  break;
case "55 x 55":  p.value = 17.90;
  break;
default:  p.value = 12.90;
}
}
</script>


<body background="webimages/BGS/Gray.jpg">

<table border="0" cellpadding="2" width="584" background="BGS/GRAY_BG.JPG" style="border-collapse: collapse"

height="112">
<tr>
<td align="right" valign="top" width="580" height="30" colspan="2">
<p align="left"><span lang="tr">&nbsp;&nbsp;
</span>
<font face="Arial">
<b>Your Great Choice:</b></font></td>
</tr>
<tr>
<td align="right" valign="middle" width="379" height="181" background="gray.gif">
<p align="center">
<span

lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n

bsp;
</span>
<img src="Webimages/katalogs/y/<%=imgID%>.jpg" name="targetimage" border=0 width="350" height="350"

align="right"></td>
<td align="right" valign="top" width="197" height="181" background="gray.gif">
<p align="center"><br>
<img border="0" src="fyt2390.jpg"></td>
</tr>
<tr>
<td align="right" valign="bottom" width="580" height="1" background="gray.gif" colspan="2">
<FORM NAME=order ACTION="managecart.html" onSubmit="AddToCart(this);">
<p align="left"><br>
<br>
<span lang="tr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp;<b><font size="2" face="Arial"> Adet:
</font><font face="Arial">
<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1"

></font><font size="2" face="Arial">&nbsp;&nbsp;
Ebat:&nbsp; </font><font face="Arial">
<select name=ADDITIONALINFO>
<option value="25 x 25">25 x 25</option>
<option value="35 x 35">35 x 35</option>
<option value="45 x 45">45 x 45</option>
<option value="55 x 55">55 x 55</option>
</select></font><font size="2" face="Arial">&nbsp; </font></b>
&nbsp;&nbsp;
<input type="image" src="webimages/icons/listekle.gif" onclick="pricecheck()"
border=0 align="absbottom" name="listeyeekle" width="89" height="21">&nbsp;&nbsp;
<a href="LISTE.HTML">
<img border="0" src="webimages/icons/listeduzen.gif" align="absbottom" width="89" height="21"></a><a

href="liste.html" style="text-decoration: none"> </a>
<input type=hidden name=PRICE>
<input type=hidden name=NAME value="Fx Katalog">
<input type=hidden name=ID_NUM value="<%=ucase(imgID)%>">
<input type=hidden name=SHIPPING value="0.00">
<input type=hidden name=IMAGESRC value="Webimages/katalogs/y/<%=imgID%>.jpg" ID="Hidden5">
<input type=hidden name=FILENAME value="<%=imgID%>.jpg" ID="Hidden6">
<input type=hidden name=EXT value="jpg" ID="Hidden1">
<input type=hidden name=CTYPE value="image/pjpeg" ID="Hidden2">


</p>
</FORM>
<!--Shopping Cart End-->
</td>
</tr>
</table>

</body>

</html>
KFL Technologies
Web-Enabled Solutions
e-Commerence Solutions
Stefko
Contributor / Guru
 
Posts: 833
Joined: Wed Sep 18, 2002 1:11 am
Location: Wichita, KS

Re: Different PRICE based on size of product (dropdown field)

Postby sertac73 » Thu Dec 10, 2009 7:24 am

Works great!
Thank you very much Stefko.
sertac73
WebMaster
 
Posts: 7
Joined: Thu Jul 09, 2009 10:54 am


Return to Modifications

Who is online

Users browsing this forum: No registered users and 0 guests