Replacing option radio button with "Buy Now" button

[GavCaz]

I have products in my store with multiple options - instead of the radio buttons on the product info display page (which are currently in place and functioning properly), I'd like each option to have a "Buy Now" button next to it that, when clicked on, adds it to the cart with the respective option selected. Can anyone help me do this? I'm ok at PHP, but not comfortable writing code from scratch in this instance.
Any help/direction is greatly appreciated!

PS> I really appreciate all the open flow of information on this board... it's been a big help on my project.

[GavCaz]

pretty please...

[rdayan]

I am looking for the same feature and have been looking all over the forum for an answer, no luck so far. I am setting up a store for linens and each collection has multiple products that needs to be displayed on the same page.
The idea would be to use the attributes functions but instead of the buttond have a add to cart button with numbers allowing to buy 1 or more of that particular product. However in my secenario it is a little more complicated because each product has different option such as colors. So in a nutshell each product is nested within a collection and you can select multiple products and options but there is only one button add to cart at the bottom of the page.
A sample of this can be seen on Neiman Marcus store: http://www.neimanmarcus.com/store/ca...787cat14300738

Any direction would be greatly appreciated keeping in mind I am a newbie and can only "manipulate" code not create it.
Thanks

[brandtim]

GavCaz,

As much I dislike saying so, this sounds like a job for JavaScript. It would be some serious hacking to add a form submit button after every radio element in the HTML, but it would be relatively easy to do so with JavaScript.

I'd build a JS file that gets included only on product_info pages (there is info in the /docs directory of your ZC install which shows how to do this).

The JS file would fire a function at onload, creating buttons after all of the radio boxes. The buttons wouldn't be directly attached to the form but would be attached to an onclick event handler which would in turn both select the corresponding radio button and submit the form.

You'd just need to make sure that it worked for non-JS browsers.


rdayan,

I'm afraid you totally lost me. Do you have an image mock-up of what you're trying to achieve?


BrandTim

[gjh42]

A layout like the Nieman Marcus one could be achieved with the product listing page.

The general text and image(s) would go in the category description area, and a stripped-down list of products with quantity boxes and a multiple add to cart button. And of course a lot of styling in the stylesheet...

But yours is more complicated than the NM as you have color options to select, which will requre some things going to the product info pages.

A thought: perhaps the listings could be selectively stripped even more, and colored items be separate products which each only take up one line - just enough to fit a button and color name...

[GavCaz]

Thanks so much for your response, Brandtim - I came to that exact conclusion yesterday... and am working it out. I do wish there was a way to avoid Javascript, but them's the breaks.

GavCaz,

As much I dislike saying so, this sounds like a job for JavaScript. It would be some serious hacking to add a form submit button after every radio element in the HTML, but it would be relatively easy to do so with JavaScript.

I'd build a JS file that gets included only on product_info pages (there is info in the /docs directory of your ZC install which shows how to do this).

The JS file would fire a function at onload, creating buttons after all of the radio boxes. The buttons wouldn't be directly attached to the form but would be attached to an onclick event handler which would in turn both select the corresponding radio button and submit the form.

You'd just need to make sure that it worked for non-JS browsers.


rdayan,

I'm afraid you totally lost me. Do you have an image mock-up of what you're trying to achieve?


BrandTim

[GavCaz]

Ok, I figured it out... if anyone's interested this is what I did:
in my override file includes\templates\MY TEMPLATE\templates\tpl_product_info_display.php
I commented out the whole section that creates the default buy button and creates the default hidden fields (for me lines 82-99 or so) and then in the product attributes area of that same page I made that section look like this:

<?php
/*** display the product atributes*/

//added hidden fields to 'capture' attribute javascript

$attrib_hidden = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']);

echo $attrib_hidden;

require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
}
?>

and in my overide file includes\modules\MY TEMPLATE\attributes.php

I changed the area building the radio buttons (for me lines 229 to 232 or so) to look like this

case '0':
$tmp_radio .= '<input type="image" name="id[' . $products_options_names->fields['products_options_id'] . ']" value="' . $products_options_value_id .'" style="vertical-align:middle;" id="attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '" src="includes/templates/template_default/buttons/english/checkout_button.gif" alt="Add to Cart" title=" Add to Cart" onClick="document.cart_quantity.id[' . $products_options_names->fields['products_options_id'] . '].value=' . $products_options_value_id . '" /> <strong>' . $products_options_details . '</strong>&nbsp;&nbsp;&nbsp; ';
break;