Skip to content

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 flexibility, and because the content can be returned as JSON it supports more advanced JavaScript functionality on the page.

Some use cases include:

  1. Making an 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 parts of the page that change during checkout (e.g., payment or shipping)

Header Definitions#

X-Partial-Render#

The X-Partial-Render header tells Miva which part of the page you want returned. Its value will be a single item code or a list of item codes 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 an item with a param, e.g. ReadyTheme content section
X-Miva-Partial-Render: readytheme:24a308d4d1c2fc38a620b980f182a9f2  
// (hash of: 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 is requesting a ReadyTheme item such as a content section:

<mvt:item name="readytheme" param="contentsection('mini_basket')" />

To request this item you would pass:

X-Miva-Partial-Render: readytheme:24a308d4d1c2fc38a620b980f182a9f2

Note

Only items that have a template output will return any response. For example, if you request the store item (which has no 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]
  • raw – Returns the HTML output for this item exactly as it appears on the page.
  • json – Returns the template as JSON in the format described below.

JSON Response Format#

If you set the render output to json, the response will look like this:

{
  "success": 1,
  "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 no parameter was passed in the request.

Examples & Use Cases#

Update Mini Basket or Basket Contents#

One of the most common use cases is to request the basket or mini basket after an AJAX action. For example, after adding a product to the cart via JavaScript/AJAX, you can reload the mini basket template:

Request#

$.ajax({
  url: 'https://mivadevtest.com/shirt.html',
  headers: {
    'X-Miva-Partial-Render':        'global_minibasket',
    'X-Miva-Partial-Render-Output': 'json'
  }
});

Response#

{
  "success": 1,
  "data": {
    "global_minibasket": {
      "param_hash": "d41d8cd98f00b204e9800998ecf8427e",
      "content":    "<section class=\"x-mini-basket\" ...>...</section>"
    }
  }
}

Parse JSON Object to Get 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 request the response as raw (HTML), the items are returned in the order you requested them.

Category Listing – Access Products Assigned to a Category#

To pull a list of products assigned to a category (and even facets), request the category_listing and facets items:

Request#

$.ajax({
  url: 'https://mivadevtest.com/sale.html',
  headers: {
    'X-Miva-Partial-Render':        'category_listing,facets',
    'X-Miva-Partial-Render-Output': 'json'
  }
});

Response#

{
  "success": 1,
  "data": {
    "category_listing": {
      "param_hash": "d41d8cd98f00b204e9800998ecf8427e",
      "content":    "<section class=\"...\">...</section>"
    },
    "facets": {
      "param_hash": "d41d8cd98f00b204e9800998ecf8427e",
      "content":    "<nav class=\"x-category-tree\">...</nav>"
    }
  }
}

Product Quick View#

Display a product modal on a category page using the existing template:

$.ajax({
  url: 'https://mivadevtest.com/pants.html',
  headers: {
    'X-Miva-Partial-Render':        'product_display',
    'X-Miva-Partial-Render-Output': 'raw'
  }
});

Custom JSON Output#

You can create a custom JSON API by assigning a content component to a page and returning only what you want.

  1. Create a new page in Miva.
  2. Assign the Content item (or a ReadyTheme Content Section). 
    <mvt:item name="content" />
  3. Add your custom code to the content section. 
    <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>
]
}
    JSON Output 
    {
"categories": [
    { "id":"1",  "name":"Category 1",        "code":"category_01", "parent_id":"0" },
    { "id":"2",  "name":"Category 2",        "code":"category_02", "parent_id":"0" },
    { "id":"5",  "name":"Sub Category 1",    "code":"sub-cat-1",    "parent_id":"1" },
    // ...
]
}
  4. Make a partial request for that content section: 
    $.ajax({
url: 'https://mivadevtest.com/api.html',
headers: {
    'X-Miva-Partial-Render':        'content',
    'X-Miva-Partial-Render-Output': 'raw'
}
});