Frontend OOTB widgets

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What information does the RFQ Job Quote provide?

The total of a customer's saved orders.

Historical prices for previous jobs.

An overview of payment methods available.

Details of a specific job quote request. (correct)

Which of the following best describes RFQ My Quotes?

The listing of a customer's requesting pricing for products. (correct)

The summary of all job quotes provided by the company.

A section for users to edit their saved payment methods.

A mapping of previous orders for comparison.

What can be modified in the User Setup section?

Saved payment methods for the customer.

Username, Activation Email, and Role. (correct)

Saved order quantities and prices.

Product List and Total.

What is included in the Saved Order details?

The Product List and Total of the saved order. Signup and view all the answers

What does the Saved Payments section primarily include?

A listing of payment methods that can be saved. Signup and view all the answers

What feature allows customers to send order confirmation emails to additional addresses?

Checkout - Shipping Elements Signup and view all the answers

Which page allows customers to manage their subscriptions?

Account Settings Signup and view all the answers

What can customers do on the 'Change Password' page?

Change their password Signup and view all the answers

Which option is available on the 'My Account' page?

View recent orders Signup and view all the answers

What does the 'Cart Reminder' page enable customers to do?

Unsubscribe from cart reminders Signup and view all the answers

Which element can be utilized to display order details after an order is completed?

Checkout - Order Confirmation Elements Signup and view all the answers

What is the primary purpose of the 'Create Account' page?

Register a new user account Signup and view all the answers

What can customers do on the 'Addresses' page?

View and add addresses Signup and view all the answers

What must the value for Flex Basis be formatted as?

A valid CSS length format Signup and view all the answers

Which label indicates a global value that applies to the website in every context?

G Signup and view all the answers

What happens when a user clicks on a telephone number that is linked using 'tel:'?

It initiates a call Signup and view all the answers

Which step is NOT part of the process to edit a widget?

Click Copy on the widget Signup and view all the answers

What happens to copied widgets once the session ends?

They are deleted from the clipboard Signup and view all the answers

Which action must be taken after deleting a widget to finalize the changes?

Click Publish Signup and view all the answers

Which of the following best describes contextual values?

Values that vary within different contexts Signup and view all the answers

What action should be taken after accessing the Spire CMS to add a widget?

Click Edit on the desired page Signup and view all the answers

What is the purpose of the Rich Text Widget regarding expired account activation links?

To display a message about an invalid link and suggest trying Forgot Password Signup and view all the answers

In which section can customers view their previous invoices?

Invoice History Signup and view all the answers

What does the My Lists section allow customers to do?

Create new lists or view existing ones Signup and view all the answers

Which of the following details can be found in the Order Details section?

Billing Address Signup and view all the answers

What should customers do if they encounter an expired reset password link?

Attempt to reset their password again using Forgot Password Signup and view all the answers

What is the function of the Approval Details section?

To display details of a customer's approved orders Signup and view all the answers

What can customers find in the Requisitions section?

A list of requested items Signup and view all the answers

The page for alerting customers about expired password reset links suggests what action?

Requesting a new link via Forgot Password Signup and view all the answers

What is the purpose of the VMI Locations page?

To add locations to VMI Signup and view all the answers

Which of the following details can be found on the VMI Order History page?

Previous orders placed in VMI Signup and view all the answers

What is the function of the VMI Reporting feature?

To display the metrics of products moving throughout VMI Signup and view all the answers

On which page can customers add items from a CSV or Excel file?

Order Upload Signup and view all the answers

Which of the following elements is part of the Order Status page?

Address Details and Product List Signup and view all the answers

What can be customized on the Product List page?

Custom filters and list controls Signup and view all the answers

What does the Rich Text Widget do?

Shows a custom message based on the search outcome Signup and view all the answers

Which page is used for comparing different products?

Product Compare Signup and view all the answers

Study Notes

Flexbox Properties

Flex Grow determines how much space a flex item can take up relative to other flex items in the flex container. A value of 1 means the flex item will grow equally with other flex items with a growth value.
Flex Shrink determines how much a flex item can shrink relative to other flex items in the flex container. A value of 1 means the flex item will shrink equally with other flex items with a shrink value.
Flex Basis defines the initial size of a flex item before any flex grow or shrink is applied. It must have a valid CSS length format (e.g., 10px or 30%).

G (Global) applies to the whole website across all contexts.
C (Contextual) may have different values depending on the page or section.
T (Translatable) can be changed to different languages.

Telephone Numbers in Widgets

You can add telephone numbers to widgets by typing tel: Phone Number within the link space.
Clicking the telephone number initiates a dial call, making it easier for users to contact you.

Adding Widgets

Go to the Spire CMS (/contentadmin) and select a page.
Click on "Edit".
Scroll down and click "Add Widget".
If needed, configure the row settings for the widget.
Click "Add Widget" within a row cell.
Choose a widget from the displayed list.

Editing Widgets

Access the Spire CMS and select a page.
Click "Edit" to enter edit mode.
Click "Edit" on the widget you want to modify.
Update the content or settings as needed.
Click "Save".
Click "Publish" to apply changes.

Copying Widgets

Go to the Spire CMS and select a page.
Click "Edit" to enter edit mode.
Click "Copy" on the widget you want to duplicate.
Add a new widget on the same or a different page and choose the widget from the "Clipboard" elements.
Copied widgets can only be used once per session.

Deleting Widgets

Access the Spire CMS and select a page.
Click "Edit".
Hover over the widget you want to delete and click "Delete".
Click "Publish" to confirm the deletion.

Available Widgets

The available widgets depend on the page you are editing.
Certain widgets are only available on specific pages, while others are accessible on most pages.

Checkout - Review & Submit: The final page of the checkout process where customers review order details before submitting.
Checkout - Shipping: Configures the fulfillment methods available for an order. Allows adding order notes and providing email confirmation to additional addresses.
Checkout - Order Confirmation: Displays order details and provides an account sign-up option after a customer completes an order.
My Account: The customer's main account page, displaying recent orders, lists, or quotes.
Account Settings: Allows customers to manage subscriptions and change default billing and shipping addresses.
Addresses: Lets customers view and add addresses to their account.
Budget Management: Enables customers to assign, configure, and review budgets.
** Cart Reminder Unsubscribe:** Provides a page for customers to unsubscribe from cart reminders.
Change Customer: Allows customers to change their billing address or shipping method.
Change Password: Enables customers to change their password.
Create Account: Allows customers to create a new account.
Expired Account Activation Link: Alerts customers about an expired account activation link, using a Rich Text Widget to display a message prompting them to get a new link through "Forgot Password".
Expired Reset Password Link: Informs customers of an expired reset password link using a Rich Text Widget with a message to obtain a new link using "Forgot Password".
Invoice History: Lists a customer's previous invoices.
Invoice Details: Displays the details of a specific invoice.
My Lists: Enables customers to create new lists or view existing ones.
My Lists Details: Shows the details of a specific list.
** Order Approval List:** Displays a customer's approved orders.
Order Approval Order Details: Shows the details of a specific approved order.
Order History: Lists a customer's previous orders.
Order Details: Displays the details of a specific order, including billing address, notes, and shipping method.
Requisitions: Presents a customer's requested items.
RFQ Job Quotes: Lists a customer's quote requests for specific product quantities that don't need to be fulfilled at once.
RFQ Job Quote Details: Displays the details of a specific job quote request.
RFQ My Quotes: Lists a customer's pricing requests for products.
RFQ Quote Details: Displays the details of a specific quote request.
Saved Orders: Lists a customer's saved orders.
Saved Order Details: Provides the details of a saved order, including the product list and total.
Saved Payments: Lists a customer's saved payment methods with an option to add additional cards.
User Administration User List: Lists users for a customer that only administrators can view.
User Setup: Allows creating or editing users with information like username, activation email, and role.
VMI Dashboard: Displays the dashboard for users viewing Vendor Managed Inventory.
VMI Locations: Displays or allows adding locations to VMI.
VMI Locations Details: Presents information for a specific VMI location.
VMI Reporting: Shows product movement metrics throughout VMI.
VMI Bins: Lists products at a location.
VMI Order History: Displays orders placed in VMI.
VMI Order Details: Shows the details of a specific VMI order.
VMI Users: Allows displaying or adding users to VMI.
Order Status: Enables searching for the status of an order, displaying elements like address details and product list.
Order Upload: Lets customers add items to their cart from a CSV or Excel file.
Product Compare: Displays the product comparison carousel.
Product List: Lists products with options to customize the page using filters and controls.
Rich Content Widget: Allows displaying a custom message when a search term returns no products.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

This quiz covers essential Flexbox properties such as Flex Grow, Flex Shrink, and Flex Basis, alongside widget field types like Global, Contextual, and Translatable. Test your understanding of how to effectively use these properties in CSS to design responsive layouts and incorporate telephone numbers in widgets.