Miva Partial Page Rendering
Miva 10.03.00 introduces two new headers that can be passed into any http request to a Miva page which allow you to get back only the part of the page you need/want as either HTML or JSON. This gives you the flexibility and because the content can be returned as JSON it will support more advanced JavaScript functionality on the page.
Some use cases include:
- Making a ajax call to get only the basket contents after something has changed
- JavaScript apps which need to pull products in a category or the facets for a category
- Product Quick Views on Category Pages
- Updating part of the page that change during checkout such as payment or shipping change
On this Page
Header Definitions
X-Partial-Render
The X-Partial-Render header tells Miva which part of the page you want returned. It values will be a single item code or list of items codes which assigned to the page you’re requesting.
X-Miva-Partial-Render: <item_code>:<md5_param_hash>[,<item_code>:<md5_param_hash>...]
//examples
'X-Miva-Partial-Render': 'basket'
'X-Miva-Partial-Render': 'global_minibasket,category_listing'
//request and item that has a param such as readytheme: <mvt:item name="readytheme" param="contentsection( 'mini_basket' )" />
'X-Miva-Partial-Render': 'readytheme:24a308d4d1c2fc38a620b980f182a9f2' [hash for: contentsection( 'mini_basket' )]
md5 Parameter Hash
Optionally you can specify an md5 hash of any param values you want to include in the item request. The most common use case for this will be requesting a ReadyTheme item such as a content section:
<mvt:item name="readytheme" param="contentsection( 'mini_basket' )" />
To request this item you would pass readytheme:24a308d4d1c2fc38a620b980f182a9f2 as the header where 24a308d4d1c2fc38a620b980f182a9f2 is the md5 hash of 'contentsection( 'mini_basket' )'
Note
Only items that have a template output will return any response. For example, if you request the “store” item since it does not have an output template, nothing will be returned.
X-Partial-Render-Output
The X-Partial-Render-Output header is optional and defines the output format and content-type of the response.
X-Miva-Partial-Render-Output: [json|raw]There are two possible values: raw or json
- raw – This returns the HTML output for this item exactly as it appears on the page
- json – This returns the template as JSON in the following format
JSON Response Format
If you set the render output as json the response will look like this:
{
success: 1/0,
data:
{
<item_code_01>:
[
{
param_hash: <md5_hash_of_item_param>,
content: <item_content>
},
{
param_hash: <md5_hash_of_item_param>,
content: <item_content>
},
...
],
<item_code_02>:
[
{
param_hash: <md5_hash_of_item_param>,
content: <item_content>
}
]
}
}Note
The param_hash is always returned even if there was no parameter passed in the request
Examples & Use Cases
Update Mini Basket or Basket Contents
One of the most common use cases for this feature will be to request the basket or mini basket when some action occurs on the page. For example if you added a product to the cart via JavaScript/AJAX and now you want to reload the mini basket, you could make a request to any page with the mini basket assigned and get back the template as JSON or HTML. From here you could update the content on the page as you need.
//response
{
"success":1,
"data":{
"global_minibasket":{
"param_hash":"d41d8cd98f00b204e9800998ecf8427e",
"content":"\u003Csection class\u003D\"x-mini-basket\" data-hook\u003D\"mini-basket\" data-item-count\u003D\"0\" data-subtotal\u003D\"\" aria-modal\u003D\"true\" tabindex\u003D\"-1\"\u003E\r\u003Cdiv class\u003D\"x-mini-basket__content u-bg-white\" data-hook\u003D\"mini-basket__content\" aria-describedby\u003D\"mb-description\" aria-label\u003D\"Your Cart Summary\" role\u003D\"dialog\" tabindex\u003D\"0\"\u003E\r\u003Cheader\u003E\r\u003Cdiv class\u003D\"x-mini-basket__header\"\u003E\r\u003Cstrong id\u003D\"mb-description\"\u003EMy Cart: 0 item\u0028s\u0029\u003C\/strong\u003E\r\u003Cbutton class\u003D\"c-button u-bg-gray-40 u-icon-cross\" data-hook\u003D\"close-mini-basket\" aria-label\u003D\"Close the Mini-Basket\"\u003E\u003C\/button\u003E\r\u003C\/div\u003E\r\u003Chr class\u003D\"c-keyline\"\u003E\r\u003C\/header\u003E\r\u003Cfooter class\u003D\"x-mini-basket__footer\"\u003E\r\u003Cdiv class\u003D\"x-messages x-messages--info\"\u003EYour Shopping Cart Is Empty\u003C\/div\u003E\r\u003C\/footer\u003E\r\u003C\/div\u003E\r\u003C\/section\u003E"
}
}
}
//Request
$.ajax({
url: 'https://mivadevtest.com/shirt.html',
headers: { 'X-Miva-Partial-Render': 'global_minibasket', 'X-Miva-Partial-Render-Output': 'json' }
});
Parse JSON Object in Response to get to the template
$.ajax({
url: 'https://mivadevtest.com/shirt.html',
headers: { 'X-Miva-Partial-Render': 'global_minibasket', 'X-Miva-Partial-Render-Output': 'json' },
success: function(result) {
console.log(result.data.global_minibasket.content);
}
});Note
If you are getting the response back as raw/html the response will be in the order you request each item.
Category Listing – Access Products Assigned to a Category
When building advanced user interface experiences or even building a native mobile app its useful to be able to pull list of products assigned to a category. This can easily be done by requesting that category and the category_listing item. You can even get facets generated by Miva if you need facet data.
$.ajax({
url: 'https://mivadevtest.com/sale.html',
headers: { 'X-Miva-Partial-Render': 'category_listing,facets', 'X-Miva-Partial-Render-Output': 'json' }
});
{
"success":1,
"data":{
"category_listing":{
"param_hash":"d41d8cd98f00b204e9800998ecf8427e",
"content":"\u003Csection class\u003D\" ..."
},
"facets":{
"param_hash":"d41d8cd98f00b204e9800998ecf8427e",
"content":"\u003Cnav class\u003D\"x-category-tree..."
}
}
Product Quick View
Some sites will want to display a modal of the product listing. You can leverage the same template that already exists on PROD and just call it in and display it in a modal on the category page. This gives you a single location to make layout changes without having to maintain code in multiple places.
$.ajax({
url: 'https://mivadevtest.com/pants.html',
headers: { 'X-Miva-Partial-Render': 'product_display', 'X-Miva-Partial-Render-Output': 'raw' }
});
Custom JSON Output
One of the most powerful aspects of this feature is the ability to create your own JSON output to use in your user experience. Let say you wanted a list of all categories output in JSON. You could just request the category_tree item but this will have the full html template. Instead, we can create a custom page, assign the content component and output anything we want.
Here is an example:
Create a new page in Miva
Assign the “Content” Item (You could also use ReadyTheme Content Sections here)
Add your custom code to the content section
Do a partial request for that content section
<mvt:item name="content" />
{
"categories":[
{
"id":"1",
"name":"Category 1",
"code":"category_01",
"parent_id":"0"
},
{
"id":"2",
"name":"Category 2",
"code":"category_02",
"parent_id":"0"
},
{
"id":"3",
"name":"Category 3",
"code":"category_03",
"parent_id":"0"
},
{
"id":"4",
"name":"Category 4",
"code":"category_04",
"parent_id":"0"
},
{
"id":"5",
"name":"Sub Category 1",
"code":"sub-cat-1",
"parent_id":"1"
},
{
"id":"6",
"name":"Sub Category 2",
"code":"sub-cat-2",
"parent_id":"0"
},
{
"id":"7",
"name":"Sub Category 3",
"code":"sub-cat-3",
"parent_id":"0"
},
{
"id":"8",
"name":"Sub Category 4",
"code":"sub-cat-4",
"parent_id":"0"
},
{
"id":"9",
"name":"Sale",
"code":"sale",
"parent_id":"0"
},
{
"id":"10",
"name":"Featured Products",
"code":"featured",
"parent_id":"0"
}
]
}
<mvt:do name="l.settings:category_count" file="g.Module_Library_DB" value="Runtime_CategoryList_Load_All( l.settings:categories )" />
{
"categories" : [
<mvt:foreach iterator="category" array="categories">
{
"id" : "&mvtj:category:id;",
"name" : "&mvtj:category:name;",
"code" : "&mvtj:category:code;",
"parent_id" : "&mvtj:category:parent_id;"
}<mvt:if expr="pos1 LT l.settings:category_count">,</mvt:if>
</mvt:foreach>
]
}
$.ajax({
url: 'https://mivadevtest.com/api.html',
headers: { 'X-Miva-Partial-Render': 'content', 'X-Miva-Partial-Render-Output': 'raw' }
});
Note
To see a list of any available item for any page, navigate to the page under User Interface -> Templates then click the item tab and sort by assigned items. These are all the possible values for a given page which can be requested using the X-Partial-Render header