Implementation approaches

There are many ways of implementing a store for selling subscriptions. In this article we will explain how you can modify the default demo store in order to simplify the subscription purchase process for your customers. The scenario described below is not the only possible solution. If you want to implement more sophisticated solution, please read the Building your online store documentation section.

From the technical point of view, purchasing a subscription is similar to purchasing any other product (for example, a t-shirt). A customer puts a product to the shopping cart, then click the Checkout button and places the order. But usually subscription websites do not have a shopping cart. When a customer selects a subscription product, he is redirected to the checkout page, bypassing the cart page. Also, if you sell service subscriptions, you can exclude the Shipping Method step from the checkout sequence.

Updating the product page

We are going to update the product page in order the customer to be redirected to the Checkout page as soon as he click the Buy (or Subscribe) button on the product page. The default Add to Cart button adds the product to the cart, and leaves the browser on the product page. For our scenario we need to develop a simple custom AJAX handler, which will add the product to the cart and redirect the browser to the checkout page.

Click the Product Details page in the page list (CMS/Pages), and go to the AJAX tab. Paste the following handler declaration to the text field:

function add_and_checkout($controller)
{
  // Empty the cart
  Shop_Cart::remove_active_items();

  // Call the default Add to Cart handler
  $controller->exec_action_handler('shop:on_addToCart');

  // Redirect to the checkout page
  Phpr::$response->redirect(root_url('/checkout'));
}

Save the page and open the product_partial partial. This partial represents a product page and contains the Add to Cart button. Find this button declaration and remove it from the code. Paste the following code to add the Subscribe button:

<input 
   type="button" 
   value="Subscribe" 
   onclick="$(this).getForm().sendRequest('add_and_checkout')"/>

The code defines a button, which triggers the add_and_checkout AJAX handler which we defined on the product page. Save the partial, go to the front-end store and make sure that the button works as supposed.

Removing the Shipping Method step

If you sell service subscriptions, you can remove the Shipping Method step from your checkout sequence. The process is described in this article.

Automatic customer registration

The Subscriptions Module requires your customers to be registered. There are two ways to achieve this. First - force customers to register before checkout. To do it, click the Checkout page in the page list (CMS/Pages), go to the Security tab and select the Customers only item in the Access list. In the Redirect field select the Sign In page.

The less stressful approach is the automatic customer registration. This is a standard LemonStand feature. It allows to configure the checkout process in such a way so it will be registering customers automatically during the checkout. Please read this article to learn how to enable the automatic customer registration.

Further checkout simplification

If you are interested in further checkout simplification, please read this article. It describes how you can get rid of the Payment Method checkout step. If you implement this method, and if your business does not require product shipping, the checkout process will consist of only 3 steps: Billing Address, Shipping Address and Review and Pay.

Next: API extensions
Previous: Website membership areas
Return to Subscriptions module