Simple Product Views

If you followed the instructions in “Creating Custom Products” to create your own product classes and products of those classes, you are now ready to create a view to display them.

IMPORTANT VIEW TIPS

1. Clone: If you would like to edit an existing view and you are not familiar with Views, we highly recommend that you "clone" that view and test your changes on the clone version first.
2. Saving changes: All changes you make to your view on the edit page are temporary until you click Save. For example, if you change the sort criteria and click OK in its window, the change will be lost if you leave the main view edit page without clicking Save. We highly recommend that you save your work frequently - especially when you see the message “All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard your changes.”
3. Administrative names and descriptions: It will help you manage and identify your views and displays if you utilize the fields that allow you to add optional descriptions or names to the view.
4. Apply options: When working in settings always change the ‘For’ option from ‘All Displays’ to ‘This block (override)’ so that the changes you make alter only the block (or page) you are working on. The ‘Apply’ button should say “Apply (this display)”.

SCENARIO 1. PRODUCT VIEW USING CONTENT

In this scenario, we will create a page view using teasers of content to display ALL of our hats, sweaters, and shirts on one page with add to cart buttons.

Navigate to: Structure > Views > Add New View

1. Enter a name for the view. Example: ‘Apparel’
2. Enter an additional description for the view (optional but recommended) Example: ‘View to display all items under classes - Hats, Sweaters and T-Shirts’
3. Select what you want this view to display:
   1. Show - select an item from the list of available choices. Example: ‘Content’
   2. Of Type - select all or refine your view by selecting an individual category. Example: ‘All’
   3. Sorted by - select the order in which you wish items to be displayed. Example ‘Newest First’
4. Select “Create a page”
5. Configure the new page and/or block using the settings that appear:
   1. Page title - This will automatically default to the same name you entered previously in step 2. However, you can change it if desired. This title will be used in the display at the top of the page and in various parts of the browser. Example: ‘Apparel’
   2. Path - This will be the path used to navigate to the page you are creating - use the default or set a custom path. Example: https://www.yoursitename.com/apparel  
   3. Display format - Select your preferred display format. Example: ‘Grid’
   4. Select what to show on views of content. Example: ‘teasers with links without comments’.
   5. Items to display - You can specify the number of items your view displays on a page, with a pager to navigate between them or leave this field blank to display all items. Example: ‘Leave blank to display all’.
6. Create a menu link (optional) - Add a menu link to any navigation menu of your choice on your site. Example: Menu: ‘Main menu’; Link Text: ‘Apparel’
7. Continue & Edit
8. Under “Filter” select ‘Add’
9. Search for and select “Content: Type”
10. Apply this display
11. Set the “Operator” to “is one of”
12. Select the Content types you want to include. Example: ‘Hats, Sweaters and T-Shirts’
13. ‘Apply this display’
14. Save

You should now be able to follow the path you created to this page, or if you placed it in a menu, follow the menu link to the page.

SCENARIO 2. PRODUCT VIEW USING FIELDS

In this scenario, we create a block view using fields to display 3 tote bags at a time with only the title and image displayed.

Navigate to: Structure > Views > Add New View

1. Enter a name for the view. Example: ‘Tote Bags’
2. Enter an additional description for the view (optional but recommended) Example: View to display all items under class - Tote Bags, 3 at a time.
3. Select what you want this view to display:
   1. Show - select an item from the list of available choices. Example: ‘Content’
   2. Of Type - select all or refine your view by selecting an individual category. Example: ‘Tote Bags’
   3. Sorted by - select the order in which you wish items to be displayed. Example ‘Newest First’
4. Select “Create a block” (make sure “Create a page” is not selected) and configure the new block using the settings that appear:
   1. Block title - This will automatically default to the same name you entered previously in step 2. However, you can change it if desired. This title will be used in the display at the top of the page and in various parts of the browser. Example: ‘Tote Bags’
   2. Display format - Select your preferred display format. Example: ‘HTML list’
   3. Select what to show on views of content. Example: ‘Fields’
   4. Items to display - You can specify the number of items your view displays on a page, with a pager to navigate between them or leave this field blank to display all items. Example: ‘3’
   5. Use a pager (optional) - Allow site visitors to see additional results if there are more results than can be displayed on the page (based on the Items to display field). Example: Select pager
5. Continue & Edit
6. Under “Fields” confirm ‘Title’ is already added - if not add it.
7. Under “Fields” select ‘Add’
8. Locate your image field and select it. Example ‘Content: Image’
9. Apply this display
10. Configure this field. Example: Deselect “Create a label”, set the “Image Style” to 100x100 and set the “Link image to” content.
11. Apply this display
12. Save

NOTES:

• Under the ‘Filter Criteria’ and ‘Sort Criteria,’ you will have fields already in place. Those options came from the choices you made during the previous steps. Additional options can be added by selecting the ‘Add’ button and choosing additional fields.
  • Content: Published (Yes) - Filter
  • Content: Type (=Tote bags) - Filter
  • Content: Post Date (desc) - Sort

You have now created the block, however, it is disabled by default. Enable the block and place it on your website by navigating to Structure > Blocks and configuring the block to appear in the region and on the pages of your choice.