In this tutorial I will show how to create a simple google map without using plugins and that will allow your client to update the pin location themselves.
One of my philosophies when building websites is to use as few plugins as possible. Sometimes a plugin is necessary, such as building a store locator with Smart Map. However other times it's overkill for a feature that you can easily build for yourself using native functionality. This tutorial is aimed at Craft CMS but could easily be modified to work with any CMS.
You'll need a google maps api key, go here, create your key and save it to use later in the project. You'll also need to create fields that will enable your client to update the address and pin location on the map. If you prefer you could hard code the address, but I like the added flexibility it gives clients. The fields you need are:
Or you could use the excellent field manager plugin (available for Craft 2 & 3) and import the fields from this json file.
The Html is really simple. All you need is a div with an id of Map. I also added a responsive-embed class that comes with Foundation which will ensure that the map is resizes correctly at mobile.
You'll also need to explicitly set a height in CSS to ensure the map displays correctly He's my CSS:
Here we pull in the custom fields for the address and this is used for geolocation and placing the pin. Below that we create the map and place it in our div ID of "map" and control the zoom level of the map with the custom field added earlier. In the styles section you can add or remove various map features: see the docs here. The map in the hero image at the top of the page is grey scale as requested by the client and that is controlled with the setting of saturation -100
It's always good to include the info window so you can show details about the location. First we add the content that goes into the info window and this can include any number of custom fields or html. For readability I've concatenated it into different strings. Below the copy you init the content so it appears on the map.
Notice the last line has your googlemaps api key. You can hard code this here or use a field and have your client add in their api key. This will only be necessary if your client needs to go to a paid plan due to large number of hits. Most clients won't need that.
…and just like that, you get the same magic auto-completion of in your Twig templates that you have in your PHP code. And since the entire Craft application is available in our Twig templates now, this makes writing Twig code that uses the Craft app APIs so much nicer.
For an even sweeter way to do it, check out the Auto-Complete Craft CMS3 APIs in Twig with PhpStorm article!
And that doesn’t even get into the ability of PhpStorm to take advantage of Yii2 inspections, set breakpoints, and so on. Remember, there are some really good editors out there in Sublime, VS Code, and Atom… but PhpStorm is an Integrated Development Environment (IDE), not just an editor.
I used to think that these people who were writing beautiful PHP code were just PHP-gods, but once I started using PhpStorm, I realized they just had really awesome tooling.
I would also highly recommend installing the Craft Code Style & Craft Inspections from Pixel & Tonic. Also take the time to install the Php Inspections (EA Extended) and Yii2 Inspections plugins. These will all save you an enormous amount of time.
The redactor table plugin, which is used by content editors to create tables (duh), is not enabled by default in craft, but I find that it is useful to.
Craft 3 is the CMS you and your clients will love. We love it too. Our aim is to help you — the developer — to successfully develop and deploy Craft here. This is your entry point.
There are two hosting stacks here on fortrabbit. You can choose with each new App your create:
There are many ways to work with Craft CMS — depending on project needs and skills.
Sophisticated developers, experienced in backend development and ready to work with the Terminal, Git and Composer will benefit the most from our advanced workflows. This is were our 💜 is.
Take a shortcut! We have published this little handy open-source command line tool to speed up common deployment tasks around Craft CMS on fortrabbit. It connects your local Craft CMS installation with an App on fortrabbit and then enables you to sync database and assets in a speedy and convenient way. It guides you through the process of setting everything up, it even has a table to show you which parts are still missing. Give it a try! Here is an appetizer:
Please head on to the GitHub page for more usage examples:
Juniors and web developers with a focus on front-end are likely more comfortable using the legacy SFTP workflow. Use this workflow when you are coming from WordPress and not yet familiar to use the Terminal, Git and Composer. This is your route:
console.log('Connecting to Craft keyboard');
console.log('Connected to Craft keyboard');
console.log('Failed to connect to Craft keyboard',ex.message);
console.log('Crown turned some amount');
console.log('Crown turned right');
console.log('\nCrown turned left');
console.log('Crown touched or released');
Help Section Plugin for Craft CMS. Contribute to hillholliday/Craft-User-Manual development by creating an To install the plugin, follow these instructions.
In a rush? Skip to how I built the plugin
Let’s be honest. If you’re in the market for a CMS for e-commerce, you’ve got plenty of options.
Back in the days when iPads were still iPods, you’d be choosing between Drupal or WordPress—and even those were nothing compared to what they are now.
Personally, I've tried lots of options but came (like a lot of people) from the ExpressionEngine community. It was there that Brandon Kelly (of Pixel and Tonic) became known for making solid and extremely useful add-ons. He transitioned from his day job into doing that full time, eventually starting a CMS called Blocks which is now Craft.
Recently, I developed a Snipcart plugin for Craft and realized it would be useful to other developers as well. After a lot of work and refinement, I finally created a product I’m happy to see in the Craft plugin store.
In this article, I’ll talk about:
Let’s dive in!
Craft CMS was created by Pixel and Tonic, a small company that built content management tools for web professionals. In 2011, they came up with the idea for and began working on Craft. They released Craft 1.0 two years later. Since then, they’ve released updated versions and have carved a name for themselves in the CMS world by winning awards for “Best CMS for Developers” and “Best WordPress Alternative.”
Craft’s focus is content management and their team knows it. They’re constantly evolving their tools and techniques to stay competitive. Particularly with Craft 3, it’s become a content management platform and embraces headlessness. Its JSON Element API has been around since 2015 and Mark Huot’s CraftQL plugin is making everything accessible in a GraphQL API.
As a developer with a design background, I personally became interested in headless CMSs because I build sites for non-developers. That means I need to have more flexibility in safeguarding an excellent content management experience while still providing the mechanics of presenting the actual content. I can use a project like GatsbyJS to pull in data from seemingly anything and generate a crazy-performant, best-practice-adhering modern frontend. I wasn’t born working in React, so the fact that these things are accessible to me is fairly exciting.
What makes Craft CMS stand out to me is balance. It's great to work with as a frontend developer, a PHP developer, a designer, and a content author. A lot of platforms cater to one of those groups, but Craft manages to offer a thoughtful, rich experience for all of them. So most of my clients seeing the Craft control panel for the first time get excited at how it could be tailored for them.
Plus, it's a commercial software—not a hobbyist platform—and has a welcoming professional community around it doing great work and helping each other out. That community goes a long way on those days where things just don’t seem to be working right which, as we all know, happens from time to time.
Now if you’re familiar with Craft, then you’re probably aware that there are already two e-commerce solutions for sites using Craft CMS: Commerce Pro and Commerce Lite, both of which fall under the “Craft Commerce” umbrella.
With two great options currently on the market, you may be wondering why I bothered to make another e-commerce plugin in the first place and, also, why I chose to use Snipcart? Both are fair questions. To understand the answers, let’s take a look at Commerce Pro and Commerce Lite to get a better view of the gap I was trying to bridge.
Commerce Pro and Commerce Lite are both first-party options built by Pixel and Tonic. The Commerce Pro plugin is mature and always evolving. It’s really great for building out a more comprehensive store. In other words, it’s complex which can be both good and bad.
Like Craft CMS, Commerce Pro is minimally opinionated and lets you build whatever you want. This is essential if you’re building a larger, customized store. The downside is that the developmental burden can hinder some developers from using Commerce Pro for smaller e-commerce projects. In the wrong context, its strength (more freedom via complexity) quickly becomes its weakness.
On the other hand, Commerce Lite is a more recent, feature-limited variant that’s less expensive. As you may expect, Commerce Lite has the exact opposite problem as Commerce Pro. It addresses the needs of smaller projects but does away with many features that can still be important for developers.
Like everything in life, you simply get what you pay for.
So I recognized a need for something else in the world of Craft Commerce. There were already two great options available but both had fallen into the classic “Goldilocks” dilemma: one bowl was too hot, the other was too cold.
I wanted a tool that was just right. That’s where Snipcart entered the picture.
I began creating my Snipcart Craft plugin in 2014 but, at the time, I hadn’t made it public. It wasn’t until last year when I was an adding a ShipStation integration for the Craft 3 version when I realized that I was building something that would probably be useful to other Craft CMS developers.
When I started, Snipcart was already an existing service that fell somewhere in between Commerce Pro and Commerce Lite—though perhaps a bit closer to the former. This is what attracted me to it in the first place—not to mention it’s quick to implement but still full-featured and flexible. Plus, Craft and Snipcart had already developed a great relationship as the creator of Snipcart, Charles Ouellette, was active in our community and made a Google Hangouts recording on making a Craft CMS E-Commerce integration with Snipcart.
And the relationship worked both ways.
I was actually the first full-featured testimonial on Snipcart’s site! But really, at the end of the day it came down to improving UX for Craft users. Turning Snipcart into a plugin helps its integration into Craft CMS without taking any speed or flexibility away from the Craft site. In other words, it meshes really well in the Craft world.
Like I said, Snipcart is already fast to start working with, but the plugin also offers some Craft-native pieces like its Field Type and Twig tags. Because of these “Craft-friendly” features, Snipcart is quicker to get up and running than other e-commerce solutions—even for someone who’s never used Snipcart.
But the majority of Snipcart’s benefits are centered around webhooks. They support custom order email notifications, automatic quantity adjustment, and the ability to fetch live shipping rates or send orders to ShipStation. On top of that, every one of Snipcart’s webhooks can easily be hooked into as Craft-friendly Events.
This is also particularly exciting because with Pixel & Tonic’s first-party Webhooks plugin you can turn around and fire your own webhooks to other services to build almost anything without writing any code. The Craft site becomes the glue for whatever e-commerce scheme you can think of.
Plus, Snipcart isn’t all that opinionated, so regardless of your configurations, you’ll be able to browse store stats, orders, etc. right from the Craft control panel.
Let’s take a quick look at how easy it is to install the plugin and configure something simple like “Orders.”
The first thing you’ll want to do is create a Snipcart account (I know it seems obvious, but you’d be surprised…). That will get you the Snipcart Public API Key and Snipcart Secret API Key which you'll need later.
Then you install the plugin which is straightforward.
From the plugin store, find Snipcart and choose Install. Done.
Or you can add with composer from your local project :
You can then install from the Craft CMS control panel: Settings → Plugins, choose the gear dropdown to the right of Snipcart, and select Install.
Or install from the command line:
Once you’ve got your account, you’ll need to add the Snipcart Public API Key and Snipcart Secret API Key.
From here, you’re pretty much done!
Now let’s say you want to configure a specific aspect of your plugin like “Orders.” Several features can be managed from plugin settings in Craft's control panel. If you want to use the included Field Type and Twig tags, you can configure various aspects of your orders without writing any extra code. You can also use your own markup, field layouts, and integrations if you'd like!
For configuring the rest of the plugin's settings, see the detailed documentation. This covers everything from when/why/how to use Snipcart’s webhooks with your Craft site to troubleshoot any problems you may run into along the way.
Hopefully you’re starting to see why I chose Snipcart to build the plugin. It’s the perfect solution for Craft designers/developers who want to build a full-featured store with minimal development time.
Now, since we’ve covered the “why,” let’s turn our attention to the “how.”
The Snipcart plugin is my first commercial (paid-license) plugin on Craft’s plugin store. Initially, it started as a much smaller and simpler free plugin for Craft’s previous version but I’ve since made some major enhancements. Overall, I wanted this plugin to:
Ease store setup
Improve developer-friendliness under the hood
Take advantage of Snipcart’s webhooks and REST API
As all developers know, there are always improvements to be made with each iteration but I’m definitely proud of the product as it stands. Especially considering how far it’s come.
Let’s take a look!
I initially built a Snipcart plugin for Craft 2—the previous version—that was a thin control panel view for Snipcart's REST API. After rounding out some things that were missing, I had two main goals:
Combine some of Craft and Snipcart's strengths to optimize the path to running store.
Surround REST API interaction with native Craft/Yii models, services, and events that make it faster to build custom integrations.
Solving the first problem involved offering a custom Field Type to store product information, and some features that can piggyback off that with templating conveniences, custom order notifications, and ShipStation integration—all without writing a line of PHP.
I'm fond of this Twig template that's used to render a buy button, for example.
The combination of that Field Type and its template interface will speed up the already-fast process of creating buy buttons, with added perks like automatically converting units for your superior un-American metric system.
Writing documentation was a necessity. Without a guide, it might still be easy to miss what should be a very quick setup.
Pixel & Tonic was kind enough to publish its customized VuePress theme, which I happily used for the documentation. If not for that I'd probably still tinkering with my own setup without having written any real content. It's fast, searchable, and hosted for free on Netlify.
Being completely new to Netlify and VuePress, it took me probably less than five minutes to point Netlify to my GitHub repo, tell it which branch to build, and have it run to deploy. I don't know why everyone's letting me use these things for free, but I'm grateful they are!
On to goal number two.
If you do want to write your own PHP, the plugin exposes Events you can hook into, detailed models of Snipcart and ShipStation objects, and what I hope are sensible services for wiring up whatever you'd like. The events and services are all documented, but the models are so hilariously long that I need to find a good way to generate their documentation so I can finish this year.
Modeling Snipcart and ShipStation's API objects took awhile and involved much refinement and testing for my webhook handler and Snipcart→ShipStation connection. I ended up using Codeception to run a battery of tests against the webhook handler. My goal is to keep growing the API tests to make sure that everything's as stable as possible.
A series of interesting failures helped me further scrutinize incoming webhook data, for example:
And speaking of scrutinizing, I started using Scrutinizer on this project, and combining that feedback with PhpStorm greatly improved my pace and code quality. Following Scrutinizer's advice often led me to redesign aspects of the code that got much better as a result.
Some of my learning came from practical experience, too. There's a console tool you can call with that will make sure your most recent orders made it to ShipStation if you're set up to use it:
Just to be clear, I definitely didn’t create this because everything went perfectly the first time around (does it ever?). But I'm confident that my code will, at some point, save somebody time ;)
The documentation and tiny universe surrounding the plugin took a good amount of time as well. We re-launched our website to make room for plugins, established a support system, and hopefully released a well-rounded offering that will give people a great way to build stores with Craft. We wanted to be sure that our documentation would adequately support clients when things aren't quite making sense or aren't working as they should.
We have more features and documentation to add, but another thing I've learned from the Craft community, and Pixel & Tonic specifically, is that it's important to listen carefully and keep supporting your customers. So I plan on doing that, too.
Creating Snipcart’s Craft CMS plugin was definitely time consuming, but also a whole lot of fun. Because Snipcart lies somewhere between the fully featured Commerce Pro and the inexpensive Commerce Lite, I find that it’s a really useful tool for anyone looking to create a Craft CMS e-commerce site. At any rate, I’m definitely pleased with the result of my first commercial product on the market—and I certainly hope you are as well!
For those interested in building their site with Craft, I highly recommend starting here. And once you’re ready to turn your site into an e-commerce store, the Snipcart plugin makes the process quick, easy, and incredibly user friendly!
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!
Matt's a Seattle-based designer-slash-developer, working with Craft CMS, blogging, showing up on the devMode.fm podcast, and always excited to learn something new.
Installation & Usage. To install Textmetrics for Craft CMS, follow these steps: Download & unzip the file and place the webtexttool directory into your craft/ plugins.
ShakarFebruary 15, 2019 12:32 PM
It is a pity, that now I can not express - it is very occupied. I will return - I will necessarily express the opinion.
MinrisFebruary 08, 2019 6:21 PM
Bravo, this remarkable phrase is necessary just by the way
BrajinFebruary 13, 2019 6:07 PM
I consider, that you are mistaken. I can defend the position. Write to me in PM, we will talk.
MazugisFebruary 13, 2019 12:42 AM
You have thought up such matchless phrase?