Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. This Developer Center contains the guides for Commerce 6.13.0 through 7.4.1.Visit new site

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

5 - Modifying the Velocity templates

5 - Modifying the Velocity templates

Once you completed your Storefront extension, you'll need to modify some Velocity templates to support the automatic renewal option. After you finish modifying the Velocity templates, your customers will be able to see the automatic renewal option in the Storefront.

The order form page

For the customer to see and select the automatic renewal option, you'll add a checkbox and description for the automatic renewal option to the order form page.

  1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/billingAndReview.vm, locate the following block of code:
        <form action="billing-and-review.ep" method="post" name="billingAndReviewFormBean">
    	#if($sesShoppingCart.getTotal().floatValue() > 0 || $sesShoppingCart.hasRecurringPricedShoppingItems())
                <div id="checkout-review-payment">
                    <fieldset>
                    <legend>#springMessage("billingandreview.paymenttitle")</legend>
    
  2. Insert the following Velocity code after the above code:
    <div style="border: 1px solid gray; padding: 5px; margin-bottom: 10px;">
    #springFormCheckboxes("billingAndReviewFormBean.autoBill" $unlabeledTrueCheckboxItem "" "")
    #springMessage("billingandreview.autoBillLabel") 
    </div>
    
  3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/billingAndReview.properties, add the following property:
    billingandreview.autoBillLabel=Renew my subscription automatically and bill me
    
    This property stores the automatic renewal option's description.

The order summary page

After a customer places an order, they see the order summary page. For the customer to see if they have selected the automatic renewal option, you'll add a message to the order summary page.

  1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/checkoutMacros.vm, locate the following block of code:
    ## Review order billing
    <div id="checkout-review-order-details-billing">
      <fieldset>
        #set ($billingAddress = $order.getBillingAddress())
        <legend>#springMessage("receipt.billingAddress")</legend>
        
        #if ($order.orderPayment.paymentMethod == "PAYPAL_EXPRESS")
        <div style="margin-bottom: 1.5em;">PayPal Account: $order.orderPayment.email</div>
        <div class="via">
          <strong>#springMessage("receipt.paymentMethod")</strong>
        </div>
        <div style="line-height: 2em;">
          PayPal &#xa0;<img style="vertical-align: middle;" src="https://www.paypal.com/en_US/i/logo/PayPal_mark_37x23.gif"/>
        </div>
        #else
        <div>$!billingAddress.firstName $!billingAddress.lastName<br />
          $!billingAddress.street1<br />
          #if ($billingAddress.street2 && $billingAddress.street2.length() > 0)
            $!billingAddress.street2<br />
          #end
          $!billingAddress.city
          #if($billingAddress.subCountry)$!billingAddress.subCountry,#end $!billingAddress.zipOrPostalCode<br />
          $ctxCountries.getCountryDisplayName($!billingAddress.country, ${sesShoppingCart.locale})<br />
          $!billingAddress.phoneNumber<br></div>
        #if($order.orderPayment)
        <div class="via">
          <strong>#springMessage("receipt.paymentMethod")</strong>
        </div>
        <div>#springMessage($order.orderPayment.paymentMethod.propertyKey)<br />
          #if ($order.orderPayment.paymentMethod == "CREDITCARD")
            $order.orderPayment.cardType: $order.orderPayment.maskedCardNumber #springMessage("orderDetails.expiry") $order.orderPayment.expiryMonth/$order.orderPayment.expiryYear.substring(2,4)
          #end
        </div>
        #end
        #end
    
  2. Insert the following Velocity code after the above code:
    <div>
        <strong>#springMessage("receipt.autoBill")</strong>
    </div>
    <div>
        $order.autoBill
    </div>
    
  3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/receipt.properties, add the following property:
    receipt.autoBill=Bill me automatically?
    
    This property stores the message the order summary page displays.

The confirmation email

After a customer places an order, Elastic Path sends them a confirmation email with the order's details. For customers to see if they have selected the automatic renewal option in the confirmation email, you'll need to modify the confirmation email's Velocity template:

  1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/email/orderConf.html.vm, locate the following block of code:
    ##empty lines
    <tr align="right"><td></td><td></td></tr>
    <tr align="right"><td></td><td></td></tr>
    <tr align="right"><td></td><td></td></tr>
    ##
    <tr align="right">
    <td><strong>#emailMessage("email.orderConf.grandtotal"):</strong></td>
    <td class="total"><strong>#displayPriceForLocale($order.getTotalMoney(), $order.locale)</strong></td>
    </tr>
    
  2. Insert the following Velocity code after the above code:
    <tr align="right">
        <td>#emailMessage("email.orderConf.autoBill"):</td>
        <td>$order.autoBill</td>
    </tr>
    
    Note:

    Each HTML email template has a corresponding text email template. For this tutorial, we'll skip that step, but on a production system, you should update orderConf.txt.vm with the appropriate changes as well.

  3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/email/email.properties, add the following property:
    email.orderConf.autoBill=When your subscription expires, we will renew it and bill you automatically.