dropdown to radio buttons

Hi All,

After searching and trying to get it to work... i just cannot get either.

I am using the column grid layout module by Drbyte and would like to change...

echo '<div id="viewControl">' . [B]zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"')[/B] . '</div>'; 

to radio buttons rather so that I can style them to be icons (it looks much nicer).

I have tried using: 'zen_draw_radio_field', but not sure if I am placing the right values/code in the right place or if I need to change some settings in the database for radios to work correctly.

If anyone can help, I would be most greatful.

thanks,
jay

4jDesigns:

Hi All,

After searching and trying to get it to work... i just cannot get either.

I am using the column grid layout module by Drbyte and would like to change...

echo '<div id="viewControl">' . [B]zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"')[/B] . '</div>';

> 
> to radio buttons rather so that I can style them to be icons (it looks much nicer).
> 
> I have tried using: '**zen_draw_radio_field**', but not sure if I am placing the right values/code in the right place or if I need to change some settings in the database for radios to work correctly.
> 
> If anyone can help, I would be most greatful.
> 
> thanks,
> jay

What about posting the code that you are trying to use so able to provide guidance on what is wrong?

This is the code I tried using:

<div class="listRadio">
<?php
echo zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"'); 
?>
</div>
<div class="gridRadio">
<?php
echo zen_draw_pull_down_menu('view', array(array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'columns')), 'onchange="this.form.submit()"'); 
?>
</div>

I was trying to compare what I had found:

zen_draw_pull_down_menu( $name, $values, [ $default = ''], [ $parameters = ''], [ $required = false])

zen_draw_radio_field( $name, [ $value = ''], [ $checked = false], [ $parameters = ''])

but after playing around i.e. experimenting with what PHP skills I do have, thought I was not quite getting what I was hoping.

4jDesigns:

This is the code I tried using:

<div class="listRadio"> <?php echo zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"'); ?> </div> <div class="gridRadio"> <?php echo zen_draw_pull_down_menu('view', array(array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'columns')), 'onchange="this.form.submit()"'); ?> </div> ``` > > I was trying to compare what I had found: > > zen_draw_pull_down_menu( $name, $values, [ $default = ''], [ $parameters = ''], [ $required = false]) > > zen_draw_radio_field( $name, [ $value = ''], [ $checked = false], [ $parameters = '']) > > but after playing around i.e. experimenting with what PHP skills I do have, thought I was not quite getting what I was hoping.

So, here's what I get from what I see above, what I am familiar with (without booting up a computer), and what I seem to "sense":
zen_draw_pull_down_menu appears to provide a drop down menu... Not a list of radio buttons. If I am not mistaken, it is desired to display radio buttons then you would need to call a radio function or the drop down menu code would need to recognize that it should present radios instead of whatever it is providing for the conditions where you would want radio buttons instead. Beyond that, the attempted code doesn't provide enough information to the function to obtain useful results.

I would suggest looking at how attributes display in radio button fashion including how to make one required to be selected. Also there is at least one plugin out there that displays images next to a radio or checkbox attribute list. Perhaps something related could be found in one of those.

Further beyond that, each entry/radiobutton object would need to have an image assigned to it at the parameter level I believe. Or it might be the values level to then possibly be assigned to a parameter depending on how the code splits out the information; however, seems to me that an image is an extra piece of information not typically required for a selection.

Sorry, just saw my code and it is supposed to be calling the radio function... this is what I meant:

<div class="listRadio">
<?php
echo zen_draw_radio_field('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"'); 
?>
</div>
<div class="gridRadio">
<?php
echo zen_draw_radio_field('view', array(array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'columns')), 'onchange="this.form.submit()"'); 
?>
</div>

But anyway, will definitely take on your idea of looking at the attributes method.

Thanks.

4jDesigns:

Sorry, just saw my code and it is supposed to be calling the radio function... this is what I meant:

<div class="listRadio"> <?php echo zen_draw_radio_field('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"'); ?> </div> <div class="gridRadio"> <?php echo zen_draw_radio_field('view', array(array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'columns')), 'onchange="this.form.submit()"'); ?> </div> ``` > > But anyway, will definitely take on your idea of looking at the attributes method. > > Thanks.

Don't know if the problem got resolved or not. If it did, please post the solution. If not, I haven't looked up the standard way to attach a photo to radio button (ie. Internet search for identifying an image associated with a radio button): however, if it is something that can be in the declaration statement, then it would go in the portion of the coded line between the apostrophes of 'onchange="this.form.submit()"', otherwise would need to pre-declare/assign the image as part of the echo statement outside of the zen_draw function.

Ok... I found a way how to do it using jquery... and this how I did it....

Firstly... I am using this function for changing the pull_down used for 'Column Layout Grid for Product Listing' module, so it may be slightly different in your specific case.

So..

Open up where you have your 'select / drop down / pull_down'. In my case it was in /includes/templates/MY_TEMPLATE/tpl_index_product_list.php and found the line that looks like this:

if (defined('PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER') and PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER == '1') { 
  echo zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"');
}

I then added in a surrounding <div> around my 'select / drop down / pull_down' and gave it an ID called 'viewControl' (so I can call it up later). I also added in below it my new 'anchor' tags which I will style and use in it place.

So this is what I have now

if (defined('PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER') and PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER == '1') { 
  echo [B]'<div id="viewControl">' . [/B]zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"')[B] . '</div>'[/B];
[B]  echo '<div class="layoutList">';
  echo '<a class="layoutIcon" href="rows">Rows</a>';
  echo '<a class="layoutIcon" href="columns">Grid</a>';
  echo '</div>';[/B]
}

Now I need to create my jscript file...

Open new file in text editor and add this into it (except the green part):

$(document).ready(function() { // prepares your page for the function

  $("a.layoutIcon").click(function(event){ //when new anchor is clicked
    event.preventDefault(); // stop anchors default function i.e. going to the link
    $("#viewControl select").val($(this).attr("href")); // change the selectors option value to the same as the anchors link

    if ($("#viewControl select").val() =='rows') // if anchor link was 'rows'
      $("#viewControl select").val('rows').closest("form").submit(); // then use the selects value 'rows' and subit the form i.e. change layout to 'rows'
    else
      $("#viewControl select").val('columns').closest("form").submit(); // otherwise the value will be 'columns' i.e. grid and change accordingly		
  }); 
});

save it and call it 'jscript_WhatEverYouWant.js' (it must have the 'jscript_' part for auto detection by the cart) and place this file in /includes/templates/MY_TEMPLATE/jscript directory.

In my case I did a test now and could see the links 'rows' and 'grid' as well as the drop down... clicking 'rows' changed the layout to (yes, you guessed right!) ...rows and grid visa versa.

All I did then was open my stylesheet and added: '#viewControl {display: none;}' to hide the original drop down as well as style my anchor tags to suit. I have not done the styling yet but you can add in additional classes for individual styling as you want it.

Well I hope this helps someone, good luck!

Jay