@4site/engrid 中文文档教程
4Site's ENGrid Page Template Framework
这个项目始于我们对客户和我们自己的热爱。 起源于 2017 年，作为 Engaging Networks 和 4Site Studios 之间的合作伙伴关系，为他们的平台创建了第一个免费可用的页面模板； 我们创建了Engaging Networks 页面模板。 该项目非常成功，这些模板至今仍用于所有新的 Engaging Networks 客户。 它们很容易让初级开发人员和代码爱好者轻松使用，并且它们包括 Internet Explorer 11 支持。
从那时起，我们继续加强和完善我们的工作，最终在 2019 年底完成了一次名为“ENGrid”的完全重写。 利用当今最新的网络技术 Webpack、Typescript、ES6、SCSS、CSS Grids，我们为营销人员、筹款人以及介于两者之间的每个人创建了一个新框架，这将确保您的页面脱颖而出并提供您正在寻找的性能.
由 4Site Studios 设计和开发，同时与以下机构合作：
- Amnesty International USA
- Earth Island Institute
- Human Rights Campaign via Lautman Maska Neill & Company
- International Fund for Animal Welfare
- Mercy for Animals
- National Trust for Historic Preservation
- National Wildlife Federation
- Ocean Conservancy
- Organic Consumers
- Oxfam America
- Oxfam Canada
- People for the Ethical Treatment of Animals
- Polaris Project
- Rainforest Action Network
- Save Tibet via Schultz and Williams
ENGrid Features
- Works with all page types (e.g. Donation, e-Card, Email to Target, Event, etc..)
- Auto Credit Card Type selection based on Credit Card Number
- Processing Fee Checkbox
- Donation Upsell Lightbox
- Comma handling in Other Donation Amount input field
- Conditional Hide/Show fields (e.g. In Honor of Giving Fields)
- Give by Check, Card, Paypal
- Auto update CC Expiration Date fields
- Live giving variables to insert actively selected gift frequency or gift amount in page copy or in buttons
- Advocacy "Opt-in Upsell" Lightbox
- Tweaked UI / UX for an improved e-card "add recipient" experience
- Per Page Background Image
- Per Page Layouts (Five Built In)
- Possibility for Sub-Brands
- Address Form Field Internationalization - If the user is on a US / English page and selects "France" as their country the Address Form fields will update their labels, change their ordering, and hide/show relevant fields for French Address formatting. Current address formatting support for (United States, Canada, United Kingdom, France, Germany, Netherlands, Australia).
- Update inputs with improved form field meta info for better auto-fill completion
- "Remember Me" (Coming Soon)
- Capitalize first letter of First Name, Last Name, Address 1, City, Region fields on form submit (Coming Soon)
- Lazy Load all image assets
- Fastest page load times possible on Engaging Networks
- IE11 pop-up encouraging users to upgrade their browsers
- All pages using our page template can be seamlessly embedded in your website with Shortcodes using our WordPress iFrame embed plugin
ENGrid Resources
- ENGrid Github Repository
- ENGrid Documentation
- ENGrid Installation Instructions
- Engaging Networks Email Template
- Community Run EN Slack Channel
Engaging Networks Resources
- Engaging Networks Supportal
- Engaging Networks Acadmey
- Engaging Networks Maintained Example Code Blocks
- Engaging Networks Maintained Example Page Styles
Interested in a project or have questions?
我们很乐意听取您的意见。
布赖恩·卡斯勒
数字战略总监
4站点互动工作室
手机：(315) 877-3420
邮箱：bryan@4sitestudios.com
4Site's ENGrid Page Template Framework
This project started as a labor of love for our clients and ourselves. Originating in 2017 as a partnership between Engaging Networks and 4Site Studios to create the first freely available page templates for their platform; we created Engaging Networks Page Template. That project was incredibly successful, and those templates are still used today for all new Engaging Networks clients. They're easy for junior developers and code dabblers to ease into, and they include Internet Explorer 11 support.
Since then, we've continued to enhance and refine our work, culminating in a complete re-write in late 2019 that was named "ENGrid". Making use of today's latest web technologies Webpack, Typescript, ES6, SCSS, CSS Grids, we've created a new framework for marketers, fundraisers, and everyone in between that will ensure your pages stand out and deliver the performance you're looking for.
Designed and Developed by 4Site Studios while working with:
- Amnesty International USA
- Earth Island Institute
- Human Rights Campaign via Lautman Maska Neill & Company
- International Fund for Animal Welfare
- Mercy for Animals
- National Trust for Historic Preservation
- National Wildlife Federation
- Ocean Conservancy
- Organic Consumers
- Oxfam America
- Oxfam Canada
- People for the Ethical Treatment of Animals
- Polaris Project
- Rainforest Action Network
- Save Tibet via Schultz and Williams
ENGrid Features
- Works with all page types (e.g. Donation, e-Card, Email to Target, Event, etc..)
- Auto Credit Card Type selection based on Credit Card Number
- Processing Fee Checkbox
- Donation Upsell Lightbox
- Comma handling in Other Donation Amount input field
- Conditional Hide/Show fields (e.g. In Honor of Giving Fields)
- Give by Check, Card, Paypal
- Auto update CC Expiration Date fields
- Live giving variables to insert actively selected gift frequency or gift amount in page copy or in buttons
- Advocacy "Opt-in Upsell" Lightbox
- Tweaked UI / UX for an improved e-card "add recipient" experience
- Per Page Background Image
- Per Page Layouts (Five Built In)
- Possibility for Sub-Brands
- Address Form Field Internationalization - If the user is on a US / English page and selects "France" as their country the Address Form fields will update their labels, change their ordering, and hide/show relevant fields for French Address formatting. Current address formatting support for (United States, Canada, United Kingdom, France, Germany, Netherlands, Australia).
- Update inputs with improved form field meta info for better auto-fill completion
- "Remember Me" (Coming Soon)
- Capitalize first letter of First Name, Last Name, Address 1, City, Region fields on form submit (Coming Soon)
- Lazy Load all image assets
- Fastest page load times possible on Engaging Networks
- IE11 pop-up encouraging users to upgrade their browsers
- All pages using our page template can be seamlessly embedded in your website with Shortcodes using our WordPress iFrame embed plugin
ENGrid Resources
- ENGrid Github Repository
- ENGrid Documentation
- ENGrid Installation Instructions
- Engaging Networks Email Template
- Community Run EN Slack Channel
Engaging Networks Resources
- Engaging Networks Supportal
- Engaging Networks Acadmey
- Engaging Networks Maintained Example Code Blocks
- Engaging Networks Maintained Example Page Styles
Interested in a project or have questions?
We would love to hear from you.
Bryan Casler
Director of Digital Strategy
4Site Interactive Studios
Cell: (315) 877-3420
Email: bryan@4sitestudios.com
