I have been code a Hexo theme recently, now I stuck with the variables. I read the doc, but could not get much info.
For example:
On the last paragraph of the variables of the doc:
Tag (tag): Same as index layout but add the following variables.
Variable Description
page.tag Tag name
Is this means I could use 'page.tag' in tag layout? But what made a tag layout?
I have created a tag.jade, and a page named tags using tag.jade, and I also add some test tags in other articles,
In my tag.jade, I have
p= page.tag
But there is nothing output.
Also, the doc says
Same as index layout
But try to use page.posts ( I can use it in index.jade) in tag.jade, but undefined,
So What does it mean Tag (tag) in the doc, is it the scope of the variables? what makes these scope?
Sorry for my writings, I am really comfused about these variables.
You may have misunderstood the tag layout.
A tag layout is used for generate a tag cloud page, like my blog: http://blog.xcatliu.com/tags/
You don't need to write a page which layout is tag, instead, you can use https://github.com/hexojs/hexo-generator-tag to generate the tag page.
Related
I am wondering if there is a way to insert text, schema data in particular, into a html div tag using javascript. I know there are methods for modifying existing values inside a tag such as class, href, title, but can't seem to find a way to add something new.
Basically I have <div id="main"> and I want to modify it to be <div id="main" itemtype="http://schema.org/SomeCategory" itemscope> and to be able to remove it later.
The context for such a need is using fetch / js to replace parts of webpages rather than reloading the entire page. The product pages use the schema notation, whereas general info pages do not, though all templates use the "main" div.
Unbeknownst to me, the innerHTML function attached to the body tag allows me to change actual div tags using replace. So it is simple:
input ='<div id="main">';
output='<div id="main" itemtype="http://schema.org/SomeCategory" itemscope>';
document.body.innerHTML = document.body.innerHTML.replace(input,output);
I want to insert my block of HTML into a Shopify shop after a certain section but the problem is that each shop can use one of thousands of different themes, each one having a different DOM structure.
I can create the Script Tag and I can try to insert my HTML like this:
(function() {
var child = document.createElement("div");
var text = document.createTextNode("This is a test message");
child.appendChild(text);
var parent = document.getElementByClassName("ProductSection");
parent.appendChild(child);
})();
And this will work if the theme has a section with a class name of ProductSection but it won't for the majority of them that don't. Let's say I have an image gallery I'd like to show but only on Product pages and after the product description, what's the best way to select the product description DOM node so that I can insert my image gallery after it?
I found a couple threads with similar problems:
https://community.shopify.com/c/Shopify-APIs-SDKs/Using-Script-tag-to-add-dynamic-content-to-product-template/m-p/457855
https://community.shopify.com/c/Shopify-APIs-SDKs/Need-to-add-a-button-to-the-Product-page-via-a-Script-Tag/m-p/413919
and they seem to come to a similar conclusion, yet there are apps on the Shopify app market that do exactly this, and I wonder how do they do it?
As suggested in the links shared by you, it is not possible to correctly identify the DOM element in all the cases. However, there are couple of different approaches that can be used.
1) One is to ask merchant to add some specific element to markup that you can later use for rendering your content via JavaScript.
2) Try to guess the DOM element via some specific tag or href value, but allow merchants to override the DOM element selector via some JavaScript variable.
3) Use approach 2 with a combination of pre-determined info. Saw this approach used by AfterPay. They have a pre-defined array of popular themes along with their selectors. Then they use the theme name property from Shopify.theme.name
and get the relevant selectors. This solution may not work in all cases, so do allow the merchant to override DOM selector via some JavaScript variable.
Afterpay.supportedThemes = {
alchemy: {
product: {
"2017-12-14": {
selector: ".quadd-wrapper"
}
}
}
}
AfterPay JS Source Code
If you know of any other plugins, you can inspect the JavaScript and have a look how they identify the selectors.
i need inside my CKEditor some boilerplate verbiage that is not editable, then the rest of the my string information. I concatenate the boilerplate verbiage [which is in a p tag], to a string variable that my CKEditor displays inside a certain div. By the time the verbiage, here:
<p id='abc' contentEditable='false'>verbiage</p>
... and the string information is displayed on the page, they are deep inside a number of nested tags - within a body with multiple classes. So both the verbiage, which is now in only a p tag with no attributes[they got stripped out], is nested way inside the original body tag [the first body tag, way up in the page] with lots and lots of divs, then finally comes an iframe, then ... the verbiage and string are like this:
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
<p>boilerplate verbiage</p>
...then the rest of the information is displayed in the editor, inside various spans, etc. i need to make the boilerplate verbiage readonly, contentEditable='false'. Yet everything I try both from the console in Chrome, and in code.... nothing changes that boilerplate verbiage tag. i have tried various things, including these - perhaps you can see where I need to tweak something; and i hope this will show you things i have tried and that i am run out of options so far:
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").first().contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").attr("readonly", "1");
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders p:first-child").contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").find( "p" ).contentEditable='false';
jQuery("iframe", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
jQuery("iframe", "body .cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
var editor= jQuery("body", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
var editor= jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
yet if i hard code in the Chrome browser, contenteditable="false",
it works perfectly. So, how can i access that p tag and assign it this attribute?
It really depends on moment and how you want to access, one option to access directly from separate script.
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.getElementById("your_p_tag")
Note, that it should be done after CKEDITOR initilized
UPDATE:
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.body.firstChild
I have some data stored in controller as scope variables and want to assign them to the attributes of a script tag which is implemented in html and used for payment gateway.
following are the scope variables:
$scope.selectedPlan = plan;
here the selectedPlan is array of objects of data with following values :
plan_id: 3
plan_name: "Basic"
price: "30"
validity_text: "30 days"
need to access some of above values like price in a script tag which is implemented in html file. Following is the code for script tag:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_ghxvjhdasfwdadsd"
data-amount="{{selectedPlan.price}}*100"
data-name="Amazing Test"
data-description="Amt: $ {{selectedPlan.price}}"
data-image="http://test.com/assets/Images/globe.png">
</script>
Here in above written code the selectedplan is the scope object of controller and price attribute needs to be assigned to the data-amount and data-description attribute of script tag. As i am new to angularjs dont know how to implement it.
Please help me achieve what i want.
If you want to dynamically compute attributes for you script tag, you need to use the ng-attr directive. The code becomes:
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-butt"
data-key="pk_test_4RvHCPGrrtHK9dW0vqO938ge"
ng-attr-data-amount="{{selectedPlan.price*100}}"
data-name="Amazing Minds"
ng-attr-data-description="Amt: $ {{selectedPlan.price}}"
data-image="http://itutor.staging.broadweb.com.au/assets/Images/itutorglobe.png">
</script>
However Angular it not meant to dynamically modify a <script> tag. I have never tried this myself, but I am pretty sure the script tag will only be read once with the initial parameters, even before angular has the time to compile them.
One way to work around that would be to compile that code with Angular's $compile service before appending it to the DOM.
However this is probably over-complicating things. You'd better create it manually. Here is how to do that: Dynamically create a script tag
i have created a html page which contain two iframe .
first iframe refer another html which contain a list of members
this list is not fixed and every member name there is a separate html page. which is shown by second iframe.
i have written some javascript code to get the value of that list but i am unable to update the src link of second iframe.
document.getElementById("frame2").setAttribute("src", name);
i have used this code to set the value but i didn't work. i have written this code in javascript file in setFileName(name) function.this is user define function.
might want to give this a try:
window.frames["frame2"].src = name
Information from: Changing Iframe source using Javascript
I have faced this query once and following article helped me. Hopefully it will be useful to resolve your issue.
http://www.dyn-web.com/tutorials/iframes/
i got my answer
top.parent.frame2.location = name;
like this we can change the src of another frame.
thanks all of you..