[HideElement 63,79,81 in #o5b7eb0e46599] [HideBlock #o020433bed705,#o36335217e2fd] [IfAnchor #feature.overview][ShowElement 69,73,70 in #o5b7eb0e46599][HideElement 63,79,81 in #o5b7eb0e46599] [ShowBlock #o8b725d199808][HideBlock #o020433bed705,#o36335217e2fd] [Redirect #obae4810cc8bc] [/IfAnchor] [IfAnchor #tutorial][ShowElement 63,79,70 in #o5b7eb0e46599][HideElement 69,73,81 in #o5b7eb0e46599] [ShowBlock #o020433bed705][HideBlock #o8b725d199808,#o36335217e2fd] [Redirect #obae4810cc8bc] [/IfAnchor] [IfAnchor #assets][ShowElement 63,73,81 in #o5b7eb0e46599][HideElement 69,79,70 in #o5b7eb0e46599] [ShowBlock #o36335217e2fd][HideBlock #o8b725d199808,#o020433bed705] [Redirect #obae4810cc8bc] [/IfAnchor]
đź’ˇ ClickFix | eCommerce and Cart
settings

LOGIN

Case Study : INVOICING & E-COMMERCE

Part 6 : eCommerce and Cart

Summary : Today we will create a proper Cart using Ontraport Dynamic CMS and a few (free) ClickFix Features. We will not be discussing the payment part, for which you can refer to Part 1 : Pay What You Want and Part 2 : Generating payable invoices of our Case Study series.

DEMOS

Why Use This : This sixth installment of our case study series reveals how you can effortlessly integrate a comprehensive cart system into your Ontraport setup, leveraging ClickFix's advanced functionalities. Streamline your eCommerce operations, from inventory management to creating dynamic shopping experiences. The "eCommerce and Cart" component of our case study series dives deep into creating a robust online shopping system using Ontraport's powerful tools, enhanced by ClickFix's innovative features. This setup not only simplifies inventory and cart management but also enhances the overall shopping experience for your customers.

Use Cases for eCommerce and Cart:

  • Dynamic Inventory Management: Easily manage product inventories with real-time updates, ensuring availability is always accurate for your customers.

  • Seamless Shopping Experience: Create a smooth, user-friendly shopping journey with dynamic product displays and an intuitive cart system, encouraging more purchases.

  • Customizable Product Listings: Tailor your product pages with images, descriptions, and pricing, offering customers all the information they need to make informed decisions.

  • Advanced Cart Capabilities: Build a cart that can handle various product combinations, discounts, and special offers, adapting to customer selections on the fly.

  • Streamlined Checkout Process: Enhance the checkout experience with a straightforward, secure process that minimizes hurdles and maximizes conversions.

  • Automated Inventory Updates: Keep your product availability in check with automated updates, reducing the risk of overselling and improving customer satisfaction. collectibles or limited edition products to the highest bidder, adding exclusivity.

This part of our case study showcases how to leverage Ontraport, supplemented by ClickFix, to create an eCommerce system that's not just about selling but about creating a memorable shopping experience that keeps customers coming back.

Note that we won’t be dealing with payment here, for which you can refer to Part 1 of this Case Study Serie

  1. Create a new Object called “Products”
    1. Name : Text
    2. Image : Image
    3. Description : Description
    4. Cost : Price
    5. Available Inventory : Numeric
    6. Update Inventory : Numeric


  2. Create a new Object called “Line Items”
    1. Quantity : numeric
    2. Total : price
    3. Status : Dropdown
      1. Active
      2. Hide


  3. Create a new Object called “Cart”
    1. Total : Rollout Field to get aggregated Total from Line Items (with Status Active)
    2. Status : Dropdown
      1. Draft
      2. Paid
    3. Unique Identifier : unique text field


  4. Three relationships
    1. One Cart “Line Items” Many Line Items “Cart”
    2. One Product “Line Items” Many Line Items “Product”
    3. One Contact “Cart” One Cart “Cart”


  5. New Page : #Manage Inventory
    1. A “New Product” Form with the different products field to add a new product to the inventory
    2. A Dynamic block, one line to show Name, Image, Inventory
      1. Also we can add our “Update Inventory” as a field so people can add or remove products from their inventory
      2. Sort by inventory
      3. Check the “Wait” boxes


  6. New Page : #Shop
    1. Two possible Hidden Cookie Management Blocks, based off display settings
      1. This is a bit complex, but you can see the shortcodes here : https://clickfixdemos.safechkout.net/shop
      2. Two possible scenarios for this block, Contact Forms only
        1. If contact is not identified (anonymous)
          1. Generate a random string into a variable
          2. Contact Unique Identifier field : fill up with Random Shortcode
          3. Cart//Unique Identifier, fill up with Random String
          4. submit a hidden multistep contact form (no load) to generate a Cookied Contact
        2. Contact is identified but no Cart (Unique Identifier field empty, via the relationship)
          1. Generate a random string into a variable
          2. Contact Unique ID field : fill with Cookied Unique ID
          3. Cart//Unique Identifier, fill up with Random String
          4. submit a hidden multistep contact form (no load) to generate a Cookied Contact
    2. At the top a “Go To Cart” button appearing only if Cart Unique Identifier is not empty
    3. Dynamic Blocks, three Products per row
      1. Product Name
      2. Image
      3. Cost
      4. A Line Item Form
        1. Quantity field, preselected to 1
          1. Prevent from going over max inventory with Calc shortcode
          2. Hide Submit if over the limit
        2. “Add To Cart” button
        3. Hidden Fields
          1. Total : total price calculated with Calc shortcode
          2. Status : Dropdown set to Active
          3. Cart//Unique Identifier from the 1-1 Contact to Cart relationship
            1. Fill up with variable from the above hidden block
          4. Product//Unique ID of the selected product


  7. New Dynamic Page : #Cart
    1. We can clone our invoice template design
    2. And have dynamic blocks to show each line item as a product with image, name, quantity, price and total. Line item should be Active.
    3. Also a Red Cross icon to erase a line item
      1. Clicking the Red icon should submit a hidden form that will set the Line Item status to Hide
    4. And then use our Total field


  8. New Products Automation : #Inventory
    1. Trigger : Update Inventory is Updated and not empty, add here again
      1. Update Available Inventory to Available Inventory + Update Inventory
      2. Update “Update Inventory” to 0
Note : This part being mostly related to Objects (which we cannot share), there is no asset to download.


Please follow the instructions above to set this up.

arrow_drop_down_circle
Divider Text
ClickFix Features
  1. Conditional Display Overview (🆓 Free Plan)
  2. Calc Shortcode Overview (🆓 Free Plan)
  3. Multistep Shortcode Overview (🆓 Free Plan)
  4. Random Shortcode (🆓 Free Plan)
arrow_drop_down_circle
Divider Text
arrow_drop_down_circle
Divider Text
Enter Your Email Below and Join 700+ Ontraport Users on their ClickFix Journey.
If you need help to implement this into your account or you need more information, hit "Consult an Expert" down there, send your request and we'll take it from there.
arrow_drop_down_circle
Divider Text
settings
OR
chevron_right
Consult an expert
And let us figure out together if ClickFix is right for you
arrow_drop_down_circle
Divider Text

"The Team at ClickFix are the ultimate Ontraport hackers. They make the impossible possible, and have helped out a ton of our clients with their tools."

Landon Ray
Ontraport CEO

© [TheYear] ClickFix.io | Terms of Service | Privacy Policy
[bot_catcher]