Merge pull request #33 from bpedroza/schema-updates

Schema updates fixes #32

.gitignore

@@ -1 +1,2 @@
-/bower_components
+/bower_components
+.DS_Store

README.md

@@ -1,7 +1,7 @@
 # google-places
 A jQuery plugin to render google places data.
 
-Currently the only only thing that is rendered is a list view of reviews. 
+Currently the only only thing that is rendered is a list view of reviews.
 
 [Demos](http://peledies.github.io/google-places/)
 
@@ -41,18 +41,27 @@ Include these files in the head
 | **schema** | Object | Options for displaying Schema | see below |
 
 ### Optional Schema Markup
-The schema markup will render something like below: 
+The schema markup will render something like below:
 ```html
-<span itemscope="" itemtype="http://schema.org/Store">
-    <meta itemprop="url" content="http://example.com">
-    Google Users Have Rated 
-    <span itemprop="name">
-        Hostel Fish
-    </span> 
-    <span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
-        <span itemprop="ratingValue">5</span>/<span itemprop="bestRating">5</span> 
-        based on <span itemprop="ratingCount">5</span> ratings and reviews
-    </span>
+<span itemscope="" itemtype="http://schema.org/Hostel">
+  <meta itemprop="image" content="https://via.placeholder.com/150">
+  <meta itemprop="priceRange" content="$$">
+  <meta itemprop="url" content="https://example.org">
+  <meta itemprop="telephone" content="(303) 954-0962">
+  <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" style="display: none;">
+    <span class="street-address" itemprop="streetAddress">1217 20th St</span>,
+    <span class="locality" itemprop="addressLocality">Denver</span>,
+    <span class="region" itemprop="addressRegion">CO</span>
+    <span class="postal-code" itemprop="postalCode">80202</span>,
+    <span class="country-name" itemprop="addressCountry">USA</span>
+  </div>
+  Google Users Have Rated
+  <span itemprop="name">Hostel Fish</span>
+  <span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
+    <span itemprop="ratingValue">4.80</span>/<span itemprop="bestRating">5</span>
+    based on <span itemprop="ratingCount">5</span>
+    ratings and reviews
+  </span>
 </span>
 ```
 
@@ -63,6 +72,8 @@ The schema markup will render something like below:
 | **middleText** | String | Text in between ratings | 'based on' |
 | **afterText** | String | last text in rating | 'ratings and reviews' |
 | **type** | String | schema.org [type](https://schema.org/docs/full.html) | 'Store' |
+| **image** | String | url to your company image | null |
+| **priceRange** | String | Price range ($$) | null |
 
 ### staticMap options
 | property | Description | Default |
@@ -90,6 +101,8 @@ $("#google-reviews").googlePlaces({
           , middleText: 'based on'
           , afterText: 'awesome reviewers.'
           , type: 'Hostel'
+          , image: 'https://via.placeholder.com/150'
+          , priceRange: '$$'
       }
   , address:{
     displayElement: "#custom-address-id" // optional, will use "#google-address" by default
@@ -121,4 +134,3 @@ function sayHi() {
 
 $("#google-reviews").on('afterRender.googlePlaces', sayHi);
 ```
-

demo/index.html

@@ -8,7 +8,7 @@
       src="https://code.jquery.com/jquery-2.2.4.min.js"
       integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
       crossorigin="anonymous"></script>
-    <script src="https://rawgit.com/peledies/google-places/master/google-places.js"></script>
+    <script src="../google-places.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
     <link rel="stylesheet" href="https://rawgit.com/peledies/google-places/master/google-places.css">
   </head>
@@ -34,6 +34,8 @@
             , beforeText: 'Google Users Have Rated'
             , middleText: 'based on'
             , afterText: 'ratings and reviews'
+            , image: 'https://via.placeholder.com/150'
+            , priceRange: '$$'
           }
         , address:{
             displayElement: "#custom-address-id"
@@ -42,4 +44,4 @@
 
     });
   </script>
-</html>
+</html>

google-places.js

@@ -19,6 +19,8 @@
                 , beforeText: 'Google Users Have Rated'
                 , middleText: 'based on'
                 , afterText: 'ratings and reviews'
+                , image: null
+                , priceRange: null
             }
             , address:{
                 displayElement: "#google-address"
@@ -294,26 +296,67 @@
         }
 
         var addSchemaMarkup = function(element, placeData) {
+
+          if(element instanceof jQuery){
+            var schema = plugin.settings.schema;
+            var schemaMarkup = '<span itemscope="" itemtype="http://schema.org/' + schema.type + '">';
+
+            if(schema.image !== null) {
+              schemaMarkup += generateSchemaItemMarkup('image', schema.image);
+            } else {
+              console.warn('Image is required for some schema types. Visit https://search.google.com/structured-data/testing-tool to test your schema output.');
+            }
+
+            if(schema.priceRange !== null) {
+              schemaMarkup += generateSchemaItemMarkup('priceRange', schema.priceRange);
+            }
+
+            schemaMarkup += generateSchemaItemMarkup('url', location.origin);
+            schemaMarkup += generateSchemaItemMarkup('telephone', plugin.place_data.formatted_phone_number );
+            schemaMarkup += generateSchemaAddressMarkup();
+            schemaMarkup += generateSchemaRatingMarkup(placeData, schema);
+            schemaMarkup += '</span>';
+
+            element.append(schemaMarkup);
+          }
+        }
+
+        var generateSchemaAddressMarkup = function() {
+          var $address = $('<div />', {
+              itemprop: "address"
+            , itemscope: ''
+            , itemtype: "http://schema.org/PostalAddress"
+          }).css('display', 'none');
+          $address.append(plugin.place_data.adr_address);
+          $address.children('.street-address').attr('itemprop', 'streetAddress');
+          $address.children('.locality').attr('itemprop', 'addressLocality');
+          $address.children('.region').attr('itemprop', 'addressRegion');
+          $address.children('.postal-code').attr('itemprop', 'postalCode');
+          $address.children('.country-name').attr('itemprop', 'addressCountry');
+          return $address[0].outerHTML;
+        }
+
+        var generateSchemaRatingMarkup = function(placeData, schema) {
           var reviews = placeData.reviews;
           var lastIndex = reviews.length - 1;
           var reviewPointTotal = 0;
-          var schema = plugin.settings.schema;
+
           for (var i = lastIndex; i >= 0; i--) {
             reviewPointTotal += reviews[i].rating;
           };
-          // Set totals and averages - may be used later.
+
           var averageReview = reviewPointTotal / ( reviews.length );
-          if(element instanceof jQuery){
-            element.append( '<span itemscope="" itemtype="http://schema.org/' + schema.type + '">'
-            +  '<meta itemprop="url" content="' + location.origin + '">'
-            +  schema.beforeText + ' <span itemprop="name">' + placeData.name + '</span> '
-            +  '<span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">'
-            +    '<span itemprop="ratingValue">' + averageReview.toFixed(2) + '</span>/<span itemprop="bestRating">5</span> '
-            +  schema.middleText + ' <span itemprop="ratingCount">' + reviews.length + '</span> '
-            +  schema.afterText
-            +  '</span>'
-            +'</span>');
-          }
+
+          return schema.beforeText + ' <span itemprop="name">' + placeData.name + '</span> '
+          +  '<span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">'
+          +    '<span itemprop="ratingValue">' + averageReview.toFixed(2) + '</span>/<span itemprop="bestRating">5</span> '
+          +  schema.middleText + ' <span itemprop="ratingCount">' + reviews.length + '</span> '
+          +  schema.afterText
+          +  '</span>'
+        }
+
+        var generateSchemaItemMarkup = function(name, value) {
+          return '<meta itemprop="' + name + '" content="' + value + '">'
         }
 
         plugin.init();
@@ -331,4 +374,4 @@
 
     }
 
-})(jQuery);
+})(jQuery);