Page 1 of 1
Select Size Then Show Price
Posted: Sun Sep 12, 2010 6:41 pm
by expd408
So I'm building a shopping cart, and my client wants it so after the user selects the size, it gets the price based off the size and then shows it immediately next to the purchase button.
I'm having trouble figuring this out, it's not the easiest thing to search around for.
Thanks!
Re: Select Size Then Show Price
Posted: Sun Sep 12, 2010 7:56 pm
by Jonah Bron
What are your table schemas? What columns are in each table in your database?
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 1:47 am
by expd408
The item is a glass ear plug,
glass_item
glass_id
glass_name
glass_size
glass_color
glass_mods
glass_images
I was thinking that i could store the price in the size column too?
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 10:50 am
by Jonah Bron
You need to add a `price` column to your table.
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 11:35 am
by expd408
Jonah Bron wrote:You need to add a `price` column to your table.
This is fine, I was just not sure what was better, to have another column or to explode the price and size.
but how would i acheive what i mentioned above? could i use ajax or javascript or something to get the price to appear after the size is selected?
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 12:57 pm
by Jonah Bron
Yes, you can. It would be better not to use Ajax though. Just output the prices for each size for each item statically with PHP, and use Javascript to show one and hide the rest appropriately.
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 1:32 pm
by expd408
I don't know javascript, or ajax. But do you think you can show me an example of how I would do this?
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 1:37 pm
by Jonah Bron
Oh, how about a more simple approach?
Code: Select all
<select>
<option>Size 6 - $53.99</option>
<option>Size 7 - $1,990,948,839,822,384,484.99</option>
<option>Size 8 - $42.00</option>
</select>
Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 5:10 pm
by expd408
Jonah Bron wrote:Oh, how about a more simple approach?
Code: Select all
<select>
<option>Size 6 - $53.99</option>
<option>Size 7 - $1,990,948,839,822,384,484.99</option>
<option>Size 8 - $42.00</option>
</select>
cause my client asked for it like this

Re: Select Size Then Show Price
Posted: Mon Sep 13, 2010 8:32 pm
by Jonah Bron
Tell him that method requires Javascript and that it won't work if the user has it disabled. Unless you are making a rich app, you should never never never rely on Javascript.
Re: Select Size Then Show Price
Posted: Tue Sep 14, 2010 2:43 am
by expd408
Jonah Bron wrote:Tell him that method requires Javascript and that it won't work if the user has it disabled. Unless you are making a rich app, you should never never never rely on Javascript.
Alrighty, I'll take your word for it.
I'm still kindof curious of how I would do this...
Re: Select Size Then Show Price
Posted: Tue Sep 14, 2010 9:29 pm
by Jonah Bron
Well, in each row for each item, you'll echo out a bunch if <div>s that contain prices for different sizes, all with the CSS attribute `display` set to "none". That hides them all. Then when you set the onChange event of the dropdown box to loop through all of the <div>s to set them to display:none again, and set only one (the correct one) <div>'s display to "block". Just as an example, you could show the correct div with this code:
Code: Select all
document.getElementById('some_div').style.display = "block";
Where 'some_div' is the name of the element.
Re: Select Size Then Show Price
Posted: Wed Sep 15, 2010 1:38 am
by expd408
Jonah Bron wrote:Well, in each row for each item, you'll echo out a bunch if <div>s that contain prices for different sizes, all with the CSS attribute `display` set to "none". That hides them all. Then when you set the onChange event of the dropdown box to loop through all of the <div>s to set them to display:none again, and set only one (the correct one) <div>'s display to "block". Just as an example, you could show the correct div with this code:
Code: Select all
document.getElementById('some_div').style.display = "block";
Where 'some_div' is the name of the element.
Okay I can see how this would work, doesn't really look pretty either. But none the less, my client still wants it like this.
Thanks a lot for your help! I really appreciate it!