I have grid of products. Each product row in the grid can be expended to show the full product details (done with Ajax). The sample bellow shows how I implemented the microdata into the grid (not the full product details). The same microdata repeats over and over in the page
Is this the best way?
<tbody>
#foreach (var product in Model)
{
<tr itemscope itemtype="http://schema.org/Product" class="tr_prod" style="height:105px;" productid="#product.Id" optionid="#product.OptionId" shopcityid="#product.ShopCityId">
<td>
<div class="prod_img_small">
<img class="preview" src="#Url.Content("~/Files/Products/" + product.ImgFileName)" />
</div>
</td>
<td itemprop="name">
<b>#product.Name</b>
</td>
<td>
<div itemprop='productID'>
<b>#product.Id</b>
</div>
</td>
<td>
<div itemscope itemprop="priceSpecification" itemtype="http://schema.org/DeliveryChargeSpecification">
<b><span itemprop="price">#product.DeliveryPrice</span></b>
</div>
</td>
<td>
<b>#product.ProductPrice</b>
</td>
<td>
<b>#product.TotalPrice </b>
</td>
</tr>
}
</tbody>
Does look valid to me. Some itemscopes can even be promoted to the <TD> like priceSpecification.
All metadata that's added using AJAX won't be showing up for spiders of course, so that's something to think about.
You can also add metadata to the page to indicate it's a collection of products.
<body itemscope itemtype="http://schema.org/CollectionPage">
...
</body>
Related
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
In this example i have this code:
<table class="basicinfo" cellspacing="0">
<tr class="header">
<td colspan="3">
<div>
<h2 class="prod_card">Basic info</h2>
</div>
</td>
</tr>
<tr class="row2 item">
<td class="cell0">
<div>
Year
</div>
</td>
<td class="cell1">
<div>
2005
</div>
</td>
</tr>
<tr class="row3 item alt">
<td class="cell0">
<div>
Extra
</div>
</td>
<td class="cell1">
<div>
-
</div>
</td>
</tr>
</table>
Now, i want to get (for example) the year. I'm trying to get the next div content after the div with Year content.
I'm using this xpath without success:
//div[preceding-sibling::div = 'Year']
And anyone knows a good website to start learning xpath? Thanks in advance!
Following XPath
//div[parent::td/preceding-sibling::td//div[normalize-space()= 'Year']]
has the result
<div>2005</div>
Your XPath didn't work because the div you are looking for has not a div element as preceding-sibling but a td as parent. The preceding-sibling::td of this td contains a div which has the text "Year" - td//div. Using normalize-space() returns the text of this div without any spaces which can be necessary when checking for equality.
For reference: normalize-space(), and as you asked for good resources - I don't want to recommend anything special, but you should have a look at the resources mentioned at the info given on stackoverflow here: https://stackoverflow.com/tags/xpath/info (if not already done) and, for XPath axes, this is a good visualization: http://www.xmlplease.com/axis
I am struggling to grab the artist and track name data from these tables as they are identical! Does anyone know how I can do this? Another thing is picking up URL data, this doesn't seem to return either. I have got all the rest of the fields, just stuck on these, any help would be gladly received. (The info here: <td class="r-pad">)
<tr data-trid="**1350474**" class="ptk-1350474 play-trk">
<td class="tnum-td">
<div class="tnum-ppl-cont">
<div class="tnum">1</div>
<div class="play-fly"></div>
</div>
</td>
<td class="thumb"><div class="thumb-cont"><img src="http://static.example.com/scripts/image.php/44x44/240148.jpg" /><img src="http://w-static.example.com/img/promo_large.png" class="**promo**" /></div></td>
<td class="r-pad">**TRACK NAME** <br /><span class="version">**Original Version** <span class="duration">**(6:40)**</span></span></td>
<td class="r-pad">**Artist Name**, ****Artist Name 2**<br /></td>
<td class="label-e r-pad"><div class="lab-div ellip"><a href="/label/8831/music-label-name" title="**Music Label Name**">**Music Label<**/a></div></td>
<td class="genre-e r-pad"><div class="genr-div ellip"><**a href="/genre/13/country-music**" title="Country Music">**Country Music**</a></div></td>
<td class="rdate r-pad">**2013-11-14**</td>
<td class="drop">
<div class="ttl-drop-menu">
<div class="com-drop-menu">
<div class="fol-div ellip">follow test</div>
<div class="fol-div ellip">follow test</div>
<div class="fol-div ellip">follow test</div>
</div>
</div>
</td>
<td class="buy-stat"><span class="price">**$2.99**</span></td>
</tr>
You can get the track name by doing the next XPath:
//td[#class='r-pad' and contains(a/#href, 'track')]
To get the both artists names, do:
//td[#class='r-pad']/a[#class='com-artists']
To get the price, do:
//td[#class='buy-stat'/a[#class='com-buy']/span[#class='price']
To get the track ID, do:
//tr[contains(#class, 'play-trk')]/#data-trid
My developer coded a list of Products using HTML Tables. The code came out something like this:
<table>
<tr class="name">
<td>Product Name #1</td><td>Product Name #2</td><td>Product Name #3</td>
</tr>
<tr class="price">
<td>Product Price #1</td><td>Product Price #2</td><td>Product Price #3</td>
</tr>
<tr class="brand">
<td>Product Brand #1</td><td>Product Brand #2</td><td>Product Brand #3</td>
</tr>
</table>
You get the idea. Visually it looks perfect, but when attempting to markup via schema.org, I'm running into issues, being that the products properties don't exist is neat nested HTML elements, but are spread across the table. Would there be a way to use the ItemID Microdata attribute to make sure each brand and price is associated with the right product name?
Something like:
<tr class="name">
<td itemscope itemtype="http://www.schema.org/Product" itemID="Product1">Product Name #1</td>
<td itemscope itemtype="http://www.scema.org/Product" itemID="Product2">Product Name #2</td>
Etc., etc. Any thoughts? Will I have the re-code the pages to make this work?
Actually, itemid would not be the correct way to do this. Unlike RDF, the microdata parsing model doesn't join things that have the same itemid.
Instead, you should use the itemref attribute.
For example:
<div itemscope itemtype="http://schema.org/Product" itemref="foo"></div>
<div id="foo" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Product Price #1</span>
</div>
You can test microdata using https://webmaster.yandex.com/tools/microtest/ in addition to Google.
Yes, itemid is the right way to do this. Your example would look something like this:
<table>
<tr class="name">
<td itemscope itemtype="http://www.schema.org/Product" itemid="Product1">
<span itemprop="name">Product Name #1</span>
</td>
<td itemscope itemtype="http://www.schema.org/Product" itemid="Product2">
<span itemprop="name">Product Name #2</span>
</td>
</tr>
<tr class="price">
<td itemscope itemtype="http://www.schema.org/Product" itemid="Product1">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Product Price #1</span>
</div>
</td>
<td itemscope itemtype="http://www.schema.org/Product" itemid="Product2">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Product Price #2</span>
</div>
</td>
</tr>
</table>
By re-using the same itemid you're telling the microdata parser that you're talking about the same item in different parts of the page.
I need to detemine xpath for element mainForm:queryConfigure:fetchReport.
<span id="mainForm:queryConfigure:j_id18">
<table id="mainForm:queryConfigure:j_id19"
class="showReportTable" align="center">
<tbody>
<tr>
<td>
<input id="mainForm:queryConfigure:fetchReport" type="image"
src="images/show_report.gif" name="mainForm:queryConfigure:fetchReport"/>
</td>
</tr>
</tbody>
</table>
</span>
I tried
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport'][#type='image'][#src='images/show_report.gif']");
and
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport']");
One more case:
<div class="tabUnselectedText" align="center">
Notifications
</div>
Id and name attribute values are acceptable locators for method click. See locating elements in the documentation.
selenium.click('mainForm:queryConfigure:fetchReport');