Announcement

Collapse
No announcement yet.

Highlight product row when qty box is the focus

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Highlight product row when qty box is the focus

    Hi all

    I am using Business 12.0.2 with single add to cart button and Product list with Horizontal Dividers. I'm trying to highlight a table row in the product list when the qty box is the focus.

    I have added
    Code:
    .highlightedRow { 
    background-color: blue; 
    }
    to the current stylesheet, and I have tried adding:
    Code:
    <SCRIPT type="text/javascript">
    
    $('input').focus(function() {
        $(this).parent().parent().addClass('highlightedRow');
    });
    
    $('input').blur(function() {
        $(this).parent().parent().removeClass('highlightedRow');
    });
    
    </SCRIPT>
    to JavaScriptFunctions, but I get the error message "$" is undefined

    Could anyone suggest what I am doing wrong, or perhaps, a better method of achieving this. I also need a way of restricting this to the Catalogue pages.

    Thanks for any help.
    Lee
    Attached Files

    #2
    That's a jQuery function. Have you loaded jQuery?
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      Thanks for the pointer Norman. I've just tried adding:

      Code:
      <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
      to the JavaScriptFunctions but still no good.

      Comment


        #4
        also tried adding:
        Code:
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        but this stops the page content from displaying.

        Is jquery built in to Sellerdeck?

        Comment


          #5
          jQuery is not built-in to SellerDeck.
          also tried adding:
          You need </script> at the end of that line.
          Code:
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            oops.

            Thanks Norman. I've added it - no error message now, but the rows are not highlighting.

            Comment


              #7
              The code you've added to Standard JavaScript Header functions will run as soon as it is loaded by the browser. I.e. while still parsing the HEAD area and long before there are any INPUT tags on the page.

              Read a jQuery tutorial on how to use:-

              $(document.ready)

              E.g (untested).
              Code:
              <script type="text/javascript">
              $(document).ready(function() {
              	$('input').focus(function() {
              	    $(this).parent().parent().addClass('highlightedRow');
              	});
              
              	$('input').blur(function() {
              	    $(this).parent().parent().removeClass('highlightedRow');
              	});
              });
              </script>
              From now on it would be worth uploading and pointing us to a relevant page.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Thanks again Norman - works a treat.

                I am reconstructing my V11 site in V12, so have nothing uploaded at the moment, unfortunately; I will uploaded as soon as possible though.

                I need to limit this effect to products using the "Tabular Product List" Layout only - but I'm thinking that maybe this can't be done.

                Comment


                  #9
                  And replacing all:
                  Code:
                  $('input')
                  with:
                  Code:
                  $("input[name^='Q_']")
                  Will only activate the code on Quantity fields.
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    To make it work only on Tabular Product List, edit said layout / Click here to edit list layout settings / Overall Design / End Of List. Append your entire JavaScript there (remove it from elsewhere) and it will now only run on pages using said layout.
                    Norman - www.drillpine.biz
                    Edinburgh, U K / Bitez, Turkey

                    Comment


                      #11
                      Brilliant! Thanks.

                      I've also added two more ".parent()"s so that the css is added to the table row of the "Tabular Product List" Layout instead of the " Product list with Horizontal Dividers". I get a single block of color this way, rather that seeing the padding/borders with no background color.

                      It's now working exactly as I want it. Thanks for your help.

                      the final code is:

                      Code:
                      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
                      	<script type="text/javascript">
                      $(document).ready(function() {
                      	$("input[name^='Q_']").focus(function() {
                      	    $(this).parent().parent().parent().parent().addClass('highlightedRow');
                      	});
                      
                      	$("input[name^='Q_']").blur(function() {
                      	    $(this).parent().parent().parent().parent().removeClass('highlightedRow');
                      	});
                      });
                      </script>
                      </actinic:block>

                      Comment


                        #12
                        Happy to help.

                        Woot! The above was my 10,000th post.
                        Norman - www.drillpine.biz
                        Edinburgh, U K / Bitez, Turkey

                        Comment


                          #13
                          Congrats Norman.
                          Peblaco

                          Comment


                            #14
                            Thanks Louise. Onwards to 20,000!
                            Norman - www.drillpine.biz
                            Edinburgh, U K / Bitez, Turkey

                            Comment


                              #15
                              Wow, well done Norman! 10000 very useful bits of information is a great achievement.

                              Comment

                              Working...
                              X