addthis make magento bundle product error - javascript

I got a problem about magento bundle products here. The price won't get updated everytime I make come options change on the products. And I also can't add it to the cart. I've spent several days to find the problem and finally I realize that the problem comes from this addthis snippet that I insert
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e770a31017c7f26"></script>
<!-- AddThis Button END -->
I put that addthis snippet on my default/template/catalog/product/view.phtml files. I guess it might caused by some conflict between magento's default theme script with the script from addthis.
Can anyone help me on this?? or maybe give me a better alternatives other than addthis
thank you very much :)

I had same problem! Try replacing
<a class="addthis_button_tweet"></a>
with:
IFRAME snippet available from https://dev.twitter.com/docs/tweet-button
That should work! :)

I have always been a 'seeder' of stockoverflow, get the information i need then bolt. But i thought id share this little tid bit.
Simple tweak i found it in a slightly different place.
"app/design/frontend/default/MYTHEME/template/ajax/catalog/product/view.phtml"
i just commented out <a class="addthis_button_tweet></a> from there and BOOM.
you have no idea the lengths i went to before finding this. Thanks
For people looking to solve this problem, i tried just about everything i could find, modifying option.phtml, effects.js, scpoptions.phtml, produt.js etc... and all along it was twitter

Related

How to get the <body> item's class by python crawler?

I'm now designing my own index page, but I've met a problem.
Due to the custom in our country, I want to make my site grey at a large event, and I'm going to check the class of other sites' item to achieve this goal.
However, I'm not good at python crawler and can someone help me?
<body class="open-homepage-tts s-manhattan-index big-event-gray" style="">
<div>
<a
id="aging-total-page"
role="pagedescription"
aria-label="欢迎进入 百度一下,你就知道,盲人用户进入读屏幕模式请按快捷键Ctrl加Alt加R;阅读详细操作说明请按快捷键Ctrl加Alt加问号键。"
tabindex="0"
href="javascript:void(0)"
></a>
</div>
</body>
The code of the site is like this.
Moreover, I suppose the crawler will save the result in a *.txt, but I don't know how to let my *.js change the color when the result changes.
(If the problem can be solved using Javascript, it's also acceptable and better.)
Sincerely thanks
I searched for these questions in Google, but I found nothing I can really use.
(Frankly speaking, crawlers are not easy things to me.)

Only first scrollspy is working on my site, no matter what I do second is not responding even with the same structure and different ids

I would like to ask you for help with bootstrap scollspy. I implemented first one in my project it is working fine and I am happy.
Problems started when I wanted to add another, different ID, different target. I added it in the same way but I cannot get it to work.
I googled about this but I couldn't find solution or proper informations, I saw some posts that there should be only one scrollspy on "body" I tried to experiment with that knowledge but still nothing.
My code:
<div id="back-button">
Back
</div>
<script>
$('body').scrollspy({ target: '#back-button' });
</script>
<div data-spy="scroll" data-target="#projects" data-offset="0">
CONTENT HERE
</div>
I tried to change order, change IDs to Classes, move scripts around but still nothing. Can you please help me?
Thanks and Cheers

How to include MORE Font-awesome icons in a custom blogger template?

I have two left feet in case of coding. I have downloaded a custom blogger template which renders a few social media (Facebook, twitter etc) icons but not all (500px, behance). I have tried to figure it out on my own, but sadly haven't managed to do so yet.
here is the test blog: http://kartik1110.blogspot.in/
Everywhere on the site (Navbar, right sidebar and bottom) icon for 500px doesn't show up. How do I tackle this?
As the code is a big blogger template, I couldn't figure which snippet to paste here. Pardon my shortcomings.
Thanks in Advance.
Edit: I made a mistake in original question. The additional icons dont show up in the Custom widgets that came with the template. The icons show up on blogger pages and other widgets. Any idea which piece of code removes the ability of other icons to show up?
here is the code for right side bar 'follow me' widget, where limited icons are showing up.
<b:widget id='LinkList2' locked='false' title='Follow Me' type='LinkList' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul class='site-social-networks secondary-2-primary style-default show-title'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><i/><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
The template already uses Font Awesome, as you mentioned. All you have to do now is to insert the icon you wish to use.
The easiest way to do this is to add the HTML element as explained here. By going to "icons" inside font awesome, you can search for whatever icon you need and find the necessary HTML code you include.
For the case of 500px you have to include <i class="fa fa-500px" aria-hidden="true"></i> on your HTML and you'll add the correct icon.
You can see the result in this image
Just do the same with any icon you need.
It is possible your version is older, or incomplete. On the FA website they also warn that Adblock Plus removes some icons.
In any case, you can try getting the fontset directly, something I always recommend for loading speed/seo anyway. Just follow the instructions on their website:
http://fontawesome.io/get-started/

Menu looks broken until I refresh browser

I tried to put together a CODEPEN HERE for you, but I'm afraid it will not be much help since I can't reproduce the problem there.
This is a very complex and large website. It is very difficult to provide you with just the code that applies to this, since there is so many scripts and stylesheets that are working together to make it work, but I am doing my best to provide you with what I can.
Basically, when the page loads, it loads fine, but when I click on a link in the menu to take me to that page, that page loads with a "broken" menu look. SEE PIC. As soon as I refresh the page or even resize it by one pixel, it resets to the way it should look. SEE PIC ALSO
Please, someone, have you come across something like this? enter code here And if you can't find a mistake by looking at the code, is there a way to refresh any given stylesheet or script? I can't force a page refresh because some things are supposed to process from the database on PageLoad.
I'm not holding my breath, but I certainly hope you guys can help.
Here is the pic with the problem. and the link to codepen is above
Try to add something like ?v=1232 to your style
href="css/init.css?v=1232"
The problem has been resolved. Apparently, the accessibilitymegamenu.js adds the attribute aria-haspopup="true" programmatically which it makes it bug out if you add it manually when coding for JAWS and/or any other non-sighted users accessibility website.
If you're using any accessibility script and your hyperlink is coded as follows:
<a id="myID" href="#" class="myClass" aria-haspopup="true">My Link</a>
change it to:
<a id="myID" href="#" class="myClass">My Link</a>
Your output (according to the accessibility script) will still be:
<a id="MyID" aria-label="My Label" href="javascript:void(0)" aria-haspopup="true" aria-controls="accessible-megamenu-1426257105716-6" aria-expanded="true" class="MyClass">My Link</a>
Hopefully this helps others and saves them the two weeks of debugging it cost us.
Happy Coding!

Jquery mobile dynamic collapsible list

I am facing a problem of dynamically adding a jquery mobile collapsible element. I have the following JSFiddle. There have been lots of questions similar to this one but I am not able to get the hang of it. I hope that someone would help me out as I am new to Jquery and finding it a bit confusing at times.
Link to JSFiddle
<html>
<body>
<div id="collapsiblelist" style="width:400px;height:600px; display:inline- block;float:left">
</div>
</body>
</html>
Javascript code:
var coll=document.getElementById('collapsiblelist');
$(coll).append('<div data-role="collapsible-set" data-theme="b" id="collapsible-set" data-ajax="false"></div>');
$('#collapsible-set').append('<div id="collapsible1" data-role="collapsible" data- collapsed="false" data-ajax="false" data-theme="b"> </div>');
$("#collapsible1").append('<h3>first element</h3>');
$("#collapsible1").append('<p>I am the collapsible set content for section 1.</p>');
$(coll).trigger('create');
The problem is that it appears on JSFiddle but not on my mozilla browser.
I have the same code.
Please inform me if i am missing any javascript files.
Thanks in advance
Don't use more than one jquery.js files. There could be a potential for code clash and elements may not be rendered even if your code is logically correct. Hope that helps anyone out there. Thanx guys

Categories

Resources