Post by Brettster » Wed Oct 29, 2014 10:41 am

Hi Everyone,

I've gotten stuck with some OC 1.5.6.1 modifications. Basically I need to create 2 Product Options (Email1, and Email2), each of these Options need to first - validate that there is an Email address entered in the box, otherwise exit, and second, after the 'Add To Cart', or when the 2nd Email2 Option field is exited, compare Email1 <=> Email2, and if they are not the same - show an error message, that 'Both Emails need to match', then put the cursor back in Email1 Option text box and let them try again.

Is there some Extension that already does this? I've searched high and low, nothing yet...

Or, does anyone know a quick way to handle this?

TIA,
-Brett

Newbie

Posts

Joined
Mon Mar 03, 2014 2:14 pm

Post by uksitebuilder » Wed Oct 29, 2014 8:45 pm

Some type of jquery validation should do the trick

This is probably not the most elegant solution, but should work

Create your 2 Email text fields in catalog -> options

Make each one a 'Required' text field and make sure they are the first options to appear on the product page

edit: catalog/view/theme/default/template/product/product.tpl

find

Code: Select all

$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
                
                if (json['error']['profile']) {
                    $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
                }
			} 
			
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
					
				$('.success').fadeIn('slow');
					
				$('#cart-total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
replace with

Code: Select all

$('#button-cart').bind('click', function() {
   // Set-up the variables
   var email_invalid_msg = 'Please enter a valid email address!';
   var emails_dont_match_msg = 'Email addresses entered do not match';
   // End variables set-up
   
   var email1_option_id = $("input[name*='option']:nth(1)").attr("name");
   var email2_option_id = $("input[name*='option']:nth(2)").attr("name");
   var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
   var email_element = $('input[name="' + email1_option_id + '"]');
   
   if(email_element.length){
	  if(!expr.test($('input[name="' + email1_option_id + '"]').val())){
		 $('input[name="' + email1_option_id + '"]').focus();
		 alert(email_invalid_msg);
	  } else if ( $('input[name="' + email2_option_id + '"]').val() !=  $('input[name="' + email1_option_id + '"]').val()){
		 $('input[name="' + email2_option_id + '"]').focus();
		 alert(emails_dont_match_msg);
	  }else {
		 $.ajax({
			url: 'index.php?route=checkout/cart/add',
			type: 'post',
			data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
			dataType: 'json',
			success: function(json) {
			   $('.success, .warning, .attention, information, .error').remove();
			   
			   if (json['error']) {
				  if (json['error']['option']) {
					 for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					 }
				  }
				  
				  if (json['error']['profile']) {
					 $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
				  }
			   }
			   
			   if (json['success']) {
				  $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
					 
				  $('.success').fadeIn('slow');
					 
				  $('#cart-total').html(json['total']);
				  
				  $('html, body').animate({ scrollTop: 0 }, 'slow');
			   }   
			}
		 });
	  }
   }else{
   
	  $.ajax({
		 url: 'index.php?route=checkout/cart/add',
		 type: 'post',
		 data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		 dataType: 'json',
		 success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
			   if (json['error']['option']) {
				  for (i in json['error']['option']) {
					 $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
				  }
			   }
			   
			   if (json['error']['profile']) {
				  $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
			   }
			}
			
			if (json['success']) {
			   $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
				  
			   $('.success').fadeIn('slow');
				  
			   $('#cart-total').html(json['total']);
			   
			   $('html, body').animate({ scrollTop: 0 }, 'slow');
			}   
		 }
	  });
   }
});
In the replacement code, change the 2 variables at the top to suit the messages you would like to alert the user with.

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by Brettster » Thu Oct 30, 2014 9:30 am

Hi uksitebuilder,

Thank you, that's good - OOps - I see one problem. The ID number I enter there, is the one I can only get from Inspect element when I am on the product page (for example: 282, and 294), however when I add another product with those options, the Option ID is now different (286 and 295).

So - it seems the OptionID is changing for each product? I have 5 products, and may add more that require this feature.

How can I get it setup so that the OptionID that is used is the same one every time in this code? I tried using the OptionID when I hover over Edit on the Product->Options page, but those numbers are incorrect (21, 22, etc), as they did not trigger the validation. When I Inspect the Page I get a different ID, and that changes for the next product, every time I add these options.

I appreciate your help!
-Brett

Newbie

Posts

Joined
Mon Mar 03, 2014 2:14 pm

Post by uksitebuilder » Thu Oct 30, 2014 4:33 pm

Ahh, you are correct.

If they are (or can be) the first 2 options in the list of options on the product page.

See my earlier post which I have now edited.

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by Brettster » Fri Oct 31, 2014 12:52 am

Hi UkSitebuilder,

Thanks, interesting approach - actually they are the 2nd and 3rd option on that product, can I change your code to read:

Code: Select all

   var email1_option_id = $("input[name*='option']:second").attr("name");
   var email2_option_id = $("input[name*='option']:nth(1)").attr("name");
Or, I see there is one like this (with 0 being the first element):

Code: Select all

$('#selbox option').eq(1).val();


How would I use that? Like this?

Code: Select all

   var email1_option_id = $("input[name*='option']").eq(1).attr("name");
   var email2_option_id = $("input[name*='option']").eq(2).attr("name");
Is there a good jquery reference you recommend?

Thanks,
-Brett

Newbie

Posts

Joined
Mon Mar 03, 2014 2:14 pm

Post by uksitebuilder » Fri Oct 31, 2014 12:58 am

You can try with the eq(n)

or use nth(2) nth(3) etc - but not second

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by Brettster » Fri Oct 31, 2014 1:48 am

Hi,

Thanks, I have it working now, code is below. But how do I relocate focus to the element in jquery? For example if Email Address1 is bad, refocus to that element after closing the alert, or Address2 if that is bad?

Here is the code piece to find the 2nd and 3rd field elements on the form (the first element is zero):

Code: Select all

   var email1_option_id = $("input[name*='option']:nth(1)").attr("name");
   var email2_option_id = $("input[name*='option']:nth(2)").attr("name");   
Thanks,
-Brett

Newbie

Posts

Joined
Mon Mar 03, 2014 2:14 pm

Post by uksitebuilder » Fri Oct 31, 2014 5:33 am

Hi Brett,

I edited my original code above to use your nth(n)'s and add focus lines before each alert is triggered.

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom
Who is online

Users browsing this forum: Bing [Bot] and 20 guests