Post by DAJOGA » Fri Sep 26, 2014 11:51 pm

Hi there ;)

I have two questions/problems:

1. Is it possible(extension or php trick) upload product pictures without image manager directly from My Computer window, for example like it is possible on facebook?!

2. Is it possible(extension or php trick) create product filters from product categories, so when I'll need to set filters for specific categories, I will be able to choose it from a short list of filters(just for current category), and not from a huge list of all the filters.

Newbie

Posts

Joined
Sun Jul 27, 2014 6:41 pm

Post by shbakawy » Sat Sep 27, 2014 1:39 am

hi friend
firstly i found solution for your first request but it is not complete because it work for main product image but not work for extra image for product , the problem is in some javascript code .
now i'll till you what i reach to :

open admin/view/template/catalog/product.tpl

In code that responsible of product image put

Code: Select all

id="anyword"
to the following :

Code: Select all

   <a onclick="image_upload('image', 'thumb');" id="anyword"><?php echo $text_browse; ?></a>
and clear
onclick="image_upload('image', 'thumb');"
to become

Code: Select all

 <tr>
              <td><?php echo $entry_image; ?></td>
              <td><div class="image"><img src="<?php echo $thumb; ?>" alt="" id="thumb" /><br />
                  <input type="hidden" name="image" value="<?php echo $image; ?>" id="image" />
                  <a id="anyword"[/highlight]><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb').attr('src', '<?php echo $no_image; ?>'); $('#image').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
            </tr>
now in end of page
put

Code: Select all

<script type="text/javascript" src="admin/view/javascript/jquery/ajaxupload.js"></script>


<script type="text/javascript"><!--
$(document).ready(function() {    
	new AjaxUpload('#anyword, {
		action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#image').attr('value')),
		name: 'image',
		autoSubmit: true,
		responseType: 'json',
      
		onChange: function(file, extension) {
			
			this.setData({'directory': ''});
         this.submit();
		},
      
		onSubmit: function(file, extension) {
			$('#upload').append('<img src="admin/view/image/loading.gif" class="loading" style="padding-left: 5px;" />');
		},
		onComplete: function(file, json) {
			if (json.success) {
            $('#image').attr('value','data/user/'+file);
				$.ajax({
					url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#image').attr('value')),
					dataType: 'text',
					success: function(text) {
						$('#thumb').replaceWith('<img src="' + text + '" alt="" id="thumb" />');                        
					}
				});
			}
			
			if (json.error) {
				alert(json.error);
			}
         			
			$('.loading').remove();	
		}
	});
	
	
	});
	
//--></script>
for extra image of product
the responsible code is :

Code: Select all

   <div id="tab-image">
          <table id="images" class="list">
            <thead>
              <tr>
                <td class="left"><?php echo $entry_image; ?></td>
                <td class="right"><?php echo $entry_sort_order; ?></td>
                <td></td>
              </tr>
            </thead>
            <?php $image_row = 0; ?>
            <?php foreach ($product_images as $product_image) { ?>
            <tbody id="image-row<?php echo $image_row; ?>">
              <tr>
                <td class="left"><div class="image"><img src="<?php echo $product_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" />
                    <input type="hidden" name="product_image[<?php echo $image_row; ?>][image]" value="<?php echo $product_image['image']; ?>" id="image<?php echo $image_row; ?>" />
                    <br />
                    <a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="imagerow"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb<?php echo $image_row; ?>').attr('src', '<?php echo $no_image; ?>'); $('#image<?php echo $image_row; ?>').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
                <td class="right"><input type="text" name="product_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $product_image['sort_order']; ?>" size="2" /></td>
                <td class="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
              </tr>
            </tbody>
            <?php $image_row++; ?>
            <?php } ?>
            <tfoot>
              <tr>
                <td colspan="2"></td>
                <td class="left"><a onclick="addImage();" class="button"><?php echo $button_add_image; ?></a></td>
              </tr>
            </tfoot>
          </table>
        </div>
and at javascript

Code: Select all

<script type="text/javascript"><!--
var image_row = <?php echo $image_row; ?>;

function addImage() {
    html  = '<tbody id="image-row' + image_row + '">';
	html += '  <tr>';
	html += '    <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';
	html += '    <td class="right"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" size="2" /></td>';
	html += '    <td class="left"><a onclick="$(\'#image-row' + image_row  + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
	html += '  </tr>';
	html += '</tbody>';
	
	$('#images tfoot').before(html);
	
	image_row++;
}
//--></script>  
and

Code: Select all

<script type="text/javascript"><!--
function image_upload(field, thumb) {
	$('#dialog').remove();
	
	$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
	
	$('#dialog').dialog({
		title: '<?php echo $text_image_manager; ?>',
		close: function (event, ui) {
			if ($('#' + field).attr('value')) {
				$.ajax({
					url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
					dataType: 'text',
					success: function(text) {
						$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
					}
				});
			}
		},	
		bgiframe: false,
		width: 800,
		height: 400,
		resizable: false,
		modal: false
	});
};
//--></script> 
i did the following to the above codes

Add id="someword" to the html line

Code: Select all

      <a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="someword">
and at javescript line

Code: Select all

html += '    <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="someword"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';
	
and add next jquery code

<script type="text/javascript"><!--

function image_upload(field, thumb) {
var image_row = <?php echo $image_row; ?>;
new AjaxUpload('#someword',{
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',

onChange: function(file, extension) {

this.setData({'directory': ''});
this.submit();
},

onSubmit: function(file, extension) {
$('#upload').append('<img src="catalog/view/theme/mall/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file)
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}

if (json.error) {
alert(json.error);
}

$('.loading').remove();
}
});
};
//--></script>


and remove next code

Code: Select all

<script type="text/javascript"><!--
function image_upload(field, thumb) {
	$('#dialog').remove();
	
	$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
	
	$('#dialog').dialog({
		title: '<?php echo $text_image_manager; ?>',
		close: function (event, ui) {
			if ($('#' + field).attr('value')) {
				$.ajax({
					url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
					dataType: 'text',
					success: function(text) {
						$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
					}
				});
			}
		},	
		bgiframe: false,
		width: 800,
		height: 400,
		resizable: false,
		modal: false
	});
};
//--></script> 

it is work for the first image but when i click add image , it dosn't work for others

Newbie

Posts

Joined
Thu Sep 25, 2014 5:37 pm

Post by DAJOGA » Sat Sep 27, 2014 2:13 am

WOW! THX BRO!

Does it work with 1.5.5.1 ?!

There is no admin/view/template/catalog/product.tpl file in 1.5.5.1

Newbie

Posts

Joined
Sun Jul 27, 2014 6:41 pm

Post by DAJOGA » Sat Sep 27, 2014 11:46 am

shbakawy wrote:hi friend
firstly i found solution for your first request but it is not complete because it work for main product image but not work for extra image for product , the problem is in some javascript code .
now i'll till you what i reach to :
Doesn't works even for first request.

Newbie

Posts

Joined
Sun Jul 27, 2014 6:41 pm

Post by shbakawy » Sat Sep 27, 2014 4:10 pm

sorry the file root is

admin/view/template/catalog/product_form.tpl

and you can rewrite javascript code as following:

Code: Select all

<script type="text/javascript"><!--

function image_upload(field, thumb) {
var image_row = <?php echo $image_row; ?>;
new AjaxUpload('#someword',{
action: 'index.php?route=common/filemanager/upload&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',

onChange: function(file, extension) {

this.setData({'directory': ''});
this.submit();
},

onSubmit: function(file, extension) {
$('#upload').append('<img src="catalog/view/theme/mall/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file)
$.ajax({
url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}

if (json.error) {
alert(json.error);
}

$('.loading').remove();
}
});
};
//--></script>

till me what is not work or send to me your file and i'll rewrite code at it

Newbie

Posts

Joined
Thu Sep 25, 2014 5:37 pm
Who is online

Users browsing this forum: No registered users and 61 guests