Try our new AI assistant by clicking the chat icon in the lower right corner.

---

• Miva Docs
• Reference Guide
• Miva Partial Page Rendering

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:

1. Making a ajax call to get only the basket contents after something has changed
2. JavaScript apps which need to pull products in a category or the facets for a category
3. Product Quick Views on Category Pages
4. Updating part of the page that change during checkout such as payment or shipping change

On this Page

• Header Definitions
• Examples & Use Cases

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.

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' )'

X-Partial-Render-Output

The X-Partial-Render-Output header is optional and defines the output format and content-type of the response.

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:

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.

Parse JSON Object in Response to get to the template

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.

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.

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:

1. Create a new page in Miva
2. Assign the “Content” Item (You could also use ReadyTheme Content Sections here)
3. Add your custom code to the content section
4. Do a partial request for that content section

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