Reputation: 516
Is there a way to get the last review on the home page in Big Commerce without using an extension/plugin/external app? I can see that templates/pages/home.html can only access the {{products}}
object as per the docs.
I can see the following code further down that file but the docs don't suggest that there is access to the {{product}}
object so that seems misleading:
{{#if theme_settings.show_product_reviews_tabs}}
{{> components/products/reviews reviews=product.reviews product=product urls=urls}}
{{/if}}
I'm using the 'Lifestyle' theme. Thank-you.
--
So prompted by @MattCoy's suggestion I'm attempting to create a widget template that I can just drag & drop on the storefront. However (shocker!) - I'm not able to get any data rendering. Here's the widget template
{
"name": "product-reviews",
"schema": [
{
"type": "hidden",
"settings": [
{
"type": "graphQl",
"id": "graphQueries",
"typeMeta": {
"mappings": {
"productId": {
"reads": "product.value.*.productId",
"type": "Int"
}
}
}
}
]
},
{
"type": "tab",
"label": "Content",
"sections": [
{
"label": "Product",
"settings": [
{
"type": "productId",
"label": "Product",
"id": "productId",
"default": "",
"typeMeta": {
"placeholder": "Search by name or SKU"
}
}
]
}
]
}
],
"template": "<div id=\"sd-product-reviews-{{_.id}}\"></div>\n\n{{#each ../_.data.site.product.reviews.edges as |productReview|}}\n <script type=\"application/ld+json\">\n {\n \"@context\": \"https://schema.org/\",\n \"@type\": \"Review\",\n \"reviewRating\": {\n \"@type\": \"Rating\",\n \"ratingValue\": \"{{productReview.node.rating}}\"\n },\n \"name\": \"{{productReview.node.title}}\",\n \"author\": {\n \"type\": \"Person\",\n \"name\": \"{{productReview.node.author.name}}\"}\n \"reviewBody\": \"{{productReview.node.text}}\",\n \"datePublished\": \"{{productReview.node.createdAt.utc}}\"\n }{{#unless @last}},{{/unless}}\n {{/each}}\n ]\n }\n</script>\n\n<script type=\"text/javascript\">\n (function() {\n var widgetConfiguration = {{{json.}}};\n var dataIsNotPresent = typeof widgetConfiguration._.data === 'undefined' || Object.keys(widgetConfiguration._.data || {}).length === 0;\n var storefrontApiQueryData = widgetConfiguration._.queryData;\n\n function executeStorefrontApiQuery(queryData, callback) {\n // Fetch data from the GraphQL Storefront API\n var storefrontApiRequest = new XMLHttpRequest(); // IE compatible\n storefrontApiRequest.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n callback(JSON.parse(this.response).data);\n }\n };\n\n storefrontApiRequest.open('POST', `/graphql`, true);\n storefrontApiRequest.setRequestHeader('Authorization', `Bearer ${queryData.storefrontApiToken}`);\n storefrontApiRequest.setRequestHeader('Content-type', 'application/json');\n storefrontApiRequest.send(JSON.stringify({ query: queryData.storefrontApiQuery, variables: JSON.parse(queryData.storefrontApiQueryParamsJson) }));\n }\n\n function loadScript(src, onload) {\n const scriptTag = document.createElement('script');\n scriptTag.type = 'text/javascript';\n scriptTag.defer = true;\n scriptTag.src = src;\n if (onload) {\n scriptTag.onload = onload;\n }\n document.head.appendChild(scriptTag);\n }\n\n function executeWidget(configuration, storefrontApiData) {\n if (storefrontApiData) {\n configuration._.data = storefrontApiData;\n }\n {{#if _.context.isEditorMode '===' true}}\n var scriptPath = (build) => `https://microapps.bigcommerce.com/product-reviews-widget/${build}-bundle.js`;\n if (window.BigCommerce\n && window.BigCommerce.initializeProductReviews\n && typeof window.BigCommerce.initializeProductReviews === 'function'\n && window.BigCommerce.initializeProductReviewsPageBuilderComm\n && typeof window.BigCommerce.initializeProductReviewsPageBuilderComm === 'function') {\n const productReviews = window.BigCommerce.initializeProductReviews(configuration);\n window.BigCommerce.initializeProductReviewsPageBuilderComm(productReviews);\n } else {\n loadScript(scriptPath('storefront'), () => {\n const productReviews = window.BigCommerce.initializeProductReviews(configuration);\n loadScript(scriptPath('pageBuilder'), () => {\n window.BigCommerce.initializeProductReviewsPageBuilderComm(productReviews);\n });\n });\n }\n {{else}}\n var storefrontScriptPath = \"https://microapps.bigcommerce.com/product-reviews-widget/storefront-bundle.js\";\n if (window.BigCommerce && window.BigCommerce.initializeProductReviews && typeof window.BigCommerce.initializeProductReviews === 'function') {\n window.BigCommerce.initializeProductReviews(configuration).setup();\n } else {\n loadScript(storefrontScriptPath, () => window.BigCommerce.initializeProductReviews(configuration).setup());\n }\n {{/if}}\n }\n\n if (dataIsNotPresent && storefrontApiQueryData) {\n executeStorefrontApiQuery(storefrontApiQueryData, function(storefrontApiData) { executeWidget(widgetConfiguration, storefrontApiData) });\n } else {\n executeWidget(widgetConfiguration);\n }\n })();\n</script>",
"storefront_api_query": "query getProductReviews($productId: Int, $pageSize: Int = 5, $cursor: String) {\n site {\n product(entityId: $productId) {\n reviews(first: $pageSize, after: $cursor, sort: NEWEST) {\n edges {\n node {\n title\n text\n rating\n createdAt {\n utc\n }\n author {\n name\n }\n }\n }\n }\n }\n }\n }",
"channel_id": 1
}
And just to make it a bit easier to see this is the Storefront API query on multiple lines:
query getProductReviews($productId: Int, $pageSize: Int = 5, $cursor: String) {
site {
product(entityId: $productId) {
reviews(first: $pageSize, after: $cursor, sort: NEWEST) {
edges {
node {
title
text
rating
createdAt {
utc
}
author {
name
}
}
}
}
}
}
}
.. which I can see works as expected in GraphQL Playground.
Upvotes: 0
Views: 63