OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

Display Product Options Horizontally

https://forum.opencart.com/viewtopic.php?t=61405

Page 1 of 2

Display Product Options Horizontally

Posted: Mon Apr 30, 2012 3:54 am
by nagger2000
I have searched in depth for this but am still struggling to find a solution. Can anyone help? I want to use the checkbox for my options but it only displays vertically, using up valuable space
Screen Shot 2012-04-29 at 20.49.17.png

Screen Shot 2012-04-29 at 20.49.17.png (8.52 KiB) Viewed 9937 times

I believe that this is the bit of code from product.tpl that I need to work in, just not sure what to do with it.

Code: Select all

 <b><?php echo $option['name']; ?>:</b><br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
         
     
       <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          
       
          
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
Does anyone have a method to display them horizontally?

Using V1.5.2.1

Thanks

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 5:32 am
by Tcalp
it is .. try surrounding the input / label with a left floated div like this :

Code: Select all

<div style="float:left;">
    <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
</div>

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 5:47 am
by nagger2000
Tcalp wrote:it is .. try surrounding the input / label with a left floated div like this :

Code: Select all

<div style="float:left;">
    <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
</div>
Thanks for the reply, The result was this
Screen Shot 2012-04-29 at 22.46.40.png

Screen Shot 2012-04-29 at 22.46.40.png (8.76 KiB) Viewed 9924 times

which I wasn't quite expecting!

Any thoughts?

Thanks in advance.

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 8:15 am
by Tcalp
Could you give me a link to your site ?

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 8:40 pm
by nagger2000
Hi Tcalp,

I'll PM you if that's okay as the site is in development and sat in a sub-domain at the moment.

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 10:03 pm
by pprmkr
You did not show the entire part of the code:

Code: Select all

          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>
          <br />
          <?php } ?>
Remove the <br /> just under </label/>

To create a bit of space between the checkboxes, you could replace the <br /> with &nbsp;

Re: Display Product Options Horizontally

Posted: Mon Apr 30, 2012 10:09 pm
by nagger2000
Thank you @pprmkr.

Just what was needed.

Re: Display Product Options Horizontally

Posted: Mon Jul 30, 2012 12:59 am
by vivek_gupta88
hi

I want to display "Image" option horizontally ? can any one help ? please

Re: Display Product Options Horizontally

Posted: Mon Jul 30, 2012 3:02 am
by pprmkr
Yes, of course someone can.

If you run version 1.5.1.3:

Edit catalog/view/theme/default/template/product.tpl

Code: Select all

        <?php if ($option['type'] == 'image') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
            <table class="option-image">
              <?php foreach ($option['option_value'] as $option_value) { ?>
              <tr>
                <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label></td>
              </tr>
              <?php } ?>
            </table>
        </div>
        <br />
        <?php } ?>
Replace by:

Code: Select all

        <?php if ($option['type'] == 'image') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <table class="option-image">
          	<tr>
               <?php $oi= 1; foreach ($option['option_value'] as $option_value) { if ( $oi > 3 ) { $oi=1; echo "</tr><tr>";} ?>
          
                <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
                <td width="55"><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
                <td width="20%"><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label></td>
              
              <?php $oi++; }?>
         	</tr> 
         </table>
        </div>
        <br />
        <?php } ?>

Re: Display Product Options Horizontally

Posted: Wed Aug 01, 2012 1:20 am
by vivek_gupta88
Hi

Thanks for reply

I have 1.5.2.1

Vivek

Re: Display Product Options Horizontally

Posted: Wed Aug 01, 2012 7:23 pm
by pprmkr
You can use the same code for 1.5.2.1

Re: Display Product Options Horizontally

Posted: Fri Aug 31, 2012 12:54 am
by vivek_gupta88
Great

Work Perfectly..

Thanks You

Re: Display Product Options Horizontally

Posted: Sat Oct 06, 2012 7:35 am
by tmart
Hi, Can you please help me with the right replacement codes for showing the "radio" option to display horizontally please?
I tried replacing just option type from "checkbox" to "radio" but it did not work.

Thanks in advance and best regards
Tissy

Re: Display Product Options Horizontally

Posted: Sat Oct 06, 2012 4:33 pm
by pprmkr
For option Radio:

Search:

Code: Select all

          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>
          <br />
          <?php } ?>
Replace by:

Code: Select all

          <table class="option-image">
             <tr>
               <?php $oi= 1; foreach ($option['option_value'] as $option_value) { if ( $oi > 3 ) { $oi=1; echo "</tr><tr>";} ?>
                <td style="width: 1px;">
                <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
                <td width="30%"><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label></td>
              <?php $oi++; }?>
            </tr>
         </table>

Re: Display Product Options Horizontally

Posted: Mon Oct 08, 2012 3:41 am
by tmart
Thank you so much!!!
Best regards/Tissy

Re: Display Product Options Horizontally

Posted: Wed Oct 10, 2012 5:34 pm
by Nick_A
After hours of searching, this is exactly what I have been looking for. Unfortunately I have tried to find the code in the product.tpl with no joy :(

I am using a clean install of 1.5.4.1 - only additional mod installed is VQMOD.

I would also like the option to increase the size of the image but do not know where to look. Any help would be most welcome.

Many thanks and regards

Re: Display Product Options Horizontally

Posted: Fri Oct 12, 2012 2:52 am
by pprmkr
It's there, take a look at line 88 for the radio-option ...
Line 106 for checkbox-option ...
Line 125 for image-option ...

To change the image size you have to edit the store settings.

Re: Display Product Options Horizontally

Posted: Tue Oct 16, 2012 4:39 am
by thbr02
I've also been looking for the feature to display options horizontally for a long time. This works great! Thank you "pprmkr". If someone is interested I've setup a VQMod which will make the changes without changing the core files. Works fine with OC 1.5.1.3. Just upload to your vqmod/xml directory.

Re: Display Product Options Horizontally

Posted: Mon Jan 28, 2013 1:13 am
by krazygraphics337
I have the 1.5.2.1 as well , I try to paste the code in untraedit and it cant find <?php if ($opti..." not found!

Re: Display Product Options Horizontally

Posted: Mon Jan 28, 2013 1:23 am
by krazygraphics337
I got it working now , thanks
All times are UTC+08:00
Page 1 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/