Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Setup Checklist

Insert excerpt
AE:Set-up ChecklistAE:
Set-up Checklist
nopaneltrue

1. POS

COMMERCE TASKS

POS Task 1
  1. Determine checkout scenario for showing conditional content

    Status
    colour

Red
  1. Blue
    title

Required
  1. optional

  2. Determine catalog scenario for showing conditional content

    Status
    colour

YellowInfrastructure Task 2 -
  1. Blue
    title

Prerequisite

2. INFRASTRUCTURE TASKS

  1. optional

  2. Copy the appropriate code snippet for the chosen scenario.

    Status
    colourRed
    title

Required
  1. REQUIRED

Status
colourYellow
titlePrerequisite

3. COMMERCE TASKS

Commerce Task 3 - Language String, Setting, HTML widget, etc. Task 4 -
  1. Add New Html Widget

    Status
    colourRed
    titleRequired

Status
colourYellow
titlePrerequisite

Configuration Task 5 -
  1. Style Content

    Status
    colourBlue
    titleoptional

Status
colourYellow
titlePrerequisite

  1. Add Widget to Widget Zone

    Status
    colourRed
    title

Required
  1. required

Status
colourGreen
titleDetailed Setup

Prerequisite Tasks

Insert excerpt
AE:Prerequisites Tasks ExcerptAE:
Prerequisites Tasks Excerpt
nopaneltrue

POS Tasks

  • POS Task that must be completed first

Infrastructure Tasks

  • Infrastructure Task that must be completed first. Remove section if not required

Commerce Tasks

  • AW Commerce task that must be completed first

Settings, Language Strings and/or HTML Widgets for this Feature

...

Settings

  • AW Commerce Settings that must first be completed

Language Strings

  • AW Commerce Language Strings that must first be completed

HTML Widgets

  • AW Commerce HTML Widgets that must first be completed

Detailed Setup Guide

  1. Step 1 Header

  2. Step 2 Header

1. Step 1 Header

  • First bullet should provide navigation instructions i.e. Catalog >Attributes >Product attributes

    1. Sub-bullet for step 1. Every step and click should be detailed so that someone could follow with little prior experience.

      1. Sub-bullet for step a. Include screenshots of the step and use skitch to mark up screenshots. It can be downloaded here: https://www.techspot.com/downloads/5705-skitch.html

Expand
titleExample of content within a section
  • From the Aspenware Commerce Plugins>Age Range page in Admin, click View Add Range Types in the upper right corner.

  • Click Add Age Range Type.

  • Enter a name and description for the age range type.

  • To set the date used to compare the customer’s age to the required age range, select:

    1. Calculate from Trip Start (this age range type is likely already configured), or 

    2. Calculate from Today’s Date (age range based on purchase date), or

    3. Specify the Calculation Start Date; the customer’s age on this date will be used to determine if they are eligible for the product based on the age ranges

  • Click Add.

  • Age Range Types can be edited and inactivated, but they cannot be hard deleted without contacting Aspenware. 

  • Age Range types that are set to Calculate from Trip Start or Today’s Date will never need to be edited, unless you would like to edit the name. Age Range Types that are calculated from a fixed date however, will need to be edited each year to adjust for the current year.

Image Removed

 

Hint: Age Range Types should also be adjusted year over year. If age ranges are calculated based on Trip Start, then they will not need to be updated.

Once completed for all required age range types move on to create Age Range.

Info

Note: When possible use notes, warnings, and hints within info panel macros. See https://aspenware.atlassian.net/wiki/pages/resumedraft.action?draftId=781156460 for more details on these.

2. Step 2 Header

  • First bullet should provide navigation instructions i.e. Catalog >Attributes >Product attributes

    1. Sub-bullet for step 1

      1. Sub-bullet for step a

...

DELETE CONTENT AFTER THIS LINE

go to the Glossary page and add the key terms Excerpt Include that you added for your configuration guide.

To add the feature terms to the Glossary, navigate to the glossary and add a header for your feature using an H2. Select the + and then select …view more. Search for Excerpt Include and in the Page Containing the Excerpt search for “Configuration: [FEATURE]” select to hide panel, preview and add.

How-to Guide of this page can be found here: [Internal] Configuration page Setup Guide

Real Example of this page can be found here: https://aspenware.atlassian.net/wiki/spaces/DB/pages/edit-v2/1037172926The 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.

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

Note

IMPORTANT: Aspenware does not guarantee the widget zone functionality of any catalog scenarios. If using catalog widget zones be sure to test thoroughly.

  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

Scenario

Code Snippet for Html Widget

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

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

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

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

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

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

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

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

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

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

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

    Image Added
  • Enter the following into the fields:

    1. Name: Give your widget a name.

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

      Image Added
    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] ).

      Image Added
    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.

Info

NOTE: Styling will be required if the background for the conditional content isn’t white.

  • 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

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.

    Image Added
  • Select the appropriate widget zone and click Update.

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

...