I'm using opencart 1.5.5.1.
On the products pages I've already successfully changed the "Review" tab with a discussion tool by Disqus! and it works great.
But my website is dual language italian/english and I would like the users to read the discussion in the language they've chosen.
So I've created two differents disqus id's (two independent discussion boards).
On my product.tpl I had to insert their javascript that comes with a variable like:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'xxxxxxxxxx';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
I would like to make the variable disqus_shortname to depend on language code given on the session.
As long as I understand I can get it by php with
$this->session->data['language']
or
$this->language->get('code')
but here we are talking about js!
How can I tell this script the statement if?
I need something like
if $this->language->get('code') == 'it' { var disqus_shortname = 'xxxxxxxxxxitalian'; }
else { var disqus_shortname = 'xxxxxxxxxxenglish'; }
Check whether you register a disqus shortname for your website on Disqus.
disqus_shortname
Tells the Disqus service your forum's shortname, which is the unique
identifier for your website as registered on Disqus. If undefined, the
Disqus embed will not load.
To load different language on the page,use
var disqus_config = function () {
this.language = "ru";
};
code like:
<?php
$language = ( $this->language->get('code') == 'it' )? 'it' : 'en';
?>
<script>
var disqus_config = function () {
this.language = "<?php echo $language; ?>";
};
http://help.disqus.com/customer/portal/articles/466249-can-disqus-be-loaded-in-different-languages-per-page-
In Your controller You would have to propagate the language code to the template (edit catalog/controller/product/product.php file) - add this:
$this->data['language_code'] = $this->language->get('code');
Then edit the template file this way (catalog/view/theme/<YOUR_THEME>/template/product/product.tpl):
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'xxxxxxxxxx<?php echo $language_code; ?>'; // here the mojo is done...
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
Related
I have had the website for 3 years. This website is created by HTML, CSS, and JavaScript. I have made it by myself and there is always a WhatsApp icon at the bottom of the right. But 6 months ago, it disappeared. I looked up my code and there are no changes. How can I make my WhatsApp ıcon visible again?
Here is my code:
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+9000000000", // Contact Number
call_to_action: "Merhaba, Size nasıl yardımcı olabilirim?",
position: "right",
};
var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
//</script>
The domain whatshelp.io is currently timing out, which is probably why the buttons are not working.
Based on archive.org, it appears at some point the site started to redirect to bothelp.io. However, updating the script to https://static.bothelp.io/widget-send-button/js/init.js returns a 404.
After some googling, I landed on this page: https://apps.shopify.com/whatshelp-chat-button
The description noted the following:
The GetButton widget (former WhatsHelp widget) takes website visitor directly...
Again, updated the script to https://static.getbutton.io/widget/bundle.js and success!
I then updated the configuration script you provided to the following (formatted for legibility):
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+9000000000", // Contact Number
call_to_action: "Merhaba, Size nasıl yardımcı olabilirim?",
position: "right",
};
var proto = document.location.protocol,
host = "getbutton.io",
url = proto + "//static." + host;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
And saw the following:
I have this code to include in my php website but I keep getting this error: We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.
I have left trusted domains field empty in disqus dashboard to allow development on localhost.
The id is specific to each post.
<script type="text/javascript">
var disqus_config = function () {
var id = <?php echo $_GET['id']; ?>;
this.page.url = 'localhost/blog/viewimage.php?id='+id;
this.page.identifier = id;
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://ashexcreations.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
I'm using Google Custom Search on my site with a two-page configuration: when the form is sent from page 1 to page 2, page 2 display SERP. This is my page 2:
<script>
(function() {
var cx = '00000000000';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only queryParameterName="query"></gcse:searchresults-only>
</script>
Everything works fine as long as page two is a "classic" /page2.php?query=searchTerm.
Now I'd like to use mod_rewrite to switch to a friendlier /page2/searchTerm. The rule itself is done, but I cannot understand how to edit Google script to make it understand that now the parameter is mod_rewritten or how to use something like gcse.searchTerm='this is what I want to search for'.
API v1 is deprecated, so I need to stick with API v2.
Any help?
I don't think you need that. Why would you want search engine friendly search results URL? As far I understand SEO, you don't want your search results to appear as results on Google, Bing, etc.
And in my opinion www.example.com/search?q=test is much more "friendly" than www.example.com/page2/test because it is more obvious what it is. (Search results page.)
But, maybe I'm overlooking something, OK.
There are probably much better ways, but I think this should work also:
<script>
var searchFromURL = function() {
var element = google.search.cse.element.getElement('searchfromurlgname');
// you can echo query with PHP or get it from window.location
element.execute( window.location.pathname.replace('/page2/', '') );
};
var myCallback = function() {
if (document.readyState == 'complete') {
searchFromURL();
} else {
google.setOnLoadCallback(searchFromURL, true);
}
};
window.__gcse = {
callback: myCallback
};
(function() {
var cx = '013315504628135767172:d6shbtxu-uo';
// Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only gname="searchfromurlgname"></gcse:searchresults-only>
<!-- switch CSE layout to "two page" -->
https://developers.google.com/custom-search/docs/element#tagparams
I installed Disqus manually in a WordPress theme (didn't work at all via the plugin). It works fine, but I'm having trouble displaying the comment count.
I think I'm doing a lot of things right tough:
The link on the /blog/ page looks as follows:
<i class="fa fa-comment"></i> 0
The comments.php:
<?php if (comments_open()) : ?>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'myshortname'; // Required - Replace example with your forum shortname
var disqus_identifier = 'dq-<?php echo get_the_ID(); ?> ';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
alert(disqus_identifier);
</script>
<noscript>Please enable JavaScript to view the comments.</noscript>
As you can see I'm alerting the disqus_identifier and therefore can verify it's being set correctly (in this case dq-332 as above)
And I am loading the count.js globally with
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'myshortname'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
I only got it working under one (faulty) circumstance:
Before I tried it with the data-disqus-identifier it worked by appending #disqus_thread to the permalink without trailing slash, so e.g. http://mydomain.com/the-post-title#disqus_thread
The problem with that was that comments there wouldn't show up in http://mydomain.com/the-post-title/ and http://mydomain.com/the-post-title/#disqus_thread (same with the trailing slash, as generated by WordPress everywhere).
That's why I ended up with the identifier approach after all. Which doesn't have any effects so far. Would be happy about any type of hint. Cheers!
Was not able to solve it this way. Spent some more time investigating why the WordPress plugin didn't work. Worked it out in the end.
Note: you shouldn't have any relative URL plugins activated with disqus.
This is the (default/official) JavaScript code for loading Disqus comments on a web page:
(CODE #1)
<script type="text/javascript">
var disqus_shortname = 'paulund';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
As I see it, the code does the HTTP request asynchronously; but that's not the point.
The thing is, I needed to make some changes to the code so that the comments are loaded only when the user scrolls down to the comments section, as in, lazy loading. And I've got two working methods to do it.
(CODE #2)
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}, { offset: '100%', triggerOnce: true });
});
(CODE #3)
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
}, { offset: '100%', triggerOnce: true });
});
Questions:
Apart from the obvious fact that I am now doing it with jQuery, is there any difference between what the codes #1 and #2, and #1 and #3, do? Could I possibly be doing something wrong, which I am completely missing?
Why don't the codes #2 and #3 work when started with $.noConflict();? (After all I found it in the docs as well.)
For instance, this doesn't do anything. (But gives an error in the browser console, "Uncaught TypeError: Cannot call method 'noConflict' of undefined.".)
$.noConflict();
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
}, { offset: '100%', triggerOnce: true });
});
Nope, no difference. I would use method 3. $.noConflict should not have any effect if used the way you have it.
Uncaught TypeError: Cannot call method 'noConflict' of undefined. would mean that you've already used $.noConflict somewhere else.
There is no difference between the two, both are loading the script asynchronously. You can see for yourself by viewing the rendered script tag in the DOM explorer in your console. If you need it to load synchronously you could utilize the first method and set dsq.async = false;. If you are relying on it being loaded before performing some operation, consider adding your dependent operation into a onload callback of the script, that way it will be a non-blocking operation and keep your page loading fast:
var disqus_shortname = 'paulund';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.onload = function(){
// dependent code goes here
}
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();