How to setup e-commerce with Mdsh

Adding e-commerce features, such as PayPal payment buttons, as well as managing your products, is now much easier thanks to the latest updates in mdsh.

You can have an online store up and running in about 5 mins.

But first, here are some example products with PayPal payment buttons.

Example: List of products

Here is a list of some of the products defined in assets/data/products.yml:

Example: Single product

Here is a single product, defined in the YAML front matter of this page:

You can include your products in your markdown so they appear inline in your blog posts, or, you can create separate templates specifically for listing your products - it's up to you!

How it works

Step 1:

First, create some "Buy Now", "Add to Cart" or "Subscription" buttons, using the PayPal Button Designer.

Normally, you would need to create a new button for every single product you wish to sell - which can be a real pain!

However, using mdsh you only need a button for each button type ("Buy now", "Add to cart", etc) and price you wish to sell at (you can set different titles, names, options, etc, for each one later).

Example:

You want to sell lots of different t-shirts, each at £10, so create one button called 'tshirts', with a price of £10 .. Then re-use this button for all your £10 tshirts, by defining their unique titles, description, etc in your YAML files (see next step).

Step 2:

Define some products in assets/data/products.yml:

product1:
  name: Product one
  slug: how-to-setup-e-commerce-with-mdsh
  price: 10
  shipping: 0.50
  paypal_btn_id: U8R375VMEZPNN
  paypal_btn_label: Buy Now
product2:
  name: Product two
  slug: some-other-page
  price: 10
  shipping: 0.50
  paypal_btn_id: U8R375VMEZPNN
  paypal_btn_label: Buy Now
product3:
  name: Product three
  slug: how-to-setup-e-commerce-with-mdsh
  price: 10
  shipping: 0.50
  paypal_btn_id: U8R375VMEZPNN
  paypal_btn_label: Buy Now

Define a product in your pages YAML front matter (like this one):

product:
  name:           A cool t-shirt
  id:             000001
  paypal_btn_id:  8YQ9AA2ZK9VU6
  paypal_btn_label: Add to Cart
  category:       tshirts
  price:          5.00
  shipping:       0.50

Define some product options in assets/data/site.yml:

product_options:
  colour: Colour
  size: Size
product_colour_options:
  - Red
  - Blue
product_size_options:
  - Small
  - Medium
  - Large

Step 3:

Add the products to your pages.

Option 1: Embedding products inside your blog posts or pages.

Use these ready-made template partials in .app/templates/html/:

_paypal_products_list.mustache
_paypal_product_details.mustache

These "partials" should included in other pages or templates, and are already setup to use the data examples defined above.

You can add these templates to your Markdown like so:

A product list:

I'm a normal markdown paragraph.

<div class="products">
{{#foreach item in products | where slug = $page_slug }}

  {{>.app/templates/html/_paypal_products_list.mustache}}

{{/foreach}}
</div>

So am I.

A single product:

I'm a normal markdown paragraph.

{{>.app/templates/html/_paypal_product_details.mustache}}

And so am I.

Option 2: Creating separate pages for your products

You can choose products_list or product_details as your page layout when creating a page or post - the template partials mentioned above are used in those layouts by default.

You could also include these partials in any other layouts you create - just set layout to the name of your template in your pages front matter YAML data, then (re)build your page.

See the following layout templates for ready-made examples:

.app/templates/html/products_list.mustache
.app/templates/html/product_details.mustache

mdsh