As we are pulling all our products into Statamic, we'll want a way to access everything on the front-end from our
antlers files. There are two options available to you:
This addon only takes into account the Storefront API as we want more control over what happens on our frontend.
To see the front-end in action, you can view a demo at https://shopify.jackwhiting.dev.
The Storefront API has a lot of data you can retrieve, however we are only focusing on three elements.
- Creating a cart instance and remembering it across pages
- Handling adding products from our CMS to the cart
- Handling the cart overview page and handing that off to Shopify for checkout.
A more detailed breakdown of our scripts can be found on the Storefront API page.
If you are looking to spin something up quickly and test things you can follow the example templates step below.
I'll be building a complete starter theme to get off the ground running with this add-on. Once released, the below will be removed and placed in the starter theme.
There are example templates for the
products page in the addon folder. To get them on the frontend you can run the following command:
php artisan vendor:publish --tag="shopify-theme"
To easily access your Storefront API Token and site URL from the front end you can use the builtin tag
You will need to set up the pages in your CP, update your config, and pull down your products before everything will click together.
Buy Buttons work best if you have a small number of products and are looking for less customisation and something more out of the box.
Buy Buttons can be set up per product in the Shopify admin, this will generate you some embeddable HTML that you can then paste into a custom field on the admin to output to the frontend.