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.
in the product view.
I just added a button with id="buy-now"
and added minified js
which will add the product to the cart and then redirect to checkout
PS. not minified js
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> {{ button_buy_now }}</button>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>
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.
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
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 pmin the product view.
I just added a button with id="buy-now"and added minified jsCode: 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> {{ button_buy_now }}</button>
which will add the product to the cart and then redirect to checkoutCode: 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>
PS. not minified jsCode: 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
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)
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.
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 pmjust 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
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.
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 pmjust 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
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.
Thank you. I will test it and let you know!
letxobnav wrote: ↑Thu Dec 19, 2019 3:21 pmuse 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
Awesome awesome! Thank you for you help letxobnav,
This works perfectly! I hope this helps someone else.
This works perfectly! I hope this helps someone else.
letxobnav wrote: ↑Thu Dec 19, 2019 3:21 pmuse 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
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/
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 pmAwesome awesome! Thank you for you help letxobnav,
This works perfectly! I hope this helps someone else.
letxobnav wrote: ↑Thu Dec 19, 2019 3:21 pmuse 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
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
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 pmuse 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
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 amHi 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 pmuse 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
Super! Thanks for you help letxobnav. I also unminify the minified script online using: https://www.cssminifiers.com/
Who is online
Users browsing this forum: No registered users and 26 guests
