Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help fixing my square foot calculator

    Hello Everyone! This is my first post here on this website, so I'm hoping to find some helpful people!

    I have a square foot calculator that was pre-written on the website I just recently took over. It was working great two days ago, and then all of a sudden the script is broken because it displays a "nan" instead of the number of square feet per box. You can see an example of the calculator that isn't working here

    The calculator is really basic and not what I want as the final result, but if someone could just get it working for me again that would help a whole lot! The script takes the product sku and uses that as the square feet per box and then does the calculation that way.

    Code:
    <div id="calculatorbox" class="calculatorbox">
          <div class="calcgroupinput"> 
           <span class="label">ft<sup>2</sup> needed:</span>
           <span class="value"><input type="text" id="needed" onChange="calculate();"></span>
           <span class="label" style="margin-left:1em;">ft<sup>2</sup> / box:</span>
           <span class="value" id="box">&nbsp;</span>
           </div>  
         </div>  
         <div class="boxproductcontainer">
                        %%SNIPPET_ProductAddToCart%%
                    </div>
                    <script type="text/javascript">
                        $(document).ready( function() {
                        
                        /* inserts HTML after quantity input label*/
                          $(".calcgroupinput").after('<div class="calcgroupinput" style="margin-top:1em;"><span class="label">Boxes Needed:</span><span class="value"><input type="text" id="boxneed" onChange="entry();"></span><span class="label" style="margin-left:1em;">actual ft<sup>2</sup>: </span><span class="value" id="actual" style="font-weight:500;margin-bottom:1em;">&nbsp;</span></div>');
                        
                        /* gets 'sku' square feet per box*/
                        var $sqftbox = document.getElementById('sqftsku').innerHTML;
                        
                        /* removes product id */
                        var $sqftbox = $sqftbox.replace('%%GLOBAL_ProductId%%','');
                        
                        /* removes extra 0s */
                        var $sqftbox = parseFloat($sqftbox).toFixed(2);
                        
                        /* displays square feet per box */
                        document.getElementById('box').innerHTML = $sqftbox;
                        
                        });
                        
                        function calculate() {
                        var box = document.getElementById('box').innerHTML;
                        var need = document.getElementById('needed').value;
                        var orderqty = Math.ceil(need/box);
                        var actual = (box*orderqty);
                        document.getElementById('boxneed').value = orderqty;
                          //document.getElementById('text_qty_').value = orderqty;
                        document.getElementById('actual').innerHTML = actual;
                        }
                        
                        function entry() {
                        var entryqty = document.getElementById('boxneed').value;
                        var box = document.getElementById('box').innerHTML;
                          //document.getElementById('text_qty_').value = entryqty;
                        }                    
                    </script>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    this is very unusual code. We can take a look at it step by step. My comments in red...

    Code:
    $(".calcgroupinput").after('<div class="calcgroupinput" style="margin-top:1em;"><span class="label">Boxes Needed:</span><span class="value"><input type="text" id="boxneed" onChange="entry();"></span><span class="label" style="margin-left:1em;">actual ft<sup>2</sup>: </span><span class="value" id="actual" style="font-weight:500;margin-bottom:1em;">&nbsp;</span></div>');
    adds a whole bunch of html to the page directly after the page loads. Why you wouldn't just code this as straight html is confusing point #1  
    
    /* gets 'sku' square feet per box*/
    var $sqftbox = document.getElementById('sqftsku').innerHTML;
    Looks for the element with the id 'sqftsku' and gets its inner html. But there is no element with the id 'sqftsku', so things start to go sideways here...
                        
    /* removes product id */
    var $sqftbox = $sqftbox.replace('%%GLOBAL_ProductId%%','');
                        
    /* removes extra 0s */
    var $sqftbox = parseFloat($sqftbox).toFixed(2);
                        
    /* displays square feet per box */
    document.getElementById('box').innerHTML = $sqftbox;
    these three lines get ignored, because of the error at the 'sqftsku' line. 
                        });
                        
    function calculate() {
    var box = document.getElementById('box').innerHTML;
    the innerHTML of the box span is still &nbsp; because that last line got ignored
    
    var need = document.getElementById('needed').value;
    we get the value from the input...
                        
    var orderqty = Math.ceil(need/box);
    and then try to divide a value by &nbsp; which can only ever result in NaN
    all of which is to say that you need an element with the id "sqftsku" at the very least...

  • Users who have thanked xelawho for this post:

    Lindsay711 (02-28-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your reply!! I know the code is weird, I didn't really understand what was going on with the html placement so I was afraid to mess with it. It's coded for the e-commerce platform BigCommerce which uses panels, global variables, and snippets throughout the templates. If you have a better way of setting it up that would help me.

    I originally didn't include the code that was after the script, which gets the 'sqftsku' from the global variable "%%Global_SKU%%" ...but I'm still not sure if it pertains to my calculator because I think the code is just hiding the product sku element from the page?

    I'm sorry if this is terrible. Maybe you can help me set up a new calculator? Or just guide me in some way. Thank you a bunch!

    Code:
                    
                    <!-- Sq foot Calculator goes here -->
            <style>
      .calculatorbox {
        height:80px;
        margin-top:10px;
        padding: 20px;
        margin-bottom:10px;
        background-color:#f4f4f4;
        -webkit-border-radius: 5px;
        -moz-border-radius: 6px;
         border-radius: 6px;
        border: 3px #C0C0C0 solid;
      }
      .calcgroupinput {
         float:left;
         font-size: 130%;
         text-transform: uppercase;
         position: relative;
          clear:both;
         }  
    </style>
    
         <div id="calculatorbox" class="calculatorbox">
          <div class="calcgroupinput"> 
           <span class="label">ft<sup>2</sup> needed:</span>
           <span class="value"><input type="text" id="needed" onChange="calculate();"></span>
           <span class="label" style="margin-left:1em;">ft<sup>2</sup> / box:</span>
           <span class="value" id="box">&nbsp;</span>
           </div>  
         </div>  
         <div class="boxproductcontainer">
                        %%SNIPPET_ProductAddToCart%%
                    </div>
                    <script type="text/javascript">
                        $(document).ready( function() {
                        
                        /* inserts HTML after quantity input label*/
                          $(".calcgroupinput").after('<div class="calcgroupinput" style="margin-top:1em;"><span class="label">Boxes Needed:</span><span class="value"><input type="text" id="boxneed" onChange="entry();"></span><span class="label" style="margin-left:1em;">actual ft<sup>2</sup>: </span><span class="value" id="actual" style="font-weight:500;margin-bottom:1em;">&nbsp;</span></div>');
                       
    /* gets 'sku' square feet per box*/
                        var $sqftbox = document.getElementById('sqftsku').innerHTML;
                        
                        /* removes product id */
                        var $sqftbox = $sqftbox.replace('%%GLOBAL_ProductId%%','');
                        
                        /* removes extra 0s */
                        var $sqftbox = parseFloat($sqftbox).toFixed(2);
                        
                        /* displays square feet per box */
                        document.getElementById('box').innerHTML = $sqftbox;
                        
                        });
                        
                        function calculate() {
                        var box = document.getElementById('box').innerHTML;
                        var need = document.getElementById('needed').value;
                        var orderqty = Math.ceil(need/box);
                        var actual = (box*orderqty);
                        document.getElementById('boxneed').value = orderqty;
    
      document.getElementById('actual').innerHTML = actual;
                        }
                        
                        function entry() {
                        var entryqty = document.getElementById('boxneed').value;
                        var box = document.getElementById('box').innerHTML;
                          //document.getElementById('text_qty_').value = entryqty;
                        }                    
                    </script>
                    
                    <!-- End of Calculator -->
                    
                    <div class="DetailRow ProductSKU" id="hidesku">
                        <div class="Label">%%LNG_SKU%%:</div>
                        <div class="Value">
                            <span class="VariationProductSKU" id="sqftsku">
                                %%GLOBAL_SKU%%
                            </span>
                        </div>
                    </div>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,913
    Thanks
    56
    Thanked 545 Times in 542 Posts
    one very easy way to debug this would be to run your page in a browser, click on "view source" and see what all that %% stuff is actually rendering as.

    If you hard code
    Code:
    <div id="sqftsku">4</div>
    into the code it works fine, so I'm guessing there is something wrong with the way that div is created, or with the
    Code:
    $sqftbox.replace('%%GLOBAL_ProductId%%','');
    line

  • Users who have thanked xelawho for this post:

    Lindsay711 (03-03-2014)

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, thank you! I will look into that and try to figure out what is going on.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •