Post by nightwing » Thu Dec 19, 2019 12:31 pm

Hi Team,

Does anyone know of a straight way to clone the "Add to Cart" button to create a "Buy Now" button with such functionalities? I see a few posts out there with partial information and some addresses the older versions of OC. Currently, I am using version 3.0.3.2, Default Theme, Clean Install. I do not want to use a plugin for this functionality as I believe tweaking the code to have this done is possible. Any help would be greatly appreciated.
Last edited by nightwing on Fri Dec 20, 2019 9:40 am, edited 2 times in total.

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by letxobnav » Thu Dec 19, 2019 12:45 pm

in the product view.

I just added a button with id="buy-now"

Code: Select all

<button style="font-size:18px;" type="button" id="buy-now" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-md btn-block"><i class="fa fa-credit-card fa-2x"></i>&nbsp;{{ button_buy_now }}</button>
and added minified js

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",beforeSend:function(){$("#buy-now").button("loading")},complete:function(){$("#buy-now").button("reset")},success:function(t){if($(".success, .warning, .attention, information, .error").remove(),t.error&&t.error.option)for(i in t.error.option)$("#option-"+i).after('<span class="error">'+t.error.option[i]+"</span>");t.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(t,e,o){alert(o+"\r\n"+t.statusText+"\r\n"+t.responseText)}})})});</script>
which will add the product to the cart and then redirect to checkout

PS. not minified js

Code: Select all

<script>
$(document).ready(function() {
$('#buy-now').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product 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['success']) {
				window.location.href = 'index.php?route=checkout/checkout';
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});
});
</script>

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by nightwing » Thu Dec 19, 2019 12:53 pm

Hey letxobnav - Thank you, and I appreciate your very fast response. Honestly, I can help myself but not big of a coder, are you able to break that up into simpler steps?
I think I know where to add the button, however, the minified.js and not minified.js part. Is it a case where I would create a new min.js or use the existing?

"PS. not minified js" Right here I am just lost lol.

Thank you
letxobnav wrote:
Thu Dec 19, 2019 12:45 pm
in the product view.

I just added a button with id="buy-now"

Code: Select all

<button style="font-size:18px;" type="button" id="buy-now" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-md btn-block"><i class="fa fa-credit-card fa-2x"></i>&nbsp;{{ button_buy_now }}</button>
and added minified js

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",beforeSend:function(){$("#buy-now").button("loading")},complete:function(){$("#buy-now").button("reset")},success:function(t){if($(".success, .warning, .attention, information, .error").remove(),t.error&&t.error.option)for(i in t.error.option)$("#option-"+i).after('<span class="error">'+t.error.option[i]+"</span>");t.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(t,e,o){alert(o+"\r\n"+t.statusText+"\r\n"+t.responseText)}})})});</script>
which will add the product to the cart and then redirect to checkout

PS. not minified js

Code: Select all

<script>
$(document).ready(function() {
$('#buy-now').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product 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['success']) {
				window.location.href = 'index.php?route=checkout/checkout';
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});
});
</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by letxobnav » Thu Dec 19, 2019 1:08 pm

just add the button code to your product twig file where needed.
add the buy now text (button_buy_now) in your language file.

put the minified js in your product twig file just before {{ footer }}
(I only added the not minified js in case you want to change it as minified is not easy to read/alter)

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by nightwing » Thu Dec 19, 2019 1:14 pm

Ohh I get you now, thank you. I will test and get back to you on this thread!
letxobnav wrote:
Thu Dec 19, 2019 1:08 pm
just add the button code to your product twig file where needed.
add the buy now text (button_buy_now) in your language file.

put the minified js in your product twig file just before {{ footer }}
(I only added the not minified js in case you want to change it as minified is not easy to read/alter)

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Thu Dec 19, 2019 2:00 pm

Hey letxobnav ,
Thank you so much this worked, but I noticed that if you have a required item option, for example, colour or size, it does nothing, unlike the add to cart that points out that you need to select an option. It only works when I select the options then press buy now.
letxobnav wrote:
Thu Dec 19, 2019 1:08 pm
just add the button code to your product twig file where needed.
add the buy now text (button_buy_now) in your language file.

put the minified js in your product twig file just before {{ footer }}
(I only added the not minified js in case you want to change it as minified is not easy to read/alter)

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by letxobnav » Thu Dec 19, 2019 3:21 pm

use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by nightwing » Thu Dec 19, 2019 10:53 pm

Thank you. I will test it and let you know!
letxobnav wrote:
Thu Dec 19, 2019 3:21 pm
use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Thu Dec 19, 2019 11:09 pm

Awesome awesome! Thank you for you help letxobnav,
This works perfectly! I hope this helps someone else.
letxobnav wrote:
Thu Dec 19, 2019 3:21 pm
use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Thu Dec 19, 2019 11:13 pm

For all who would like to get this done,

Instead of adding this script to the end of the file, I just created a file called buy-now.js and place the script there, then on the twig file, I added the path to that file location. Also please remember to clear your cache after making these changes. Both in the backend and the web browser. I also unminified the minified script online using: https://unminify.com/
seanstorm100 wrote:
Thu Dec 19, 2019 11:09 pm
Awesome awesome! Thank you for you help letxobnav,
This works perfectly! I hope this helps someone else.
letxobnav wrote:
Thu Dec 19, 2019 3:21 pm
use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Mon Jun 01, 2020 5:20 am

Hi letxobnav,
Any ideas on how to place them side by side - For example 45% the width of both buttons then have one left and the other to the right. - I have a mobile product.twig file so I would only apply it to that - This is needed for mobile only
Thanks
letxobnav wrote:
Thu Dec 19, 2019 3:21 pm
use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Mon Jun 01, 2020 11:39 am

No worries

Code: Select all

@media (max-width:767px){#buy-now{width:49%;float:left;margin-right:2%;}#button-cart{width:49%;float:left;margin-top: 0px;}}
nightwing wrote:
Mon Jun 01, 2020 5:20 am
Hi letxobnav,
Any ideas on how to place them side by side - For example 45% the width of both buttons then have one left and the other to the right. - I have a mobile product.twig file so I would only apply it to that - This is needed for mobile only
Thanks
letxobnav wrote:
Thu Dec 19, 2019 3:21 pm
use this one.

Code: Select all

<script>$(document).ready(function(){$("#buy-now").bind("click",function(){$.ajax({url:"index.php?route=checkout/cart/add",type:"post",data:$("#product input[type='text'], #product input[type='hidden'], #product input[type='radio']:checked, #product input[type='checkbox']:checked, #product select, #product textarea"),dataType:"json",success:function(r){if($(".alert-dismissible, .text-danger").remove(),$(".form-group").removeClass("has-error"),r.error){if(r.error.option)for(i in r.error.option){var e=$("#input-option"+i.replace("_","-"));e.parent().hasClass("input-group")?e.parent().after('<div class="text-danger">'+r.error.option[i]+"</div>"):e.after('<div class="text-danger">'+r.error.option[i]+"</div>")}r.error.recurring&&$("select[name='recurring_id']").after('<div class="text-danger">'+r.error.recurring+"</div>"),$(".text-danger").parent().addClass("has-error")}r.success&&(window.location.href="index.php?route=checkout/checkout")},error:function(r,e,t){alert(t+"\r\n"+r.statusText+"\r\n"+r.responseText)}})})});</script>

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nadim221mia » Sat Jun 27, 2020 10:54 pm

Super! Thanks for you help letxobnav. I also unminify the minified script online using: https://www.cssminifiers.com/

Newbie

Posts

Joined
Sat Jun 27, 2020 10:47 pm
Who is online

Users browsing this forum: No registered users and 26 guests