A presentation at Meet Magento 2013 in in Ede, Netherlands by Hans Kuijpers
hans2103 30 May 2013 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
markup <div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 30 May 2013
itemscope <div itemscope> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 30 May 2013
itemtype <div itemscope itemtype=”http://schema.org/ Movie”> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href=”../movies/avatar-theatricaltrailer.html”>Trailer</a> </div> hans2103 30 May 2013
itemprop <div itemscope itemtype =”http://schema.org/ Movie”> <h1 itemprop=”name”>Avatar</h1> <span>Director: <span itemprop=”director”>James Cameron</span> (born August 16, 1954)</span> <span itemprop=”genre”>Science fiction</ span> <a href=”../movies/avatar-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> </div> hans2103 30 May 2013
embedded items <div itemscope itemtype =”http://schema.org/ Movie”> <h1 itemprop=”name”>Avatar</h1> <div itemprop=”director” itemscope itemtype=”http://schema.org/Person”> Director: <span itemprop=”name”>James Cameron</span> (born <span itemprop=”birthDate”>August 16, 1954)</span> </div> <span itemprop=”genre”>Science fiction</ span> <a href=”../movies/avatar-theatricaltrailer.html” itemprop=”trailer”>Trailer</a> hans2103 30 May 2013
hopsakee… aan de slag! hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
add ?ath=1 to url hans2103 30 May 2013
hans2103 30 May 2013
file to edit hans2103 30 May 2013
add scope Product • itemtype = http://schema.org/Product • itemscope hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view.phtml find <div class=”product-view”> change by
<div class=”product-view” itemscope itemtype=”http://schema.org/Product”> save&close hans2103 30 May 2013name • itemprop = name • is part of itemtype = Product hans2103 30 May 2013
open template/catalog/product/view.phtml find <div class=”product-name”> <h1><?php echo $_helper>productAttribute($_product, $_product>getName(), ‘name’) ?></h1> </div> change by
<div class=”product-name”> <h1 itemprop=”name”><?php echo $_helper>productAttribute($_product, $_product>getName(), ‘name’) ?></h1> </div> save&close hans2103 30 May 2013description • itemprop = description • is part of itemtype = Product hans2103 30 May 2013
open template/catalog/product/view.phtml find <div class=”std”><?php echo $_helper>productAttribute($_product, nl2br($_product>getShortDescription()), ‘short_description’) ?></div> change by
<div class=”std” itemprop=”description”><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?></div> save&close hans2103 30 May 2013image • itemprop = image • is part of itemtype = Product hans2103 30 May 2013
open template/catalog/product/view/media.phtml find <?php $_img = ‘<img id=”image” src=”’.$this>helper(‘catalog/image’)->init($_product, ‘image’) change by
<?php $_img = ‘<img id=”image” itemprop=”image” src=”’.$this->helper(‘catalog/image’)>init($_product, ‘image’) repeat save&close hans2103 30 May 2013url • itemprop = url • is part of itemtype = Product hans2103 30 May 2013
open template/catalog/product/view.phtml find <div class=”product-view” itemscope itemtype=”http://schema.org/Product”> change by <div class=”product-view” itemscope itemtype=”http://schema.org/Product”> <meta itemprop=”url” content=”<?php echo $_product->getProductUrl() ?>”/> save&close hans2103 30 May 2013
add scope Offer • itemtype = http://schema.org/Offer • itemscope hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘product_type_data’) ?> <?php echo $this->getTierPriceHtml() ?> change by
<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> <?php echo $this>getChildHtml(‘product_type_data’) ?> <?php echo $this->getTierPriceHtml() ?> </div> save&close hans2103 30 May 2013priceCurrency • itemprop = priceCurrency • is part of itemtype = Offer itemprop=”priceCurrency” • <meta content=”<?php echo $currency_code = Mage::app()->getStore()>getCurrentCurrencyCode(); ?>”/> hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘alert_urls’) ?> <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> add after <meta itemprop=”priceCurrency” content=”<?php echo $currency_code = Mage::app()>getStore()->getCurrentCurrencyCode(); ?>”/> save&close hans2103 30 May 2013
itemAvailability • itemprop = availability • is part of itemtype = Offer hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view/type/default.phtml find <p class=”availability in-stock”><?php echo $this->__(‘Availability:’) ?> <span><?php echo $this->__(‘In stock’) ?></span></p> change by <p class=”availability in-stock”><link itemprop=”availability” href=”http:// schema.org/InStock”><?php echo $this>__(‘Availability:’) ?> <span><?php echo $this->__(‘In stock’) ?></span></p> save&close hans2103 30 May 2013
open template/catalog/product/view/type/default.phtml find <p class=”availability out-of-stock”><?php echo $this->__(‘Availability:’) ?> <span><? php echo $this->__(‘Out of stock’) ?></ span></p> change by <p class=”availability out-of-stock”><link itemprop=”availability” href=”http:// schema.org/OutOfStock”><?php echo $this>__(‘Availability:’) ?> <span><?php echo $this->__(‘Out of stock’) ?></span></p> save&close hans2103 30 May 2013
itemCondition • itemprop = ItemCondition • is part of itemtype = Offer • create new attribute first itemprop=”itemCondition” • <link href=”http://schema.org/ <echo_attribute>Condition” /> hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view.phtml find <?php echo $this>getChildHtml(‘alert_urls’) ?> <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”> add after
<link itemprop=”itemCondition” href=”http://schema.org/<?php echo $_product>getResource()>getAttribute(‘offeritemcondition’)>getFrontend()->getValue($_product) ? >Condition” /> save&close hans2103 30 May 2013price • itemprop = price • is part of itemtype = Offer • download https://gist.github.com/ hans2103/5635901 • Adding a itemprop to price in upsell is not wanted. hans2103 30 May 2013
open template/catalog/product/view/type/default.phtml find
<?php echo $this->getPriceHtml($_product) ?>add after
<?php echo $this->getPriceHtml($_product, false, ‘-aggregate’) ?>save&close hans2103 30 May 2013
add scope AggregateRating • itemtype = http://schema.org/ AggregateRating • itemscope • rating from Upsell is not wanted • install https://github.com/hans2103/ Hans2103_ReviewSummaryTemplates hans2103 30 May 2013
Hans2103_Review SummaryTemplates • Provides ability to add more review summary templates. • First written in blogpost by Fontis.com • Later converted in a module by Arjen Miedema • Now added to Github by Hans2103 hans2103 30 May 2013
hans2103 30 May 2013
open template/catalog/product/view.phtml find
<?php echo $this>getReviewsSummaryHtml($_product, false, true)?>change by
<?php echo $this>getReviewsSummaryHtml($_product, ‘aggregate’, true)?>save&close hans2103 30 May 2013
open template/review/helper/summary_aggregate.phtml find
<div class=”ratings”> <?php if ($this->getRatingSummary()):?> replace with <div class=”ratings” itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”> <?php if ($this->getRatingSummary()):?> save&leave_open hans2103 30 augustus 2013open template/review/helper/summary_aggregate.phtml find <?php if ($this->getRatingSummary()):?> add after
<meta itemprop=”ratingValue” content=”<?php echo $this->getRatingSummary(); ?>”> <meta itemprop=”reviewCount” content=”<?php echo $this->getReviewsCount(); ?>”> <meta itemprop=”bestRating” content=”100”> <meta itemprop=”worstRating” content=”0”> save&close hans2103 30 augustus 2013add Breadcrumbs • using other method • http://data-vocabulary.org/Breadcrumb • Schema.org can be used too, but the result in Rich Snippets is not as good as this method. hans2103 30 May 2013
hans2103 30 May 2013
open template/page/html/breadcrumb.phtml find <li class=”<?php echo $_crumbName ?>”> change by <li class=”<?php echo $_crumbName ?>” itemscope itemtype=”http://datavocabulary.org/Breadcrumb”> save&leave_open hans2103 30 May 2013
still open template/page/html/breadcrumb.phtml find <a href=”<?php echo $_crumbInfo[‘link’] ?>” title=”<?php echo $this>htmlEscape($_crumbInfo[‘title’]) ?>” itemprop=”url”><?php echo $this>htmlEscape($_crumbInfo[‘label’]) ?></a> change by <a href=”<?php echo $_crumbInfo[‘link’] ?>” title=”<?php echo $this>htmlEscape($_crumbInfo[‘title’]) ?>” itemprop=”url”><span itemprop=”title”><?php echo $this->htmlEscape($_crumbInfo[‘label’]) ? ></span></a> save&close hans2103 30 May 2013
hopsakee… testen! hans2103 30 May 2013
hans2103 30 May 2013
nu jij! have fun hans2103 30 May 2013
thank your for your time http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 http://www.flickr.com/photos/trasimac/1217071176
Embed Rich Snippets in your Magento product page.
Presentation given during Meet Magento 2013
for free. You
can too.