Ready Theme id's are not unique

[AHerb]

According to W3, attribute "id" must be unique and may be used only once per page.

Out of the box "Levels" and "Divino" themes have id="js-mini-basket-count" twice in the header. Same with id="js-navigation-set". I didn't check all themes, but there may be more.

So... to fix id="js-mini-basket-count" issue:

1. Find all instances of id="js-mini-basket-count" in the global header
2. Copy/move id attribute value into the class. You should end up with something like... class="mini-basket-count inline-block js-mini-basket-count"
3. Delete id attribute from the same element.
4. Open /mm5/themes/YOUR-THEME/js/scripts.js
5. Find #js-mini-basket-count and replace it with .js-mini-basket-count

Make sure you erase the javascript cache before you do the test, to be sure you've got the updated javascript file loaded.
Test the result and be happy :-)


example (levels theme):

----- global header -----
find: <span class="mini-basket-count inline-block" id="js-mini-basket-count">
after modification:  <span class="mini-basket-count inline-block js-mini-basket-count">

---- scripts.js -----
find: miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
after modification: miniBasketLinkCount = $('.js-mini-basket-count, #js-mobile-basket-button .notification'),

p.s. will check how to fix js-navigation-set later

[Matt Zimmermann]

There are some inconsistencies in the coding of the older ReadyThemes, including ID usage. Some of the themes have this resolved by a conditional used in conjunction with the Client Dimensions item. The next generation of ReadyThemes will have this, and other issues, covered. In the mean time, solutions like the one you found will work.