 Efallai rydy i ni wedi bod yr modd yn gweithio. Yma. Efallai rydy i ni, rydyn ni! Yma. Llyr i'r rhodod o amlwod ym ni. Rwy'n dechrau iawn felly yma felly rhodod o iechyd mwy swydd o'r pan fel hyn. Rwy'n dechrau hynny. Rwy'n dechrau a'r pan fyddwch bydwch yn y rhai os ti'n byw nhw? Rwy'n dechrau a'r pan? Rwy'n dechrau i chi drw'r pan? Rwy'n dechrau? Yma. Byddwch chi, wych yn cymryd. Yn ymoli, rwy'n gofal i gynnig o'r ymlaen i Llywgrifell, nid yw eich teithaeth. Rwy'n gofal i gynnig. Rwy'n gofal i gynnig. Rwy'n gofal i gynnig o'r ff先ol. Hylŵr o'r Lyfr Llywgrifell wnaeth yn rwy'n gofal i gynnig. I'm kind of planning on the location to do that, and what I want to take you through now is kind of the site builders approach to Drupal Connag's to do that, and I'm pretty sure most of you will agree that the site builders approach to one of the experts is just going to install a module for this, install a module for that, install a module for this, and quickly you end up with quite a whole of a dependency tree, but also just tons of modules that are often kind of really bespoke bits of functionality that you would expect to be in court. And I'm going to show you now how some of that is in Drupal Connag. So just first slide, I was drinking some beers with my friends today and telling them I'm doing this Drupal talk, and they were like, what is Drupal? So they urban dictionaryed it, and I thought these were quite funny definitions about Drupal, and it kind of sums up the Drupal commerce 1.x approach of notably being open source and nothing else, designed to be totally useless after installation. You do. You install Drupal commerce 1.x, and there's not very much you can do. Out of the box you get kind of a store, but not really anything you'd want to put in front of a customer. And perhaps that's the same as Drupal as a whole, but it's probably a different argument. So yeah, yeah, so I thought that was pretty spot on. These were the only two that were safe to display. I wouldn't have yourself at some of the other definitions because they have nothing to do with Drupal, but apparently people use the word Drupal for all sorts of things. So yeah, so in the 1.x world you install commerce and you have a store. You kind of have to install all of these modules for things like tar exploration. This is actually a live site, so all of these are installed to just sell a magazine. We're installing checkout extra login page to sell a magazine, but this is stuff that you'd expect a modern commerce solution to have. And again, this is probably even better displayed with this slide. So these are the most popular commerce modules as of January 2017, as of this year. And we've also put the port status. So you see a lot of these now say in-core, in-core, in-core. So all of these modules that pretty much, well, yeah, all of around 50,000 active commerce sites would have to install most of these now in-core. So we're coming in a lot better. I say we, Matt and commerce guys are coming in a long way. I just used the stuff now. So that's kind of the contrary space, but also everyone pretty much has also a lot of custom code to achieve, again, really basic stuff that you'd want to see in the core of the project. So one of the most popular things that's now in commerce 2.x is varied checkout flow. So in Matt's presentation that he just mentioned, he talked about how if you're sending a digital product, or if you're sending a physical product, you want to capture different fields. In commerce 1, you only have the one checkout flow unless you install a series of conflict modules, various different bits happily, or some custom code where you are setting checkout pains and then un-setting them if you have this access and all sorts of horrible stuff that you don't really want to be writing. Don't look at my code. Skip that. I just committed that straight into my ass. I didn't PR that one. You have to read it, didn't you? Yeah. And again, this is a live commerce site. This is a checkout step at the start. Most of the time you want to capture some information about your customer. And in commerce 1, you have to install commerce extra login step or a variety of different modules just to do that. But it's okay because there is no future. I had almost like a wait for gasp. There we go. So it begs the question, how far can we go out of the box without installing any conflict modules with commerce 2.x? Hopefully I will now show you. So this presentation is kind of aimed at site builders. What I want to show is I'm going to show a lot of forms and I'm going to describe the kind of concepts and entities that build commerce 2.x. And if you have any questions, I'm just going to refer you to Matt. So I kind of crack on. The first thing when you come to installing commerce is we have this notion of a store entity. What we didn't have, what we had when we installed commerce 1 was everything was sold from this one location. If you had an office in Nottingham that was shipping out your digital product and an office in London that was selling your magazine or whatever, you couldn't really model that very well. What we have in commerce 2 is this notion of stores. So once you're in store commerce you have to configure an A store. If you have local stores you can configure more than one. You can select which countries and which currencies that this store belongs to, which lends itself like really nicely to either the market-based model if you have lots of consumers selling a different product, or if you have lots of different stores that you want to only focus on one currency, for example, or if your requirements in different countries are being specific. So, for example, one new case that we had was payment gateways charged varying amounts on international orders compared to UK orders. So if you want to use a different payment gateway per store that is possible, not yet, almost, will be possible very soon. So if I have PayPal as a payment gateway that charged me 4% on international orders, but also 4% on UK orders, I can have a different store and you strike in the UK which charges a lot of that. So quite simply, commerce stores have one currency, one store. So it models the multi currency model a lot nicer. And it's kind of an overview of the architecture. So there will be stores, your products and your orders, and you can have multiple stores. So once we've set up the store, which I will try and show now, this is going to be hard when it's not moving. I'll do that in my area. Yeah. Moment. Are we good? Can you see? Cool. So in here, I have stores, I have one store set up already called Swiper. Don't ask why. I can add a new one and call this Scott's demo store. And here we select the default currency for the store, but I've only got one currency enabled. So before we set up a store for a new currency, we have to import a new currency. One of the nice things about commerce is it lets us add new currencies if we wanted to. You may ask how I can't make up a currency while I want to do that. And there's a couple of use cases. A Mac refers to one called Bitcoin. The currency data set that we use doesn't have Bitcoin in it. But there's also another one where one of the clients out of the common sky to do it in Westwood, they used to sell products in Australia and New Zealand, both in Aussie dollars. A slightly different rate. So they had New Zealand Aussie dollars and Aussie dollars. It is a justified use case to make up a currency. That's probably the quick question. Yes, sure. What about the format? I don't think we had a lot of custom format. I think you did it in your example. I think that's predefined by Google. The Euro symbol in France appears on the right-hand side and in the UK we expect to be on the left. That's all kind of baked into the data set. I guess you could overwrite it with the format and probably without too much. You can't do it in the UI but you probably... I won't go for that. I just wanted to make a Brexit joke because it's quite funny. But yeah, so I can import all manner of currencies. And then the store that I was trying to create earlier. What's that? A docker. It's a future. So once I've... I'm not going to go. I can just show you this one I made earlier. I can select which currency this uses somewhere here. So once I've imported the currencies I can create a store that is backed by that currency. Two slides. So we have a store and presumably now you want to sell some products. This is actually directly from the commerce 2.x documentation. So it's pretty much the presentation. It's just me reading the doc. This is quite a common use case and you quickly end up with a lot of products and a lot of different skews. So large medium, small t-shirts but then you have large blue t-shirt, large red t-shirt. How do you model that? That model is pretty much the same in commerce 1 as it is in commerce 2.x. I don't think there's a better way of doing it. So it's the same but quickly show you here too many windows. So I have product attributes and here's... I kind of wanted to do a bit of a demo that wasn't just the old t-shirt. So this is a case of a digital product where I have attributes that are plans. We might want to have a yearly plan, a quarterly plan, a monthly plan that has various different bill rates or prices. So I have my product attributes here. The element type which Matt talked about in his presentation earlier. This is now in core where in commerce 1.x it was really difficult without installing the contrary module to have your product attribute list rendered nicely. So no one really wants to go into a commerce checkout, buy a t-shirt and have to select red, blue, green. You'd quite like to see the product. So what you can do because the product attributes are fieldable, you can attach an image to it, have a red, green, blue t-shirt and actually be able to click it. It's a lot nicer. So quickly show you on the slides. You can have that end up like this. So it's a lot nicer when you can actually visualise the products rather than just see a drop down on select list. So once I've configured my product attribute, then configure my product variations. And I already have one there set up. Again these are fieldable so on my product variations I have a description. I mean t-shirts are pretty self-explanatory. If you change to a red t-shirt, you expect your description to change to this is a red t-shirt. This is a blue t-shirt but you might want to add some more information. So in case of the kind of plan model, my description would change bearing on plan. So under coursely I would say that you get 25% off if you buy it yearly and I can upsell them or I can trade that description to whatever I want. This is an important step on the actual product itself. So if I flip back to my variation types. Yep, here. Why is that required? Because you have data. You can't remove it if it is. So on the product variation itself, I can tick which attributes I want that to display. So if you have attributes that are shared between different variation types, that model is possible. What model that quite well? What attributes would you share with different variations? Anything? Anything, size? So if you had a small, medium, large, you would share that across most of your catalogue. You wouldn't recreate small, medium, large, rich of your variation types. So once you've set up your variations in the attributes, you then in a nice place where you can actually add a product. So here I have my swipers description. And you can see here I can select on that which variations I want it to support. And now if I view this product, I end up with a nice ticker form. So I've configured a store, some currencies, and now I've configured a product. I get the quantity field, I get the variation selector in the description and all of this. One of the notable differences between this and Commerce One.net is this whole idea of product displays. A lot of people can find this quite confusing to explain to clients of this idea of you have a product and a product display. Did people find this confusing as a model? Made my life a woman come. So in Dupal 7, we had this idea of a node type that was a product display because it had a entity reference or a product reference field onto a product. And that's how you had to build up your catalogue. Whereas in Commerce Two, all of this belongs on the product. And using things like twig and all of the stuff that we get in Dupal 8, we can theme it however we want. You wouldn't theme it like this, but this is just kind of the seventh theme. So I can add that to cart. And as you see, I've got products in a cart. Payment gateways. So now over. Just ask. The attribute where you've got no stock of a certain size of product, is that easy to have? So stock is being imported. But Tim, do you have to change attributes or what? Do how does it get represented? So you would, because the way the model works, you'd have a different skew for each of these. A large red t-shirt would have a different skew. Your stock would be against the skew item. So if you change your selector form to that skew, it would be out of stock and we would display an out of stock message. Remember this screen from, you probably do remember it, because you're still working with your Commerce 1.x sites. But payment gateways are all powered by rules in some weird concoction of rules that split off slightly and it got really messy and horrible. In Commerce 1.x, because we have different order types and we can have different checkout flows and different stores, we can have a payment gateway attached to those without having to edit this payment gateway at a rules condition that says something like, if the skew has this in it used this payment gateway or if the currency has this used this payment gateway, we can model that without having to edit the actual payment gateway definition itself. We can have that at a per store level or per order type. Amazing. He likes it. Amazing. Why, why, why? Because we should be interested to be available to the audience. So one of the ways we use this at TES is if you are an existing customer, you probably already have a payment method associated, so we display different payment centres and use your system card. That becomes a lot easier in Commerce 2.x. So that's it. So I recently ported, plug me, I ported it. The strike payment gateway is probably my only contribution to Commerce 2.x. I think maybe I have two commits in documentation probably. So I ported the strike payment gateway. If you're a module developer and you want to port a payment gateway now, we used to quote at Commerce guys to clients like Amex or Braintree or whatever that would, around 20 to 15, 20 days of development to build a payment gateway. This took me six hours to port using Boyen's brilliant payment API. So it's a lot easier and it's actually really simple. If you're sorry, the scratch rather than the porting, how would that escalate? It depends on the payment gateway. So Stripe, Braintree, they all use this kind of JavaScript tokenisation method. That's really easy. Providing their API documentation is really good. I didn't actually refer to the original Commerce Stripe module when I was porting it. I was just referring to Boyen's work around Braintree. He says with confidence, it's easy. Does it deal with lots of variations? Yes, so the whole fourth capture and my frame is that the PayPal uses the other flow that isn't the same one as Braintree and Stripe. The PayPal flow of the payment gateway. Yeah, offsite. Offsite redirects. That's in the payment areas that model that and there's onsite. So the way, what happens behind the scenes when you add a payment, you can have a capture and auth or auth. So in that situation, you could build a payment gateway that was, I'm going to capture the payment but not going to authorise it. And then later in the back end, you could say, OK, this has been received now. It seems like a check. You wouldn't confirm that order straight away until payment has been processed. It would be easy. It wouldn't be hard to port that. So after we've configured a payment gateway, we are on to order types. So in one I made earlier, I have order types here. When you install commerce, it comes with a default order type. I wanted to create one specifically for digital products on this idea that if you're selling a digital product, you don't need to capture a shipping address. I still need to capture a billing address and there's some funny issues about BAT depending on what country you're in. So you might need to capture a place of consumption address. But I can usually just be the billing address. I won't get too much into tax details because it's boring. So in here, I can configure which checkout flow I want my order type to use. So I only have one checkout flow configured here, but in commerce to the X as I'm really excited about is the fact that I can have multiple checkout flows. So here is the default one that ships to commerce and Matt said in his presentation for this one, there was a lot of UX effort put into analysing Apple, Amazon, pretty much every e-commerce store under the sun. I really need to tell the United States why I went and I tried to not pay for anything with similar data. Matt pretty much added everything to a cart, noted whether it was a one step payment gateway, a one step checkout, multi step. If they had a sidebar on the side or whatever to try and find what is the best UX for a checkout flow. Commerce analytics has this whole section where you can analyse the funnel. Your client, I imagine, would really want to analyse this kind of data to get the best possible checkout flow. If you get people dropping off in the review stage, then you can say maybe we don't need a review stage, maybe we just go straight to payment process. It's important to really, really look at A what you're selling and B what people are actually doing on the site because this is money, this is really tangible. If you make several tweaks here, you can increase your conversion, which is kind of what we're all about with. So with commerce 2.x I can have multiple checkout flows and probably without too much work I could A, B test this. So if you wanted to set up checkout flow A, checkout flow B and switch between the two and see which one converts higher. So I will add a new checkout flow so you can create checkout flow plug-ins but out of the box you have a multi step plug-in. So here I can say okay, I don't want the review page, let's stick that on the page and then I've instantly gone down to two pages instead of three. It makes the checkout a bit quicker and it might increase conversion. But I can also say that I don't want the review page at all. This is a digital product so I don't need to capture contact information or whatever location it may be. The possibilities are infinite in the TES example that I showed earlier that we built on commerce 1. We have two checkout flows, one for B2B customers and one for B2C. In the B2B world we want to capture which agency they're from and various different other fields and the only way we could do that in commerce 1, aside from a few contract modules, was to physically form alter the checkout flow and unsets these pains and fields. This is a bit messy and horrible. Commerce 2.x, the future, we can have multiple checkout flows. Once I save this on my order type, I can say use my new Scott's checkout flow. When I check this out, it will go down that flow, which I gathered Chendi that solves some of your problems. I've set up a new order type, I've set up a new multiple checkout flow and now I can buy my product. If I go back to my product, I gather I'm not going to be able to buy it because I haven't got a Stripe account set up on here and I can't remember my API details. I haven't got a payment gateway set up, but if I have, I could check this out and buy several monthly subscriptions for Swiper, whatever Swiper is I think. One of the things that I'm trying to get ported into commerce, now I've got a patch waiting if Matt wants to review it. This idea that not all of your products need a cart. If I'm selling a digital subscription, I'm not going to buy four monthly subscriptions to the same thing. I probably just want to disable the cart, so I have a flag there. If I save, I should have thought about this before I started demoing it but maybe this isn't going to... So if I hit add to cart now, I go to a cart now and it's not working. Don't review that actually. So that's pretty much setting up stores, currencies, products, product variations, product attributes, order flows, order types and that's all out of the box. To do that in commerce, one would have, I'd have just been ticking modules and then configuring them. Pretty painful. So if you have any questions, happy to answer them or if I can't answer them, I'll refer you to one of the maintainers of commerce who's sitting at the back. Thank you. Shipping is in beta. That is a contrary module. We didn't take beta 6 yet, so if you use beta 5 with shipping, it will break. We have a class that's missing. So once we take beta 6, it will be rockin' and rollin'. So just use it out. Always use it out. I guess one of the hard things, especially in the contrary space, is deciding what should be in core and what should be the area of contrary. Like my flag on the order type of, take this straight to check out and skip the cart, I think should be in core, but it's quite easily to just spin that up as a contrary module. Shipping, I don't know why, I can't argue for Boyan as to why he wants to have it in a separate module. It's a lot. It's quite a lot. It's a big module. It keeps it more nimble. We can't break commerce, but we can break shipping. We're not going to make commerce 3, but we could do a new version of shipping if we're risking the worst. So yeah, shipping is in beta. Yeah, commerce guys, when I was there, a lot of our clients were all selling digital products. No one really needed shipping, and those that did, shipping was fine. So, right? Support 3D secure? Is payment gateway dependent? Yeah, it is, but there wasn't a commerce 3D secure module. I'm not sure of the problem either. No, it's, you're going and you're paying cyclists' dollars. That's not in core, like multi currency is just, you set the price per. Well, not actually, you can set a conversion rate. You can't do that in two days. I have no idea. You can't? I have no idea. Yeah, that's not in core two days. Is it? I think so. I'll look into it. One point, one point. Find out. I'm not sure. Have a word afterwards. Robin, must I come? So, out of the box, it's designed that you're going to build up a cart of multiple products, and there's no leveraging this idea that I want to skip the cart and go straight to checkout. So, my patch is... I could find it. I won't be able to find it. Sets a flag on the product to say that for this product I want to skip the cart and go straight to checkout. I don't know. Boyan is the opinion as it should be in core. I just haven't got around to doing my patch. It's quite clear because it doesn't work. So, that's the checkout flow. That's nothing to do with the cart. The way that the model works is you add a product to the cart and then the cart you take to the checkout and the cart is just a different body state. What's that? It's a product I'm working on. I know what it is. I won't take my reputation on that one. It's not, isn't it? What would you call them? Offline payment methods or manual payment methods? For like, check, cash... Offline? Yeah. Check, cash. Your example of people walking down a post office to post it. Would the time have been made depending on the cash? So, an offline payment? The invoice credit. I'm too glad you don't credit. All of these payment methods that require some sort of manual intervention step where... See what you did there. All of these ones require an offline intervention step where you capture the payment methods and you all fit later. You can actually do that with Stripe. You can say, I just want to capture these details now and say, it's quite much to have acted for subscriptions. You want to say give them three days free and then later charge them. So, if they capture the subscription within the first three days you don't charge them. So, you capture the payment and then walk it later. And that's done automatically with Stripe and there's full backs for it. But in the absence of a bank or straff or a check or whatever, you just go into the order, edit the payment and say, this is completed. One of the things that's actually quite nice out of the box I can't demo it because I don't have a Stripe API key is refund. Not only did it just take me six hours to implement the Stripe payment gateway. That also included full refund support and partial refund support. So, that was a touch on the back of the site, because there's a brand new intervention in what's the back of the site in two that's in three months of study. Was it a problem? Well, views is in core. Views is in core. So, we never showed it. I didn't show any of that. Do you use JIRA at all? It was heavily inspired by JIRA. Not configuration. No, not the configuration. So, we're much more explicit in how we do things. Do you have an order out there? So, there's transitions that happen. So, let's say you need to reassign an order to a new customer. You click reassign cards. And if you need to place an order, you click place. Or if it needs to be fulfilled, you click. Then you can hit cancel. So, you know what? One of the exercises is to prop down the status. Now it's much more explicit in what you can do. And we've made certain items immutable. So, it will show up in the sidebar as just like the customer info. You can't really edit it because it's just there. Or once an order is no longer in a draft state, you can't change it. You can only transition it and add payments. So, that's using state machine? Yeah, so state machine which... I'll try and find a definition for companies. So, it needs some work. We just added logging. So, the order of logging, we have some default templates that you actually look the same as the sidebar. It needs some more attention still. So, in the code, it's a lot more restricted as to say, you can only go from this state if you're in this state. Or whatever. It's quite easy to configure in YAML. I can't find somewhere in there. We'll take some custom code. Here you can show it. I just have to go to my demo module. You can just show it real quick. It's one file. It has a service. The answer is quite poor. I don't know if that would work. Yeah, it's a class. It's called a Checkout Type Resolver. I want to actually try to look at it. We'll come over there. I feel like I'm going to say talk and sort of pet it. Is that some people that like context perspective in the new user? It's a code. We probably won't give a UI to it. So, as a tag service, you go into the new services.gynw, you say, my class, what type resolver. And I give it a priority. This is what I do in my person. I actually... So, I give it a my person because we have a partner flow. We have a normal flow. We have a free trial. We have Shopify. So, we go through and in that resolver, it hands me the order. It says, tell me what checkout flow can pick and need to return. Do whatever you want. In A to B tests, it's like, hey PHP, give me a random number. It's less than 10. It's greater than D, A. That's how I would do that in the last session we talked about where if you had digital and physical or mixed order, I would do that. I would say by default. Yeah, I would look at the products and say, okay, it's all digital, bam. Oh, it's a mix. Right down in the middle to that kind of space. On the idea point about checkout or skipping the cart, I did buy a contract module for it. So, having the name of it on that demo, it adds an event subscriber and basically says if the bundle of the order is checkout of X, skip the checkout, remove any extra quantities, just checkout that one. So, it's valid as a contract module, but it probably should be in code. I use it. I have it implemented too. We need a direct checkout of the box. Yeah, but you need to put it in the checkout file. Detail. Because of the same order, and then we order... Not out of the box, but should be doable. You get an order history in your profile. So... You just make a button up there. So... You can spin it out. We have a re-order one for the B2B to be able to easily do that. A duplicate. So, I'll see if we can spin it out. I don't know if we'll put it in core because you might want to do a little more. You don't need to create a full recipe on the box, or are you serious? So, in commerce crates, you have orders that you could add the bundle into that. I think we're almost done. Do you want to collect extra information when someone adds a product to the cart? So, a little t-shirt? The same principle of in commerce 1. You can create new pain, create a field. When you select an attribute, you're capturing information, and that's just a select list. You can have a text field, to capture a t-shirt, by swiker. It should really come in. Here, should we show how to do it? Do you want to show how to do it? Do you mean, like, if you want to collect, like, like an engraving text? Do you mean, like, some custom input? Here. Yep, and that's what I'm doing right here. So, I'm going to add a new field type to here. No, I want to make it even image because this is a bakery, and we're going to order a Drupalcon cake, and we want to upload a picture to put on the cake. I literally had to do this in 1.x. They want people to be able to send it. Let's be really careful when we demo the images. I won't upload. So, I've edited the order item type. Oh, here's a key difference in 1.x. They were called line items. Now they're called order items because we made them more cohesive, and we kind of normalized about the terminology. I feel my laughter. So, what you need to do is you go to the managed form display, and then you would just take, oh, go to the added card. I always screw this part up. And then go to picture, and why does it actually, why doesn't it say hidden? Did they change it? It works? I don't know. So, drag it up, save it, and then... I didn't know what it was. Do you have a page open with it? It was history. So here, so now that field is there. So that's how you would take input. Oh, I see. So you mean like expanding that right there? Or like in this area, do you mean? So that's where, unfortunately you have to duplicate. I always recommend duplicate the view so that way you don't override what's shipped so you can get the updates. So then, so if you look at the order type, I'll just open a few. So, that's... So if you edit in here, there's the cart settings. So cart form, I would duplicate the core one. Yeah. It's still not showing up. Open an issue. We'll look at it. But yes, everything is customizable with the cart block, those cart forms. So you can take the view right here. And that's for each order type. So if you have a digital one, you can show like whatever you want. It doesn't grudge me because they're going across the point to share so it can come flatness down. So it's on the order... So it's on the order... We're out of time. Do you want to talk? Thanks guys.