Teleflora

Batch 2 | Subcategory

Page Notes

  1. Page title and window title to be stored in CMS
  2. Ratings corresponding to bouquets on subcategory page are not actionable; no rating details may be viewed or modified on a product when appearing on subcategory landing page(s).
  3. All of the pages unique js functions can be found at subcategory.js
  4. The product grid is using Backbone.js for rendering and filtering. Refer to the JS Documentation tab in product grid on this page for more information.

Dropdown Sort filter:
  1. User is able to sort product view by Bestselling, Lowest Price, Highest Price, or Highest Rating via drop down menu. Sort defaults to Bestselling which is determined by sorting from highest to lowest sales of json array.
  2. Sort remembers user’s preference per session.

Recipient Delivery Area Section (Desktop):




  

    
Show bouquets available in your recipient's area.

    

      

      
      

        
      

      
    


    
    
Enter Delivery Information v

  

  

    
Recipient ZIP Code: 

    
Delivery Date: 

    Change
  1. Recipient zip and delivery date fields in left rail module are both optional.
  2. Recipient zip code must be 5 numeric characters. As specified above, error state should follow convention from forms in Account section.
  3. Error state upon entry of malformed or unknown zip should follow convention from forms in Account section.
  4. Delivery date must be selected via calendar tool and cannot be modified manually.
  5. Product grid results, as well as numeric representation alongside filters modify accordingly.
  6. Module displays static field representing user’s input (Ie. Zip Code: 11201, etc,) with a text link to edit.
  7. Selecting Change returns user to initial state with pre-populated fields when necessary.
  8. If user enters unknown or malformed zip code, error will be displayed. Error state follows convention from forms in Account section.
  9. Once form is submitted it returns a new collection of items and re-renders the product grid.

Recipient Delivery Area Section (Mobile):

  1. Selecting Enter Delivery Information module in mobile view expands module to reveal text entry fields. Upon entering information, behavior is identical to that of the full screen view.

Product Filter Sidebar (Desktop):
CMS Rules
  1. Admin is able to select filters, filter categories and filter order available for each sub-category page via CMS. (Eg. CMS admin should be able to select flower filters that are displayed for a flower sub-category page.)
  2. Left rail filter module order and contents are modified in CMS.
Functional Annotations
  1. User is able to filter results by indicated filter fields.
  2. If amount of filters within a category exceeds the space allotted, selecting Show More [item] reveals all items with select filter category.
  3. User is able to select multiple filter options within each filter category. Numeric representation of product is dynamic and corresponds to selection of filter options.
Tech Specs
  1. Single column filters appearing in left rail display a maximum of 6 options per field. If options exceed this amount, Show More [item] text link appears.
  2. Two column filters (anticipated only to be color) display a maximum of four rows of filter selections. If options exceed this amount, Show more [items] text link appears.

Product Filter Sidebar (Mobile):

  1. When reducing this view to 949px, Delivery Information modules and Filter options list collapse and are displayed as expandable/collapsible menus that appears before the product grid, and after the sort drop down.
  2. Upon selecting Filter Your Results, carat, or corresponding header bar in mobile view, filter options expand.
  3. Upon selecting a given filter category in mobile view, filter options display. Selecting Hide Filters in expanded view collapses filters.
  4. In mobile view of filters, all filters transition to two column view of features with a maximum of 4 rows per field. If options exceed this amount, Show More [item] text link appears.
  5. In mobile view, no more than one filter option may be expanded simultaneously.

Product Grid:


  
  

    
    
  
  <@ if (recommends) { @>
    Teleflora Recommends
  <@ } else if (rating) { @>
    
      
    
  <@ } @>
    <@= title @>
    

    
    $<@= price.standard @>

The product grid grabs all of its styles from m-product-mini

JSON

Backbone setup:

Libraries Used:
  • Backbone.js - Backbone.js is an MVC framework that allows us to set up single page applications like this product grid. Link
  • Underscore.js - Underscore.js is required by Backbone.js and used for setting up the product and quickview templates as well as allowing additional functional programming. Link
  • Waypoints.js - Waypoints is only used for creating the lazy loading of more items after the limit is reached (default set to 32 items). Link
Folder structure of Backbone Product Grid:

All js files used to render the product grid are inside of the folder: /javascripts/backbone/

  • Collections
    • productGrid.js - stores all the product models
  • Models
    • product.js - individual product model (eg. one bouquet)
  • Views
    • productGridView.js - renders the product grid
    • productView.js - renders each individual product
    • quickviewView.js - renders the quickview underneath the selected product
    • subCategoryView.js - main view in charge of the other views on the page

Backbone is initialized via subcategory.js -

var app = app || {};
var subcategoryView;

$(function() {
  // upon page ready initialize the product grid main view
  subcategoryView = new app.subCategoryView();
});

This starts the main view: subCategoryView which is in charge of listening to any events on the subcategory page -

//checkbox click event
"click .custom-checkbox :checkbox" : "filterProductGrid",
// sort select change event
"change #selectSort" : "sortProductGrid",
// quickview click event
"click #quickview" : "showQuickview",
// enter delivery info click event
"click #enterDeliveryInfoSubmit" : "updateGrid"

Each event calls a specific function that modifies the product grid -

  • fiterProductGrid - returns a filtered collection depending on the selected filters.
  • sortProductGrid - sorts the current collection depending on the chosen option in the sort dropdown.
  • showQuickview - gets the corresponding product information and displays the quickview underneath it.
  • updateGrid - an example function of how the recipient delivery module will update the current collection to display a different set of models.

The subcategoryView also initializes the productGridView which is the one responsible for initializing a productGrid collection composed of product models based off of an example json fetch (refer to product_grid.json file).

In order to do this it grabs the underscore template located inside the subcategory index file with id of productGridTemplate and loops through each available model in the json response and populates that template with the right information.

The collection is then appended to the page via the render function - 

render: function() {
  var gridView = this;

  // empty out element of any previous items
  this.$el.empty();

  // fade out container and wait for it to finish
  this.$el.fadeOut(250, function() {

    // loop through collection, get all items up to limit
    var currentCollection = new Backbone.Collection(gridView.collection.first(gridView.limit));

    // set up lazy load of grid
    gridView.lazyLoadGrid(currentCollection, gridView.collection, gridView, gridView.limit);

    // update filter numbers in product sidebar
    gridView.renderFilterNumbers(gridView.collection);
  });

  gridView.$el.promise().done(function(){
    // fade container back in after everything is loaded
    gridView.$el.fadeIn(300);
  });
},

lazyLoadGrid is used in conjunction with waypoints.js to lazy load additional items into the grid if the collection exceeds the limit. The function that actually appends the product to the page is the renderProduct function inside lazyLoadGrid -

renderProduct: function(model) {
  // set data to individual Product view
  var productView = new app.ProductView({
    model: model
  });

  // set product to the render
  var product = productView.render().el;

  // append product model in container
  this.$el.append(product);

  // jquery binding for quickview is done here as elements are dynamic
  $(product).find('#productImage').bind({mouseenter: function(){
    $(this).find('#quickview').filter(':not(:animated)').animate({ opacity: 1 }, 200);
  }, mouseleave: function() {
    $(this).find('#quickview').animate({ opacity: 0 }, 0);
  }
  });
},

This calls the view called: productView which creates the final model template and appends it to the page as well as sets the jQuery binding for the quickview button.

CMS Rules
  1. Teleflora Recommends banners appear over select product names as an alternative to product rating. Which bouquets are displayed as recommended is controlled via CMS. Setting recomends to true would take precedence over showing rating.
  2. CMS should account for multiple types of banners to be able to be displayed for future extensibility (eg. a 'new' banner).
  3. Placement of Teleflora Recommended products within the product grid is controlled via the CMS.
  4. Labels and headings appearing as filter options are modifiable via CMS.
  5. Promotional modules may be interspersed throughout product grid, placement controlled via CMS.
  6. Promotional module can occupy width of one or two products.
  7. In CMS, each sub-category page should allow for placement of promotional modules on an individual basis.
  8. CMS admin should be able to specify at which indices within the result list each module (selected from library of modules) should be placed.
  9. If a double-width module is set to display in a right-most column then it should move down to the subsequent row.
  10. A Deal of the Day promotional space will occur on every page of results, CMS admin can specify at which index within the result set.
Functional Annotations
  1. Hovering over a product prompts Quick View button to appear. Removing indicator from product hides Quick View button.
Tech Specs
  1. Upon initially landing on subcategory page, 32 products will be displayed.
  2. Upon scrolling to the bottom of the page, 32 products will lazy load progressively until all bouquets corresponding to the displayed subcategory are displayed.
  3. When reducing this view to 770px, product grid reduces to 3 up display.
  4. When reducing this view to 535px, product grid reduces to 2 up display.
  5. If filtered down to 0, corresponding filter option displays grayed out. Filter is actionable in this state. When filtered to 0, subcategory landing product grid displays promotional slot (DOD, etc).

Product Grid Quickview:







<@= title @>


x






  
    
  
  25 Ratings


  
  

    
      Imagination Blooms with Cymbidium Orchids Image
    
  




  
  

    


      
      

          
          
          
          
    
            
  • 
              
              
    • 
            
  • 
              
              
    • 
            
  • 
              
              
    • 
          

      


      
      

        
        
        
        

          
Mylar Balloons

        

        

          
        

        
        

          
Stuffed Animal

        

        

          
        

        
        

          
Chocolates

        

        

          
        

      


      
      

        
        

          
          
          Please write a zip code
        


        
        

          Find a Zip Code
        

        

          Use Address Book
        


        
        

          

            
            
            Please select a date
          

        


        
        

          Find Zip
        

        
        

          Use Address Book
        

      


      
      

        
        

          
        

        
        

          Save for Later
        

      


    

  






  Go to Product Details
Classes used:
  1. Selecting Quick View scrolls abbreviated product detail screen into view. Selecting “x” within this view collapses Quick View module.
  2. Selecting product image, product title, or Go to Product Details prompts corresponding PDP.
  3. For functionality of other elements within this module, refer to PDP annotations.
  4. Ratings corresponding to bouquets in the Quick View are not actionable; no rating details may be viewed or modified on a product when appearing in Quick View.
  5. Page auto scrolls to top of quickview upon load and then scrolls back to bouquet row when closed out.
  6. When reducing this view to 949px, Quick View upon hover is disabled.