Advertisement
Guest User

Canada Post Parcel shipping services page

a guest
Nov 12th, 2015
160
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.63 KB | None | 0 0
  1. Machine: MacBook Pro (Retina, Mid 2012)
  2. OS: OS X Yosemite 10.10.5 (14F27)
  3.  
  4. ## Url
  5. https://www.canadapost.ca/web/en/pages/parcelscon/default.page
  6.  
  7.  
  8. ## Issues
  9. ### Chrome
  10. *With Chrome the tabs (Canada, U.S., International) are un-switchable (hence one
  11. cannot view the data the contain). *This is now working correctly.
  12.  
  13. Many images are clearly broken (not loaded).
  14.  
  15. ### Firefox
  16. With Firefox the images are also broken (but silently) and tabbing does work.
  17.  
  18.  
  19. ## Test
  20. I booted up a BrowserStack machine (OSX Yosemite, Chrome 48) and there was no
  21. issue. I noticed that the Chrome version was Version 46.0.2490.71 (64-bit)
  22. however, and it was a Mac mini (Late 2012). So slightly different than my setup.
  23.  
  24.  
  25. ## Conclusions
  26. 1. One thing I noticed is that the images on my machine are appended with
  27. '_retina_en.png' where as on BrowserStack it is simply '_en.png'.
  28. The 'retina_en.png' and '@2x.png` images indeed, do not exist at the
  29. location the site is pointing to.
  30.  
  31. 2. Clearly there is also hidden "ShareThis" functionality on the page asking for
  32. a key. Though this is gracefully degrading.
  33.  
  34. 3. There is an attempt to fire the "click" event on an element that doesn't exist.
  35. This is likely to have been what caused the behavior I was experiencing in Chrome.
  36.  
  37.  
  38. ## Fixes
  39. 1. The Foundation Framework is trying to use the "retina" paths provided.
  40.  
  41. For example:
  42. ```
  43. 538: <th class="headtitle center width25p"><a href="/web/en/products/details.page?article=priority_our_fastest"><img src="/assets/img/en/landingpages/logos/priority_en.png" data-interchange="[/assets/img/en/landingpages/logos/priority_en.png, (default)], [/assets/img/en/landingpages/logos/priority_retina_en.png, (retina)]" alt="Priority" /></a></th>
  44. ```
  45.  
  46. Either get those files to the right place, or get rid of the references to them.
  47.  
  48. 2. Remove/disable hidden "ShareThis" functionality. Or provide a "Publisher Key."
  49.  
  50. 3. Check to see if any elements with the "hash-click" class actually exist before
  51. attempting to fire the "click" event.
  52.  
  53. ```
  54. 950: window.onload = function () { $('.hash-click')[0].click(); }
  55. ```
  56.  
  57. could be:
  58.  
  59. ```
  60. window.onload = function () {
  61. var $hashClickElement = $('.hash-click');
  62.  
  63. if(0 < $hashClickElement.length) {
  64. $hashClickElement[0].click();
  65. }
  66. }
  67. ```
  68.  
  69. However it seems a bit odd that the `class` is added on `$(document).ready` and
  70. then "clicked" on `window.load`. One reason maybe to spread out the script load
  71. by finding the hash for the tab and updating the class asap, then once the entire
  72. page loads "click" to end up at the right position on the page without risk of
  73. newly loaded content "pushing down" the rest of the page. While also making sure
  74. the click event for the tabs are ready to go.
  75.  
  76. The amount of work the first step takes is questionable however. It may be just
  77. as simple to put it all in the `window.load` handler.
  78.  
  79. ```
  80. window.onload = function () {
  81. if(window.location.hash){
  82. $('dl.tabs dd a').each(function(i){
  83. var hash = '#' + $(this).attr('href').split('#')[1];
  84. if(hash == window.location.hash){
  85. $(this).click();
  86. }
  87. });
  88. }
  89. }
  90. ```
  91.  
  92. Furthermore it is a bit strange that the line creating the hash is splitting
  93. out the `#`, getting the text value alone, and then adding a `#` back on again
  94. to perform a match...?
  95.  
  96. It should probably be the following:
  97. ```
  98. var hash = $(this).attr('href');
  99. ```
  100.  
  101. Unless there is expected to be unnecessary text before the `#` such as,
  102. perhaps a URL. But that doesn't seem to be the case. Take the first tab
  103. 'Canada' on the page. Its href is: `href="#panel2-1"` which means the
  104. line I provided should work. As such the variable could be completely
  105. eliminated anyway:
  106.  
  107. ```
  108. window.onload = function () {
  109. if(window.location.hash){
  110. $('dl.tabs dd a').each(function(i){
  111. if($(this).attr('href') == window.location.hash){
  112. $(this).click();
  113. }
  114. });
  115. }
  116. }
  117. ```
  118.  
  119.  
  120. ## Console Output
  121.  
  122. ### Firefox 42.0
  123. ```
  124. button.js:1 Please specify a ShareThis Publisher Key
  125. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/priority_retina_en.png"
  126. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/icons/check@2x.png"
  127. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/icons/extracost@2x.png"
  128. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_retina_en.png"
  129. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/regular_parcel_retina_en.png"
  130. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/icons/not-included@2x.png"
  131. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/priority_worldwide_stacked_retina_en.png"
  132. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_usa_retina_en.png"
  133. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/tracked_packet_retina_en.png"
  134. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/expedited_parcel_usa_retina_en.png"
  135. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_international_stacked_retina_en.png"
  136. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/international_parcel_stacked_retina_en.png"
  137. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/tracked_packet_international_stacked_retina_en.png"
  138. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/small_packet_international_stacked_retina_en.png"
  139. "NetworkError: 404 Not Found - https://www.canadapost.ca/assets/img/en/landingpages/logos/small_packet_usa_stacked_retina_en.png"
  140. TypeError: $(...)[0] is undefined
  141.  
  142. window.onload = function () { $('.hash-click')[0].click(); }
  143.  
  144. default.page (line 950, col 33)
  145. ```
  146.  
  147. ### Chrome 46.0.2490.86 (64-bit)
  148. ```
  149. button.js:1 Please specify a ShareThis Publisher Key
  150. For help, contact support@sharethis.com
  151. https://www.canadapost.ca/assets/img/en/landingpages/logos/priority_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  152. https://www.canadapost.ca/assets/img/icons/check@2x.png Failed to load resource: the server responded with a status of 404 (Not Found)
  153. https://www.canadapost.ca/assets/img/en/landingpages/logos/regular_parcel_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  154. https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  155. https://www.canadapost.ca/assets/img/icons/extracost@2x.png Failed to load resource: the server responded with a status of 404 (Not Found)
  156. https://www.canadapost.ca/assets/img/icons/not-included@2x.png Failed to load resource: the server responded with a status of 404 (Not Found)
  157. https://www.canadapost.ca/assets/img/en/landingpages/logos/priority_worldwide_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  158. https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_usa_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  159. https://www.canadapost.ca/assets/img/en/landingpages/logos/expedited_parcel_usa_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  160. https://www.canadapost.ca/assets/img/en/landingpages/logos/tracked_packet_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  161. https://www.canadapost.ca/assets/img/en/landingpages/logos/small_packet_usa_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  162. https://www.canadapost.ca/assets/img/en/landingpages/logos/xpresspost_international_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  163. https://www.canadapost.ca/assets/img/en/landingpages/logos/international_parcel_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  164. https://www.canadapost.ca/assets/img/en/landingpages/logos/tracked_packet_international_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  165. https://www.canadapost.ca/assets/img/en/landingpages/logos/small_packet_international_stacked_retina_en.png Failed to load resource: the server responded with a status of 404 (Not Found)
  166. default.page:950 Uncaught TypeError: Cannot read property 'click' of undefined
  167. ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement