How would you get a product image using javascript in Prestashop? I already know in tpl and php you can use this
$imagePath = Link::getImageLink($product['link_rewrite'], $product['id_product'], 'home_default');
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}`
Is this possible to do this in javascript?
You can use : $('img#ID-of-your-img').attr('src')
this will return you the link to the image ;) .
If you use your javascript file in the same tpl than you can write this.
{$link->getImageLink($product.link_rewrite, $product.id_product, 'home_default')}
If you want to get product image from external file than you can find the product image by using the product_image class
like.
.product_image img
and it will help you to get the images of product.
Had the same question thats why i entered this 'stack'
Challenge: Wanted image with different sizes then default product.image size in #layer_cart
Solution:
Made an image with name popup_default in the BO of prestashop.
In /themes/theme_name/modules/blockcart/blockcart-json.tpl added the following at line 36
"image_popup": {$link->getImageLink($product.link_rewrite, $product.id_image, 'popup_default')|json_encode},
Then in /themes/theme_name/js/modules/blockcart/ajax-cart.js
made the following change at line 737
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image + '" alt="' + product.name + '" title="' + product.name + '" />');
into
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image_popup + '" alt="' + product.name + '" title="' + product.name + '" />');
Now i use an image with 'popup' sizes
Related
hello I am using the function fancybox.open in this way
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open([{src:\"" + video_url(src) + "\"}])' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
It is used to add a popup on video.
Everything works fine however I wish to add a custom class to that fancy box popup.
How could I do it?
Try this but no results
var param = [{
// fancybox options first element
src: "https://youtu.be/OXYuDvKM_oo",
wrapCSS: "nepelino",
},
];
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open(param)' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
What am I doing wrong?
I appreciate your time in advance
I get some values from js and formatting page. I used fluid viewhelper for create link. My js look like
function buildEstablishments(title, page) {
...
$('#myid').append(
'<div class="col-md-6 col-sm-6 col-xs-6">' +
'<f:link.page pageUid="' + page + '" title="' + title + '" >More</f:link.page>' +
'</div>'
);
}
Everything works good, but I can't pass value "pageUid" in f:link.page viewhelper. Parametr ' + page + ' is exists and has a value. How can even pass values? Thanks.
You can not, in simple words all Fluid syntax works on server side and JS works on client side, that means that server side job is done long, long before it goes to the client (if you're using caching it may be months or years before client side will load it), you can use it rather like this:
In your Fluid view:
<div onclick="buildEstablishments('{someTitle}', '{f:uri.page(pageUid: somePageUid)}')">Foo Bar Baz</div>
Where of course {someTitle} and {somePageUid} are resolvable Fluid variables
so you can use it in your JS script like:
function buildEstablishments(title, href) {
// ...
$('#myid').append(
'<div class="col-md-6 col-sm-6 col-xs-6">' +
'<a href="' + href + '" title="' + title + '" >More</a>' +
'</div>'
);
}
I am trying to write with javasctipt line of code, but decodeURIComponent ignore everything after %20 (space). How to solve this?
$(".intome").append($('<img title=' + decodeURIComponent(filename) + ' src=' + dir + ' />'));
Instead of:
<img title:"some text" src="img.png">
I am geting this:
<img title:"some" text src="img.png">
JSFiddle: https://jsfiddle.net/emnLy1t5/9/
I am an absolute newbie so I would really appreciate any advice. Also I am not native english speaker, so I am sorry for my bad english...
Wrap the output of decodeURIComponent(filename) in quotes.
$(".intome").append(
$('<img title="' + decodeURIComponent(filename) + '" src=' + dir + ' />')
);
I want to display an image using the code below which is contained in a function call.
myWindow.document.write("<center><img border='2' src='../images/autumn/0216.jpg' width='120' height='90' /></center>");
This works fine when you explicitly set the src details e.g. src = '../images/autumn/0216.jpg' and the image is displayed correctly. What I need to do is send the url of the image to the function so I can display whatever image is required (this is the 'photo' reference in the function name). The function name is as follows:
function photoorder(category, reference, photo)
I have tried sending the image url '../images/autumn/0216.jpg' to the function call, it is received and formatted correctly. But when I use the command src = photo the image is not displayed. e.g.
myWindow.document.write("<center><img border='2' src='photo' width='120' height='90' /></center>");
or
myWindow.document.write("<center><img border='2' src=photo width='120' height='90' /></center>");
for this purpose is advisable to use jQuery...
but in your function photoorder(...) photo is a param like "../images/autumn/0216.jpg" ?
the you should use:
myWindow.document.write("<center><img border='2' src='" + photo + "' width='120' height='90' /></center>");
Try:
myWindow.document.write("<center><img border='2' src='" + photo + "' width='120' height='90' /></center>");
I have a div with text inside:
<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>
Then I extract the text and stick it as a data-url attribute on an image:
var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');
The problem is that the image is being generating like this:
<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">
What am I doing wrong here?
The issue is that you are missing quotes around the value in the tag, but you can't just add quotes because that will still break if the description text has quotes in it.
Instead, try this.
var desc = div.text();
div.replaceWith(
$('<img />', {
"class": "center",
"src": url,
"data-desc": desc
})
);
The other answers are correct, in that you're missing quotes, but the next problem you'll have will be when a description contains a quote and it breaks the HTML. My recommendation is to append the image, then set the data-desc.
div.replaceWith(
$('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);
div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');
forgot the " on either side of the desc
You missing quotes. All attributes values should be in " quotes
div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');
and for url to
src="'+url+'"
from w3c
Attribute values should always be enclosed in quotes
http://www.w3schools.com/html/html_attributes.asp
live demo: http://jsfiddle.net/pzC7b/8/
This will replace quotes with character entity
desc.replace(/\"/g, '"')
Result + encode url:
div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '"') + '" />');
Example on jsfiddle