How can I add custom code to the header - joomla

How can I add the following line to the header, in a component?
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->

Not sure if it will work with any text, but you could try:
$document =& JFactory::getDocument();
$document->addCustomTag('<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->');
I hope it will be helpfull.

You can use :
<?php
$document = &JFactory::getDocument();
$document->addScript( '/js/excanvas.min.js' );
?>
I am searching for how to add the conditional statement though ...
UPDATE
Checking if the user agent is IE
<?php
$document = &JFactory::getDocument();
//Is it Internet Explorer?
ereg('MSIE ([0-9]\.[0-9])',$_SERVER['HTTP_USER_AGENT'],$reg);
if(isset($reg[1])) {
//Yes, it is Internet Explorer
$document->addScript( '/js/excanvas.min.js' );
}
?>

Related

How to make a simple example with highlight.js?

I am trying to make a simple example with highlight.js but I can not make it work. I am not familiar with highlight.js. Here is my code and I dont know what`s wrong in it. Any idea! Thanks in advance.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
$(document).ready(function() {
$('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>
</head>
<body>
<div id="myBlock">
<pre><code class="php">
require_once 'Zend/Uri/Http.php';
abstract class URI extends BaseURI
{
/**
* Returns a URI
*
* #return URI
*/
static public function _factory($stats = array(), $uri = 'http')
{
$uri = explode(':', $uri, 2);
$schemeSpecific = isset($uri[1]) ? $uri[1] : '';
$desc = 'Multi
line description';
// Security check
if (!ctype_alnum($scheme)) {
throw new Zend_Uri_Exception('Illegal scheme');
}
return [
'uri' => $uri,
'value' => null,
];
}
}
</code></pre>
</div>
</body>
</html>
You need to change the way you read the css and javascript files a bit:
The css file:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
The javascript file:
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
Yes, I know, you used the way it was on the original site, but it seems they made a mistake, when they wrote the example codes.

How does the JMicrodata function work in Joomla?

I read this officail Joomla article about Microdata: http://docs.joomla.org/Microdata
I tried put this meta element in the head section of my Joomla website:
<meta itemprop="name" content="title of your content">
By this code:
$scope="itemprop";
$property="name";
$content="title";
JMicrodata::htmlMeta($content, $property, $scope = '', $inverse = false);
But no success! Can somebody tell me whats the wrong?
Solutions
To add this meta tag in you <head> section of a Joomla website:
<meta itemprop="name" content="title of your content">
You can use one of the following solutions
1) Add this code in the <head> section:
echo JMicrodata::htmlMeta($content = 'title', $property = 'name');
2) In whatever part of your code/file you want:
$microdata = JMicrodata::htmlMeta($content = 'title', $property = 'name');
$document = JFactory::getDocument();
$document->addCustomTag($microdata);
Documentation help
JMicrodata::htmlMeta() is used for output microdata semantics in a meta tag, this method does not add the meta tag in the <head> section.
I see you use $scope="itemprop", which is wrong, the scope is used to specify the Type of microdata, here you can find the full list of the available Types http://schema.org/docs/full.html
I suggest you to use an instance of JMicrodata, this way you don't need to worry that microdata is displayed properly.
$microdata = new JMicrodata('Article');
echo $microdata->content('title')->property('name')->display('meta');
In the <head> section add
<?php
$property="name";
$content="title";
echo JMicrodata::htmlMeta($content, $property, '', false);
?>
That will definitely get you the metadata.
Elsewhere if you did
$property="name";
$content="title";
$microdata = JMicrodata::htmlMeta($content, $property, '', false);
$document = JFactory::getDocument();
$document->addCustomTag($microdata);
That should do the trick.

Joomla 2.5: Distinct based on the language website with navigator

I have a joomla 2.5 bilingual website and I have the following code in index.php
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "a.html";
} // ]]>
</script>
As a result if you login from your Android phone/tablet it will lead you at the a.html link.
What I wanna do is:
Assume the website's url is the www.test.com/index.php?lang=en so when you login from android it leads you at the a.html and when you login from www.test.com/index.php?lang=fr should lead you at the b.html .
I need to distinct based on the language.
Thanks in advance.
You could maybe use something like this:
<?php
$app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault( 'en-GB' )) { ?>
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "a.html";
} // ]]>
</script>
<?php }
elseif ($menu->getActive() == $menu->getDefault( 'fr-FR' )) { ?>
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "b.html";
} // ]]>
</script>
<?php }
?>
Please note I haven't tested this so let me know if it work and if not, I can update it.
Update:
As Oriol said, it's better to redirect server side rather than javascript. I was messing around with the code yesterday and half of what I wrote worked:
<?php
$lang = JFactory::getLanguage();
$app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault( 'en-GB' )) {
?>
<script type="text/javascript">
alert("<?php echo $lang->getTag() ?>");
</script>
<?php
}
elseif ($menu->getActive() == $menu->getDefault( 'fr-FR' )) {
?>
<script type="text/javascript">
alert("<?php echo $lang->getTag() ?>");
</script>
<?php
}
?>
It basically gets the current language tags and alerts then, depending which language the website is being viewed in. So it will either alert en-GB or fr-FR. Try using a server side redirect inside the if and else else statements

Magento: product with custom options, needs ajax update with price and sku

I want to show the SKU of a customizable article. Have a look at the screenshot below.
If I select color, length and so, the price will be updated via ajax. So far, very good. But I want to display the SKU of the article too.
The site calls this url via ajax:
http://SERVER/oi/ajax/co/?id=5106&pid=5114
and returns me the following code:
<script type="text/javascript">
//<![CDATA[
window.opConfig = new Product.Options([]);
$('product_addtocart_form').encoding = 'multipart/form-data';
//]]>
</script>
which file should I update / alter for this change ?? Where the correct js for this new Product.Options ??
I resolved it... well. After taking a break I've came up with the following solution:
I've put this code in the view.pthtml of the product (the html which displays the product actually)
<div style="text-align:left; font-size:11px; font-weight:bold;">
<div id="pv_article_sup_art_no" style="display:none;text-align:right;"></div>
</div>
Then I added the following code to the scpajaxoptions.phtml
<?php
$data = $this->getProduct()->toArray();
?>
<script type="text/javascript">
jQuery('#pv_article_sup_art_no').html("Artikelnummer: <?php echo $data['a_sup_artno']; ?>");
jQuery('#pv_article_sup_art_no').show();
</script>
eh voila.... it works !

Magento: Add Pinterest "Pin it" button to product detail page

I'm trying to add the "Pin it" button from Pinterest to the pruduct detail pages in our website.
So far I've tried:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
and
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
With any of these I can get the pruduct's URL and the product's name, but I can not get the product's image. So the post does not work (it needs all 3 items to work: URL, Media and Description)
When I try this:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
I can post the product's image, but the URL is not dynamic (I'm just using the absolute URL to the website).
Any ideas on how I could implement this button in my product detail pages?
Most of the answers here don't urlencode() the querystring that's generated for the pinterest link, so I'm a little surprised they've been working - my approach has been a variant of Andrew's that uses http_build_query() to do this for me.
The following code would work when placed inside template/catalog/product/view.phtml:
<!--START PIN BUTTON-->
<?php
$_pinlink['url'] = $_product->getProductUrl();
$_pinlink['media'] = $this->helper('catalog/image')->init($_product, 'image')->__toString() ;
$_pinlink['description'] = $_helper->productAttribute($_product, $_product->getName(), 'name') . " - " . strip_tags($_product->getDescription());
?>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
I've also noticed that Pinterest strips all html tags from posted descriptions, so there didn't seem much point in passing them through - hence the strip tags on the description.
This seems to work for me:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
My only concern with this is that it gives the cached image url - rather than a direct one. I do not know how permanent this cached url is. It would seem better to refer to the 'source' rather than the cached version in this instance. But I am not sure....
Have you ever try to get current product url in your code? As a result, in product view page, the URL of the product available, just get this url like below :
$curProductUrl = $this->helper('core/url')->getCurrentUrl();
// or we can take product id then use in the code
$_product = $this->getProduct();
$_id = $_product->getId();
$_productUrl = $_product->getProductUrl();
$_smallImageUrl = $_product->getSmallImageUrl();
Try this for adding the image to Pinterest. It has worked well for me.
$this->helper('catalog/image')->init($_product, 'image')->resize(150)
The URL you are generating has semicolons after each parameter. Is that intentional? (... replaces your <? php ?> blocks)
Pin It
&media;, &description;.
Try removing the semicolons.
Also, if your output is not automatically HTML escaped the ampersands should be HTML entities instead: &media= and &description=.
Here's my version of the Pin It button for magento product pages and it works beautifully.
I use the canonical url of the product. For the description: I first insert the name of the product, followed by two breaks (%0A), followed by the description of the product. The htmlentities code for the product description will convert any quotes you have so Pinterest can read it.
<!--START PIN BUTTON-->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
Here is what you have to do:
Copy and paste this code into your themes view.phtml file and your all set:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
This will load the product description, image, and link
Sometimes if you put the url later in the dynamic url, it will get stuck loading. So just copy/paste the code above and your done. No customization required.
This works for me:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
But it uses the cached images ...
I'm trying to use the original image path, but with no success until now.
Hope this helps

Resources