dynamicDisplay(snippetId, variables, onUpdate)

Description

Dynamically displays data from a Firestore collection by rendering items based on a provided template. Supports conditional rendering and real-time updates.

Method Signature

dynamicDisplay(snippetId, variables, onUpdate)

Parameters

snippetId: (string) The ID of the dynamic display snippet configuration.
variables: (Array) An array of objects containing variable names and values to replace placeholders in the Firestore path, query conditions, or templates.
onUpdate: (function) A callback function that is called whenever data is fetched or updated. Receives the data array as a parameter.

Returns

Promise: Resolves with an object containing an unsubscribe method to stop real-time updates, or rejects with an error.

Usage Example

// Initialize FireSnippets
const fireSnippets = new FireSnippets('your-api-key');
 
// Define variables for placeholders
const variables = [
  { name: 'categoryId', value: 'electronics' }
];
 
// Define the onUpdate callback
const onUpdate = (dataArray) => {
  // Data updated
  console.log('Data updated:', dataArray);
};
 
// Call the dynamicDisplay method
fireSnippets.dynamicDisplay('your-dynamic-snippet-id', variables, onUpdate)
  .then(result => {
    // Dynamic display initialized
    console.log('Dynamic display initialized.');
 
    // To stop real-time updates
    // result.unsubscribe();
  })
  .catch(error => {
    // Handle errors
    console.error('Error displaying dynamic content:', error);
  });

HTML Elements Required

Ensure your HTML includes the container element specified in your snippet configuration:

<!-- Container element for dynamic items -->
<div id="items-container"></div>

Template Syntax: The dynamicSnippetItemCode should use #fieldName placeholders to insert data and supports conditional rendering with if, else if, and else blocks.

Example template:

<div class="item">
  <h2>#title</h2>
  <p>#description</p>
  if(#price > 100){
    <span class="premium">Premium Item</span>
  }
  else{
    <span class="standard">Standard Item</span>
  }
</div>