Announcement

Collapse
No announcement yet.

Click funnels working coupon code with 'checking' animation and price drop.

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

  • Click funnels working coupon code with 'checking' animation and price drop.

    Working Demo: https://threatlevelred.clickfunnels.com/couponcodedemo

    Steps:

    Per screenshot below add your products to the page - you need to add 2 sets of products



    Create your order page - add a button - there are some hidden elements on this page which i'll show in another screenshot.








    Change the following code w/ all the respective input values of your discounted/originally priced items

    HTML Code:
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <script type="text/javascript">
      $( document ).ready(function() {
          
        //first hide the discounted items
          $('input[value="644348"]').parents('div').eq(1).hide();
          $('input[value="644349"]').parents('div').eq(1).hide();
          $('input[value="644350"]').parents('div').eq(1).hide();
          $('input[value="644351"]').parents('div').eq(1).hide();
          $('input[value="644352"]').parents('div').eq(1).hide();
          
          //set the click on the item you want defaulted - (ensure obviously this isn't one of the hidden items)
        $('.elOrderProductOptinProductName input[value="644342"]').click();
    
      
      });
      
    
      
      $('div[data-title="applycouponbutton"] > a').click(function(){
          //create a button in CF - call it "applycouponbutton"  
          console.log("Button Clicked");
          
          $('div[data-title="confirmingcoupontext"]').show();
          $('div[data-title="couponprogressbar"]').show();
          
          $('div[data-title="coupon code input"] :input').attr("disabled", true);    
          $('div[data-title="coupon code input"] :input').addClass('input-disabled');
          
          setTimeout(function(){
            $('div[data-title="confirmingcoupontext"]').hide();
            $('div[data-title="couponprogressbar"]').hide();
            $('div[data-title="applycouponbutton"] > a').hide();
            $('div[data-title="Coupon Code Applied"]').show();
            $('div[data-title="orderpagetimer"]').show();
              /*hide non discounted products*/
            $('input[value="644342"]').parents('div').eq(1).hide();
              $('input[value="644344"]').parents('div').eq(1).hide();
              $('input[value="644345"]').parents('div').eq(1).hide();
              $('input[value="644346"]').parents('div').eq(1).hide();
              $('input[value="644347"]').parents('div').eq(1).hide();
          
              
              
              
        /*bring in new discounted products  */
        
            /*1 pack - feature as bold */
            $('input[value="644348"]').parents('div').eq(1).addClass('featureditem');
            $('input[value="644348"]').parents('div').eq(1).show().effect("pulsate", 1000);
            
            /*2 pack - feature as bold */
            $('input[value="644349"]').parents('div').eq(1).addClass('featureditem');
              $('input[value="644349"]').parents('div').eq(1).show().effect("pulsate", 1000);
              
              $('input[value="644350"]').parents('div').eq(1).show().effect("pulsate", 1000);
              $('input[value="644351"]').parents('div').eq(1).show().effect("pulsate", 1000);
              $('input[value="644352"]').parents('div').eq(1).show().effect("pulsate", 1000);
              //'click' the one you want default selected - in this case it's the top
              $('.elOrderProductOptinProductName input[value="644348"]').click();
          
          }, 4500);
          
          
          
      });
      
     
    </script>
    CSS to bold the items we want (think your 'best value' or 'most popular' options) as well as to disable the input for the coupon after it's been run to change the box to grey.



    Need to create the elements that are by default hidden



    Here's what they look like unhidden - again make sure you TITLE these.





    Voila. Hopefully I didn't forget anything.

    NOTE: You could modify this pretty easily to do a jsonp ajax call onClick of the apply coupon button to another domain - and then determine if the entered code matched an array of approved codes (ie to be able to actually issue pubs/sources UNIQUE working codes). As of now anything inputted as text in the coupon box will trigger the code.



    Any questions just ask.
    Last edited by Lars; 06-13-2016, 06:26 PM.

  • #2
    Thanks for sharing.

    Comment


    • #3
      Awesome..Thank you

      Comment


      • #4
        Awesome! Thank you

        Comment


        • #5
          Awesome! Thanks for sharing

          Comment


          • #6
            That is sweet. Thanks for sharing.

            Comment


            • #7
              That's really good! Should really improve conversions.

              Comment

              Working...
              X