Post by openuser213 » Sat Oct 24, 2020 9:34 am

hi there im hoping somebody can help me sort this out, my radio options wont auto select on the product page however if i add it to the cart without selecting anything it shows the first option is selected in the cart. i've tried modified the product.tpl in several different ways but couldn't get it to work. here is the code for the radio option, any ideas on how i could make the first option selected?

opencart version 3.0.3.2

Code: Select all

			        <?php if ($option['type'] == 'radio') { ?>
			        <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
			          <label class="control-label"><?php echo $option['name']; ?>:</label>
			          <div id="input-option<?php echo $option['product_option_id']; ?>">
			            <?php foreach ($option['product_option_value'] as $option_value) { ?>

						  <?php if($option_value['image']){ ?>
							  <div class="radio <?php if($theme_options->get( 'product_page_radio_style' ) == 1) { echo 'radio-type-button'; } ?>">
								  <label>
									  <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
									  <span class="active"<?php if($theme_options->get( 'product_page_radio_style' ) == 1) { ?>data-toggle="tooltip" data-placement="top" title="<?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?>(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)<?php } ?>"<?php } ?>><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" <?php if($theme_options->get( 'product_page_radio_style' ) == 1) { ?>width="<?php if($theme_options->get( 'product_page_radio_image_width' ) > 0) { echo $theme_options->get( 'product_page_radio_image_width' ); } else { echo 25; } ?>px" height="<?php if($theme_options->get( 'product_page_radio_image_height' ) > 0) { echo $theme_options->get( 'product_page_radio_image_height' ); } else { echo 25; } ?>px"<?php } ?> /> <?php if($theme_options->get( 'product_page_radio_style' ) != 1) { ?><?php echo $option_value['name']; ?>
									  <?php if ($option_value['price']) { ?>
									  (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
									  <?php } ?><?php } ?></span>
								  </label>
							  </div>
						  <?php } ?>
						 <?php if(!$option_value['image']){ ?>
							<div class="radio <?php if($theme_options->get( 'product_page_radio_style' ) == 1) { echo 'radio-type-button2'; } ?>">
							  <label>
								<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
								<?php if ($option_value['image']) { ?>
								 <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
								<?php } ?>
								<span><?php echo $option_value['name']; ?>
								<?php if($theme_options->get( 'product_page_radio_style' ) != 1) { ?><?php if ($option_value['price']) { ?>
								(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
								<?php } ?><?php } ?></span>
							  </label>
							</div>

							<?php } ?>
			            <?php } ?>

			            <?php if($theme_options->get( 'product_page_radio_style' ) == 1) { ?>
						 <script type="text/javascript">
			                 $(document).ready(function(){
			                      $('#input-option<?php echo $option['product_option_id']; ?>')document.ready( function () {
			                           $('#input-option<?php echo $option['product_option_id']; ?> span').addClass("active");
			                          
			                      });
			                 });
			            </script>
			            <script type="text/javascript">
			                 $(document).ready(function(){
			                      $('#input-option<?php echo $option['product_option_id']; ?>').on('click', 'span', function () {
			                           $('#input-option<?php echo $option['product_option_id']; ?> span').removeClass("active");
			                           $(this).addClass("active");
			                      });
			                 });
			            </script>

Newbie

Posts

Joined
Sat Oct 24, 2020 9:28 am

Post by OSWorX » Sat Oct 24, 2020 2:36 pm

openuser213 wrote:
Sat Oct 24, 2020 9:34 am
.. i've tried modified the product.tpl in several different ways ..
openuser213 wrote:
Sat Oct 24, 2020 9:34 am
opencart version 3.0.3.2
That does not fit!
Either you do not use OpenCart 3.0.3.2 or this is one of those templates which are not supported.
Please state which Theme/Template you are using.

Custom Development | Individuelle Entwicklung | Support & Bugfixes

Image Image Image


User avatar
Guru Member
Online

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by khnaz35 » Sat Oct 24, 2020 4:22 pm

openuser213 wrote:
Sat Oct 24, 2020 9:34 am
i've tried modified the product.tpl
opencart version 3.0.3.2
Opencart 3.X versions doesn't use .tpl they use .twig

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by spectreav » Mon Oct 26, 2020 2:42 am

Use jQuery
For default template code looks like

Code: Select all

	  $(document).ready(function() {
		  $('#product .radio:first input').prop('checked', true);
		  $('#product select option:eq(1)').prop('selected', true);
	  })
for custom templates may need to add a class to indicate selected option

All in One Remarketing And Ecommerce Solution for Opencart. Free Install and Setup


Newbie

Posts

Joined
Sun Oct 25, 2020 7:24 pm

Post by openuser213 » Mon Oct 26, 2020 6:04 am

The template is called storm, let me know if you need any other info

Newbie

Posts

Joined
Sat Oct 24, 2020 9:28 am

Post by openuser213 » Mon Oct 26, 2020 6:41 am

These are the scripts i could find that have something to do with the radio options, the second one adds a class "active" to whichever radio is clicked, how can i add a script to have the first option changed to class "active" when the page is loaded up?

Code: Select all

	< script type = "text/javascript" >
	$(document).ready(function() {
		$('#input-option<?php echo $option['
			product_option_id ']; ?>') document.ready(function() {
			$('#input-option<?php echo $option['
				product_option_id ']; ?> span').addClass("active");

		});
	}); < /script> < script type = "text/javascript" >
	$(document).ready(function() {
		$('#input-option<?php echo $option['
			product_option_id ']; ?>').on('click', 'span', function() {
			$('#input-option<?php echo $option['
				product_option_id ']; ?> span').removeClass("active");
			$(this).addClass("active");
		});
	}); < /script>

Newbie

Posts

Joined
Sat Oct 24, 2020 9:28 am

Post by OSWorX » Mon Oct 26, 2020 11:52 am

openuser213 wrote:
Mon Oct 26, 2020 6:04 am
The template is called storm, let me know if you need any other info
What a Funny Guy!
No, we do not need anymore .. no .. but you should read this here!

WTF do you think we all know here each and every Template by name?
A simple link to the vendor, providing more infos .. and maybe you get help which may solve your problem.

p.s.: as it seems it is a "Commercial Template".
Therefore you should call their support.

Custom Development | Individuelle Entwicklung | Support & Bugfixes

Image Image Image


User avatar
Guru Member
Online

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by openuser213 » Mon Oct 26, 2020 12:15 pm

I’m pretty sure it’s a simple modification of the javascript I pasted above to enable the function to have the first radio checked or clicked I can’t find a link to the template as they’ve removed it from the live previews and I’m working on the website on local host so I don’t have a live link to access the page

Newbie

Posts

Joined
Sat Oct 24, 2020 9:28 am

Post by OSWorX » Mon Oct 26, 2020 12:40 pm

openuser213 wrote:
Mon Oct 26, 2020 12:15 pm
I’m pretty sure it’s a simple modification of the javascript I pasted above to enable the function to have the first radio checked or clicked I can’t find a link to the template as they’ve removed it from the live previews and I’m working on the website on local host so I don’t have a live link to access the page
When I can found this template, you should also be able to find the vendor again - either his website or the Marketplace where this template is also sold.
I do not want to promote their website here.
And as said, it is a Commercial Template. so contact either the Vendor, the Marketplace or post a new request in the commercial Section of this Forum.
Because I am sure, you have paid for it - or not?

Custom Development | Individuelle Entwicklung | Support & Bugfixes

Image Image Image


User avatar
Guru Member
Online

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by openuser213 » Mon Oct 26, 2020 1:39 pm

Yes I have paid for it, I found the vendor but the demo link is broken. I will contact the vendor for some help

Newbie

Posts

Joined
Sat Oct 24, 2020 9:28 am
Who is online

Users browsing this forum: No registered users and 40 guests