From 6c4f588e4689d577611a3b5c9c1f180c9d5c7572 Mon Sep 17 00:00:00 2001 From: Bryan Date: Sat, 1 Dec 2018 10:19:35 -0700 Subject: [PATCH 1/3] update schema to include address and telephone automatically and add options for image and price range --- .gitignore | 3 +- demo/index.html | 6 ++-- google-places.js | 71 ++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 63 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 47c3270..4e70577 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -/bower_components \ No newline at end of file +/bower_components +.DS_Store diff --git a/demo/index.html b/demo/index.html index d9bf69d..a19bdbe 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,7 +8,7 @@ src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"> - + @@ -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 @@ }); - \ No newline at end of file + diff --git a/google-places.js b/google-places.js index c6e6b08..a3550da 100644 --- a/google-places.js +++ b/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 = ''; + + 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 += ''; + + element.append(schemaMarkup); + } + } + + var generateSchemaAddressMarkup = function() { + var $address = $('
', { + 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( '' - + '' - + schema.beforeText + ' ' + placeData.name + ' ' - + '' - + '' + averageReview.toFixed(2) + '/5 ' - + schema.middleText + ' ' + reviews.length + ' ' - + schema.afterText - + '' - +''); - } + + return schema.beforeText + ' ' + placeData.name + ' ' + + '' + + '' + averageReview.toFixed(2) + '/5 ' + + schema.middleText + ' ' + reviews.length + ' ' + + schema.afterText + + '' + } + + var generateSchemaItemMarkup = function(name, value) { + return '' } plugin.init(); @@ -331,4 +374,4 @@ } -})(jQuery); \ No newline at end of file +})(jQuery); From ff8dc74f0e23f2967be1da14a77e19d89e972354 Mon Sep 17 00:00:00 2001 From: Bryan Date: Sat, 1 Dec 2018 10:22:53 -0700 Subject: [PATCH 2/3] Update readme --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 044555c..481ba23 100644 --- a/README.md +++ b/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,16 +41,16 @@ 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 - Google Users Have Rated + Google Users Have Rated Hostel Fish - + - 5/5 + 5/5 based on 5 ratings and reviews @@ -63,6 +63,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 +92,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 +125,3 @@ function sayHi() { $("#google-reviews").on('afterRender.googlePlaces', sayHi); ``` - From 5d10de038de151310c44d12c382e98d11f9abb48 Mon Sep 17 00:00:00 2001 From: Bryan Date: Sat, 1 Dec 2018 10:31:43 -0700 Subject: [PATCH 3/3] Update schema example in readme --- README.md | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 481ba23..83fcf6e 100644 --- a/README.md +++ b/README.md @@ -43,16 +43,25 @@ Include these files in the head ### Optional Schema Markup The schema markup will render something like below: ```html - - - Google Users Have Rated - - Hostel Fish - - - 5/5 - based on 5 ratings and reviews - + + + + + +
+ 1217 20th St, + Denver, + CO + 80202, + USA +
+ Google Users Have Rated + Hostel Fish + + 4.80/5 + based on 5 + ratings and reviews + ```