MODULES
...
eCommerce
Subscriptions
Detail Layout
16min
the detail layout for subscriptions displays details of the subscription product and also a form for creating/editing subscription orders introduction a subscription detail layout allows you to display detailed content about an individual subscription product to a customer it also is an important part of outputting a subscription sign up form, as these must be outputted within the layout of the subscription they will subscribe users to outputting the detail view the most common place where detail views are displayed is on the automatically generated detail page, if you have enabled these however, they can also be outputted within most liquid files, including ordinary pages setting up detail pages heading to ecommerce > settings will allow you to select the subscriptions tab here you can set up detail pages by choosing the slug which will begin the url to subscription detail pages choose a page template to use on subscription detail pages choose a detail layout to use on subscription detail pages outputting on a standard page (or in most liquid files, including emails) you can use the type parameter to output a detail layout in most liquid files {% include "module", id "14/subscription" item ids subscription id type "detail", layout 'my layout' %} parameters type give the value 'detail' layout give the name of a detail layout for subscriptions item ids this parameter is usually optional, but it's essential when you are outputting a detail view as only one item id must be displayed bear in mind that forms will not work properly inside emails, so if displaying a detail page inside an email, it is best to provide an alternative detail page without the sign up form outputting on the subscription action required system page to output the layout here, you need to add a detail layout name to the liquid as a parameter read more here file structure subscription layouts can be found at the path layouts/modules/module 14/subscription within this folder, you can create a folder for each layout each layout folder can contain a further "detail" folder containing the wrapper and item files it needs developing the detail layout step 1 optional add logic to inform the user of what the status of their subscription is currently we provide an example of some logic you can use to explain to logged in users what the form will do {% if context params slug == "subscription action required" %} {% comment %} content to display when customer is responding to an email notification which asked them to update or authorise payment details {% endcomment %} {% elsif active subscriptions contains this id and context current user id %} {% comment %} content to display when customer has already signed up to this subscription and its status is active {% endcomment %} {% elsif subscription order id and context current user id %} {% comment %} content to display when customer has already signed up to this subscription and its status is not active {% endcomment %} {% else %} {% comment %} content to display when the user is not logged in or has not yet signed up to this subscription {% endcomment %} 	 	 {% endif %} in the case where the user is not currently logged in and is not responding to an email, the logic won't be able to determine the exact status straight away instead, if a non logged in user tries to sign up for a subscription, siteglide will first log them in and check if they have an active subscription already if they do, we'll throw an error, but allow the user to try again if they wish to update their payment details step 2 create your form adding a form to the detail layout allows users to sign up to this subscription product you can read more about creating this form here if you've already created your form, you can skip this step step 3 include the form inside the detail layout once you've created a form and made a note of its id, you'll be able to add it to your detail layout as a guide, we've added a liquid comment to remind you to add your subscription sign up form to this layout {% comment %} insert your payment form here {% endcomment %} this is just a suggestion, you can actually include your form anywhere you like in the layout use the following liquid {% include 'form', id '1', layout 'my form layout' %} parameters id the id of your subscription sign up form, you can check this in cms > forms remember you can use the same form layout for all subscriptions the this id field controls which subscription product is associated with the form layout choose a form layout step 4 the wrapper the wrapper liquid file could be used to add any html structure you may require around your layout you must include the following liquid, which will output the item liquid file for the subscription item most fields are specific to the item and will only be available inside the item liquid file {% include 'modules/siteglide ecommerce/ecommerce/get/get subscriptions' item layout 'item' %} step 5 available fields on the subscription detail view, we provide you with fields relating to the subscription and also the subscription order for a logged in user subscription fields {{this}} output all fields as json {{this id}} {{this weighting}} {{this release date}} {{this expiry date}} {{this\['description']}} {{this\['interval']}} {{this\['interval count']}} {{this full slug}} url for the product detail page {{this\['secure zones']}} array containing the ids of secure zones associated with this subscription {{this price id}} {{this price currency}} {{this price price charge}} the chargeable price of this subscription each interval integer format {{this price price display}} a field for displaying a secondary price of your choice, e g recommended retail price this is not used by the integration integer format {{this price currency symbol}} {{this price price charge formatted}} the chargeable price of this subscription each interval currency format {{this price price display formatted}} a field for displaying a secondary price of your choice, e g recommended retail price this is not used by the integration currency format subscription order fields if a user is logged in, siteglide will establish if they have an existing subscription order for this product using any of these fields should be done cautiously, as they will not be available if the user is logged out, or if they don't have an existing subscription to determine this, you can use liquid logic to hide an entire block of code in which you use these fields {% if subscription order != blank %} {% comment %}content here can safely include subscription order fields or will be hidden if none is available {% endcomment %} {% endif %} fields {{subscription order}} output all subscription order fields as json {{active subscriptions}} array containing all subscription ids connected with one of the current user's subscription orders, where those orders have status active {{subscription order\['status']}} these relate to the subscription status in stripe and are the best way to understand the status of the subscription order at a glance more information available below {{subscription order\['stripe subscription id']}} this refers to a subscription on stripe and can be searched by the client on the stripe dashboard to find out detailed information about this subscription order and the associated customer, invoices, payment intents and charges {{subscription order\['cancel at period end']}} "true" or "false" if true, this subscription has been set by the user to be automatically cancelled at the end of the current billing period the user has a chance to change their minds until this date {{subscription order\['stripe plan id']}} the stripe id for the plan this subscription order is using this may be an older plan than the current plan used by the subscription product {{subscription order\['plan chargeable price']}} a snapshot of the price of this subscription order's plan this may be an older plan than the current plan used by the subscription product {{subscription order\['plan display only price']}} a snapshot of the display only price of this subscription order's plan this may be an older plan than the current plan used by the subscription product {{subscription order\['plan chargeable price formatted']}} a snapshot of the price of this subscription order's plan this may be an older plan than the current plan used by the subscription product formatted as a decimal (e g 1 00) {{subscription order\['plan display only price formatted']}} a snapshot of the display only price of this subscription order's plan this may be an older plan than the current plan used by the subscription product formatted as a decimal (e g 1 00) {{subscription order\['plan interval']}} a snapshot of the interval of this subscription order's plan this may be an older plan than the current plan used by the subscription product {{subscription order\['plan interval count']}} a snapshot of the interval count of this subscription order's plan this may be an older plan than the current plan used by the subscription product tip changes in the pricing plan it's possible to change the price and billing interval of a subscription this change will only affect new subscribers and existing customers will continue on the plan they signed up for originally you can read more about this here ecommerce subscriptions changing the price and billing interval when outputting fields, be aware that the price might have changed globally for a subscription, while a user may already have an existing subscription with a different price when changing their payment details on the subscription detail view, these users may be reassured to see the price displayed they are paying currently for these users (if they are logged in) there will be two sets of fields available for example {{this price price charge}} shows the current price of the subscription if a new user were to sign up now {{subscription order\['plan chargeable price']}} this field, if it is available, shows the price of the older plan that this customer is currently paying see subscription orders in the next section for more of these fields you can use logic to display a different price to users in this situation {% if subscription order\['plan chargeable price'] != blank %} {{subscription order\['plan chargeable price']}} {% else %} {{this price price charge}} {% endif %} or alternatively, you can use the default filter {{subscription order\['plan chargeable price'] | default this price price charge}} tip working with the interval as you can see above, there are multiple fields involved in storing the interval of charges, which you can use to display the interval in a user friendly way here's one example of using liquid to programmatically decide the format to display the interval {% if this\['interval count'] == "1" %} per {{this\['interval'] | pluralize 1}} {% else %} (every {{this\['interval count']}} {{this\['interval']}}) {% endif %} if the interval count is 1, it will use formatting like "per day" if the interval count is greater than 1, it will use formatting like "every 2 days" check out all the available liquid filters over on the platformos liquid docs