We Keep Coding

How do I accurately insert my HTML into a Shopify shop via Script Tags?

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.

Chrome extension breaks DOM

I'm making a Chrome extension that replaces certain text on a page with new text and a link. To do this I'm using document.body.innerHTML, which I've read breaks the DOM. When the extension is enabled it seems to break the loading of YouTube videos and pages at codepen.io. I've tried to fix this by excluding YouTube and codepen in the manifest, and by filtering them out in the code below, but it doesn't seem to be working.
Can anyone suggest an alternative to using document.body.innerHTML or see other problems in my code that may be breaking page loads? Thanks.
var texts=["some text","more text"];
if(!window.location.href.includes("www.google.com")||!window.location.href.includes("youtube.com")||!window.location.href.includes("codepen.io")){
for(var i=0;i<texts.length;i++){
if(document.documentElement.textContent || document.documentElement.innerText.includes(texts[i])){
var regex = new RegExp(texts[i],'g');
document.body.innerHTML = document.body.innerHTML.replace(regex,
"<a href='https://www.somesite.org'>replacement text</a>");
}
}
}

Using innerHTML to do this is like using a shotgun to do brain surgery. Not to mention that this can even result in invalid HTML. You will end up having to whitelist every single website that uses any JavaScript at this rate, which is obviously not feasible.
The correct way to do it is to not touch innerHTML at all. Recursively iterate through all the DOM nodes (using firstChild, nextSibling) on the page and look for matches in text nodes. When you find one, replace that single node (replaceChild) with your link (createElement), and new text nodes (createTextNode, appendChild, insertBefore) for any leftover bits.
Essentially you will want to look for a node like:
Text: this is some text that should be linked
And programmatically replace it with nodes like:
Text: this is
Element: a href="..."
Text: replacement text
Text: that should be linked
Additionally if you want to support websites that generate content with JavaScript you'll have to run this replacement process on dynamically inserted content as well. A MutationObserver would be one way to do that, but bear in mind this will probably slow down websites.

How to apply different stylesheets based on user on wordpress

I have a Wordpress self-hosted website for extra content about a series of books. On the near future, I intend to let the user declare which book(s) from the series he/she has read - and whilst it would be just for fun, I thought I could take this idea further.
The thing is, since some content on generic pages might be considered spoilers if they haven't read some of the books, I would like to apply a different stylesheet based on logged in user - so if the user has read up until book 2, a stylesheet would be loaded in such a way that any paragraph with the class "book3" or higher would be automatically converted into a hidden paragraph with a spoiler alert. But if the user has already read book 3, a different stylesheet would be loaded; one that wouldn't do that, and would let the user see the content normally.
I reckon this could also be done with javascript, but I suppose CSS would be easier? I'd be up for answers based on both methods, of course (including jQuery regarding javascript).

You can accomplish this without javascript.
One way to do this would be to add an additional class to the body if a user has read a particular book. For example, if a user has read book 1 you would want to add the class 'read-book-1' to the body. You can accomplish this in WordPress using the body_class filter.
https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
Here is a stripped down example:
add_filter('body_class', function($classes) {
if(/* if user has read book 1 */) {
$classes[] = 'read-book-1';
}
return $classes;
}
Then, assuming your markup looks like this:
<p class="spoiler book-1">...</p>
You could override your spoiler style if the user has read book 1:
p.spoiler {
visibility:hidden;
}
.read-book-1 p.spoiler.book-1 {
visibility:visible;
}
Note that I'm just assuming you're using visibility: hidden; to hide spoiler text. There is more than one way to do this.
If you wanted to incorporate additional features, such as a link to reveal spoiler text, then you would need javascript. If you just wanted to reveal spoiler text on hover you can do it with just css:
p.spoiler:hover {
visibility:visible;
}

To load a different CSS file according to a Javascript variable you can use a switch statement. Each case would use document.write() to write in the . This needs to be done before the body of the HTML loads so you don't overwrite anything. The MDN page which is linked to explains the details for this.
switch (variable) {
case possibility1:
document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
break;
case possibility2: ...
default: ...
}
Another alternative could be applying a class to spoilers. If content would be spoiled for book 2 and you know book2.hasRead === false, the hidden class would be applied to that content. Using element.classlist and getElementById is the easiest way that comes to mind.
Using a similar method to how responsive design uses different CSS for different situations could work as well but I don't know enough about that to advise how to do so.

Replacing Title Attribute With Spans For ToolTips A Bad Idea For SEO?

I am currently implementing pure CSS for tool tips and started rethinking it.
I had decided to use a pure CSS approach to keep the code to text ratio down to a minimum, have better control how they are displayed and better UX. But using a pure CSS solution without any JavaScript requires removing the title attribute from the anchor tag. This obviously could have a disadvantage(?).
That got me thinking: Has the SE's evolved to look at the span tag within anchor tags in lieu of the title attribute?
By removing the title attribute prevents the browser from displaying it's default behavior of a tool tip ( so there isn't two tool tips displayed to the user when using pure CSS) but the title attribute is important to search engines and SEO.
Knowing that the search engines are getting smarter and smarter by the day and I see a lot of tool tip design use implemented in this way thru the property inspector.
So:
Should I still include the title attribute? - I see good & bad
Would there be a penalty by having a span and title containing the same text within a given anchor? - this would be bad
Is the span tag counted as text even-thou it's within anchors? Cool if it is but most likely yes
If the title attribute is omitted, would the span take its place? Even better to make the inter-webs a better & faster place but most likely not
Having both would end up increasing the file size and the code ratio would increase too. It would be awesome if the SE's could search for the span tag between anchors as a title description.
So I ask you based on any current (or insider) knowledge and what I ask above, what code snippet below would be bad or best for SEO?
The old school way with JS and/or CSS:
<a class="[add my tooltip and remove the browsers]" href="#" title="description of link">The Link</a>
or
A movement I have seen many developers using:
The Link<span>description of link</span>
or
BUt should it be:
The Link<span>description of link</span>
Obviously there are a lot of factors to SEO weight to consider too so I would like to se everyone's opinion to be as thorough as possible - There might be something for every one to learn from this(?).
Thnx

Using
The Link<span>description of link</span>
is always advantageous, Search engines (mainly Google) are interested in the content of the link and thus the href title plays a vital role. Not only does it communicate to the user the link details but also enables SEs to read your link using its attributes and not having to follow the link to categorise.
SE robot's reading of spans is still controversial, but the title attribute is a sure thing.

Why not try something like this:
$(document).ready(function (e) {
$(".ToolTipClass").click(function (e) {
ConfirmOK("ToolTip", $(this).prop("alt"));
});
function ConfirmOK(Title, Message) {
$('<div style="padding:10px;max-width:500px;word-wrap:break-word;">' + Message + '</div>').dialog({
draggable: false,
modal: true,
resizable: false,
title: Title,
minHeight: 75,
closeOnEscape: false,
buttons: {
OK: function () {
$(this).dialog("destroy");
}
}
});
}
});
Stick the above code in your masterpage's document.ready event handler, then all you need to use it is set the class of anything to 'ToolTipClass' and set its alt property to whatever text you want to display in your dialog box.
You can use this code on anything, but I prefer to use "info" icons, since they're universally recognizeable. The amount of code required for this is very minimal - and you still have the title attribute freed up for your SEO concerns.

Create new (not change) stylesheets using jQuery

We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.

Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.

The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();

If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas