Jump to main content Jump to doc navigation

The smListProducts snippet, included in the package, can and should be used to output a list of your products (managed in the SubscribeMe Component).

User Check

SubscribeMe needs the soon to be paying member to already have a user account, so depending on your website structure, you may want to create a registration page before linking to this page. You could also use If to display a user login/registration form, before showing the product list. You can use Register to handle the user registration and making a member only page if you haven't already setup a members area of your website.

Minimum Call

[[smListProducts]]

The minimum call is a functional assuming you have set up a PayPal account, or PayPal Sandbox account properly and have FormIt installed. You must edit the OptionsResource located in the smListProducts.outer file, in order for SubscribeMe to function properly.

Available Properties

You can use all of the following properties in the smListProducts snippet, all of these are also available from the snippets' Properties tab.

Property Description Default
start Possible offset for products. 0
limit Number of products to show. 5
sort The column to sort on (see tpl placeholders further down or the schema file on Github) sortorder
sortdir ASC or DESC asc
tplOuter Chunk to wrap the results in. smListProducts.outer (included as file)
tplRow Chunk to use to output each result. smListProducts.row (included as file)
activeOnly When 1 or true this will only display active products. Set to 0 to override and display all products. true
separator Separator between the tplRow's. \n (linebreak)
toPlaceholder When set the results will be outputted to a placeholder instead of returned right away
debug Set to 1 or true to output debug data on the screen. false (0)

This snippet also uses the following system settings for some parts of its behavior:

Key Description
subscribeme.currencysign The currency sign to use. Defaults to €
subscribeme.currencycode The currency code. Defaults to EUR.

tplOuter

Default value (from core/components/subscribeme/elements/chunks/smListProducts.outer.tpl):

[[!FormIt?
  &hooks=`smNewSubscription`
  &optionsResource=`4`
]]
<p>Choose the product you would like to subscribe to:</p>
<ul>
    [[+products]]
</ul>

Note: You should NOT edit the default file directly, as future updates will overwrite any changes to this file. It is highly recommended you duplicate the file, or create a chunk with the contents, updating the snippet call, or snippet parameters accordingly.

In your outer template (or near it) you should set up your FormIt call like the above. The optionsResource setting points to the next step in the checkout flow, which is the payment options screen. This ID is used to redirect from the smNewSubscription hook. If you use multiple formit calls and they seem to be conflicting, use unique form IDs, refer to the FormIt documentation.

The smNewSubscription hook contacts PayPal with the product details to set up a token for the transaction, this link will be used in the next page.

The tplOuter chunk only has access to the products placeholder.

tplRow

Default value (from core/components/subscribeme/elements/chunks/smListProducts.row.tpl):

<li style="width: 450px; border: 2px solid #333; list-style-type: none; padding: 15px;">
    <form action="[[~[[*id]]]]" method="POST">
        <input type="hidden" name="product" value="[[+product_id]]" / >
        <input type="submit" value="Subscribe!" style="float: right;" />
        <h3>[[+name]] ([[+currency]] [[+amount_total]] / [[+periods:gt=`1`:then=`[[+periods]] [[+period]]`:else=`[[+period]]`]])</h3>
        <p>[[+description]]</p>
    </form>
</li>

Note: You should NOT edit the default file directly, as future updates will overwrite any changes to this file. It is highly recommended you duplicate the file, or create a chunk with the contents, updating the snippet call, or snippet parameters accordingly.

Unless you're an inline-style lover you'll probably want to change this default. :D

The row template consists of a form posting to itself with a hidden field (name: product) that contains the product_id property and a submit button.

You can already see most of the placeholders in the default, here's a total list:

Placeholder Description
product_id Unique ID of the product.
name
description
sortorder
price Subscription price
amount_shipping Shipping costs
amount_vat Sales tax / VAT costs
periods Number of periods per each cycle
period Length of one period (day/week/month/year)
active 1/0
count Total amount of products in this list
amount_total Total amount (price + amount_shipping + amount_vat)
currency The value from the subscribeme.currencysign system setting
currencycode The value from the subscribeme.currencycode system setting

Displaying the Payment Methods

The next step in the checkout process is the payment methods page. You may also optionally disable this page as outlined.