This is a simple webshop with serveral payment methods that does not require a monthly fee. Great for a simple webshop. The webshop currently does not allow for variable tax calculations. It also does not provide an alternative shipping address, although that can be added easily. An email parser would allow you to automate the buying processes even further.
How it works
Step 1. Create a Mollie or Paypal account
Before you can add the webshop, in order to manage the payments, you need to
create a Mollie account or a
Paypal account. Mollie only works for companies within the EU(?) and Paypal works globally. Mollie will ask you to register your website. They will verify if you have a proper return policy, clearly mentioned company data and clear general terms and conditions. Once your website is approved by Mollie you can add payment methods. Go to
https://useplink.com and register. Within your Mollie dashboard you can click on your profile and select ‘Payment links’ to go to your Plink account. Create a re-usable link with a variable amount and description. This re-usable link is required in the final part of step 3 of this tutorial.
If you chose to create a Paypal account, you need to go to the developer dashboard. There you will find ‘My apps & Credentials’. At this page you have to click the ‘Create App’ button, which will give you a ‘client_id’. This ‘client_id’ is needed in the final part of step 3 of this manual.
Step 2. Add scripts to the footer
Download the files and add them to your folders. Make sure the bottom of your layout document looks like the code below.
Step 3. Create the ‘cart’, ‘checkout’ and ‘paylink’ shortcodes
As one knows, Hugo allows you to ‘include’ reusable code snippets onto elegant so called shortcodes. Let’s make use of them in order to embed our cart source code made of a simple but elegant table + form combination.
For the checkout form embedding let’s build a checkout shortcode.
Download those 3 files and save them in the ’layouts/shortcodes’ of your project.
Like this you can invoke any of the 3 above mentioned subprocesses at any place in your project simply by calling the given ‘shortcode’, as we’ll see in the next step.
Note that in this occasion we re-wrote the url in some of the files. Like this we can enjoy even more granular control for individual pieces of content.
Step 4. Create the ‘cart’, ‘checkout’ and ‘paylink’ content pages
Let’s create the relevant markdown formatted content pages containing the shortcodes. That is to say the ‘cart.md’, ‘checkout.md’ and ‘paylink.md’. You can do so in the root of the ‘content/’ folder and rewrite the urls how you would like them.
Step 5. Create some products
Create a new Hugo section (folder in the root) and call it ‘products’. In this folder you can create your products and your product overview in the ‘_index.md’ file. Each ‘my-product-name.md’ file (replace ‘my-product-name’ with a great product slug), should look like this:
--- title: Buy me a beer image: "/uploads/beer/5.jpg" images: - image: "/uploads/beer/2.jpg" - image: "/uploads/beer/3.jpg" - image: "/uploads/beer/4.jpg" - image: "/uploads/beer/1.jpg" variant_type: size variants: - name: half-a-pint price: 2.75 sku: beerhalfapint - name: pint price: 4.25 sku: beerpint order_number: 2 --- I like beer a lot! IPA, Guinness, Stout, craft beers... and I love to try new ones. Buy me half-a-pint to get going or a pint to get a good buzz.