Configuration: Conditional Content Wrappers

Setup Checklist

This section is a comprehensive and high level summary of all tasks and prerequisites required for this feature to function properly. This section is purposed for use after an administrator is familiar with configuring this feature as an “audit” checklist. For detailed set-up instructions, jump down to “Prerequisite Tasks” and “Detailed Setup Guide” and then follow up with this checklist to ensure all steps are completed.

Prerequisite Tasks

This section describes all requirements that must be completed before you can begin setting up this feature. Once these tasks are complete continue to the next section.

The conditional content wrapper requires four parameters to be set in order to be triggered for display in the widget zone. Your particular use case may not require all four parameters (e.g. your product total does not have to be $0 or a credit card does not have to be required), but they still must be set. These parameters are accounted for in the code snippets shown below for each catalog and checkout scenario.

Available Parameters

• is-checkout: boolean

  • True/False - If this is set to false, the message can only be shown if a widget zone is selected that is not part of the checkout process.

• requires-credit-card: boolean

  • True/False - If set to true, at least one purchased product must have the classification “requires credit card” assigned to it in admin. If set to false, the message will show regardless of whether the cart items have the requires credit card classification

• requires-zero-dollar-total: boolean

  • True/False - If set to true then the message will only show when the order total (if is-checkout: true) or mini cart total (if is-checkout: false) is $0.

• product-ids: array of numbers

  • Product IDs are found on the PDP admin page as the digits appended to the url when editing the PDP (see below). If you would like the conditional content message to show when only particular products are in the cart, insert the product ID(s) between two square brackets (e.g. [67,82] ).

1. (Option 1) Determine the Checkout Scenario for Showing Conditional Content

Determine if you would like the conditional content to display during one of the following checkout scenarios:

1. Checkout Scenario 1: Display a message during checkout when the order total is $0.

2. Checkout Scenario 2: Display a message during checkout when an order contains a specific product and locate the correct product ID(s).

   1. To find the product ID(s), go to Catalog > Products in Aspenware Admin

   2. Search for the product.

   3. Once on the Edit product details page, locate the Product IS in the URL. It will appear as the digits appended to the end of the URL. See the example below.
      

      

3. Checkout Scenario 3: Display a message during checkout when an order requires a credit card.

2. (Option 2) Determine the Catalog Scenario for Showing Conditional Content

1. Catalog Scenario 1: Display a message on the PDP when the cart total is $0.

2. Catalog Scenario 2: Display a message on the PDP when the cart includes a specific product.

3. Copy the Appropriate Code Snippet for Chosen Scenario

<conditional-content :is-checkout="true" :requires-credit-card="true" :requires-zero-dollar-total="true" :product-ids="[]">
<div>This is an example of a zero dollar order</div>
</conditional-content>

<conditional-content :is-checkout="true" :requires-credit-card="false" :requires-zero-dollar-total="false" :product-ids="[7,9]">
<div>This is an example where product id's 7 or 9 exist on an order.</div>
</conditional-content>

<conditional-content :is-checkout="true" :requires-credit-card="true" :requires-zero-dollar-total="false" :product-ids="[]">
<div>This is an example where an order requires a credit card</div>
</conditional-content>

<conditional-content :is-checkout="false" :requires-credit-card="true" :requires-zero-dollar-total="true" :product-ids="[]">
<div>This is an example of a zero dollar cart total</div>
</conditional-content>

<conditional-content :is-checkout="false" :requires-credit-card="false" :requires-zero-dollar-total="false" :product-ids="[7,9]">
<div>This is an example where product id's 7 or 9 exist in the cart.</div>
</conditional-content>

Detailed Setup Guide

1. Add New Html Widget

2. (Optional) Style Content

3. Add Widget to Widget Zone

1. Add New Html Widget

• In Aspenware Admin, go to Nop-Templates > Plugins > HTML WIDGETS > Manage Html Widgets.
  

  

• Click the Add new Html Widget in the top right corner of the page.

  

• Enter the following into the fields:

  1. Name: Give your widget a name.

  2. Html Content: Click Tools and select Source code.
     

     

  3. Paste the corresponding html code from the relevant scenario above into the pup-up box that appears. (See chart from scenarios above.) If your chosen scenario applies only when particular products are in the cart, insert the product ID(s) between two square brackets within the code. Multiple product ID(s) must be separated by a comma (e.g. [67,82] ).
     

     

  4. Click Ok.

3. (Optional) Style Content

To style your content you will need to add styling to this code. One example is given below. If you need additional styling, reach out to your Aspenware Representative for help at support@aspenware.com.

• Add styling instructions to the Source Code html you just added above. In the example below, the styling added includes content box background color, padding, and margin (color = hex #e8edf0):
  

  <conditional-content :is-checkout="true" :requires-credit-card="true" :requires-zero-dollar-total="false" :product-ids="[829,878]">
  <div class="payment-message" style="padding: 1.6rem; background: #e8edf0; margin: 0 1.2rem; line-height: 1.5;" div="">Your content goes here.</div>
  </conditional-content>

• Click Ok.

• Click Save to save the widget.

4. Add Widget to Widget Zone

Your new widget needs to be added to the widget zone where you would like the content to be displayed. While you may try to apply a wrapper to any widget zone, Aspenware only guarantees support for the following zones:

• checkout_payment_method_bottom

• checkout_payment_method_top

• checkout_confirm_top

• checkout_assignmentpage_top

• checkout_footer

For more information on these zones, see the Aspenware Configuration and Library for Html Widgets.

To add the widget to the appropriate widget zone:

• In Aspenware Commerce Admin, go to Nop-Templates > PLUGINS > HTML WIDGETS > Manage Html Widgets

• Scroll to the widget you created above and click Edit.

• On the Edit Html Widget Details page, click on the Widget Zones tab.

• Click Add new record.

• Select the widget zone where you would like the conditional content to display. See the image below for known supported widget zones.
  

  

• Select the appropriate widget zone and click Update.
  

  

• Click Save to save the changes to the widget details.