Examples

Creating a Previously Viewed Product Block

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

This guide will walk you through creating a "Previously Viewed" product block using PersonalizeWP's REST API. This personalisation feature enhances user experience by showing visitors products they've previously viewed on your WooCommerce store.

Overview

The "Previously Viewed" block displays products that the current visitor has previously viewed on your website. This implementation uses the /visitor-activities endpoint to retrieve the visitor's viewing history, filtered by the current post type.

Prerequisites

  1. PersonalizeWP Pro installed and activated
  2. Basic knowledge of JavaScript and WordPress development
  3. Access to your theme files or a custom plugin where you can add JavaScript code

Implementation Steps

Step 1: Create the HTML Structure

First, create the HTML structure for your "Previously Viewed" block. You can add this to your theme or plugin as a snippet in a template, or you can adapt it to use in a custom Block Editor block:

<div class="pwp-previously-viewed">
    <h2>Previously Viewed</h2>
    <div class="pwp-previously-viewed-products" id="pwp-previously-viewed-container">
        <!-- Products will be inserted here dynamically -->
    </div>
</div>

Step 2: Fetch Previously Viewed Products

Create a JavaScript function to fetch and display the previously viewed products using the PersonalizeWP REST API (you do not need to authenticate to the API from your own site):

NOTE: The UID is an obfuscated non-incrementing ID that is stored in the visitor’s local browser storage and is specific to their interaction with your site.

function initPreviouslyViewedBlock() {
    // Get the container element
    const container = document.getElementById('pwp-previously-viewed-container');

    // If the container doesn't exist, exit early
    if (!container) return;

    // Get the current post type and ID
    const currentPostType = document.body.classList.contains('single-product') ? 'product' : null;
    const currentPostId = document.querySelector('[data-product-id]')?.dataset.productId;

    // Only proceed if we're on a product page
    if (!currentPostType || !currentPostId) {
        container.closest('.pwp-previously-viewed').style.display = 'none';
        return;
    }

    // Fetch previously viewed products
    fetchPreviouslyViewedProducts(currentPostType, currentPostId, container);
}

async function fetchPreviouslyViewedProducts(currentPostType, currentPostId, container) {
    const PWP = localStorage.getItem('pwp_tracked_user') || '';
    const UID = (PWP) ? JSON.parse(PWP).id : null;

    if (!UID) {
        container.closest('.pwp-previously-viewed').style.display = 'none';
        return;
    }

    const baseURL = window.pwpSettings?.root || '/wp-json/';
    const namespace = 'personalizewp/v1/';
    const endpoint = 'visitor-activities';

    // Set up filters to get only viewed products excluding the current one
    const filters = [
        { activity_type: 'view' },
        { object_type:   currentPostType }
    ];

    try {
        const response = await fetch(`${baseURL}${namespace}${endpoint}`, {
            method: "POST",
            cache: "no-cache",
            headers: {
                "Accept": "application/json, */*;q=0.1",
                "Cache-Control": "no-cache, private",
                "Content-type": "application/json",
                "X-Requested-With": "XMLHttpRequest",
            },
            body: JSON.stringify({
                uid: UID,
                filters: filters
            }),
        });

        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        const activities = await response.json();

        // Filter out current product and duplicates
        const uniqueProductIds = new Set();
        const filteredActivities = activities.filter(activity => {
            // Skip current product
            if (activity.object_id.toString() === currentPostId.toString()) {
                return false;
            }
            // Skip duplicates
            if (uniqueProductIds.has(activity.object_id)) {
                return false;
            }
            uniqueProductIds.add(activity.object_id);
            return true;
        });

        if (filteredActivities.length > 0) {
            displayPreviouslyViewedProducts(filteredActivities, container);
        } else {
            container.closest('.pwp-previously-viewed').style.display = 'none';
        }
    } catch (error) {
        console.error('Error fetching previously viewed products:', error);
        container.closest('.pwp-previously-viewed').style.display = 'none';
    }
}

async function displayPreviouslyViewedProducts(activities, container) {
    container.innerHTML = '';

    // Limit to 3 products
    const limitedActivities = activities.slice(0, 3);

    try {
        const productIds = limitedActivities.map(activity => activity.object_id);
        const productsData = await fetchProductsData(productIds);

        productsData.forEach(product => {
            const productElement = createProductElement(product);
            container.appendChild(productElement);
        });

        container.closest('.pwp-previously-viewed').style.display = 'block';
    } catch (error) {
        console.error('Error displaying previously viewed products:', error);
        container.closest('.pwp-previously-viewed').style.display = 'none';
    }
}

// Helper function to fetch product data
async function fetchProductsData(productIds) {
    // Simplified example using the WooCommerce REST API
    const baseURL = '/wp-json/wc/v3/products';
    const queryParams = new URLSearchParams({
        include: productIds.join(','),
        // In a real implementation, use proper authentication
    });

    const response = await fetch(`${baseURL}?${queryParams}`);
    return await response.json();
}

// Helper function to create a product element
function createProductElement(product) {
    const productDiv = document.createElement('div');
    productDiv.className = 'pwp-product-item';

    productDiv.innerHTML = `
        <a href="${product.permalink}" class="pwp-product-link">
            <div class="pwp-product-image">
                <img src="${product.images[0]?.src || ''}" alt="${product.name}">
            </div>
            <div class="pwp-product-details">
                <h3 class="pwp-product-title">${product.name}</h3>
                <div class="pwp-product-price">${product.price_html}</div>
            </div>
        </a>
        <button class="pwp-add-to-cart" data-product-id="${product.id}">
            Add to Cart
        </button>
    `;

    return productDiv;
}

// Initialise the block when DOM is ready
document.addEventListener('DOMContentLoaded', initPreviouslyViewedBlock);

Step 3: Add CSS Styling

Add CSS to style your "Previously Viewed" block:

.pwp-previously-viewed {
    margin: 2rem 0;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.pwp-previously-viewed h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #333;
}

.pwp-previously-viewed-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.pwp-product-item {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1rem;
    background-color: white;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pwp-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pwp-product-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
}

.pwp-product-title {
    margin: 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.pwp-product-price {
    color: #555;
    margin-bottom: 0.5rem;
}

.pwp-add-to-cart {
    width: 100%;
    padding: 0.5rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pwp-add-to-cart:hover {
    background-color: #555;
}

Step 4: Enqueue Your Script and Styles

Add this to your theme's functions.php file or your custom plugin:

function pwp_enqueue_previously_viewed_scripts() {
    // Only enqueue on product pages
    if ( is_product() ) {
        wp_enqueue_script(
            'pwp-previously-viewed',
            get_template_directory_uri() . '/assets/js/previously-viewed.js',
            array( 'jquery' ),
            '1.0.0',
            true
        );

        wp_enqueue_style(
            'pwp-previously-viewed-styles',
            get_template_directory_uri() . '/assets/css/previously-viewed.css',
            array(),
            '1.0.0'
        );

        // Pass the WordPress REST API root URL to JavaScript
        wp_localize_script(
            'pwp-previously-viewed',
            'pwpSettings',
            array(
                'root'  => esc_url_raw( rest_url() ),
                'nonce' => wp_create_nonce( 'wp_rest' ),
            )
        );
    }
}
add_action( 'wp_enqueue_scripts', 'pwp_enqueue_previously_viewed_scripts' );

Step 5: Add the Block to Your Theme

Insert the HTML structure in your theme's appropriate template file. For WooCommerce, you might add it to single-product.php or use a hook:

function pwp_add_previously_viewed_block() {
    echo '<div class="pwp-previously-viewed">
        <h2>Previously Viewed</h2>
        <div class="pwp-previously-viewed-products" id="pwp-previously-viewed-container">
            <!-- Products will be inserted here dynamically -->
        </div>
    </div>';
}
add_action( 'woocommerce_after_single_product_summary', 'pwp_add_previously_viewed_block', 15 );

Result

When implemented correctly, your website will now display a "Previously Viewed" products block on product pages, showing other products that the visitor has viewed previously. This creates a personalised experience that can help improve engagement and conversion rates.

Customisation Options

You can customise this implementation in various ways:

  1. Change the number of displayed products — adjust the slice limit in displayPreviouslyViewedProducts()
  2. Add product sorting — sort by recency, popularity, or price
  3. Enhance the styling — customise the CSS to match your theme
  4. Add filters — allow visitors to filter their previously viewed products
  5. Add AJAX add-to-cart functionality — enhance the user experience with AJAX cart updates

Advanced Implementation

For advanced implementations, consider:

  1. Caching — store the results in a session or local storage to reduce API calls
  2. Lazy Loading — load the products only when the block comes into view
  3. Product variations — handle product variations more precisely
  4. Integration with other features — combine with other PersonalizeWP features for enhanced personalisation

Troubleshooting

If your "Previously Viewed" block isn't working as expected:

  1. Check the browser console for JavaScript errors
  2. Verify that the visitor has a UID in local storage
  3. Test the API endpoint directly using the browser console
  4. Ensure product IDs are correct and match your WooCommerce products
  5. Check that CSS is properly loaded and not conflicting with theme styles

For additional help, please refer to the PersonalizeWP documentation or contact our support team.

Related articles