Page Comparison

...

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.
      

      Image RemovedImage Added

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

...

3. Copy the Appropriate Code Snippet for Chosen Scenario

(Click to expand table and enable copy feature for code snippets ->)

<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>

...

• 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

...

• 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):
  

  Code Block
  <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

...

• 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.
  

...