I am trying to add another announcement bar at our Shopify store below the current announcement bar so that we have 2 stacked on each other but my Javascript wont work. :(
I even followed these guidelines to make sure everything was correct.
Link:https://www.askquesty.com/post/how-to-add-javascript-shopify-tutorial
Can anyone help me out?
My code:
<script>
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var el = document.createElement("span.l");
el.innerHTML = "<p class=announcementBar2>FREE SHIPPING</p>";
var div = document.getElementById("announcement-bar");
insertAfter(div, el);
</script>
Even though this might work, I wouldn't recommend using JavaScript for this since it may cause layout shifts. I would modify the announcement bar snippet instead, can you provide the GitHub repo with your theme?
Ended up using HTML in the header.liquid
<div class="promobar-content">
<div class="bar-inner">
<span class="header-promotion-text header-promotion-text--desktop">
<p>FREE SHIPPING with 2 bags</p>
</span>
</div>
</div>
Related
Please help me out I'm a beginner in the Shopify platform and don't understand how to add my script to Shopify files.
Please help me with where and in which file should I place the code to replace the text on the product page. I need to change the Price text with M.R.P see the screenshot for reference: https://prnt.sc/xFWR-QIpVkPr
Here is the product page URL: https://uniqaya.com/products/exfoliating-body-scrub-polisher-with-coffee-grape-seed-oil?_pos=4&_sid=322f78f1b&_ss=r
See the code that I have used for scripting to replace, the HTML below is from the product page. I'm a little confused that the js library functions $ and jQuery both don't work in Shopify. Please help and give me the best solution to do this.
$(document).ready(function() {
$('.product-block product-block--price .variant__label').text('M.R.P');
});
<div data-product-blocks="">
<div class="product-block product-block--price">
<label class="variant__label" for="ProductPrice-template--15540147159204__main">
Price
</label>
</div>
</div>
the text with mine.
$(document).ready(function() {
$('.product-block--price label').text('M.R.P');
});
With js
document.querySelector('.product-block--price label').innerHTML = "M.R.P"
I've been trying to figure out why Meteor doesn't let me test my button but JSfiddle will.I run the code with the meteor command in terminal, it opens up as if its running properly, I input my text but it does not produce a list item. When I copy the code and paste it on js fiddle it works fine.
I'm new to coding and my experience with meteor is very little so I'm sure I'm missing something and its holding up progress to everything else. http://jsfiddle.net/brendanjackson/bf7m7oao/3/
<body>
<div class=category1>
<h1>Wellness</h1>
<input type="text" id = "inputtext">
<button onClick='buttonClicked()'>Click Me!</button>
<ul id="myText"></ul>
</div>
</body>
function buttonClicked() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value ;
myText.innerHTML += "<li>"+inputtext+"</li>";
}
I'm aware that I don't really use meteor the way it was intended but I'm just not on that level yet and I wanted to get familiar with the API and use it for testing. I just want to get my button to work the way it does on JS fiddle while using Meteor(and understand how). Is there anyone out there who can help me figure this out?
PS:I'm trying to get better at asking questions on this site so any help with that in addition to my problem would be greatly appreciated. Thank you very much!
Brendan,
What you need to do is put your HTML in a template in an .html file, something like this:
<body>
{{brendansTemplate}}
</body>
<template name="brendansTemplate">
<div class=category1>
<h1>Wellness</h1>
<input type="text" id = "inputtext">
<button id="btnBrendan">Click Me!</button>
<ul id="myText"></ul>
</div>
</template>
...and then in the corresponding *.js file, create a:
Template.brendansTemplate.events({
'click #btnBrendan': function() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value ;
myText.innerHTML += "<li>"+inputtext+"</li>"; }
});
I recommend you read some of the Meteor info from here. Enjoy learning Meteor - I think it's a great framework.
This has nothing to do with meteor but you can wrap your function in script tags like so:
<script>
function buttonClicked() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value ;
myText.innerHTML += "<li>"+inputtext+"</li>";
}
</script>
That should allow your javascript to function even if you don't use meteor.
A more Meteoric way:
html
Wrap your html in a template. Meteor will provide the <html> and <body> sections by itself.
<template name="myTemplate>
<div class=category1>
<h1>Wellness</h1>
<input type="text" id="inputtext">
<button>Click Me!</button>
<ul id="myText"></ul>
</div>
</template>
js:
Template.myTemplate.events({
'click button': function(ev){
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value;
myText.innerHTML += "<li>"+inputtext+"</li>";
}
});
To be even more meteoric one could use Sesssion variables and helper functions instead of manipulating the DOM directly.
I am trying to create a FAQ page much like the one here: https://www.harrys.com/help
I want to create the effect where clicking a question will display an answer.
My code can be seen here: http://jsfiddle.net/8UVAf/1/
Can anybody tell me why my javascript is not working? I realized I combined jQuery and Javascript, but I read somewhere that it should compile fine.
HTML:
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
<p class="question">This is a Question?</p>
<p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>
JS:
$(".question").click(function (argument) {
if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
document.getElementByID("answer").className = "display";
}
});
Basically your Javascript could be shortened to:
$(".question").click(function(argument) {
$(this).parent().find(".answer").removeClass("hideinit").addClass("display");
});
In order to make this work the only other thing you need to do is to make question a class rather than as an id. That looks like:
<p class="answer hideinit">the answer</p>
See the fiddle here
Edit: Add Hide / Show
To get this to hide and show as expected you'll want to update the code to check the current class before hiding and showing. That looks like:
$(".question").click(function(argument) {
var el = $(this).parent().find(".answer");
if (el.hasClass("display")) {
el.removeClass("display").addClass("hideinit");
} else {
el.removeClass("hideinit").addClass("display");
}
});
See the fiddle here
Well, for one thing, in your JSFiddle you were not including the jQuery library. I've adjusted your code, I think this is what you were going for:
$(".question").click(function() {
$(this).siblings().toggle();
});
Here's an updated JSFiddle.
Please watch your includes in your JSFiddle as the version you linked was not including the jQuery library. You should also clean up your multiple id references (as this is invalid HTML and will cause some issues down the road).
Those issues aside, you can use jQuery's .next() method to help you with this particular problem:
$(".question").click(function (argument) {
$(this).next(".hideinit").removeClass("hideinit").addClass("display");
});
JSFiddle
$(".question").on('click',function() {
$(this).next().toggle();
});
Hello,
I do not know very much about javascript, not much at all to be specific, and i'm french (this means sorry for my english).
since i don't know a lot about html and everything, i'm just changing the css and html on tumblr existing theme (i know it's not the very best solution but it's working for me and i'm improving slowly my knowledge about this world)
so in tumblr you have several pages already created like the one that regroup all your post with the same tag, this page is called http://myblog.tumblr.com/tagged/mytag
Here is my problem : i would like to change the header for each of these pages !
I don't have access to the php code (wich seemed to be the best solution...)
here is when i have one header :
<body>
<div id="header">
<img src="{image:Header}"/>
</div>
</body>
i have code the css so that my header looks fine to me
to answer my problem, i tried javascript :
<body>
<div id="header">
<script>
var image = new Array("{image:Header}", "http://static.tumblr.com/my-other-image.jpg")
if(document.URL.indexOf("/") >= 0) {
image.src = "{image:Header}"
}
if(document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = "http://static.tumblr.com/my-other-image.jpg"
}
</script>
</div>
</body>
obviously it didn't work, and you may be laughing watching what i wrote...
since i only have 3 or 4 pages i'd like to change, i'm ok with the "dirty solution" with too much code, and i just think that i need an "else" for all the other pages !
Thank you for telling me how to make it work and sorry to take some of your time for a simple thing like this wich may not be even possible. and sorry for talking about my life in my terrible english.
Thank you
you must create a image element, then append to the dom:
<body>
<div id="header"></div>
<script>
var uris = ["{image:Header}", "http://static.tumblr.com/my-other-image.jpg"];
var image = document.createElement("img");
if (document.URL.indexOf("/") >= 0) {
image.src = uris[0]
}
if (document.URL.indexOf("/tagged/mytag1") >= 0) {
image.src = uris[1]
}
document.getElementById("header")
.appendChild(image);
</script>
</body>
This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.