Open Product

Description

The openProduct action navigates the user directly to a product detail page (PDP) within the app.
It allows you to open any Shopify product programmatically — for example, from a banner, recommendation widget, or upsell section — without using manual routing or deep links.

Function Signature

VajroSDK.actions.openProduct({
  productId: String,
  variantId: String // optional

})

(OR)

VajroSDK.actions.openProduct({
  productHandle: String,
  variantId: String // optional

})

Parameter	Type	Required	Description
productId	String	Yes (if handle is not passed)	ID of the product available in Shopify
productHandle	String	Yes (if id is not passed)	Handle of the product available in Shopify
variantId	String	No (optional)	Unique ID of the variant available in Shopify.

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Product opened successfully", "productHandle": "summer", "productId": "1234" }`
Invalid Params	`{ "status": "error", "errorCode": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Product Not Found	`{ "status": "error", "errorId": 404, "errorHandle": "product-not-found", "message": "Product not found", "productHandle": "summer }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

// Function to fetch products from a specific collection
function fetchProductsFromCollection(collectionId) {
    VajroSDK.helpers.getProducts({
        collectionId: collectionId,
        count: 10 // Fetch 10 products
    })
    .then((data) => {
        const products = data.products || data;
        displayProducts(products);
    })
    .catch((err) => {
        console.error("Error fetching products:", err);
    });
}
// Function to display products in a grid
function displayProducts(products) {
    const productGrid = document.getElementById('productGrid');
    productGrid.innerHTML = ''; // Clear existing products
    products.forEach(product => {
        const card = document.createElement('div');
        card.className = 'product-card';
        card.innerHTML = `
            <img src="${product.images[0]}" alt="${product.title}" class="product-image" />
            <div class="product-info">
                <div class="product-name">${product.title}</div>
                <div class="product-price">₹${product.variants[0].price}</div>
            </div>
        `;
        // Function to open Product on clicking the product grid
        card.addEventListener('click', () => {
            VajroSDK.actions.openProduct({ productHandle: product.handle });
        });
        productGrid.appendChild(card);
    });
}
// Call the function with a specific collection ID
fetchProductsFromCollection("324840718521");

<div id="clc"></div>
<div id="productGrid" class="product-grid"></div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: scale(1.05);
}
.product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.product-info {
  padding: 8px;
  text-align: center;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
}
.product-price {
  font-size: 12px;
  color: #333;
}

Best Practices

Use valid identifiers: Always ensure productId or handle exists in Shopify to prevent navigation errors.
Combine with getProduct: You can preview product data (price, title, image) before calling openProduct.
Use for cross-selling: Integrate in carousels, recommendation sliders, or custom blocks for smoother UX.
Avoid hardcoding IDs: Dynamically fetch or store product handles for better maintainability.
Handle async results: Use .then() or await to log or trigger analytics after navigation.

Caveats

Shopify product dependency: The product must exist and be published; otherwise, navigation will fail silently.
App context required: Works only within the Superfans mobile app environment — not the web SDK.
No callback from PDP: Once the product page opens, no event is fired automatically (use variantChange or cartUpdated listeners for interaction tracking).
Deep links unsupported: This action is for internal navigation, not external URL handling.