Creating a shopping cart experience with the Directories and Forms apps – Soapbox Support Center

With the Directories and Forms apps, you can create a customizable shopping cart experience that allows logged in users the ability to search for available items in a Directory and then submit a shopping cart order form that uses the Forms app.

While the easiest way to think of this is as a shopping cart, it does not process payment. Rather it allows for the creation of multiple records in Salesforce at one time based on selections made by the visitor.

Use Case: Volunteer registrations

Let's say your organization has a customized volunteer registration model in Salesforce that associates Contacts with Opportunities through a custom object called Volunteers. This Volunteer object has a reference field looking up to the Contact object and the Opportunity object. The Opportunity record contains custom fields that track details of the volunteer opportunity.

Your organization wants to allow logged in front end users the ability to search for Opportunities, add desired Opportunities to their cart, and checkout with one form submission.

Using the Forms and Directories apps in tandem to create the shopping cart experience

To demonstrate how to set up the shopping cart experience, we'll walk through our volunteer registration use case. This will require the creation of one Directory and one Forms app page. The

This following instructions cover the base setup of the features along with specific text or options we'll choose for this particular use case. We'll also call out additional options you'll have for your own shopping cart experience.

Setting up the Forms app as the checkout page

To create a Forms app page to be used as the checkout page for a shopping cart experience:

Go to the Forms app Forms Manager
Click New
For Title, enter a title for your form. We'll enter "Volunteer Checkout".
To the right of Salesforce Object, click Select Object
In the modal popup, select the Salesforce object in which you wish to create the record. We'll select Volunteers.
For Published, select Yes
Click Apply to save these initial settings
To the right of URL, click Customize URL. In the popup, define the Page Link and the Page Title. We'll use "volunteer-cart" as the Page Link and "Volunteer Checkout" as the Page Title.
Click the Form tab to add fields
Click Add Salesforce Element
In the modal popup, select the reference field that contains the lookup to the Salesforce object from which the front-end visitor will be selecting records in the Directories app
For Default Value, enter a string that will be used as the name of the session array variable that keeps track of the record Ids that the visitor adds to their cart. We'll use {$oppvolid}.
For Hidden, choose Yes
Click Save
Add any additional hidden or visible fields you wish to include on your Forms app page by clicking Add Salesforce Element and repeating the process. We'll add the reference field Contact from the Volunteer object and give it a Default Value of {$ContactId} to populate it with the Contact Id of the logged in user. We'll also set this field to hidden.
Click the Options tab
Go to the Repeating Form section
For Repeatable Form, choose Yes
For Repeating Form Session Variable, enter the string you entered above as the Default Value for the first reference field but without the curly brackets of the $ sign. We'll enter oppvolid.
For Repeating Form Heading, enter a string you wish to appear at the top of each repeating form. This can include:

     a) Literal text: "Family Member"
     b) {n} variable to designate the number of the form in the repeating series: "Family Member #{n}" which would render as "Family Member #1", "Family Member #2", "Family Member #3"... on the Forms app page.
     c) If enabling a shopping cart experience with the Directories app, a Salesforce field in the format of {$ObjectName.FieldName} that will render the value of a field for the record Id in the session array variable.

We'll enter {$Opportunity.Name} to display the name of each Opportunity selected by the logged in user in the repeating form.
For Minimum Number of Repeating Forms, set this to 0 as the number of forms will be defined by how many records the visitor has added to their cart.
For Maximum Number of Repeating Forms, leave this blank as the number of forms will be defined by how many records the visitor has added to their cart.
For Show Repeat Button, choose No
For Repeat Button Text, do not change this as the button won't be displayed
For Remove Button Text, customize the text of the remove button that will appear next to each repeating form. We'll enter Remove Opportunity.
For Empty Repeating Form, customize the text that appears on the Forms app page if nothing has been added to the shopping cart by the visitor. We'll enter "There are no volunteer opportunities in your cart."
Click Save

Setting up the Directories app to show available records

To create a Directories app page to be used as the display available records to add to the shopping cart:

Go to the Directories app Directories Form Manager
Click New
For Title, enter a title for your Directory. We'll enter "Volunteer Opportunities".
To the right of Salesforce Object, click Select Object
In the modal popup, select the Salesforce object from which you wish to display records. We'll select Opportunity.
For Published, select Yes
Click Apply to save these initial settings
To the right of URL, click Customize URL. In the popup, define the Page Link and the Page Title as well as the elements to be enabled on the Directory. We'll use "volunteer-opportunities" as the Page Link and "Volunteer Opportunities" as the Page Title. For our Directory, we'll display a simple list of volunteer opportunities with no front-end search options so we'll set Enable Search Form to No, Enable Show/Hide to No and Enable Default Results to Yes.
Click the Search Form tab
Use the Add Salesforce Element button to add hidden or visible search fields used to query Salesforce. We'll add a hidden custom picklist field called Volunteer Status with a Default Value of "Active."
Click the List Display tab
Use the Add Salesforce Element button to fields you wish to display from Salesforce on the results view. We'll add just the Opportunity Name field and set Link to Record as Yes.
Click the Record Display tab
Use the Add Salesforce Element button to fields you wish to display from Salesforce on the record detail view. We'll add just the Opportunity Name field and set Link to Record as Yes.
Click the Options tab
Go to Parameters - List Display
For Add to Cart Button, choose Yes or No depending on whether you want the visitor to add the item to the cart from the results view. Selecting No will mean that the visitor will need to go to the record detail view to add the record. We'll select Yes so they can add it from the list of results as well.
Go to Parameters - Record Display
For Add to Cart Button, select Yes
For Add to Cart Button Text, customize the text of the add button. We'll leave it as Add.
For Remove Button Text, customize the text of the remove button. We'll leave it as Remove.
For Add to Cart Session Variable, enter the string you entered above as the Default Value for the first reference field in your Forms app page but without the curly brackets of the $ sign. We'll enter oppvolid.
For Add to Cart Alert, customize the message that will appear to the visitor when they click the Add to Cart button. We'll leave it as "Item added to cart" but include simple HTML to hyperlink "cart" to open our Forms app page using its URL that we defined above link this: "Item added to <a href="/volunteer-cart">cart</a>"
Click Save

You may now open the Directory on the front-end of your site to test the setup of your shopping cart experience.