Teleflora

Batch 3 | Confirmation

Page Notes

  1. Selecting “Print Order Confirmation” prompts order confirmation form.
  2. “View Recent Orders” prompts Order History.
    3. CMS Rules
  3. Header and body copy are modifiable via CMS.
    4. Tech Specs
  4. “View Recent Orders” only appears for logged in users.
  5. “Print Order Confirmation” button stacks above Order Details when view is reduced to 949 pixels.

Navigational Breadcrumbs

  1. Breadcrumb to display corresponds to area user selected, based on value stored in CMS.
  2. Breadcrumb label to be stored in CMS.
  3. Uses the .no-mobile to hide breadcrumbs on mobile
  4. CSS is included in the core css and desktop css.

Successful Order Confirmation:


  
  

    

      

      

        
Your order has been succesfully placed. You will receive an email confirmation.

      

    

    
    

      print order confirmation
    

    
  

  

  
  

    

      
      58633432
      

      View Recent Orders
    


  

  

  


      
  

    print order confirmation
  1. Selecting “Print Order Confirmation” prompts order confirmation form.
  2. “View Recent Orders” prompts Order History.
    3. CMS Rules
  3. Header and body copy are modifiable via CMS.
    4. Tech Specs
  4. “View Recent Orders” only appears for logged in users.
  5. “Print Order Confirmation” button stacks above Order Details when view is reduced to 949 pixels.
  • Width: 300px
  • Height: 122px
  • File Type: SVG
  • File element: Background/Sprite
  • CSS coordinates used: background-position: 0px -49px;

Order Details:


  
  

    Order Details
  

  
  

      

        
        

          
          

              image-1
          

          

          
          

            
            

              
              
Wondrous Wishes (with 3 Mylar Balloons and 1 Stuffed Animal) will be delivered to Victor Piniero on November 14, 2014.

            

            

            
            
            
          

          

          
          

            
            

            
            
            

              
              
Mylar Balloons

            

            
            

              
              
              
            

            

            
            
            

              
              
Stuffed Animal

            

            
            

              
              
              
            

            

            
            
            

              
              
Chocolates
  1. Order Detail summary displays order summary.
  2. User is able to select additional add-ons per order.
  3. Selecting “Submit Additions” adds add-ons to order; user will be contacted outside of the site for add-ons confirmation.
    4. Tech Specs
  4. Upon reducing view to 949 pixels, share buttons stack below product image, add-ons module stacks below share buttons.
  • Width: 368px
  • Height: 400px
  • File Type: JPG
  • DOM element

Promo Module:

  1. Selecting an individual product prompts corresponding PDP.
  2. “Shop All [Occasion] Bouquets” prompts correspondings Subcategory Landing.
  3. “Buy Now” adds item to cart.
    4. Tech Specs
  4. Header and subheader are modifiable via CMS.
  5. Module is interchangeable within CMS.
  6. Occasion and product may be modified via CMS.
  7. Upon reducing view to 949 pixels, 4 products are displayed.
  8. Upon reducing view to 639 pixels, 2x2 product display occurs.
  • Width: 220px
  • Height: 275px
  • File Type: PNG
  • DOM element
  • Width: 220px
  • Height: 275px
  • File Type: PNG
  • DOM element
  • Width: 220px
  • Height: 275px
  • File Type: PNG
  • DOM element
  • Width: 220px
  • Height: 275px
  • File Type: PNG
  • DOM element