Rental Mini App

On this page:

• Basic Info
• Example
• Tutorial
  
  • Add a Rental Inventory Page
    
  • Add a Rental Cart Page
    
  • Add a Checkout Page
  • Add a Thank You Page
    
• Accessibility Info
  

Basic Info

The Rental Mini App is a set of templates and components that work together to create a rental interface for site visitors. While it does not connect to a database, it does provide an easy to use interface for borrowing items. Note: this mini app, or set of templates and components, is unique to the Office University Events.

Example

Tutorial

1. Navigate to the parent page for your Rental Mini App.
   
   1. The parent page should serve as your landing page for your rental services. This should include service details, any important notes or requirements, and office contact information.
   2. The following pages should be children of your Rental Mini App parent page:
      1. Rental Inventory
         
      2. Rental Cart
      3. Checkout
      4. Thank You
         
2. Add a Rental Inventory page.
   1. This is where your inventory lives, site visitors will be able to browse through your inventory and build a shopping cart.
   2. The Rental Inventory page may also serve as a parent page for the Rental Cart, Checkout, and Thank You pages.
      
3. Add a Rental Cart page.
   1. This is where site visitors can preview their final shopping cart before checking out.
      
4. Add a Checkout page.
   1. This is where site visitors confirm their details and checkout.
      
5. Add a Thank You page.
   1. You may want to include additional details, such as turn around time, or office contact information on your thank you page.
      
6. Verify that all pages are properly linked via Page Properties.
   1. This step should be completed by the Digital Communications Group, please submit a Project Request Form if there are going to be any page changes.
7. Activate all of your pages and associated digital assets.

^ Back to top

Add a Rental Inventory Page

1. Navigate to and open your Rental Inventory page.
   
2. Create a tab to organize your rental items.
   1. Note: You may already have tabs created on your page, however if you do not then you will be unable to add new items for rent.
3. Add the Rental Item component to your page.
4. A new Rental Item component without content will appear on the page as a placeholder.
5. To edit the component:
   1. Right-click on the component and select Edit;
   2. Double-click on the component.
6. In the Details tab, enter in the following information:
   1. For Item Name, enter in the name of the item available for rent. (required)
   2. For Item Cost, enter in the rental cost for the item. (required)
   3. For Item Size, add the size(s) for the rental item available.
      1. Click the Add Item + button on the right-hand side of the edit window to add an item size.
      2. In the available field insert the text that will be displayed with the rental item in the inventory menu.
      3. Repeat this process to add additional items.
      4. Reorder item sizes by clicking the green up and down arrows.
      5. Remove an item size completely by clicking the red minus (-) button.
   4. For Item Quantity, enter the total number of items for rent. This quantity is applied to all item sizes included.
      
      1. Note: If you have different quantities for various sizes of the same/ similar items, you should list them separately using individual Rent Item components.
7. Click the Image tab to insert the required image to be used with your Rental Item component.
   1. Locate an image from the left-hand side DAM asset tray. Drag and drop it into the specified spot within the edit window.
   2. A crop is not required, but should be used for all images used in this component.
      1. Images will crop at a 4:3 ratio and will resize accordingly due to the mobile friendly nature of the website, but will never display larger than 280 pixels wide x 210 pixels high.
      2. If uploading a pre-cropped photo for your Rental Item component, we recommend creating it at the maximum display size of 280 pixels x 210 pixels.
      3. If your photo is not pre-cropped, we recommend using photos that are not too zoomed in so that you can apply the required 4:3 ratio crop without cutting off any key details.
   3. Alternative text is required if an image is added.
      
      
8. Click OK.

^ Back to top

Add a Tab

1. Navigate to and open your Rental Inventory page.
   
2. Click the green Add button to create a new tab.
3. A window will appear and prompt you to enter a tab name in the provided field. Click OK when you're done.
4. Your new tab will appear on your Rental Inventory page.
5. Reorder your tabs using the green Up and Down buttons.
   

^ Back to top

Add a Rental Cart Page

Additional content is not required for the Rental Cart page, however if needed you can add the Contact Us component.

1. Navigate to and open your Rental Cart page.
   
2. Add the optional Contact Us component to the sidebar.

^ Back to top

Add a Checkout Page

Additional content is not required for the Checkout page, however if needed you can add the Contact Us component.

1. Navigate to and open your Checkout page.
   
2. Add the optional Contact Us component to the sidebar.
   

^ Back to top

Add a Thank You Page

1. Navigate to and open your Thank You page.
   
2. Edit the Rich Text component as needed.
   1. Default text is provided. Do not delete this component.
      

^ Back to top

Accessibility Info

Using Images

• Screen readers are not able to read text displayed within an image.
• Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
• Logotypes (logos with text) are okay to use with alt text.
• When selecting an image, make sure it's something that can complement your text content rather than replace it.
  

Alternative Text

• When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
• Because of character limits on different screen reader software, try to keep your alt text less than 140 characters.
• If an image is purely decorative, enter a space in the alt text field to mark it null.

Learn more about images and accessibility at NYU.

^ Back to top