Here I am typing in a comment and choosing a rating as an anonymous user:Ĭlick “ Save” and this is how the product page will look: I am going to type in a comment and provide a rating. Also notice the rating and comment box at the bottom. You will notice that the new fields have been added. In the main page, drag the rating field above “ Subject”: It ensures that the rating field is displayed within the comment section.Ĭhoose “ Parent Node” as a value for this field. The most important field on this page is the “ Voting target” dropdown. In the “ Number of stars” dropdown, I have used the default value. This means that it is mandatory to give a rating. I have ticked the box against “ Required field”. Save your settings and you will be taken to a new screen as shown in the screen below:įill in the fields. For the " WIDGET" dropdown, choose the value "Stars (rated while editing): On the top-right, click “ COMMENT FIELDS”:Ĭreate a new field with the " FIELD TYPE" value as " Fivestar Rating". Provide a name for your rating field. In my case, the content type is “ Inline Form Flashlight Display”. Click " Structure" on the top-level menu:Ĭlick " manage fields" next to " Inline Form Flashlight Display": Let’s now configure the content type associated with displaying the Flashlight products. Tick the box that comes under it for " ANONYMOUS USER" and “ AUTHENTICATED USER”: Tick all the boxes that come under it for " ANONYMOUS USER": I am going to configure the comments to ensure anonymous users can add their feedback as well. On the top-level menu, click " People": Click " Save" at the bottom of the screen: Ensure that " Open" is selected so that users can add their comments describing their experiences while buying the product. In my case, the products are 6-LED Flashlight and 9-LED Flashlight. Further below, click the " Comment settings" tab on the left. Click " Update product" as shown in the screenshot below:Īdd similar descriptions and images for other products in your inventory. Go to the homepage and click " Edit" for the product added by you:Īdd a description and image for 3-LED Flashlight. These newly added fields will now be an integral part of the product display content type added by you. Let’s add these fields to the display. To demonstrate, I have taken the newly created fields above the Status field. Click and drag the ‘plus’ sign to the left of each field to arrange according to your priority. I am going to use the existing field:Ĭlick " Save" at the bottom of the screen. Rearrange the order of the fields to reflect the priority in which you want these fields to appear. You can add the Image field by using “ Add new field” or “ Add existing field”. " Text area (multiple rows)" will be automatically selected under WIDGET. Let us add “ Description” and “ Image” fields for each product. Type in “ Description” under Add new field. They are “ Product SKU”, “ Title”, “ Price” and “ Status”: In the new page, you will be able to view the existing fields. We will continue using the default product type here. In the new page, you have the option to edit the existing product type or create a new one. In the earlier article, we used the basic product type provided by Drupal. Then click “ Products”:Ĭlick " PRODUCT TYPES" on the top-right corner: Let's now configure the product type to add new fields.Ĭlick “ Store” on the top-level menu. Click “ Modules” in the menu and search for “ Fivestar” and “ Voting API”. To get started, you will have to download and unzip the following modules in sites/all/modules folder: We will explore the steps in detail in this article. We will also be adding comments and ratings for the products. This is a screenshot of what we are seeking to achieve: The purpose of this article is to add fields generally associated with products in an online store. We will add a Description and Image for the flashlight products. These fields can be added by accessing “ Store” -> “ Products” -> “ PRODUCT TYPES”. The screenshot below shows how our product page looked at the end of the previous article: We used the Inline Entity Form module to add products and product displays to your online store. If you haven't read it, please go and read it now, or get the free eBook on Drupal Commerce 101 from the right sidebar (below the content if you are viewing in mobile). In the previous article, we showed you how to add multiple SKUs for a product, one for each product variation. This is tutorial #3 in the Drupal Commerce tutorial series.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |