Select Size Then Show Price
Moderator: General Moderators
Select Size Then Show Price
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!
I'm having trouble figuring this out, it's not the easiest thing to search around for.
Thanks!
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
What are your table schemas? What columns are in each table in your database?
Re: Select Size Then Show Price
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?
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?
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
You need to add a `price` column to your table.
Re: Select Size Then Show Price
This is fine, I was just not sure what was better, to have another column or to explode the price and size.Jonah Bron wrote:You need to add a `price` column to your table.
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?
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
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
I don't know javascript, or ajax. But do you think you can show me an example of how I would do this?
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
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
cause my client asked for it like thisJonah 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>
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
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
Alrighty, I'll take your word for it.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.
I'm still kindof curious of how I would do this...
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: Select Size Then Show Price
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:
Where 'some_div' is the name of the element.
Code: Select all
document.getElementById('some_div').style.display = "block";Re: Select Size Then Show Price
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.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:
Where 'some_div' is the name of the element.Code: Select all
document.getElementById('some_div').style.display = "block";
Thanks a lot for your help! I really appreciate it!