{"id":18683106,"url":"https://github.com/foxy/eleventy-fundraising-minisite","last_synced_at":"2025-04-12T04:31:23.742Z","repository":{"id":40715024,"uuid":"273358038","full_name":"Foxy/eleventy-fundraising-minisite","owner":"Foxy","description":"Use Eleventy.js (11ty.dev) and Foxy.io to quickly and easily build a fundraising mini-site for one-time and recurring donations. Perfect for livestream events, too!","archived":false,"fork":false,"pushed_at":"2023-01-09T22:44:57.000Z","size":4445,"stargazers_count":7,"open_issues_count":21,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T02:07:29.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Foxy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-18T23:12:42.000Z","updated_at":"2021-05-24T16:20:12.000Z","dependencies_parsed_at":"2023-02-08T15:31:02.418Z","dependency_job_id":null,"html_url":"https://github.com/Foxy/eleventy-fundraising-minisite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxy%2Feleventy-fundraising-minisite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxy%2Feleventy-fundraising-minisite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxy%2Feleventy-fundraising-minisite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxy%2Feleventy-fundraising-minisite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foxy","download_url":"https://codeload.github.com/Foxy/eleventy-fundraising-minisite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248517138,"owners_count":21117394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T10:13:45.564Z","updated_at":"2025-04-12T04:31:22.430Z","avatar_url":"https://github.com/Foxy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A One-Page JAMstack ecommerce Site Starter with Eleventy, TailwindCSS, and Foxy.io\n\nKickstart your ecommerce with a few clicks. Perfect for non-profit fundraising mini-sites, live events, or anybody looking to build a clean one-page ecommerce or donation site.\n\nDemo site is at https://eleventy-fundraising-minisite.demos.foxy.io/. Original repo is [Foxy/eleventy-fundraising-minisite](https://github.com/Foxy/eleventy-fundraising-minisite/edit/master/README.md). Related blog post at [Foxy.io](https://www.foxy.io/blog/building-a-turnkey-fundraising-mini-site-with-foxy-and-eleventy/).\n\n## Who This Is For (and Prerequisites)\n\nThis project is primarily intended for web designers and developers (professional and amateur) who have at least a basic knowledge of editing code and using Git, and who want to get an ecommerce/fundraising/donation website up and running quickly, with minimal cost and maintenance. Experience with using your terminal and running Node and `npm` will be needed if you want to do local development, but isn't strictly required.\n\n## In a rush? Deploy in minutes.\n\nClick the `deploy` button below, and in a few minutes you'll have:\n\n1. Your site up and running on the web.\n1. A new repository ready to receive pushes.\n1. Continuous deployment ready to go ― each new commit to the master branch will result in a new version published online.\n1. your store ready to accept orders. (Ok this step takes a little longer, but it's still pretty quick.)\n\nSeriously, if you haven't seen how deploying to Netlify works before, it's almost magical. 🧙🏽‍♀️\n\n\u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/Foxy/eleventy-fundraising-minisite\"\u003e\u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" alt=\"Deploy to Netlify\"\u003e\u003c/a\u003e\n\n(Note that if you want to keep your site updated with any bugfixes or new functionality from this repo, follow the steps in the [How to Use This Project](#how-to-use-this-project) section instead.)\n\n# Overview\n\nThis project offers you a ready-made JAMstack website with a hosted ecommerce solution. You'll see it in action right away and able to customize everything to fit your needs.\n\n- **[JAMstack.](https://jamstack.org/)** A serverless architecture providing pre-rendered websites.\n- **[Hosted ecommerce solution.](https://foxy.io/)** Use Foxy.io and have your ecommerce handled for you. Use almost any payment methods you want, which taxes, shipping, discounts, recurring billing, and more taken care of.\n- **[Continuous deployment.](https://www.netlify.com/products/workflow/)** Your code will be easily and continuously delivered to production.\n\n**[Convinced yet? Let's do it!](#lets-do-it)** Not quite? Go on.\n\n## Why?\n\nIn short: **because you'll have a lightning-fast, safe and inexpensive ecommerce website!**\n\nHere's a longer version:\n\n- **Performance:** A JAMstack makes your website very fast. It's no miracle. Every page is pre-built during the compilation. Therefore not only is there no processing to be done when your client visits your store, but also the website can be distributed among many different servers across the globe with a service called Content Delivery Network (CDN). This means that your client will access the fastest possible server anywhere it is.\n- **Security:** The JAMstack architecture means the server does not run anything. Therefore, it won't run anything provided by a malicious user. It is also not connected to any database, so you'll have no issues there either. The shopping cart and payment processing are done by a [PCI Compliant Level 1 Service Provider](https://www.foxy.io/pci).\n- **Infrastructure costs:** The serverless architecture of JAMstack requires only the CDN servers, which would probably be necessary anyway.\n- **Ease of development:** There are few requirements for the development environment. Testing can be done without much effort, including manual and acceptance tests.\n\n## Who?\n\nThis is an Open Source project, built on top of [awesome projects](#acknowledgements) and sponsored by Foxy.io.\n\nThe project was conceived after the folks at Foxy wanted to help small businesses and non-profit organizations quickly get ecommerce minisites online, particularly in light of the impact of COVID-19 on live events and fundraisers.\n\n## How to use this project?\n\n1. Fork it or Deploy it on Netlify\n1. Customize it by adding your brand and products\n\nUpon clicking the deploy to Netlify button, you'll have a website up and running, a forked repository to work with and you'll be able to start customizing right away.\n\nWe're adding relevant comments to the code so that you understand clearly where and how you can change it to achieve what you need. We're adding handy comments in strategic places to help you figure out how to customize it. Look for 'Tip:' in the files. We surely cannot include everything there is to know, but you'll find some helpful references.\n\n# How to Use This Project\n\n## 1. Set up a Foxy.io Store\n\nGo to [Foxy.io](https://foxy.io/) and create an account, if you don't already have one. It's free during development, so don't worry about that. You can change any of your settings later. The important thing is to create a store and copy out the domain (like `example.foxycart.com`) to use in the next step.\n\n## 2. Deploy it!!\n\nThe easiest thing to do is to simply click this button: \u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/Foxy/eleventy-fundraising-minisite\"\u003e\u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" alt=\"Deploy to Netlify\"\u003e\u003c/a\u003e\n\nIf you'd rather, you can fork this repo, then deploy it to Netlify yourself (which is still super straighforward). That way you'll be able to pull bugfixes and new features (and submit fixes), but that may not be a huge deal to you. If you fork it, you'll end up with a repo named the same as this repo, though, which may not be ideal.\n\n## 3. Customize it!!!\n\nIt's time to get our hands dirty.\n\n### Running Things Locally\n\nWe're going to assume you've got git, node, and npm set up already. If not, this may be a bit advanced. You can still work with this repository directly by modifying files in Github, but you'll probably want to do a bit of googling to get those pieces set up. Once you've done that…\n\nClone your repo to your computer, go to the directory in your terminal, and run the following:\n\n```bash\nnpm i\nnpm run start\n```\n\nIf you're using the HMAC signing functionality, create a file called `secrets.sh` with the following (replacing the `abc123` with your store secret):\n\n```bash\nexport FOXYSTORESECRET=abc123\n```\n\nThen you'd run this `npm` command:\n\n```bash\nsource ./secrets.sh \u0026\u0026 npm run start\n```\n\nIf all goes well, you'll see something like this:\n\n```\n[2] [Browsersync] Access URLs:\n[2]  ----------------------------------\n[2]        Local: http://localhost:8080\n```\n\nLoad up that URL in your browser and see your site! And, extra cool: If you change files, it'll reload automatically! Now you can see everything you do in the following steps.\n\n### Step By Step\n\n1. **Set your site title and text and such:** Edit `src/_data/site.yaml` file. You'll find you can customize most of the site's texts there. You can set the navigation links, highlight texts, and display messages to your users.\n1. **Set your Foxy store config:** Edit `src/_data/store.js`. These values can come from the Netlify environment variables, but you may want to set them here for your local development.\n1. **Set your own products:** There's a `_products` folder. Replace the products with your own. We'll go into detail in the [Detailed Product Step-By-Step](#detailed-product-step-by-step), which includes fetching products from an external API.\n1. **Set your own logo:** Replace the `src/static/logo.png` file with your own. Also, replace the _favicon_ files in `src/static/img/`. Alternately, you can change the logo filename or location by editing the `store.js` file. (Try [favicon.io](https://favicon.io/) to make it easy. The placeholder logo is from [DesignEvo free logo creator](https://www.designevo.com/logo-maker/).)\n1. **Set your own theme:** You can use [lumo editor](https://demo.vaadin.com/lumo-editor/) to tweak your theme. It is a very neat graphical tool. Use the code it generates to replace the `src/_includes/lumo.html` file. Of course, if you are comfortable with CSS and TailwindCSS, go for it. If you aren't, check out the `tailwind.config.js` file in the root directory of the project. By setting these variables, you can start making the website look your own. You'll notice the utility classes Tailwind provides throughout the code.\n1. **Set your own videos:** There's a `src/_highlights` folder. In this Each file contains something you want to highlight. Add or remove de `.md` files do add or remove highlights. The first one will be the first video available. They are also used to build the Highlight section of the website.\n1. **Set your donation form configuration:** Edit `src/_data/site.yaml` file. You can customize the behavior of the donation form, changing default values, options available and even removing fields altogether. For examples of what possible config options look like, visit [elements.foxy.io](https://elements.foxy.io/?path=/docs/integrations-foxy-donation--default-story).\n1. **ADVANCED: Fetch your data on compile time:** There's a `src/_data/lorem.js` file. It demonstrates how to fetch data from your own API during compile time. This way, you can have your content updated on each new deploy. **Be sure to remove `src/_data/lorem.js` file** if you're not going to use it. It makes real requests during build time. If you are not going to use the data fetched it is simply making unnecessary requests to the server and making your build time slower.\n\n## Want to dive deeper?\n\nHere are some concepts that will help you go further\n\n- **11ty's data:** Your [data can be stored however you want](https://www.11ty.dev/docs/data/). Use the [computed data](https://www.11ty.dev/docs/data-computed/) feature to fetch from a database or API you already have. Use simple text files in [YAML format](https://yaml.org/spec/1.2/spec.html#Preview) in the `_data` directory if you are starting from scratch. You'll be amazed at the simplicity of this approach. For complex needs, you can use Javascript files and use the default export to provide the data. With this approach, you can preprocess the data any way you want. The [`src/_data/lorem.js` file demonstrates quite simply how to fetch data from an API](blob/master/src/_data/lorem.js).\n- **11ty's templates:** Your template files [can most probably be written in a templating language you are already familiar with](https://www.11ty.dev/docs/languages/). If you don't know any of these, don't worry, you can customize the templates provided in this project, and you'll learn the templating language, we're using as you go. We're using mostly [Nunjucks templating language](https://mozilla.github.io/nunjucks/templating.html) and [Markdown](https://guides.github.com/features/mastering-markdown/) in this project. Nunjucks is a powerful language and will most probably meet your needs, while Markdown is as simple as it can get, and you feel quite comfortable with it in minutes.\n- **TailwindCSS:** Creating a responsive and visually attractive website can be quite a hard task. There are plenty of tools out there. For this project we chose Tailwind. It focuses on allowing custom designs. Of course, there are a lot of ready-made designs out there you can simply use, but the fact is that sooner or later, you'll want to tweak it and build your own custom design. Tailwind is highly customizable and avoids imposing anything on you. Simply go to [tailwindcss.com](https://tailwindcss.com/) and use their search bar to find a class that meets your needs. You'll also be interested in configuring TailwindCSS using the [`tailwind.config.js` file](tailwind.config.js).\n- **ecommerce:** Foxy.io's hosted [cart](https://foxy.io/) solution fits perfectly with the serverless architecture. It does not require you to use any particular CMS or CRM and does not require you to provide your products and prices in advance.\n\n# Detailed Product Step-By-Step\n\nLet's go into detail with some example products, which could be \"normal\" ecommerce products, or items a non-profit needs funding for, or other donation types. In doing so, we will be able to understand how well the store will fit our needs. Then, we'll tweak it looks and feel. Finally, we'll add some extra niceties for our store.\n\n## Products\n\n### Where do my products go?\n\nYou can do this in several ways. We'll explore two of them: creating your products as Markdown files, and consuming your products from an external API.\n\n### Organizing Products with Collections\n\nYou can learn about Eleventy's collections in their docs: https://www.11ty.dev/docs/collections/.\n\nHere's what you need to get started:\n\n1. Create a \"products\" collection by creating a `_products` folder in the `src` folder. If you wish to create new collections, simply create folders with different names, starting with `_` as in `_name`.\n1. Customize your collection using the `_products.json` file in the `_products` folder.\n   1. Set a \"category\" for all products in this folder. This will allow you to create pages that list all products in a category.\n   1. Set the permalink for the items in the category. This will allow you to have a different page for each product.\n\n#### Example: Allow the user to filter by a category\n\nHere are the changes we need to make to allow the user to filter our products by category with a simple select button.\n\nWe will filter only the products available on the page and learn how to use data from our collection items in the process.\n\n##### Add an attribute to the data\n\nLet's go to the [`src/_products`](tree/master/src/_products) folder and edit some of these products.\n\nLet's add a new attribute called 'productType' and set it to 'cool':\n\n```yaml\nproductType: cool\n```\n\nSelect some other products and add a different productType, perhaps the tag 'hot':\n\n```yaml\nproductType: hot\n```\n\n##### Use the data in the HTML\n\nNow lets create the select element. Navigate to the [`src/index.js` file](blob/master/src/index.njk) and look for a line where it reads:\n\n```\n{% for product in collections.product | sortByPriceHighToLow %}\n```\n\nBefore the `section` tag above that line we'll add a simple select element:\n\n```html\n\u003cselect data-action=\"hideProductType\"\u003e\n\t\u003coption value=\"all\"\u003eAll\u003c/option\u003e\n\t\u003coption value=\"hot\"\u003eHot\u003c/option\u003e\n\t\u003coption value=\"cool\"\u003eCool\u003c/option\u003e\n\u003c/select\u003e\n```\n\nWe will use this `select` element to choose between _cool_ and _hot_ products.\n\nNext, let's add a class to our products so that we can distinguish the cool ones from the hot ones. Let's add a `product` class to the beginning of our product class list and we will access the productType data to add the productType to the end of the classList.\n\n```html\n\u003csection\n\tclass=\"container p-2 pb-4 m-auto flex w-full flex-wrap items-stretch justify-start relative\"\n\u003e\n\t{% for product in collections.product | sortByPriceHighToLow %}\n\t\u003cdiv\n\t\tclass=\"product flex flex-col items-center w-full\n  lg:w-1/2 p-2 {{ product.data.productType}}\"\n\t\u003e\n\t\t{# TIP: Use includes to avoid repetition #}\n\t\u003c/div\u003e\n\u003c/section\u003e\n```\n\n##### Add the behaviour in the js file\n\nFinally, let's go to the `src/_assets/scripts/app.js` file and add some behavior to our select button.\n\nFirst, let's add a function that will filter the results. This is certainly not the most performant function, but you can easily get what it does:\n\n```javascript\n// Filter selection button\nfunction hideProductType(e) {\n\tvar toShow = e.target.value;\n\tif (toShow == \"all\") {\n\t\tdocument\n\t\t\t.querySelectorAll(\"div.product\")\n\t\t\t.forEach((product) =\u003e product.classList.remove(\"hidden\"));\n\t} else {\n\t\tdocument\n\t\t\t.querySelectorAll(\"div.product\")\n\t\t\t.forEach((product) =\u003e product.classList.add(\"hidden\"));\n\t\tdocument\n\t\t\t.querySelectorAll(\"div.product.\" + toShow)\n\t\t\t.forEach((product) =\u003e product.classList.remove(\"hidden\"));\n\t}\n}\n```\n\nIt simply adds a 'hidden' class to all products and then removes from those we want to display.\n\nNow let's add this behaviour to the select button:\n\n```javascript\ndocument\n\t.querySelector('select[data-action=\"hideProductType\"]')\n\t.addEventListener(\"change\", hideProductType);\n```\n\nThis code should go the other `addEventListener` in this file.\n\nThere you go! Our select filter is ready. Not nice, but ready.\n\n#### Customize the look and feel\n\nLet's make it nice, shall we?\n\nThis won't be difficult. First, let's replace the content of the default selection to \"Filter the results.\"\n\n```html\n\u003coption value=\"all\"\u003eFilter the results\u003c/option\u003e\n```\n\nNow it's easier to understand. Next, thanks to Tailwind we'll simply add some classes to our select element.\n\n```html\n\u003cselect\n\tclass=\"m-4 p-1 text-darker border-2 border-light rounded\"\n\tdata-action=\"hideProductType\"\n\u003e\u003c/select\u003e\n```\n\nThat's it!\n\nWe made our select have rounded borders. We also used a configurable color from our `tailwind.config.js` file. Did you notice that we set the border color to 'light'? There is no such color by default, but it is configured in our `tailwind.config.js` file.\n\nNow, if someone wishes to change the theme, a quick tweak to the config file will do.\n\n# Using HMAC Validation\n\nFoxy.io supports using HMAC signatures to cryptographically protect your add-to-cart links and forms. Though this is less a concern for non-profit organizations accepting donations, it is nonetheless worth implementing if you're able.\n\nThis minisite includes functionality to make it straightforward to setup the link \u0026 form signature functionality, which is documented below. If you need more information or intend to customize the implementation, please, refer to the documentation at https://wiki.foxycart.com/v/2.0/hmac_validation\n\n## Easy setup\n\nThis minisite comes with an easy to use setup of HMAC validation.\n\nIn order to use this feature you need to:\n\n- provide your Store Secret (or the specific \"HMAC signature generation\" key within your store secret) as an environment variable\n- provide a `code` parameter for each product\n- configure your store to use HMAC validation (a checkbox in the Advanced Settings of your store)\n\n### Provide your HMAC Secret\n\n#### First, get your HMAC secret\n\nNavigate to you store admin page in Foxy.io\n\nhttps://admin.foxycart.com/admin.php\n\nThen, visit the Advanced link: https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures\n\n![](docs/img/step1.png)\n\nLook for a field called \"store secret\", click the \"Show button\" and copy your secret.\n\n![](docs/img/step2.png)\n\nNote that you may have a JSON-formatted secret that includes multiple values. In that case, copy out the `cart_signing` value.\n\n##### While we're here, configure your store to use HMAC validation\n\nTo do that, check the \"would you like to enable cart validation\" box in the same page.\n\n![](docs/img/step3.png)\n\n#### Second, provide the secret to your deploy\n\nWhen you click the \"Deploy to Netlify\" button, Netlify will ask you some questions. One of them is your store secret. If you provide it there, this step will not be necessary.\n\nGo to your account in Netlify, choose the appropriate site and follow these steps:\n\n1. Click Overview;\n1. Click Site Settings;\n1. Build and Deploy\n1. Environments\n\nYou'll find this form:\n\n![](docs/img/step4.png)\n\nThe key must be FOXYSTORESECRET and the value is your secret.\n\n```\nKey : FOXYSTORESECRET\nValue: You Secret\n```\n\n### Provide a code for each product\n\nThe products in the **products** folder may have a field called `code` (which you can think of as a `SKU` if you prefer that term). This code is needed for the HMAC Validation to be correctly used. This code is a product identifier and you may use whater code you please, provided each product has its own unique code.\n\nHere is an example from `src/product/product2.md`\n\n```markdown\n---\ntags:\n  - product\nname: Weary Black Wall\nprice: 468\nprice_monthly: 39\nimage: /static/img/product9.jpg\nimage_alt_text: Non risu potius quam oratione eiciendum? N\ncode: WEA4983901\n---\n\nNon risu potius quam oratione eiciendum? Nihil enim hoc differt.\n```\n\nNotice the code `WEA4983901`. Only products with codes such as this will be signed. Other products **will error when added to the cart**. So just make sure all your products have a code (and that the codes are unique per product).\n\n# Merging New Features to Your Site\n\nWhen using the Deploy to Netlify button, it creates a clone of this repo, and _not a fork_. As such, it's just a little more work to merge new features from Foxy/eleventy-fundraising-minisite into your own version. First, you'll need to clone the repo locally on your computer. (Can't do this from the Github interface.) Then…\n\n1. Run `git remote add upstream git@github.com:Foxy/eleventy-fundraising-minisite.git` to add the official Foxy/eleventy-fundraising-minisite repo.\n1. Run `git fetch upstream`\n1. Run `git merge upstream/master`\n1. Review any merge conflicts, commit, and push to your own repo so Netlify deploys.\n\n# Where to go from here?\n\nGo ahead and click the deploy button. It will fork this repository for you and deploy a version to production. Go ahead and customize the files at will. You'll find some handy tips along the way.\n\nYou'll probably find out that these guys are loyal friends:\n\n- https://docs.netlify.com/\n- https://foxy.io/\n- https://www.11ty.dev/docs/\n- https://tailwindcss.com/\n\n# Acknowledgements\n\n- Site foundation by [scottishstoater/jamstack-web-starter](https://github.com/scottishstoater/jamstack-web-starter)\n- Quantity button component from [tailwindcomponents](https://tailwindcomponents.com/component/number-input-counter)\n- [TailwindCSS.com](https://tailwindcss.com/) is great.\n- [11ty static site generator](https://www.11ty.dev/)\n- Site layout and elements from [stitches.hyperyolo.com](https://stitches.hyperyolo.com/)\n- Template inspiration from [onepagelove.com](https://onepagelove.com/stage)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxy%2Feleventy-fundraising-minisite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxy%2Feleventy-fundraising-minisite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxy%2Feleventy-fundraising-minisite/lists"}