I'm updating microdata on my website and the agency asked me to provide microdata for blog articles. Everything is pretty clear except "mainEntityOfPage":
I found on schema.org that "mainEntityOfPage" can be implemented in this way:
<div itemScope itemType="https://schema.org/BlogPosting">
...
<link itemProp="mainEntityOfPage" href="example.com" />
</div>
So in the .json format it looks next:
{
"#context": "https://schema.org",
"#type": "BlogPosting",
"mainEntityOfPage": "example.com",
...
}
But the agency asked me to provide "mainEntityOfPage" so .json format looks like:
{
"#context": "https://schema.org",
"#type": "BlogPosting",
"mainEntityOfPage": {
"#type": "WebPage",
"#id": "example.com"
},
}
Is it possible to provide such microdata because I haven't found anything that looks like this?
Related
Where I can found the default schema code in shopify?
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "AggregateRating",
"reviewCount": "2",
"ratingValue": "5.0",
"itemReviewed": {
"#type" : "Product",
"name" : "Cuisinart Automatic Bread Maker",
"offers": {
"#type": "AggregateOffer",
"lowPrice": "125.0",
"highPrice": "125.0",
"priceCurrency": "CAD"
}
}
}
</script>
This code actually visible after html tag. Need help. Screenshot attached
Currently the above mentioned schema not visible in latest version of structured data. Checked and confirmed.
When trying to add a json-ld script tag to a section that gets teleported to the HEAD, the Vue 3 compiler fails with this error:
VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates.
Template:
<template>
<teleport to="head">
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "WebSite",
"url": "https://www.example.com/",
"potentialAction": {
"#type": "SearchAction",
"target": "https://query.example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
</teleport>
<div>
Hello world!
</div>
</template>
How can I add this json-ld tag without installing additional dependencies?
A workaround is to use Vue's built-in component (i.e., <component :is="'script'">) instead of <script>:
<template>
<teleport to="head">
<component :is="'script'" type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "WebSite",
"url": "https://www.example.com/",
"potentialAction": {
"#type": "SearchAction",
"target": "https://query.example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</component>
</teleport>
<div>
Hello world!
</div>
</template>
demo
I am new to Shopify, I need to create an Author Information Section in the Blog Posts where the user has the flexibility to enter and modify the content and display it, it should have also the ability to reuse it to the other blog page with the content inside.
Can we do it in shortcode? Can we do it without apps?
You can create Sections in Shopify to reuse the content on different pages. For your specific case, you can create an author-box section using
<section id={{section.id}}>
<h3>{{section.settings.title}}</h3>
{{section.settings.content}}
</section>
{% schema %}
{
"name": "Author Box",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "About Author"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
}
]
}
{% endschema %}
Then you can include this section in article template where you want this section to show using
{% section 'author-box'%}
Custom Sections in Shopify
state: {
questions: [
{
"id": 1,
"name": "q1",
"category": "English Language",
"type": "multiple",
"question": "What is a name of any person, animal, place, thing and feeling?",
"correct_answer": "Noun",
"incorrect_answers": [
"Pronoun",
"Noun",
"Adverb",
"Adjective"
]
}
]
answer = "",
answer = []
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
I'm working on a quiz app and I'm using Vuex for state management. I'm having four radio values (answers) for each question and I want to be putting just the last selected value (answer) into an array that's in my Vuex state, it's working fine but whenever the use chooses another radio input (from the same question) it enters the array too, whereas I want only the selected value from each question (no matter the number of toggle in the options).
My "questions" array of 10(in length) in the state looks like this:
state: {
questions: [
{
"id": 1,
"name": "q1",
"category": "English Language",
"type": "multiple",
"question": "What is a name of person, animal, place or thing?",
"correct_answer": "Noun",
"incorrect_answers": [
"Pronoun",
"Noun",
"Adverb",
"Adjective"
]
}
...
}
and my template looks like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
```
<div class="card-text ml-4" v-for="(answer, index) in question.incorrect_answers" :key="index" >
<label class="form-check-label">
<!-- <input type="radio" name="answer" class="mb-2" v-model="getAnswers[index]" :value="answer"> {{answer}} -->
<input type="radio" :name="question.name" class="mb-2" :value="answer" #change.stop="newAnswer(question.id, answer)" /> {{answer}}
</label> <!-- work on postanswer -->
</div>
```
and my mutation looks like this:
mutations:{
ANSWER(state, id, ans){
state.answer = id;
if(id === "q1"){
state.answers.push(state.answer);
} else {
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
I've been on this for weeks but I've not gotten it. How do I do it?
Logics for putting the answer into the array
Check whether the answer already inputted or not using the array index
If exists remove the old one and insert the latest choice
Here the code for the above logics
// Trying to find index of chosed answer
const indexOfExistingChoice = this.choosedAnswers.findIndex(
answer => answer.id === selectedAnswer.id
);
if (indexOfExistingChoice >= 0) {
// Choice already selected
// Removing the choice from the array
this.choosedAnswers.splice(indexOfExistingChoice, 1);
}
// Pushing into the array
this.choosedAnswers.push(selectedAnswer);
The Product Schema code that i am using as a custom HTML tag for implementing product schema using DOM variables in GTM..
<script>
var jsonData = {
"#context": "http://schema.org",
"#type": "Product",
"name": {{productName}},
"image": {{productImg}},
"url": {{Page URL}},
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": {{avgRating}},
"reviewCount": {{ratingsCount}},
}
}
var script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(jsonData);
$("head").append(script);
</script>
how can i configure the DOM element variable for AggregateRating Variables (avgRating, ratingsCount) in GTM.
here is the Markup
<div class="woocommerce-product-rating">
<div class="star-rating">
<span style="width:100%">
<strong class="rating">5.00</strong> out of <span>5</span> based on <span class="rating">1</span> customer rating </span>
</div>
(<span class="count">1</span> customer review) </div>
You need to create two variables in GTM
1) Go to Variables->User-Defined Variables->New->Custom Javascript
2) Create variable with name ProductAvgRating and JS code:
function () {
try {
return parseFloat(document.querySelector('.woocommerce-product-rating strong.rating').innerText);
}
catch(e) {return 0;}
}
2) Create variable with name ProductRatingsCount and JS code:
function () {
try {
return parseInt(document.querySelector('.woocommerce-product-rating span.rating').innerText);
}
catch(e) {return 0;}
}
And then change your html tag like that:
<script>
var jsonData = {
"#context": "http://schema.org",
"#type": "Product",
"name": {{productName}},
"image": {{productImg}},
"url": {{Page URL}},
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": {{ProductAvgRating}},
"reviewCount": {{ProductRatingsCount}},
}
}
var script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(jsonData);
$("head").append(script);
</script>
P.S. You didn't ask about productName and productImg variables, i guess you already have it