Demo Updates

This page contains some helpful tips to be able to test out Subscription functionality on the Broadleaf Demo Site.

Cart

Step 1: Add the following HTML to your DemoSite's
"/site/src/main/webapp/WEB-INF/default-theme/templates/cart/partials/" directory.

scheduledPayments.html

<div th:with="first=${#scheduledPayments.getScheduledPayments(cart, null, null, MONTHLY, null)}, second=${#scheduledPayments.getScheduledPayments(cart, null, 5, YEARLY, first.scheduledPayments)}" th:if="${second.hasScheduledPayments}" class="scheduled_payments_group">
    <h3>Your Order Contains Scheduled Payments</h3>
    <table class="scheduled_payments">
        <tr><th>Payment Date</th><th>Estimated Payment</th></tr>
        <tr th:each="scheduledPayment : ${second.scheduledPayments}">
            <td th:text="${#dates.format(scheduledPayment.scheduledPaymentDate, 'dd/MMM/yyyy')}"></td>
            <td th:text="${scheduledPayment.priceAfterAdjustments}"></td>
        </tr>
    </table>
</div>

Step 2: Modify the cart.html to include the above file by adding the new file following after the #cart_total dic ...

cart.html

<div id="cart_total" class="group">
    ...
</div>
<div th:replace="cart/partials/scheduledPayments"></div>

Step 3: Update styles

Some basic styles are provided to provide a more readable cart view. Add the following to the end of styles.css.

style.css

.scheduled_payments {
     width: 300px;
     text-align: center;
     padding: 10px;
 }

.scheduled_payments thead tr th {
    font: bold 10px/10px Helvetica, sans-serif;
    text-transform: uppercase;
    color: #333;
}

.scheduled_payments_group {
    float: left;
}

Step 4: Create data

An easy way to test is to modify one of the hot-sauce products by going into the admin and setting it's Billing Frequency to "Monthly".

Then, create a new offer in the admin that is automatically applied, targets the modified product, applies to future payments, with a begin payment period of 1 and no end period (means that it applies to all future periods).

Add the modified item to your cart and you should see a list of payments that have the offer applied.

Checkout

Step 1: Modify checkout.html by replacing the following div block:

<th:block th:each="sectionDTO : ${checkoutSectionDTOs}" th:object="${sectionDTO}">
...
</th:block>

with

<th:block th:with="subscriptionDto=${#subscription_checkout.getSubscription()}">
    <div th:unless="${subscriptionDto.cartHasSubscription and not customer.registered}">
        <th:block th:each="sectionDTO : ${checkoutSectionDTOs}" th:object="${sectionDTO}">
        ...
        </th:block>
    </div>
    <div th:if="${subscriptionDto.cartHasSubscription and not customer.registered}">
        <p>
            <span>Please</span>
            <a th:href="@{/login(successUrl='/checkout')}"><span th:utext="#{cart.logIntoYourAccount}">log in to your account</span></a>
            <span>or</span>
            <a th:href="@{/register(successUrl='/checkout')}"><span th:utext="#{cart.registerNewAccount}">register a new account</span></a>
            <span>to continue checking out with a Subscription</span>.
        </p>
    </div>
</th:block>

Step 2: In billingInfoForm.html add the attribute th:disabled="${cartHasSubscription}" to the tag of id="billingMethod_saveNewPayment"