Popup examples

This guide provides practical examples of different popups you can create in WeWeb. Each example includes step-by-step instructions and demonstrations to help you implement common popup patterns.

Product details popup

A product details popup allows users to view additional information about a product without navigating away from the current page. This is commonly used in e-commerce applications to show product details when a user clicks on a product card.

Creating the popup

1. Click on the Popups tab in the left panel
2. Click the New button to create a popup
3. Choose the Modal type
4. Design your popup with image, text, and button elements

Adding properties

Create the following properties for your product details popup:

• Product Name (Text) - The name of the product to display
• Product Description (Text) - The description of the product to display
• Product Price (Number) - The current price of the product
• Product Image (Image URL) - URL to the product's image
• Available Stock (Number) - Number of the product available in stock
• Product Data (any) - The entire product data object of the product

Adding variables

Add these variables to manage the popup's internal state:

• Selected Quantity (Number) - Set to 1 initially, tracks how many items the user wants to purchase

Creating workflows

Create quantity selection workflows for the popup buttons:

Workflow name: Increase Quantity
Triggered by: "+" button click

Actions:

1. Check stock availability
   • Condition: Selected Quantity < Available Stock
2. If condition passes:
   • Set Selected Quantity to Selected Quantity + 1

Workflow name: Decrease Quantity
Triggered by: "-" button click

Actions:

1. Check minimum quantity
   • Condition: Selected Quantity > 1
2. If condition passes:
   • Set Selected Quantity to Selected Quantity - 1

Creating the quantity selector

Create a quantity selector UI with the following elements:

1. A container with three elements:

   • A decrease button with a "-" icon or text
   • A text element showing the current quantity
   • An increase button with a "+" icon or text

2. Style the container and elements:

   • Align elements horizontally with appropriate spacing
   • Add borders, backgrounds, and hover states for buttons
   • Center the quantity text

3. Bind elements to data:

   • Bind the quantity text's content to the Selected Quantity variable

4. Add workflows to the buttons:

   • Add the "Increase Quantity" workflow to the "+" button
   • Add the "Decrease Quantity" workflow to the "-" button

Using formulas

Add these formulas to enhance the popup's functionality:

• Formatted Price

  • Parameters: price (Number)
  • Formula: Adds currency symbol to Product Price
  • Example: "$" + price
  • Use: Displaying consistent price formatting throughout the popup

• Is Out Of Stock

  • Parameters: available_stock (Number)
  • Formula: Checks if the Available Stock is less than 1
  • Example: available_stock < 1
  • Use: Showing "Out of Stock" message and disabling the Add to Cart button

Binding elements to properties

1. Bind the product image to the Product Image property
2. Bind the title text to the Product Name property
3. Bind the description text to the Product Description property
4. Bind the price text to the Formatted Price formula
5. Bind the quantity value text to the Selected Quantity variable
6. Bind the "Add to Cart" button's disabled state to the Is Out Of Stock formula
7. Bind the increase button to the "Increase Quantity" workflow
8. Bind the decrease button to the "Decrease Quantity" workflow

Setting up the Add to Cart button

1. Select the "Add to Cart" button in the popup
2. Create a new workflow triggered by the button's click
3. Add a "Close this popup instance" action
4. In the data field of this action, add the following object:

   {
     action: "add_to_cart",
     product_data: Product Data,
     quantity: Selected Quantity
   }

5. This data will be returned to the original workflow that opened the popup

Opening the popup

1. On your product listing page, select the product card "View" button
2. Create a workflow triggered by click
3. Add an Open popup action
4. Select your product details popup
5. Map the product data to the popup's properties:
   • Product Name: product.name
   • Product Description: product.description
   • Product Price: product.price
   • Product Image: product.image_url
   • Available Stock: product.stock
   • Product Data: product (the entire product object)
6. Turn Wait close event on

Processing the popup return data

After the popup closes, you can access the returned data in your workflow that opens the popup:

1. Add a Multi-option split action after the Open popup action
2. Bind the split condition to the action returned by the popup
3. Create a branch for "add_to_cart"
4. In the "add_to_cart" branch, add an action to process the cart item:
   • Use the product_data to access the product information
   • Use quantity to access the selected quantity

Testing the popup

1. Preview your page
2. Click on a product card's "View" button
3. Verify that the popup shows the correct product information
4. Test the quantity selector (should not go below 1 or above available stock)
5. Click the "Add to Cart" button
6. Verify that the item appears in your cart with the correct quantity

Alert popup

Learn more about adding logic to popups →