 Okay. Hello everyone. So, let me explain the context. Lakshya and Meenakshi are front-end developers at Openson Slabs and they were supposed to present. I'm not your speaker, but they couldn't get visa and that's why they are presenting it remotely. So, feel free to ask any question if you have, if they don't like, if there is a noise issue or something. I'll just explain, translate for them and yeah. So, yeah guys, so let's, let's get started. Okay. Yeah. Over to you. Hello. Thanks for joining us today. We'll be talking about hardship phase while themeing e-commerce site in Google aid. The session will revolve around the lessons we learned while themeing a group of e-commerce site for the first time. Let's begin with our introduction first. My name is Meenakshi Gupta. I'm a Google developer at Openson Slabs. I have been in the Google community for two years. You can find me on Twitter with username Meenakshi for a time. Hello, I'm Lakshya. I'm front-end developer at Openson Slabs. I'm in the Google community for about five minutes. You can find me on Twitter with username Lakshya1642. So, discussion of our today's session is, first of all, we will go with the introduction of Google commerce. Then we will have a look how the e-commerce design approach. How we reach the design for e-commerce site. Then next, we will cover where to start themeing of e-commerce site in Google aid. And the global go with product pages. The theme of product pages is the hardships we've done in the past while themeing a product page. And next, we would have cheaper flows. And there will be some finalized conclusions which will resolve the hardship for the next developer. The coming developers which are going to theme a Google commerce site. So, I mean, Lakshya, what are you doing? Google commerce. So, what is Google commerce? Google commerce is a collection of motifs that are in functionalities like shifting, license, management, tripping, fetch, and more. It is used to make e-commerce tips like an application of all types. Some of the four features are dynamic product, safe, product type, attribute, order management, and payment capabilities. Now, Lakshya will show you how we can reach an optimal design for Google commerce inside. So, yeah, designing plays a vital role in any website. And e-commerce site has some key elements that play a vital role for better user experience. Let's take example of some vital key elements. Like the first element is transverse in it. Creating a sense of trust, reliability, honesty, among the shoppers, coming to your website, coming to your e-commerce website is very much important for a shopper to stick to your website and buy a product from your website. Next, the vital element which comes in is simplicity and ease of use. At no point should your shopper be left wondering what to do next. There should be proper check on flow, there should be proper CD button to get the user to the next page or the commit page. And transparency also plays a vital role, making sure that all links for like privacy policy links, refund policy or product exchange policies are very easy to find. Like they are available in the footer menu or somewhere else in your site. Coming back to your discussion, on the screen you can see there is a pattern which generally the industry follow. Like in the header section you can see there are three blocks. The first block is for branding. Next is for site search and the user name. Let's discuss in a bit. So branding is basically the site branding block we can generally say to allow it. The next is site search. Site search is basically for global site search available in the website. Next is the user menu block. User menu block only contains the number of items in your card or card block or something like that. Next is site main navigation. The site main navigation takes the user to some category pages or category pages you can select electronics, men, women, whatever it is. And now let's take example of some famous e-commerce sites which are generally using the pattern and just add the hero slider part also. Hero slider is generally block which are used in header section which generally provides, which generally shows some sponsored products, some promoted products and something like that. We will discuss it later. Like Amazon.com. On the screen you can see this is a homepage of Amazon.com. Amazon.com and the block layout is quite similar to the one we discussed earlier. And next is for Aligaba.com. Yeah, the pattern is globally across some of the most popular websites. Just to add we are also working on a scheme which will be available on 2.0 very soon by the project name as U-commerce. And the structure we discussed will be same. And we are also thinking to create a distribution which will be using layouts builder. And with help of layout builder you will be easily able to place blocks wherever required like hero sliders or your similar products view or some blocks anywhere required. And this will be available on some of the major pages like homepage, category, page and graph page. So now let's begin. What is the next step once a design rolls in? And where to start theaming of a Google commerce site? I should be sorry. Once the design and back end is ready for thinking. The portion right in your mind is where to start. According to earth the preferred path and for thinking the commerce site should go as follows. Picking gender component first. Like header for dirt as these are consistent confidence across the site. Next we should go for the product pages. As it will cover some of the user's feel like price field which can be used in listing and block pages. After that you can go with checkout flows, category pages and then all the basic pages. The new product for our Google commerce site it is important to understand the product structure. In general a product can be available in different variation. Let's take example of shaker. And suppose you have a product type called shaker and shaker is available in different colors and sizes. The size and color will be its pattern. Each shaker will be its own product with different variation of color and sizes. It will be available in three different colors and two different sizes. The variation for a product it might not be necessary that it has every option of available. That shaker available in green color. So let's translate it in Google commerce style. We have a single product called shaker. This product has five different product variation. The three different ones. Theme of product page. For theme of product page, Google commerce providers are deployed template called what estimate with. The theme of product page can be done on the basis of product type and theme book solution are also available to override the based on requirement. These can be printed by taking down or using tape. For product level, you can say that these will not change when variation will change. For example, brand will not change for every variation. To print product level, you can use product dot theme name. Second is product variation theme. These will change based on variation. For example, product may change based on variation. To print product variation level theme, you can use product dot variation underscore theme name. If you are using product variation using product variation, there are two ways you can theme product variation. You can use product variation template or add to cart field format. If you are using add to cart field format, then default product variation will not be used. Any option based on a design, here we will be discussing about theme of add to cart display home. So basically, you can simply reach out the product field format by going to the order items. Configuration, then select add to cart or cart form display. Here you can reorder the fields as per the requirements. So basically, the developers only face a hardship here. As in the next slide, you can see in our design, the theme of add to cart we are working on has some attributes variations under description field like the color field, the size field and the storage field. These are basically ended below the description area. So what happens is, these are basically ended in single form that is add to cart, that's the only add to cart display. So for bringing these fields, we don't have any particular option, we have to apply some positions to bring this. This is a major area where their hardships are faced while deeming a product page. So yeah, next, the page which rose in it is the cart page. So once a user plans to buy a product from a website and reaches the cart page, the cart page in Drupal commerce is generally formed by two views, there are basically two views which make the cart page. The first view is cart form view. By default, this view isn't view stable format, that is to say more view error use is the table format. And the next view I believe is checkout order summary. As we discussed in header section, we have three blocks and last one was for user account menu. The user account menu, all sides, generally all sides have a block which shows cart and items contained in your cart, the number of items in your cart. This can be generally viewed using the checkout order summary and alterations can be made using checkout order summary view. Now let's discuss further. So, like these days everyone requires different overlights as per their designs. So there are certain quick available by default and team of positions are also available by default which you can pick up and simply see. Like for empty cart, we have commerce cart empty which we'll just assume that way. For cleaning the cart block on the header section as I discussed earlier, commerce cart block, the rest of it can be seen and one more thing. We need to fight with these CSS which is coming through Drupal commerce. You can simply undo some code style sheets in your dot team, dot info dot table file of your team. Okay, let's move further. This is a default cart view which generally comes with once you go with the installation of Drupal commerce and in the team iconology of commerce, we're working on, here is the design which we're supposed to reach out. So what we did is we changed the display mode of view to one form at a time. So all views are available separately. We just spread it out the field in a big files. And the hatchet generally we face here was in the view, in the folder part of the view the checkout order, just the sub-total part on the right here you can see is available separately. But what happens is when you go in the way, it is also ended in the low part. So if you're familiar with views with HTML or Twig, you might face a hatchet there. It's not basically a hatchet, we just generally require to apply some CSS position like applying the absolute to the right for making the block to the right side. Thank you. The next part is checkout flow. The checkout flow needs to be very much user friendly because as per research we have some all the percent and results why the user didn't purchase from a particular e-commerce site. These points should be kept in mind from the designer point of view as well as a developer point of view. So let's just do a statistics overview. 25% of users didn't purchase, didn't want to create an account. That's why they didn't purchase from an e-commerce site. So that is why a case checkout or a case checkout are very much necessary and local commerce providers might have bought. The next is 27% of people thought that the checkout process was too long or too complicated. As earlier we started, I discussed that there should be a feeling of trustworthiness that should be created by the e-commerce site. That's basically for designers point of view. But yeah, from designs point of view, the checkout process was too long or complicated to understand. That's why the user limited the site and didn't purchase. And 24% of people couldn't see or calculate a total product was up front. That's why they quit the site. So these are some of the statistics why a user generally quit the e-commerce site which should be kept in mind while designing or cleaning a checkout flow. So this is the basic block structure. You can say we were required to team for the checkout flow of our e-commerce. But there are basically four pages. The checkout was divided into four pages. First page will go for login. That would have sign in, sign up or register, you can say, or guest user checkout. The second has order information. In the second page we are gonna take the inputs from user regarding the contact info, the payment info and payment measure they are going to make. And next you would have order review. All the information the user put in, the user used in the second page would be available on this review page. And the last page, of course that is order completion page. It will show the successful order completion. Approaching the designs. Now the point which goes in is how to achieve the checkout flow as per the design. Drupal commerce provides a customizing block structure through which the blocks can be rearranged to match the designs. And in the screen you can see here's a screenshot from the Drupal commerce site. This is a basic customizable block structure available in Drupal commerce. Here you can simply drag and drop the blocks as per your design requirements. And the best part is we have different fix for complete checkout flow. So moderation or changes can be very easily made for the required page. This is just about temperature-resistant. Yeah, so first template which goes is for page height and page checkout at html.wake. This is a generic template which is called throughout the checkout flow like in a Drupal commerce we have page or html.wake. For the checkout flow like this is page checkout at html.wake. This is the basic page which will be followed across the popular, which will follow all across your checkout flow. Next is for delivery like wait as best where we are gonna take log of payment and contact information from the user. We would have page checkout order information which for review we have page checkout review page and for order completion we have page checkout completion page. Moving further, here is the checkout flow which will be available in the U-commerce scene too. So this is the login page as we discussed guest user seconds is also necessary to make a user buy from a website. Next page is for delivery. Let's discuss the hardship we generally face by theming this side. The best part is Drupal commerce, the block structure that we wrote back this time. As you can see, approaching the designs we have a sidebar option available and in the sidebar we have order summary and open deduction. So by default, Drupal commerce provides option for sidebar and in sidebar we can simply place the required log like we have placed open code. Let's discuss about this open code block. So basically some Ajax calls are being made which generally change the ID of the button. If you are applying CSS on the ID be very particular about selecting the ID using the dynamic ID selector. Due to dynamic ID selector is quite necessary because even my break after Ajax call because the ID won't be same after Ajax call because some attributes are used which applies a code after the ID which generally breaks out the selectors. Next in the payment information or sorry the review page, this generally shows the input which user made from page before we discussed. And the last page is order completion page. It is generally quite similar based on what we discussed and can be cleaned very easily. Here as a point which need to be kept in mind when regarding check out flow blocks can be rearranged from the available UI for blockage distance, using dynamic ID selector as well as email. One more concern here is that sometimes the form which we showed regarding the payment information the feelings need to be rearranged. This can be easily done using the form orders. So now let's discuss some final line of conclusions, please take care. Respect Drupal standard. Follow the approach you've selected in Drupal documentation, handle documentation for Drupal formers. Use special filters, let's say a price filter in documentation of Drupal formers. They are shown that how you can use price to include filters for manipulating the price. Use attribute available in template like v-templates. Use Drupal behavior at once. Let's take example of product page as in the theme we are working on which has slide up on product pages. There are certain age x calls having been made when variation are changed. So the JS code required for the slider to work properly needs to be wrapped inside the Drupal behavior. Respect the framework. If you're using framework like serve, bootstrap, you apply it to the post. If you are doing Drupal formers side for the first time, you should learn how to theme of use as it is widely used in most of the e-commerce side. Instead of fighting with CSS provided by code, you can simply remove the unnecessary stylesheet by overriding it, by overriding it within in-convert environment. Don't write strong CSS using dynamic sector as it will unnecessarily increase the size of your stylesheet. Yeah. Now we would like to read thanks to the commerce guides and Drupal association for giving us opportunity to present this remotely. And special thanks to Nicholas for helping us through our work. Thank you guys. If you have any questions, you can ask. Yes, please. Okay. Hi guys, thank you for this nice presentation. Just I have a question about the performance. You mentioned that- We don't want it quite low. No problem. I'll repeat it. Yeah, go ahead. So the next question just how was, have you got any experience about the performance? I had a Drupal 7 commerce side and when I played all the attributes, changing the attributes was a bit slow. And I had to rewrite the J query and some things. So have you got any experience about it? Laksh, can I answer this for you? Yeah, go ahead. So I'm not a teamer by the way. These guys do pretty well job, but I have bit commerce. I'm in bit experience with commerce 7 and 8. So honestly, Peran is not here. So I can say this. With Drupal 7, I really hated it. It was not the right choice, I would say. So as you said, performance was really a big issue, okay? Especially when your size grows, I mean, your structure grows with say N number of variations. When your product page is loading, your variations are loading. And then they also had this hover slider where it zooms, et cetera, which they have removed eventually in D8. So I believe the architecture was not so perfect and I mean, they also accepted with Drupal 7. If you try Drupal 8, it is really in a Drupal way and the commerce is really easy with it. So in fact, right now multiple, I mean, we really had issue when we were starting the trust issue, I would say, whether we should again go for Drupal 8 for commerce sites, but we are working with a couple of clients and it's in terms of theming as well as they have explained to you, it has really good support, okay? You don't have to do a lot of overrides with JQuery, et cetera, okay? It really, in terms of, you know, you have a various twig support in the backend and performance-wise also it works well, that you can be sure about it. Thank you. I did it for you. Thanks. Any other question? Yeah. No? Okay, perfect. Thank you, guys. Thank you very much. Thank you for being here. Okay, thanks, Laksh. Thanks, Menakshi. Bye-bye. Thank you. Bye.