Kevin K Posted December 11, 2020 Share Posted December 11, 2020 I am trying to enter some code into the configureproduct.tpl that would show a custom alert box if the defined payment term/cycle is selected. This is what I have for now: <div {if $billingcycle eq "annually" } checked data-change-billingcycle class="alert alert-promo " role="alert"> <div class="alert-body"> Hey! You've saved <b>$60</b> by paying yearly. </div> </div> While this works on a fresh page load, I would also like this to work as the user chooses different payment terms without a page reload. In time I will add the products that this will apply to, but at this point, I just want to get the first portion working where it will show or not show in real time as the different payment cycles radio buttons are selected. Maybe @brian! will have an idea on this. 0 Quote Link to comment Share on other sites More sharing options...
steven99 Posted December 12, 2020 Share Posted December 12, 2020 This is best done via a output hook and javascript / jquery to do the maths and changing of the alert . Basically a jquery change event on the cycle radio calls the event function that shows the alert with the savings. It can be done via a template change but a hook is better as you don't need to constantly keep that template updated as well as you get dynamic figures for the products billing cycles vs hard coding. I don't think there is a output hook for the configure product page and so using ClientAreaFooterOutput might be needed with a check on if your in the configure product page. 0 Quote Link to comment Share on other sites More sharing options...
Kevin K Posted December 12, 2020 Author Share Posted December 12, 2020 4 minutes ago, steven99 said: This is best done via a output hook and javascript / jquery to do the maths and changing of the alert . Basically a jquery change event on the cycle radio calls the event function that shows the alert with the savings. It can be done via a template change but a hook is better as you don't need to constantly keep that template updated as well as you get dynamic figures for the products billing cycles vs hard coding. I don't think there is a output hook for the configure product page and so using ClientAreaFooterOutput might be needed with a check on if your in the configure product page. Ya, I finally figured javascript/jquery was the way to go, although I can't get that to work either directly in the template, just to get it working and then I will place it in a hook. I know the code is valid, but it just does not seem to fire as if it is not picking up the jquery. Here is the code I have just for testing: {literal} <script> $("input[name='billingcycle']").click(function () { $('#show-me').css('display', ($(this).val() === 'annually') ? 'block':'none'); }); </script> {/literal} <div id="show-me" style="display:none" class="alert alert-promo " role="alert"> <div class="alert-body">Hey! You've saved <b>$60</b> by paying yearly. </div> </div> This code seems to work as seen below, but will not fire in the template. I have tried many different jquery/javascript functions that should work, but for some reason it will not work once in the template. http://jsfiddle.net/PhFNm/1/ 0 Quote Link to comment Share on other sites More sharing options...
Kian Posted December 12, 2020 Share Posted December 12, 2020 (edited) There's no need to edit any tpl file. Inject the jQuery code on the page with ClientAreaHeadOutput hook point. Edited December 12, 2020 by Kian 0 Quote Link to comment Share on other sites More sharing options...
Kian Posted December 12, 2020 Share Posted December 12, 2020 (edited) For example... <?php add_hook('ClientAreaHeadOutput', 1, function($vars) { if ($vars['filename'] == 'cart' AND $_GET['a'] == 'confproduct') { return <<<HTML <script type="text/javascript"> $(function() { $('select#inputBillingcycle').change(function(){ $('.kt-congratulations').hide(); $('select#inputBillingcycle').after('<p class="well kt-congratulations">Congratulations for selecting option <strong>' + $(this).val() + '</strong>!</p>'); }); }); </script> HTML; } }); Output: Edited December 12, 2020 by Kian 0 Quote Link to comment Share on other sites More sharing options...
Kevin K Posted December 12, 2020 Author Share Posted December 12, 2020 6 minutes ago, Kian said: For example... <?php add_hook('ClientAreaHeadOutput', 1, function($vars) { if ($vars['filename'] == 'cart' AND $_GET['a'] == 'confproduct') { return <<<HTML <script type="text/javascript"> $(function() { $('select#inputBillingcycle').change(function(){ $('.kt-congratulations').hide(); $('select#inputBillingcycle').after('<p class="well kt-congratulations">Congratulations for selecting option <strong>' + $(this).val() + '</strong>!</p>'); }); }); </script> HTML; } }); Output: Thanks for your help, although this does not seems to working for me. I am using the Lagom theme and they are radio buttons instead of a dropdown, so I am thinking the code you provided does not adhere to the radio selections. I am also trying to make it so if the click the order link with the annually already stated in the url and selected, it will show as soon as they arrive on the configureproduct.tpl page. Again I appreciate your help on this. 0 Quote Link to comment Share on other sites More sharing options...
Kian Posted December 12, 2020 Share Posted December 12, 2020 Simply change the selector accordingly. I'm using select#inputBillingcycle. You'll need to replace it with your radio and ID or name attribute. As for your other question, you can add an onload event that triggers the function. This way the message appears on page load. I can't provide you any code now (not at home). 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted December 12, 2020 Share Posted December 12, 2020 11 minutes ago, Kevin K said: Thanks for your help, although this does not seems to working for me. it would work on standard_cart 🙂 12 minutes ago, Kevin K said: I am using the Lagom theme and they are radio buttons instead of a dropdown, so I am thinking the code you provided does not adhere to the radio selections. doesn't Lagom already show the discount of each cycle when compared to the monthly price ??? https://prnt.sc/w17h7i I can see the Smarty code in the template that calcs that value for each cycle. 0 Quote Link to comment Share on other sites More sharing options...
Kevin K Posted December 12, 2020 Author Share Posted December 12, 2020 Well using some of your code and some other code that I verified works just fine in a test webpage I have: <?php add_hook('ClientAreaHeadOutput', 1, function($vars) { if ($vars['filename'] == 'cart' AND $_GET['a'] == 'confproduct') { return <<<HTML <script type="text/javascript"> $(document).ready(function() { $('input[type="radio"]').click(function() { if($(this).attr('value') == 'annually') { $('#show-me').show(); } else { $('#show-me').hide(); } }); $('.test').before('<div id="show-me" style="display:none;" class="alert alert-promo" role="alert"><div class="alert-body">Hey! You\'ve saved <b>60</b> by paying yearly.</div></div>'); }); </script> HTML; } }); but it will not fire for some reason and I cannot figure it out. It's like it is not picking up the "annually" value of the radio button. I tried with "change(function()" and no difference. There is something I am missing here, but just cannot figure it out to save my life. 0 Quote Link to comment Share on other sites More sharing options...
Kevin K Posted December 12, 2020 Author Share Posted December 12, 2020 1 minute ago, brian! said: it would work on standard_cart 🙂 doesn't Lagom already show the discount of each cycle when compared to the monthly price ??? https://prnt.sc/w17h7i I can see the Smarty code in the template that calcs that value for each cycle. Yes it does, but I am trying to show something a little different as the amount saved in a banner above the cycle selections if the annual term is selected. Such as Ignore the prices and such as this is just a test environment. 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.