Display taxed prices with API Mesh for Adobe Developer App Builder
API Mesh enables developers to integrate private or third-party APIs and other interfaces with Adobe products using Adobe I/O Runtime.
In this topic, API Mesh is used to display product prices on a Product Detail Page with taxes figured in.
Set up tax rates
You must have taxes configured for them to display on the Product Detail Page.
- Set up tax rates.
- Enable taxes to be displayed in the catalog, and set it to either
Including and Excluding TaxorIncluding Tax.
Verify that the Catalog Service is working by checking a Product Detail Page.
Configure API Mesh
If not already done, connect the API Mesh with Catalog Service to your instance. See detailed instructions in the Getting Started topic in the API Mesh developer guide.
In the mesh.json file, replace the name , endpoint, and x-api-key values.
{
"meshConfig": {
"sources": [
{
"name": "<NAME OF MESH>",
"handler": {
"graphql": {
"endpoint": "<COMMERCE INSTANCE GQL ENDPOINT URL>"
}
},
"transforms": [
{
"prefix": {
"includeRootOperations": true,
"value": "Core_"
}
}
]
},
{
"name": "CommerceCatalogServiceGraph",
"handler": {
"graphql": {
"endpoint": "https://catalog-service-sandbox.adobe.io/graphql/",
"operationHeaders": {
"Magento-Store-View-Code": "{context.headers['magento-store-view-code']}",
"Magento-Website-Code": "{context.headers['magento-website-code']}",
"Magento-Store-Code": "{context.headers['magento-store-code']}",
"Magento-Environment-Id": "{context.headers['magento-environment-id']}",
"x-api-key": "API_KEY",
"Magento-Customer-Group": "{context.headers['magento-customer-group']}"
},
"schemaHeaders": {
"x-api-key": "<YOUR API_KEY>"
}
}
}
}
],
"additionalTypeDefs": "extend type ComplexProductView {\n priceWithTaxes: Core_PriceRange\n}\n extend type SimpleProductView {\n priceWithTaxes: Core_PriceRange\n}\n",
"additionalResolvers": [
{
"targetTypeName": "ComplexProductView",
"targetFieldName": "priceWithTaxes",
"sourceName": "MagentoQACore",
"sourceTypeName": "Query",
"sourceFieldName": "Core_products",
"requiredSelectionSet": "{\n items {\n sku, \n price_range {\n minimum_price {\n final_price {\n value\n currency\n }\n }\n }\n }\n }",
"sourceArgs": {
"filter.sku.eq": "{root.sku}"
},
"result": "items[0].price_range"
},
{
"targetTypeName": "SimpleProductView",
"targetFieldName": "priceWithTaxes",
"sourceName": "MagentoQACore",
"sourceTypeName": "Query",
"sourceFieldName": "Core_products",
"requiredSelectionSet": "{\n items {\n sku, \n price_range {\n minimum_price {\n final_price {\n value\n currency\n }\n }\n }\n }\n }",
"sourceArgs": {
"filter.sku.eq": "{root.sku}"
},
"result": "items[0].price_range"
}
]
}
}
This mesh.json configuration file:
- Transforms the Commerce core application to require ‘Core_’ prepended to any of its queries or types. This prevents possible naming conflicts with the Catalog Service.
- Extends the
ComplexProductViewandSimpleProductViewtypes with a new field calledpriceWithTaxes. - Adds a custom resolver for the new field.
Create the mesh with the create command with the mesh.json file.
GraphQL query
You can retrieve the new priceWithTaxes data using GraphQL.
Query example:
query {
products(skus:[MH07]) {
__typename
id
sku
name
description
shortDescription
addToCartAllowed
url
... on ComplexProductView {
priceWithTaxes {
minimum_price {
final_price {
value
}
}
maximum_price {
final_price {
value
}
}
}
priceRange {
maximum {
final {
amount {
value
currency
}
}
regular {
amount {
value
currency
}
}
roles
}
minimum {
final {
amount {
value
currency
}
}
regular {
amount {
value
currency
}
}
roles
}
}
}
}
}
Query response:
{
"data": {
"products": [
{
"__typename": "ComplexProductView",
"id": "VFVnd053AFpHVm1ZWFZzZEEAWkRWa09Ua3hNVFl0WTJJd015MDBaRGMwTFRnME16a3RNak01TVRVNE9ESTBOemd4AGJXRnBibDkzWldKemFYUmxYM04wYjNKbABZbUZ6WlEAVFVGSE1EQTFPRFEyTVRjeA",
"sku": "MH07",
"name": "Hero Hoodie13",
"description": "<p>Gray and black color blocking sets you apart as the Hero Hoodie keeps you warm on the bus, campus or cold mean streets. Slanted outsize front pockets keep your style real . . . convenient.</p>\r\n<p>* Full-zip gray and black hoodie.<br />* Ribbed hem.<br />* Standard fit.<br />* Drawcord hood cinch.<br />* Water-resistant coating.</p>",
"shortDescription": "",
"addToCartAllowed": true,
"url": "http://commerce_url/hero-hoodie.html",
"priceWithTaxes": {
"minimum_price": {
"final_price": {
"value": 8.330001
}
},
"maximum_price": {
"final_price": {
"value": 13355.524701
}
}
},
"priceRange": {
"maximum": {
"final": {
"amount": {
"value": 39.02,
"currency": "USD"
}
},
"regular": {
"amount": {
"value": 54,
"currency": "USD"
}
},
"roles": [
"visible"
]
},
"minimum": {
"final": {
"amount": {
"value": 39.02,
"currency": "USD"
}
},
"regular": {
"amount": {
"value": 54,
"currency": "USD"
}
},
"roles": [
"visible"
]
}
}
}
]
},
"extensions": {}
}
recommendation-more-help
7c786b3e-f793-4e26-b38a-3fe76d8eca72