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.
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 to the following :
and clear
now in end of page
put
for extra image of product
the responsible code is :
and at javascript
and
i did the following to the above codes
Add id="someword" to the html line
and at javescript line
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
it is work for the first image but when i click add image , it dosn't work for others
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"
Code: Select all
<a onclick="image_upload('image', 'thumb');" id="anyword"><?php echo $text_browse; ?></a>
to becomeonclick="image_upload('image', 'thumb');"
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> | <a onclick="$('#thumb').attr('src', '<?php echo $no_image; ?>'); $('#image').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
</tr>
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>
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> | <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>
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> | <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>
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>
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">
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> | <a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';
<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
Doesn't works even for first request.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 :
sorry the file root is
admin/view/template/catalog/product_form.tpl
and you can rewrite javascript code as following:
till me what is not work or send to me your file and i'll rewrite code at it
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>
Who is online
Users browsing this forum: jp1077 and 74 guests