Examples

Creating a Previously Viewed Product Block

Learn how to create a Previously Viewed Product Block in PersonalizeWP.

This article is best treated as an advanced follow-on guide.

For most sites, the recommended approach is to use the built-in Product Collection block with the Previously Viewed recipe. You do not need to build a custom block around the REST API unless you want completely custom output.

Use the Product Collection block

  1. Open the page or template in the Block Editor.
  2. Insert the Product Collection block.
  3. Choose the recipe Previously Viewed.
  4. Set the maximum number of products to display.
  5. Choose the fallback behavior.
  6. Pick the layout and any title you want to show.

Available fallback behaviors

The current block supports three fallback options:

  • Show all to show a generic recent product collection
  • Hide block to show nothing when there is not enough visitor data
  • Show message to display your fallback message instead

How it works

Under the hood, the block looks up the current visitor's recorded activities and uses WooCommerce product views to build the list. Product views are identified from visitor activities where:

  • activity_type is post
  • object_type is product

When to build a custom solution instead

Use a custom build only if you need:

  • A different rendering system outside the block editor
  • Different ranking logic
  • Tighter integration with a headless frontend
  • A custom product card design not covered by the block

Advanced custom implementation example

If you do need a custom route, this is the current API pattern to start from.

async function fetchPreviouslyViewedProducts(uid) {
  const response = await fetch(
    `${window.pwpSettings.root}personalizewp/v1/visitor-activities`,
    {
      method: "POST",
      headers: {
        "Accept": "application/json, */*;q=0.1",
        "Content-Type": "application/json",
        "X-PWP-Auth-Token": window.pwpSettings.apiToken
      },
      body: JSON.stringify({
        uid,
        filters: {
          activity_type: "post",
          object_type: "product"
        }
      })
    }
  );

  const result = await response.json();
  return result.success ? result.data : [];
}

That response gives you the product activity history. From there you can:

  • de-duplicate product IDs
  • choose your own ordering rules
  • fetch product data with your preferred WooCommerce or WordPress endpoint
  • render the cards in your own component system

If you are going custom, keep these references close:

Related articles