Missing Buttons (My Image Uploader)

[Nik Grey]

Hi All,

 

I had a couple of people tell me that there was no way to upload an image in some of my products - of course as soon as I checked with my machines I could see everything !

I was away from home last night and noticed that indeed the buttons were not appearing ! panic set in...

 

I am using the latest version of Firefox on a Mac running osx 10.9.1 - my iPad (V2) also shows these buttons.

 

Obviously if my 'Image Upload' buttons dont appear nobody is going to be able to buy anything from my Cubecart - I have been selling a lot of 'Bespoke' designs but people are contacting me via email to set those up..

 

So, if possible I would like to try to find out what the issue is - I cant ask the developer who created this as he will not be in work again until Monday, and this problem is causing me embarrassment..

 

This tool was created using the Hooks - I am on version 5.2.8

 

Here are some screen shots to to illustrate the problem:

 

Firefox (Where is it working - the Green 'Select File' button)

 

Chrome (No Button)

 

Safari (Missing Button)

 

So, where do I start ?

 

[bsmither]

The "option" starts as a textbox input form element. There must be some javascript that converts that textbox into a file-type input form element, also providing a progress bar and result status.

<label class="control-label" for="product-option-1"> Upload Image </label>
<input id="product-option-1" class="input-fill" type="text" required="" data-price="" data-symbol="+" name="productOptions[1][]">

Then, in some embedded javascript, if there is a node whose ID is "product-option-1", then hide it and instead display:

<span class="btn btn-success fileinput-button">
  <i class="glyphicon glyphicon-plus"></i>
  <span>Select file...</span>
  <input id="fileupload-product-option-1" type="file" name="files[]" />
</span>
<div id="progress-product-option-1" class="progress" style="padding: 0;">
  <div class="progress-bar progress-bar-success" style="padding: 0;"></div>
</div>

So, for this javascript to not function, some earlier javascript must have crashed.

 

If the File Upload javascript package works on Firefox, but not Chrome or Safari, then I would start looking at the BlueImp package's "known issues" on its GitHub repository.

[Nik Grey]

it does work on my Firefox here, but not the pc version I was having to use last night

 

Do the buttons show for you Brian ?

[bsmither]

Yes, the javascript functions correctly. The textbox is hidden and the code I posted above is appended into the form.

[Nik Grey]

ok, I guess I am going to have to close the entire Mugs section now until I get it fixed - I haven't made a single penny from the listed products as yet, this is probably the reason.

 

I had a random bill from the people who made the tool earlier this month so I am reluctant to ask for more help

[Nik Grey]

I just tested this on a stock skin (tested the upload tool again) and it's working across all browsers.

 

I did get a response from Homar as to the reason my Lettering Tool was not working (Brian helped me get that fixed) - I did send this to you Brian for your ref:

 

The Vector theme does include JQuery. It does so through the head.js script (http://headjs.com/). If you scroll to the end of the /js/application.js file, you will see the following lines of code:

=====
/** Load Scripts **/
head.js(
{jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'},
{livequery: skin_path + '/js/plugins/jquery.livequery.min.js'},
{outer: skin_path + '/js/plugins/jquery.outer.min.js'},
{chosen: skin_path + '/js/plugins/jquery.chosen.min.js'},
{bar: skin_path + '/js/plugins/jquery.bar.min.js'},
{flexslider: skin_path + '/js/plugins/jquery.flexslider.min.js'}
);
=====

This allows the various JavaScript assets to be loaded asynchronously as and when they are required. This principle is central to the optimization effort that I put into developing the theme. However, it means that whereas a developer would normally use the following code snippet to run JavaScript code when JQuery is ready:

=====
$(function() {
// Code to be executed on page load goes here...
});
=====

You now need to use the following:

=====
head.ready(function() {
// Code to be executed on page load goes here...
});
=====

 

..So, it looks like he is telling me the changes I need to make ! The problem is I dont know what: "// Code to be executed on page load goes here..." is !

[bsmither]

So, let's try this:
 
In the skin file main.php, near the end, there will be two blocks of javascript code within <script type="text/javascript"> tags: one for the Upload Image code, and one for the oLark code.
 
For the oLark code, note how it basically starts with {literal} and ends with {/literal}. We will be doing that to the Image Uploader code as well.
 
Find:

<script type="text/javascript">
/*jslint unparam: true */
/*global window, $ */

    var sOptString = "Upload Image";

About 70 lines later, find:

          $(function(){ 
              'use strict'; 
 
              jQuery("div.options label").each(function(){

Change:

$(function(){

to:

head.ready(function(){

This is what I guess Homar is referring to.

 

Finally, as I mentioned, add {literal} and {/literal} accordingly:

<script type="text/javascript">{literal}
...
{/literal}</script>

[bsmither]

Here's the thing: Even without the edit -- the File Upload javascript runs (to the point of making the file type input form element as that's all I tested for).

 

If the head.ready(function(){code}); is really that critically important, then the script wouldn't run - period. But it does. Except on a few occasions for reasons not yet irrefutably identified.

 

Based on that, I cannot agree with Homar. I do not agree with, "You now need to use the following:". Requiring this edit for all of the billions and billions* of the statement $(function(){code}); is so incredibly absurd.

 

(* I've been watching Cosmos. I highly recommend it.)

[Nik Grey]

I think the main.php file you refer to is at:

 

/greyprint.co.uk/skins/vector/templates

 

.. so I search that for:

<script type="text/javascript">
/*jslint unparam: true */
/*global window, $ */

    var sOptString = "Upload Image";

Which is not there ! So I am stuck already - unless I found the wrong main.php file ?

 

 

 

This is what is at the end of my main.php file:

<!-- Plugin JavaScripts -->
		{foreach from=$JS_SCRIPTS key=k item=script}
  <script type="text/javascript" src="{$STORE_URL}/{$script|replace:'':'/'}"></script>
  {/foreach}
  {if !empty($IMAGE_UPLOAD_JS)}{$IMAGE_UPLOAD_JS}{/if}
  
		<!-- JanRain JavaScript -->
		{if isset($JANRAIN)}{$JANRAIN}{/if}

		<!-- Live Help JavaScript -->
		{if isset($LIVE_HELP)}{$LIVE_HELP}{/if}
	
		<!-- EU Cookie Compliance -->
		{if $COOKIE_DIALOGUE}
			<form id="cookieControl" action="{$VAL_SELF}" style="display: none;" method="POST">
				<input type="checkbox" name="accept_cookies" checked="checked" value="1" />
				<input type="text" name="accept_cookies_submit" value="{$LANG.common.continue}" />
			</form>
			<script src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
			<script src="{$STORE_URL}/skins/{$SKIN_FOLDER}/js/libs/cookieControl-4.1.min.js"></script>
			{literal}
				<script type="text/javascript">//<![CDATA[
					cookieControl({
						introText: '<p>This site uses some unobtrusive cookies to store information on your computer.</p>',
						fullText: '<p>Some cookies on this site are essential, and the site won't work as expected without them. These cookies are set when you submit a form, login or interact with the site by doing something that goes beyond clicking on simple links.</p><p>We also use some non-essential cookies to anonymously track visitors or enhance your experience of the site. If you're not happy with this, we won't set these cookies but some nice features of the site may be unavailable.</p><p>By using our site you accept the terms of our Privacy Policy.</p>',
						position: 'left', // left or right
						shape: 'triangle', // triangle or diamond
						theme: 'light', // light or dark
						startOpen: true,
						autoHide: 6000,
						subdomains: true,
						onAccept: function() {
							$('#cookieControl').submit();
						},
						onReady: function(){},
						onCookiesAllowed: function(){},
						onCookiesNotAllowed: function(){},
						countries: '' // Or supply a list ['United Kingdom', 'Greece']
					});
				//]]></script>
			{/literal}
		{/if}
	
		<!-- Debugging -->
		{if $fusion->get('smarty_debug')} {debug} {/if}
		{if isset($DEBUG_INFO)} {$DEBUG_INFO} {/if}
		
		<!-- Used for styling CubeCart credits -->
		<div class="credits-sep"></div>
	</body>
	</html>
{else}
	<!doctype html><html><head></head><body>Fusion Framework Required</body></html>
{/if}

As you were able to say 'Around 70 lines later" it seems like you are looking at a different file all together !

[bsmither]

Ok, I think I see what I didn't realize before. The Image Uploader plugin is also modifying the skin's code to add it's javascript links and embeded code. (Where it does that I don't know. But it's probably triggered with a hook.)

 

So, start by looking in /modules/plugins/Image_Uploader/scripts/ for any file that starts with

<script type="text/javascript">

A javascript file that the browser brings in from a link will not have that tag (the tag is already in the HTML with a src attribute). But a plugin that adds actual javascript code directly to the template will need to start that code with the tag.

 

If there is no file that starts with that tag in that folder, then the hook must be adding the javascript code directly, constructing the code by building it up from separate PHP strings in the hook.

[bsmither]

Found it:

/modules/plugins/Image_Uploader/skin/templates/product.imageupload.tpl, line 179.

[Nik Grey]

ok, I'm with you. I have that file open at 179.

 

Doesn't look anything like what you posted above ?

[Nik Grey]

ok, just changing that Dollar sign to 'head.ready" has it working on Safari and Chrome now - I didnt get a chance to add the  "{literal} and {/literal}" anywhere as there is no "<script type="text/javascript">" to be seen !

 

I now have 2x 'Select File' buttons on each product - and neither of those seem to work..  In Safari or Chrome yet they continue to work in Firefox !

 

Maybe it's this 'Literal' bit that's missing?

[bsmither]

Line 112 and line 213.

 

However, it seems this file, which is actually a Smarty template, has been coded with sufficient care to ensure there is no CSS or javascript that would trip up Smarty.

 

So adding {literal} and {/literal} would not be needed.

[Nik Grey]

I can see it now at 115 but nothing around 213 - I use TextWrangler for this, I don't understand why they would provide a 'Search' function which doesn't seem to work !

[Nik Grey]

ok, I have just realised that things are not working properly with Firefox either - on every browser (Firefox, Chrome and Safari) I am getting 2x Green 'Select File' buttons

 

And neither of them work

[bsmither]

Watching the Net tab on Firebug shows that this so-called "responsive" skin is allowing the browser to fetch the Image Loader javascript before the browser is told to load the actual jQuery framework.

 

Thus, the Console tab in Firebug is showing six instances of jQuery and $ being not defined.

 

I've looked at the headJS site and I'm of the opinion this makes applying outside party's additions a royal bitch of a problem.

 

This, and the use of LESS, makes troubleshooting just not worth it. Vector may have a sort of visual appeal, but it definitely sucks at being outside developer friendly.

[Nik Grey]

I understand what you are saying Brian - such a shame as I love the visual appeal.

 

I'm stuck between having a nice looking site who's checkout routine is perfect ( but a crucial tool that doesn't work) or a standard look with tools that do work but a checkout which confuses people

 

Either way, at this moment I still cant achieve what I set out to do - the way things stand

 

Thanks for your help again, I know you put a lot of time into my problems.

[Nik Grey]

There is still something I have not tried - in post 5 >Here there is a suggestion which I did not get the chance to try as I thought we had fixed this issue !

 

Here it is:

 

 

I'd go as far as to say that it's not unreasonable to expect a skin to not rewrite the javascript calls so that it, and it exclusively has access to jquery... that I think it what it seems to be doing anyhow.. not seen the particular script before, but essentially it seems to be making jquery and all the files the skin uses load only when the document has loaded, by storing them in an object which has a ready function of its own, presumably for more optimal page loads.

 

Loses out on a fair bit of flexibility doing that though, and sortof breaks our one completely. In an attempt to make the code changes as minimal as possible I went for a purely plugin based route where the js was loaded via the skin

 

Have a try of this Nik:

On the vector skin, there's a file in /js/ called application.js, at the bottom there's this bit:

 

{jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'},

 

You can try commenting that out:

 

// {jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'},

 

Then just grab the same jquery call from one of the standard skin files (main.php), and try just bunging it in the vector header?

 

I'm not 100% if the fix will work unfortunately.. it's plausible that whatever is going on in the header object, it might try and reference the js by the jquery parameter it's sending with the filename, in which case it'll just break everything no doubt. Won't hurt to try though, you can always set it back how it was

 

I'm unsure about this bit:

 

"Then just grab the same jquery call from one of the standard skin files (main.php), and try just bunging it in the vector header?"

 

What does a jquery call look like and where is the vector Header?

 

 

The buttons appear, and work on my version of Firefox (on my Mac) - they appear but dont work in Chrome, and in Safari the (the buttons) don't appear at all !

And Brian can at least see the buttons on his machine - Dint know if they work though.

[bsmither]

Using the above suggestion, let's try this:

 

In the file /skins/vector/js/application.js, near the bottom, remove this line:

{jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'},

Next, in the file /skins/vector/templates/main.php, near line 74, change:

Was:
<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
Now:
<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js" data-headjs-load="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

According to the HeadJS docs, putting this load attribute in the script tag will unconditionally load that file after the HeadJS program comes in.

 

Thus, we should now have jQuery available immediately, regardless of when the skin decides it is needed.

 

I guess.

[Nik Grey]

Thanks Brian,

 

Worth a try but it didn't work - it removed all of the products from each category which I didn't expect.

The buttons weren't appearing at all with that edit

[Toucan Web Design]

Sorry for not jumping in on this, been off ill for a week

 

The image uploader was trying to run some jquery that I could tell, which the skin was somehow setting to only ever load after the rest of the page content, meaning no other plugins could access jquery, was a bit odd

 

Did you get any javascript errors when you tried that Nik? If you didn't check, could you try setting it again and just have a look in the console using web developer tools on the browser, then paste them here? Will likely help debug

[Nik Grey]

I just sent you a list of browsers and versions with the problems associated with each one. Also noticed that the Firefox on my Mac does not show the Green button sometimes

 

I'm never sure if I am looking at the correct part of Firebug but since we are looking for errors I am in Console/Errors:

 

[Toucan Web Design]

Did you say it was calling in all the various bits contained within the head.ready bit asynchronously Brian? What I'm wondering is if it's happening in certain browsers due to load optimisations and whatnot.. as it only tries to call in the javascript when the page is loaded I presume, might be happening earlier (or later) for safari/chrome/firefox, and could explain why it's being so random in the results.

 

Could also be down to internet speed, which would explain why it broke on firefox via a different network

 

Anyhow, just saw the reply Nik, that's indicating that jQuery isn't loaded when it gets to the point where tries to run the imageupload template yes, all of those files are packs within that template. I'd say getting it to run via head.ready is likely going to be the safest option, but I haven't a clue what might have been causing that bug you mentioned where it loaded up the button twice, unless it's somehow calling the ready function of the loader twice, which would cause a ton of other errors anyway, jquery does not like being loaded twice usually

[Nik Grey]

I was implementing a hopeful fix with the help of Brian, that's when we started getting the 2 buttons - I removed that so we are now back to where we started.