How to change button URL with drop down menu

Hello there,

I am needing help adding custom code to my wordpress template.

I have my store that sells t-shirts. If you look at my product page: Denver Skyline Colorado Flag T-Shirt | ActiveState Designs you’ll see that this is setup to be an affiliate product that routes the user to my printing site to confirm and complete the order.

What is tough about that solution is I have the same design on numerous products: T-Shirt, Long-sleeve, etc. So when someone searches for say Snowboarding, there are TONS of duplicate product designs that come up. So when someone searches, it is very hard to navigate and find the product they are wanting.

How can I create a dropdown under Product Options to the right on the page that contains: Standard T-Shirt, American Apparel, Long-Sleeve, Women’s, Kid’s, Kid’s Long-Sleeve, then when someone picks one of those the buy now link jumps to the appropriate page at my printers site. Ideally if these options can be added to the theme options, by adding custom fields to the posts it would save me hours of effort and have my visitors not get confused and lost when looking for products.

I hope this makes sense? Please let me know if I can help explain any further.

Thanks,
Lorne Bourdo

Are you asking how to create a drop down in html, how to add sub-categories to your database, or how to query the data from your db?

Hello,

Well I did a little more research and found this: Creating dropdown lists on webpages

The second option is exactly what I want. Seems easier than I thought, I thought I’d for sure have to code it with PHP.

I will try to implement this and if it works let you know or I’ll ask for help if there’s issues.

Thanks,
Lorne

Ok, so I just started getting back into this, and I just realized why it will be so complicated. Way more complicated then your standard html dropdown menu. I’ll try to explain.

My site is a wordpress site and I am selling products, I will eventually have hundreds of products for sale. However, I want to have one post for each of my t-shirt designs. Then inside that post I want an option to have the vistor select apparel style in a dropdown menu (womens, kids, mens, AA, etc.). Once that dropdown is selected it changes the URL in the buy now button to the appropriate product page on my printers site. The buy now button is part of my ecommerce template. When affiliate shopping mode is selected then all I do is add a custom field for “buy_now” and put in the URL to the product outside of my site.

So…the option to add different links that is dependent on the dropdown menu will need to be a custom fields PER post not site wide. So how can I edit my “single-body.php” file to call in certain custom fields and change the buy now link to the appropriate field corresponding to the dropdown selection?

Did I just muddle and confuse this even more?

Please ask your clarifying questions so I can help explain further.

Thanks,
Lorne

Sorry to keep posting. But this is the snippet of code I have for the menu in my template “single_body.php” file.

	// affiliate prod?
	elseif(is_it_affiliate()) { ?>

		<span class="affili_prod"><?php _e('Purchase Options','wpShop');?></span>

            <form name="jump">
                <p align="center">
                    <select name="menu">
                    <option selected>Choose Style:</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--T-Shirt/_p_6051496">Standard</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--American-Apparel-T-Shirt/_p_6051494">American Apparel</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--Long-Sleeve-T-Shirt/_p_6051495">Standard Long-Sleeve</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--Womens-T-Shirt/_p_6051497">Women's T-Shirt</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--Kids-T-Shirt/_p_6051499">Kid's T-Shirt</option>
                    <option value="http://www.printfection.com/activestatedesigns/Basic-Colorado-Flag--Kids-Long-Sleeve-T-Shirt/_p_6051498">Kid's Long-Sleeve</option>
                    </select>
                    <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
                </p>
            </form>

Now if I upload that, two things happen. It works, however only for this product: Basic Colorado Flag T-Shirt | ActiveState Designs But it also shows on any other product, because it is site wide, where I need those links to be called in via a custom field.

If you look at this code, this is the code for the current Buy Now button:

				<?php } ?>
				
				<input type="hidden" name="add" value="1" />
				
				<div class="shopform_btn buy_now">
					<a href="<?php get_custom_field('buy_now', TRUE); ?>" <?php if($OPTION['wps_affili_newTab']) { ?> title="<?php _e('Opens is new tab','wpShop'); ?>" target="_blank"<?php } ?>><?php _e('Buy Now','wpShop'); ?></a>
				</div>

I do see where it calles in “get_custom_field(‘buy_now’, TRUE);” How do I add that command into my dropdown list?

Then how do I edit this code to call in my URLs from the dropdown into the Buy Now code?

<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Sorry for the mass of confusion and coding, but if I can get this working it’ll make my life sooooo much easier when adding hundreds of products and also make it a nicer experience for my visitors. (if you search ‘Denver’ in the search bar on my site you’ll get 6 of the same style shirt in 6 different posts. That’s what I’m trying to avoid, lots of visitors are getting confused).

Thanks so much for all your patience, any help would be tremendously appreciated!

Lorne

The wonders of WordPress until a feature needs to added that doesn’t exists as an open source extension. For what your trying to accomplish sounds like you would be better of with a solution that is eCommerce specific. As your inventory grows things are only going to get slower and more convoluted.

Oddz,

Thanks for your reply. The issue is not with wordpress itself, but with the ecommerce solution I am already using. The template has a full blown ecommerce built into it. However I chose to go with the affiliate mode as I start up my company because I do not want to have the burden of dealing with starting a company and making sure I am charging all the appropriate taxes for each individual sale. Also that I don’t print the shirts myself, and since the printer has a POD fullfillment service I opted to use their hosted store, to reduce the amount of transactions when someone orders through me then I order through the printer. That makes me responsible for returns etc, when my printer offers those services to avoid delay transactions etc.

But that’s besides the point, lots of things pointed me to the way I’m doing my ecommerce store so I am just trying to make the template work with it for now until I get more time. As of now just getting this site up and running with all my products is a full time job, while I have another full time job during the day, haha.

So all I’m asking is, is it possible to set this up and how might I go about doing it? Doesn’t seem like it’d be too hard to call in custom fields with each post right? Buy_now1, Buy_now2, Buy_now3, etc. Then have the dropdown list call in each Buy_now# link? Right?

Thanks for the help, sorry this is so confusing to explain.

Lorne

Is there anyone that can help shed some light on this? I really am trying to get this to work ASAP.

Thanks,
Lorne

Since this post has become incredibly confusing, I’ve started a new one after messing with the code and getting VERY close to working.

Please see it here: http://www.sitepoint.com/forums/php-34/getting-form-work-php-767351.html

And reply there.

Thanks,
Lorne

Hi lorne17,
I think the below solution will help you…try it.

What we do is add an attribute that instructs the page to call our handler for when the list selection is changed.
Collapse | Copy Code

<select name=select1 onchange=‘OnChange(this.form.select1);’>

Our handler will look up the value that has just been selected, and navigate to an appropriate URL. An example of this is shown below:
Collapse | Copy Code

<SCRIPT LANGUAGE=“javascript”>
<!–
function OnChange(dropdown)
{
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL = <Some value based on SelValue>
top.location.href = baseURL;

return true;

}
//–>
</SCRIPT>

What if the user isn’t using JavaScript?

We use the <noscript> tag to help us. We provide a Go button for the list, but only show it if JavaScript is not present.