0

I am using a theme called "ultimo" and it was working great until recently and I need some advice on how to go out debugging.

I believe it is an issue with the JS.

The first issue I noticed was the Slider on the home page stopped working. In fact the images just went away completely. Home Page: wishuponaquilt.posimhosting.com

The second thing I noticed was the navigation. Normally if you resize the browser the menu turns into an according menu. If you're on the home page and resize the browser that is not happening anymore. However if you are on a different page, say the About Page, the according menu will appear.

The third thing is the layered navigation on the shopping pages If you click on "Fabric" you will see that page. The little + icon isn't working when you click on it. You can view the themes demo (http://ultimo.infortis-themes.com/demo/second) to see how it should be working.

The fourth thing on the product page itself the description of the products should look and operate like this: http://ultimo.infortis-themes.com/demo/second/top1.html, but as you can tell it is not acting in that manner. wishuponaquilt.posimhosting.com/shop/tools/thread/mettler-silk-finish-thread-164-yards-7b.html

Thanks in advance for any help.

Improve this question
1
  • Try extension for chrome "Magento Debugger", it's located at w3site.org/magento_debugger
    – user26831
    Commented Jun 3, 2015 at 20:40

2 Answers 2

Reset to default
5

I just took a look at the link you provided of your Website ( I'm using Chrome Version 27.0.1453.93 and I also used Firefox 21.0 - both on Mac OS X 10.8).

The first thing that I noticed was that you do have a JavaScript error, which appears to be coming from some Facebook code not working correctly.

  • One thing to note is that when you notice that something JavaScript related is broken or not working correctly a good first reaction would be to see if there are any errors on your JavaScript console. This is because when you have a JavaScript error the rest of your JavaScript will not work properly ( as I understand it ).

When debugging JavaScript issues, the first thing I suggest doing is pulling up your browser's debugging tools and look at the 'console' section. This will usually display JavaScript errors ( as long as you didn't modify/alter your debugger's JavaScript console to not display errors ). This means you should be able to see the file and line number causing the issue.

In this case, my JavaScript debugger ( in Firefox and Chrome ) shows the following: zkzR01dWt_8.js:150. There's a file named 'zkzR01dWt_8.js' with a problem on line 150. Unfortunately, the widget code is minified (https://en.wikipedia.org/wiki/Minification_(programming)) so it's not easy to read. But I can tell you that there's something not working correctly. Because this JavaScript is causing an issue on your page, then this could cause you other issues. You'll want to find out why the Facebook widget code is broken first. This should help your situation.

Your slider is sliding when I open it. The images are also showing. Here is a link from one of the images I found on the slider: http://wishuponaquilt.posimhosting.com/media/wysiwyg/infortis/ultimo/slideshow/01.jpg But as described by @riskywebmaster, you have a lot of 404 errors. This is possibly because there is a mixup between where your theme is looking for images and where you actually have them on your build. You might want to check this out so that you can make sure you're placing the images in the right location.

Regarding the accordion menu, I'm seeing it just fine when I shrink the width of the web page enough.

I hope this has helps.

Improve this answer
2
  • Thanks so much! I was actually in the process of adding a lot of the images, that's probably why you're seeing the 404 errors. I realized that what was causing a majority of the issues was a formstack code I had embedded in static block in the header. Once I removed that most of my issues went away. I'm going to check out the debugging tools you mentioned to clean up any other errors. Thanks so much for taking the time to respond!
    – Christina Rule
    Commented Jun 5, 2013 at 17:25
  • You're welcome! Glad that helped ;). Here's some links for JavaScript Debugging: Chrome Browser - developers.google.com/chrome-developer-tools/docs/console FireFox Browser - developer.mozilla.org/en-US/docs/Debugging_JavaScript ( Follow the Browser/Web Console links, they show pictures and walk you through using the tools ) FireBug ( extremely popular debugging Addon for FireFox ) - getfirebug.com/commandline That should get you started on the right foot.
    – ryanF
    Commented Jun 5, 2013 at 18:25
2

Right away I can see there are LOTS of 404 errors. If you're seriously about running a website, Google chrome is your best friend. If you don't have it, download it. If you have it, open up your site and then click "F12" ... this will open up developer tools. On the bottom right you'll see a tiny red circle with an X ... click on that to expand the error report. You'll see items like the following:

Failed to load resource: the server responded with a status of 404 (Not Found) http://wishuponaquilt.posimhosting.com/media/wysiwyg/infortis/brands/westminster_fibers,_inc..png Failed to load resource: the server responded with a status of 404 (Not Found) http://wishuponaquilt.posimhosting.com/media/wysiwyg/infortis/brands/windham_fabrics.png

I'm not sure if my eyes are playing tricks on me but it looks like you have commas as part of your image names? This is definitely not a good idea. ","

My best suggestion would be to start with a fresh installation of your theme and make changes 1 at a time so that if something breaks, you roll it back. Sometimes this is easier said than done, but it's good to try to follow it as close as possible.

Improve this answer
2
  • Thanks so much! I was actually in the process of adding a lot of the images, that's probably why you're seeing the 404 errors. I realized that what was causing a majority of the issues was a formstack code I had embedded in static block in the header. Once I removed that most of my issues went away. I have chrome and I'm on a mac, how would I get the f12 function? Thanks so much for taking the time to respond!
    – Christina Rule
    Commented Jun 5, 2013 at 17:27
  • I don't have a mac but on a PC I'm able to open developer tools by either clicking on "F12" or you can right click and "inspect element" ... not sure how Mac handles either one of those but I'm sure there's an equivalent.
    – riskywebmaster
    Commented Jun 6, 2013 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.