Rental Mini App
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.
Tutorial
- Navigate to the parent page for your Rental Mini App.
- 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.
- The following pages should be children of your Rental Mini App parent page:
- Rental Inventory
- Rental Cart
- Checkout
- Thank You
- Rental Inventory
- Add a Rental Inventory page.
- This is where your inventory lives, site visitors will be able to browse through your inventory and build a shopping cart.
- The Rental Inventory page may also serve as a parent page for the Rental Cart, Checkout, and Thank You pages.
- Add a Rental Cart page.
- This is where site visitors can preview their final shopping cart before checking out.
- This is where site visitors can preview their final shopping cart before checking out.
- Add a Checkout page.
- This is where site visitors confirm their details and checkout.
- This is where site visitors confirm their details and checkout.
- Add a Thank You page.
- You may want to include additional details, such as turn around time, or office contact information on your thank you page.
- You may want to include additional details, such as turn around time, or office contact information on your thank you page.
- Verify that all pages are properly linked via Page Properties.
- 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.
- Activate all of your pages and associated digital assets.
Add a Rental Inventory Page
- Navigate to and open your Rental Inventory page.
- Create a tab to organize your rental items.
- 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.
- Add the Rental Item component to your page.
- A new Rental Item component without content will appear on the page as a placeholder.
- To edit the component:
- Right-click on the component and select Edit;
- Double-click on the component.
- In the Details tab, enter in the following information:
- For Item Name, enter in the name of the item available for rent. (required)
- For Item Cost, enter in the rental cost for the item. (required)
- For Item Size, add the size(s) for the rental item available.
- Click the Add Item + button on the right-hand side of the edit window to add an item size.
- In the available field insert the text that will be displayed with the rental item in the inventory menu.
- Repeat this process to add additional items.
- Reorder item sizes by clicking the green up and down arrows.
- Remove an item size completely by clicking the red minus (-) button.
- For Item Quantity, enter the total number of items for rent. This quantity is applied to all item sizes included.
- Note: If you have different quantities for various sizes of the same/ similar items, you should list them separately using individual Rent Item components.
- Click the Image tab to insert the required image to be used with your Rental Item component.
- Locate an image from the left-hand side DAM asset tray. Drag and drop it into the specified spot within the edit window.
- A crop is not required, but should be used for all images used in this component.
- 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.
- 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.
- 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.
- Alternative text is required if an image is added.
- Click OK.
Add a Tab
- Navigate to and open your Rental Inventory page.
- Click the green Add button to create a new tab.
- A window will appear and prompt you to enter a tab name in the provided field. Click OK when you're done.
- Your new tab will appear on your Rental Inventory page.
- Reorder your tabs using the green Up and Down buttons.
Button options for adding and reordering tabs
Add a Thank You Page
- Navigate to and open your Thank You page.
- Edit the Rich Text component as needed.
- Default text is provided. Do not delete this component.
- Default text is provided. Do not delete this component.
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.