Introduction

This detailed overview explores the core functionalities and advanced techniques for managing products within an e-commerce system, as demonstrated by Joyce.

The focus is on showing products, organizing variants, filtering with conditions, and displaying multiple products dynamically across channels like Facebook Messenger and WhatsApp.

The guide emphasizes two primary solutions for showcasing extensive product catalogs, along with step-by-step instructions, best practices, and use cases to optimize user experience and system flexibility.

Concepts and Key Features

1. Showing Products in Messaging Systems

• Basic Show Product Option: Utilized in the "Send Message" step, allowing a limited display of up to 10 products.

• Product Cards / Gallery: Visual representation with images, names, prices, and filters.

• Limitations: The default setup restricts to 10 products, which is insufficient for larger catalogs.

2. Solutions for Displaying Extensive Product Lists

Managing Products and Variants

3. Creating and Using Variants

• When to Add Variants: During product creation, not after.

• How to Add Variants:

  • Check "Enable Options" during product setup.

  • Define Option Names (e.g., Color, Size).

  • Enter Option Values (e.g., Black, White; 64g, 128g).

  • Assign Price, SKU, Quantity for each variant.

  • Add images specific to variants, especially for options like color.

• Best Practice: Place options with images (like color) as the first option to display images correctly.

4. Organizing Products

• Attributes:

  • Type: Single value (e.g., Pizza, Burger).

  • Vendor: Single value (e.g., Apple, Samsung).

  • Tags: Multiple tags for flexible categorization.

  • Collection: Group products manually or automatically based on conditions.

• Creating Collections:

  • Manual: Select products directly.

  • Automatic: Set conditions (e.g., name contains "pizza") for auto-adding products.

5. Filtering and Condition Settings

• Use conditions to display products based on:

  • Type, Vendor, Tags, Collection.

  • Keywords: User input for search.

  • Price Range: e.g., less than $100.

• Implementation:

  • When editing products, assign attributes.

  • In view steps, specify conditions to filter products dynamically.

Advanced Product Display Techniques

6. Displaying Multiple Products with Solution 2

• Fetching Products:

  • Use an Action Step to retrieve up to 50 products.

  • Set limit in the API call.

• Looping Through Products:

  • Use "for each" to iterate over fetched products.

  • Display image, name, price dynamically.

• Pagination:

  • Configure items per page (max 10).

  • Add "Next" button for navigation.

• Customization:

  • Change currency signs.

  • Format prices with decimal precision.

  • Show "Add to Cart" buttons for each product.

7. Handling Variants in Display

• Products with Variants:

  • Detect number of variants.

  • If more than one, prompt user to select options.

  • Show variant options (color, size) with images.

  • Use "select" step to choose specific variants.

• Variant IDs:

  • Extract variant ID from product data.

  • Pass variant ID to "Add to Cart" action.

• Multiple Variants:

  • Loop through variants.

  • Show options with images and price.

  • Allow user to input quantity per variant.

Managing the Shopping Cart

8. Viewing and Modifying Cart Items

• Fetching Cart Data:

  • Use JSON operation to extract cart items.

  • Loop through items to display:

    • Product name, image, price, quantity, subtotal.

• Adjusting Quantities:

  • Prompt user to input new quantity.

  • Remove existing items before adding updated quantities.

• Removing Items:

  • Use "Remove from Cart" API with variant ID.

• Subtotal Calculation:

  • Multiply price by quantity.

  • Show total cart value and total items.

9. User Options in Cart

• "Keep Shopping": Return to product browsing.

• "View Cart": Show detailed cart overview.

• Checkout Button: Proceed to checkout process.

Practical Implementation Steps

10. Step-by-Step Workflow

1. Show Welcome Message with menu options:

   • View Menu

   • View Cart

2. On "View Menu":

   • Use "for each" loop to display products.

   • Fetch products via Action Step with limit (e.g., 50).

   • Show product images, names, prices.

   • Include "Add to Cart" buttons.

3. On "Add to Cart":

   • Detect if product has variants.

   • If yes, prompt for options.

   • Select variant and input quantity.

   • Use "Add to Cart" API with variant ID and quantity.

4. On "View Cart":

   • Fetch cart items.

   • Loop through items to display details.

   • Provide options to adjust quantity or remove.

   • Show total price and total items.

5. Post-modification:

   • Refresh cart data.

   • Allow user to continue shopping or proceed to checkout.

Summary and Best Practices

• Variants are essential for products with options like color or size; always add variants during product creation.

• Filtering with conditions enables targeted product display, improving user experience.

• Fetching multiple products via API and looping with "for each" allows for dynamic, scalable catalogs.

• Handling variants requires variant IDs and option selection prompts.

• Cart management involves adding, removing, and updating quantities with clear user prompts.

• Pagination enhances navigation through large product lists.

• Customizations like currency formatting and price display improve clarity.

• Cross-channel compatibility ensures the system works seamlessly on Facebook Messenger, WhatsApp, and other platforms.

Final Thoughts

Implementing a robust e-commerce system within messaging platforms demands a combination of product organization, dynamic display techniques, and user-friendly interactions. Joyce's walkthrough provides a comprehensive blueprint for managing extensive product catalogs, handling variants efficiently, and creating engaging shopping experiences. By following these structured steps and best practices, developers can build flexible, scalable, and user-centric e-commerce flows that cater to diverse product ranges and customer preferences.