Inject html after review widget loads for schema markup - javascript

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>

Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

Related

Internationalization of a HTML + Markdown document (using RemarkJS)

I have many slides for a presentation made with RemarkJS. It is a HTML file slides_fr.html with a single <textarea id="source"> containing the actual content in Markdown syntax (+ one or two specific markup tags to separate the slides with a page break), and one call to the JS library RemarkJS.
I am translating this document into English (I first duplicated slides_fr.html into slides_en.html and started to translate). Problem: each time I do improvement on the slides in the English version, I'll have to remodify the original file slides_fr.html to keep them in sync. In my experience, this rarely works well on the long-term. It would be better to have both versions in the same file, with markup for language.
Question: in order to avoid having two files slides_fr.html and slides_en.html like this that will ultimately never stay in sync:
<html>
<head></head>
<body>
<textarea id="source">
First slide
My presentation about XYZ
---
Second slide
Hello world
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script><script>remark.create();</script>
</html>
which options are there, using HTML or Javascript or Markdown-specific syntax to have both languages in the same file like this:
<textarea id="source">
First slide ||| Première diapositive
My presentation about XYZ ||| Ma présentation à propos de XYZ
---
Second slide ||| Seconde diapositive
Hello ! ||| Bonjour
</textarea>
<javascript>
chooseLanguage(document.getElementBydId('source'), 'en'); // there is surely a better solution
// than a parsing and splitting by '|||' ?
</javascript>
As a way to better organize localized texts, you could use CSS classes to mark which language applies to each text.
Remark provides a markdown extension called "Content classes" (https://remarkjs.com/#12), it's used to apply CSS classes to texts.
I think this feature could be exploited to wrap localized texts inside the markdown source, in this fashion:
.lang_en[Second slide]
.lang_fr[Seconde diapositive]
.lang_it[Seconda diapositiva]
These will be transcripted in HTML as:
<span class="lang_en">Second slide</span>
<span class="lang_fr">Seconde diapositive</span>
<span class="lang_it">Seconda diapositiva</span>
Once texts are structured this way, you can easily show / hide them via javascript and CSS.
This fiddle shows the Remark boilerplate localized in english and italian, adapted using the above strategy (javascript language switcher not provided in the snippet): https://jsfiddle.net/k7au5oe3/

How to get all the subfolders name within a ROOT Folder and create HTML Content?

I am working on a school project and I have to do a static digital menu website for a bar. Because it's static, I used JavaScript where necessary. Anyways, I divided everything into groups, each group is represented by a card with an image and a button. Here is an example:
This is the source code for a card:
<body>
<div id="cards">
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>
</div>
</body>
As you can see, in order to add a single card, I had to manually write the whole structure of a card in the second div, with the class="card".
BUT, I must create it dynamically based on the structure of the subfolders inside the Root folder witch is called Resources, here's a scheme:
In order to achieve this I started using JavaScript since it's the only possible way I think:
<script type="text/javascript">
function showMenu()
{
var content = `
<div class="card">
<img src="/Resources/Food.png" class="card_image">
<a href="javascript:showMenu()" class="button">
<p>FOOD</p>
</a>
</div>`;
document.querySelector("#cards").innerHTML = content;
}
</script>
So, now that I've expressed what I need to do is this: in the JavaScript code you can see that the card was generated manually anyways but I need the content to generate based on the folder structure I have stored locally. In other words, the whole script should take in input the name/path of the ROOT folder which is called "Resources" and from there it should generate the groups based on it's content. For example, if I click the button on the FOOD Card, then it should delete the FOOD and DRINKS Cards and only add the Vegetables Card in this case...I know it sounds complicated but at the end of the day the problem lies in getting the subfolder names, and since the image has the same name of the subfolder, apply it on the <img> tag and also on the button. All this, using JavaScript. If you know that some other language would work much better I'm open to suggestions, but I built the entire website until now only using JavaScript.
Anyways, I tried to express the problem the best I could so if something is unclear, I can easily modify the post if needed. Thanks in advance!
You could put the image data into a JSON object, then bind related processing functions according to the requirement.

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>
I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples

change text string on couple website at the same time using jquery

22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (e.g. on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2".
Currently I have the example code here:
<h3>Product 1</h3>
<div class="price">
<span id="product1">£55 per day</span>
</div>
<h3>Product 2</h3>
<div class="price">
<span id="product2">£20 per day</span>
</div>
etc...
Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.
use JSON, not XML It's not 2003. Your jquery would be:
var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
product = $(this).html();
$(this).next().children("span").html(prices[product]);
});
Assuming you have no other H3's on your pages, otherwise give each product ID 'h3' a class a la:
<h3 class="products">Product 1</h3>
and use $(".products") instead of $("h3").
You could also use a selector to pull the <div>'s by class, and fetch the child <span>'s id.
I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.
Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.

Should I use template or return full code in jquery AJAX?

I am currently working on a project that lets users post comments with jquery and ajax. So far it is using Json and retunring several items, username, comment text, user photo url, comment ID number and stuff like that, I then need to use some sort of template to make all this data go into the correct div's before adding it all to the screen.
I am new to using javascript so this is a hard task for me. I am now considering the easy route.
Just have my PHP backend script return the whole block of code, div's and everything in place but I am wondering is this a bad idea? More importantly is it a bad idea with json?
Here is an example of a block of code that needs to be added to the screen when a comment is posted
<li class="admin" id="comment-1371">
<div class="photocolumn">
<!-- START Photo block -->
<div class="imageSub" style="width: 100px;">
<img class="male" src="http://cache2.mycrib.net/images/image_group34/0/39/T_653807517aff2b1f5662d865b40d87d527c8eb.jpg" alt="Something" width="100"/>
<div class="blackbg"></div>
<div class="label">JasonDavis</div>
</div>
<!-- END Photo block -->
</div><!-- END photocolumn -->
<div class="commenttext">
<p>02/12/3009</p>
<p>sample text for comment area!</p>
</div>
<!-- END COMMENTTEXT -->
</li>
I would say it depends on the situation/application. For instance I would use json and templating for a flight/hotel etc result screen. Why return 50k's worth of the same markup when a 4k json object will do and will allow for rapid clientside sort/filter. If you dont need quick clientside filtering/sorting then responding with dom fragments is ok. Horses for courses.
I don't see a problem with returning HTML via AJAX. A bonus of this is that you can generate most of the HTML in a view in PHP and still keep things fairly clean.
Tokenizing your data into an object is nice for re-use but can be overkill for a one-off.
Go the easy route, I can see no reasons of going with JSON array.

Categories