Most Common Mistake With CF Pro Tools

Jamie Smith with CF Pro Tools and I want to share with you today the most common issue that I see when you're using CF Pro Tools add ons and the quick way to fix that problem. And the big issue is that the quotes that are in the JavaScript get converted in your text editor into what I like to call pretty quotes or smart quotes is what they're called in a Mac and that will actually cause you lots of problems and it will actually break the JavaScript and keep the code from working. So then you'll send me, try to get things work and it just won't work. You won't see what you want to have happen on the page happening and you'll send me a support ticket and say, hey, the code's broken, your stuff doesn't work. What's going on? How do I fix it? And then I'll jump in and take a look. And it all was just caused because your quotes got converted by your text editor like Notes or Pages into or Microsoft Word or Google Sheets, whatever. Google Docs got converted into pretty quotes and those pretty quotes are not valid JavaScript code. And so the JavaScript will break. So let me show what that looks like and show you how to fix it so that you can do it and make it work for you. So let's. The one that I see this most often with is, are the ones where you actually have to change the code. You have your own configuration to do. One of those most common ones is the CF promo code add on. So I've got that add on here in my members area. So I'm going to go in and I'm going to. I've got all this code highlighted. I'm going to hit command C to copy that code and then I'm going to go in and let's just jump into the Notes application. On a Mac this would be different if you're on Windows. Could be Microsoft Word or could be Pages or whatever. But this is just my, this is just the Mac Notes app. And let's blow this up a little bit. I'm going to zoom in and I'm going to zoom in a little bit more and then let's just paste that code in. There we go. So hopefully you can see that pretty good. Let's blow it up one more time. And there we go. So what you can see is these are three values that you'll need to add your own values into here at the top. This is all zeros. You'll need to put your own product ID in There same thing here. And you'll want to add your own promo code in here. And so what happens is if we're in the Notes app and we do that, we highlight. Highlight this stuff to put in our values. We put in single quotes. 1, 2, 3, 4, 5, 6, and put that there. You'll notice that these quotes here are straight. These haven't been touched, they haven't been modified. But you'll notice that as soon as I type these in, they went slanted. They've got a slant to them. Let me, let me. I don't know if it'll actually let me. Yeah, I'm zoomed in Max, so hopefully you can see this. Okay. But yeah, so you can kind of see that those are slanted. They're just a little bit. And that's actually going to break the code. And same thing's going to happen. And you'll notice as soon as I typed it, did it. Even though I didn't replace those quotes, it still changed them. And it's going to do the same thing here. Change this to my code. And it changed those quotes because there's surrounding text that I just changed. It converts those in. It does the same thing with double quotes. If I wanted to change these to double quotes, some. Some of the code will have double quotes in it. Notice as soon as I type that, it changes it to a slanted version of that code. Both of those will break the code. So now let's take this bad code. We know it's bad. And let's take this into the Click Funnels editor. I've got an order page here up already. Let's go into the settings and this code would normally go onto your order form page. So let's go into the footer code and you can see I had it already code installed there. So now if I paste that, that code in that I just copied from Notes, you'll notice I've got a bunch of green here. I've got a bunch of green values. I've got. Let me actually see if I can blow this up a little bit. There we go. So we can see that I've got nice green straight single quotes here. I've got nice green text here. I've got nice green values here. This is because this is a code editor inside of clickfunnels. It understands what, what these single quotes should be. And. And it understands that anything in between this should be green. Everything else is going to be purple because these are like variable names. They're not text. It's not Plain text. And you'll notice that we have in this editor, we get a little bit of a slant, a curl to those quotes and the values are in purple. We don't want that. That's bad. That means that this is not actually text. It's not recognized as text by the, by the editor. And so let's go ahead and save this page. Let me bounce back out to regular size here so we can do that. And let's go ahead and save that page. And then I'm going to show you what happens when you save that in and you do a preview. So we're going to preview this page and close out this tab here. And so now we've got this page loaded. And what's going to happen is if you had this up and working and this was, say, using this for your promo code, it just wouldn't work. You'd see all your products listed and it wouldn't be doing the thing that you'd expect it to do and you'd get upset. But if we take a right click and look on, right click on the page and just click Inspect, then we can go in and it's going to open up our web inspector. And this works pretty much the same. JavaScript or I'm sorry, Chrome, Firefox, Safari, they all have a similar, a similar tool here. Worded slightly different, but it's might say like inspect element or something like that. But it's click on Inspect and then you'll find a console link on all three. Again, they're all going to be same. If we click on that console, it's going to give us any errors that have happened on the page. The first one here is the one that we're concerned about. So this one says uncaught syntax error, invalid or unexpected token. That means that the JavaScript code has something in it that is not valid JavaScript and needs to be fixed. If we click on the little link over here to the side where it says order, order form, that's actually our URL. If we'll notice here, this is the URL. That means that that is code that is coming from this link, which is our page. And so if we click on that, it's actually going to open our code to that spot where the error is. And you'll notice that it's got it highlighted in yellow and you might not be able to see it very well, but it actually is highlighted in yellow and I don't know think I can actually blow that up at all. Let's see. Oh yeah, There it goes. It's blowing up for me. Okay, so you can see it's showing me, hey, this, you know, And I see my quotes are curled there. I see the others as well. But it's going to stop on the first one that it hits. So now let's go in and fix that. So if we just go into tracking code, go into footer code, and then go right in here in the editor, you can fix these things. You can just change them to regular straight quotes and it'll fix them. Going to leave this one alone because we're going to see what it looks like when we fix the one and we still have a problem. So let's go ahead and go in here. We're going to go back to order page, and if I refresh this page now, it's going to jump in and you'll notice now that it shows me that, hey, this one is good. But now I've got an error at this spot. And so it's. This is. The web inspector is telling me what's broken with the code. So this is the quick way to figure that out. So we're going to go ahead and now and fix these. Let's go ahead and fix this one. We're going to replace that with a regular straight quote, both of those. And then we're going to do the same thing here. Regular straight quote. And we've got one more broken one there. And regular straight quote. Now everything is looking good. Our code is looking like it should. We're going to go ahead and click Save and we're going to go ahead and go back to our order page and then click Refresh. We're going to refresh this up. And now our values are looking red in here, like they should. We've not got anything. If we click back on our console, we still have one error here. But this is because I didn't set up the products and do all that fun stuff. So. But our uncaught syntax error is gone. So our code is now good to go. So that's how you can fix it. If you've. If you've copied the code in, you've made your changes and you paste it into the ClickFunnels editor and your page is not working, it's throwing errors and it's giving you that uncaught syntax error, then that's how you can go in and fix it. Now I'm going to show you how to avoid the problem in the first place. So we know that Notes doesn't work. There's no way to fix notes. Notes is just going to break your stuff every time. So just don't use it. Just quit that and you're good to go on a Mac. You can use Text Edit if you're on Windows. I believe Notepad has a way to do the same thing. Just watch with me as I go through with TextEdit and. And you'll. You'll want to do similar things in Windows. Sorry, I don't have a Windows machine. I haven't used a Windows machine for 15 years now. So I'm going to go open up my Text Edit application and I'm going to go ahead and create a new file and I'm going to show you. We're going to start off with the default of how TextEdit works and show you that it breaks it as well. But then I'm gonna show you how to do it properly in TextEdit so it doesn't break it. So we're going to copy our code again. I've got it all highlighted. I'm hitting command C to copy. And then let's go ahead and bounce back to our TextEdit app. And then let's zoom in. And again, if I do this, it should zoom in for me. Scroll back here. Okay, now let's paste in our code. Wow, that's huge. Let's zoom out a little bit. Zoomed in a little too much. Zoom out. Okay, there we go. Okay, so now we've got our code. It's pretty, pretty big. Hopefully you see it well, but same thing. If I just go in and I want to type in a regular quote, all I did was hit a regular straight quote and it converted it into a curled, slanted version for me. And that's not going to work. That's going to break our stuff. So we want that. So let's get rid of that. Let's try format make plain text again. I've got my code, original code copied here. That's got good code in it. So I'm going to go ahead and paste that in. And now let's go ahead and try it and see if this works. So if I type in regular quote, you'll see right away it goes back to that slanted version. It's breaking again for me. We don't want that. So let's go ahead and get rid of all this. I'm just going to close this file. I'm going to delete that file. What we need to do is go into TextEdit, go into Preferences, and go down here where it says smart quotes and Smart dashes. I want to uncheck those two things. Uncheck that. It's being a little slow. There we go. Uncheck that. I like to set this to start out as plain text. If you don't use text edit a lot and you're just using this, using it for this code editing, just set it to be plain text because you need it to be plain text to start, not rich text. That's going to be what you can get the code editing working. Set it to plain text. Turn off smart quotes and turn off smart dashes and go ahead and close this out. And what I like to do is actually quit the TextEdit app now. Quit it entirely. So those preferences kind of store in and we start with a fresh session again. So now I'm going to go ahead and I'm going to go in and I'm going to open my TextEdit app and sorry, you're probably not seeing this because it's open and actually on another monitor first. So let me find TextEdit. There we go. So I'm going to fire up TextEdit and I'm going to go in now and open a new file and. And it's going to open in plain text mode for me. You'll notice I don't have the toolbars up at the top and nothing like that because I've gone into straight into plain text mode. In fact, if you look at format, it's going to say make rich text. I don't want that. I want it plain text. If it's enriched text, you can say make plain text. So I've got that and now I've got my code, my original code that is still good to go, still on my clipboard. So I'm going to paste that in. Now if I go up, we'll see that we've got regular straight quotes in here. And I'm going to go ahead and hit straight quote. Ah, Notice it didn't change anything. Didn't convert it into a slant. Now we're good. Awesome. And let's Change this one. 1, 2, 3, 4, 5, 7. And let's change this my code. Notice it's not changing any of my quotes. It's not making them curlies. And let's, let's do double quotes as well. And double quotes. 1, 2, 3, 4, 5, 6, double quotes. And get rid of that one. So it's leaving these the same as well. So that's how you need to, if you're going to not going to use a code editor, use TextEdit. And just make sure you turn off smart quotes, smart dashes, and make. Make it start in plain text mode, or at least use the format make plain text before you get started copying and pasting your code in so it doesn't convert those quotes automatically for you. The other thing that you can do is use a tool like Atom or, you know, a Sublime Text or something like that. That's an actual code editor. So this is Atom. Atom, this is the. This is the code editor that I use to write all the CFProtools scripts on. It's got kind of some cool features, you know, like I can do a little snippet that to start a new file. And so it's got. I just can type out CFPT and hit Enter and. And it will spit out a bunch of stuff. So a template for me to start from. So I like code editors. So if you're going to do this a lot, get you a code editor, it's free, why not use it and do that? Otherwise, text edit works. Just make sure you set the options up properly. Notepad, you should be able to do the same thing on Windows. Just make sure that you start it up, make sure that it's in plain text, and make sure that you. You've got any settings turned off that are going to do things like smart quotes or they might be called pretty quotes on Windows or whatever. And that will save you a ton of time and heartache and keep you from having to send in a support ticket for something as silly as a little quote that's slanted or curled. So hopefully this has been helpful and I appreciate all your support and we'll talk again real soon. Thanks.