Front-End OOTB Widgets PDF

Manage Spire CMS widgets Updated 1 month ago FollowNot yet followed by anyone Widgets are pre-configured content holders that allow you to rapidly add content to your pages without having to develop these elements. In Spire, users have different widgets and configuratio...

Manage Spire CMS widgets Updated 1 month ago FollowNot yet followed by anyone Widgets are pre-configured content holders that allow you to rapidly add content to your pages without having to develop these elements. In Spire, users have different widgets and configuration options available to them as compared to the Classic CMS. Best practices You can add widgets to existing rows or add more rows to contain widgets. After you have added a row, you can click the Plus icon within the cells of the row to add widgets. Each cell can contain multiple widgets that stack within the cell. Basic Row Click the Plus icon to view the Row widget menu and select Basic Row. Basic Rows in the Spire CMS must always have 12 columns. You can choose from some of the pre-configured layouts in the Row menu, or create your own by entering whole numbers separated by a plus sign, as illustrated in the examples below. Row Layout Row Configuration One column 12 Two equal columns 6+6 Three equal columns 4+4+4 Four equal columns 3+3+3+3 Two columns - one large and one small 10+2 Three columns - one twice the size of the other two 3+3+6 Three columns - one twice the size of the other two 3+6+3 Six equal columns 2+2+2+2+2+2 Flex Row You can also select Flex Row, which gives you more flexible options for row customization. You can set the following configurations in the Flex Row: Gap Between Zones – Set the gap between zones. Zones are the same thing as columns for Basic Row widgets. Value must have a valid CSS length format, such as 10px or 30%. Direction – Choose if the zones should be in a Row, Row Reverse, Column, or Column Reverse. Wrap – Choose if the content should have No Wrap, Wrap, or Wrap Reverse. Justify Content – Set the justification for content: Start, End, or Center. Align Items – Choose how the items should align. Options are Stretch, Start, End, Center, and Baseline. Align Content – Choose how to align content for the wrap. This option only appears after you select Wrap or Wrap Reverse. Flex Zones – Set the number of flex zones (columns) for content. Click Add to add a flex zone. o Flex Grow o Flex Shrink o Flex Basis – Value must have a valid CSS length format, such as 10px or 30%. Click Save once you are done configuring your Flex Row. You can also go back and edit these settings later. Widget features and functionality Widget fields are labeled G, C or T, which have the following meanings: G – global value that applies to the website in every context C – contextual value that may have different variants T – translatable value You can use a telephone number in any widget that allows you to add links by typing tel: Phone Number into the link space. When a user clicks on the telephone number, it initiates dialing, making it easier for them to contact you. Add a widget 1. Access the Spire CMS by adding /contentadmin to the end of your site URL or by selecting the Content Editor links from within the admin console. 2. Select a page from the Pages tree. 3. Click Edit. 4. Scroll down and click Add Widget. 5. If you need to add a row, select the desired configuration for the row you are adding to the page. If not, proceed to the next step. 6. Click Add Widget within one of the row's cells. The Add a Widget window appears and shows widgets available for the page. 7. Search for or select a widget from the displayed widget groups and options. Edit a widget 1. Access the Spire CMS. 2. Select a page from the Pages tree. 3. Click Edit to enter edit mode for the page. 4. Click Edit on the widget you would like to edit. 5. Update the content or settings of the widget as desired 6. Click Save. 7. Click Publish to publish changes. Copy a widget 1. Access the Spire CMS. 2. Select a page from the Pages tree. 3. Click Edit to enter edit mode for the page. 4. Click Copy on the widget you want to copy. A message displays that the widget is copied to your clipboard. This includes any nested widgets.  5. Click Add Widget on the same page or a different page, and select the widget from the Clipboard elements. You can only use the copied widget one time. The copied widgets are only available during the active session. Delete a widget 1. Access the Spire CMS. 2. Select a page from the Pages tree.  3. Click Edit. 4. Hover over the widget you would like to delete and click Delete. 5. Click Publish. Available widgets The widgets available depend on the page you are editing. Some widgets are only available on certain pages, while others are available on most pages. These widgets are available on every page: Basic Elements Common Elements Contact Us Elements Header Elements The table below shows the elements that are specific to each page type. Compact Header Compact A condensed version of your site’s Header header that appears as users scroll Elements down the page, giving them continued access to search, cart and navigation. Home Categories The landing page for your website. Elements Brands Elements Locations Location Finder The listing of your locations for Elements customers to see and search. Dealer Details Dealer Details The details of your dealer locations. Elements Brands Brands The listing of brands that your website Elements sells. Choose to display as a gallery or as a list. Brand Details Brand Details The details for a specific brand, such Elements as logos or images, product lines, and categories. Cart Cart Elements The page that displays what is in a customer's cart. Use widgets to add  actions such as Save Order or allow the customer to choose a fulfillment method. Category Details Categories The details of a specific category, Details such as logos, product links, or Elements subcategories. Categories Categories The listing of your website categories. Elements You can configure the widget to show images or only top-level categories. Checkout - Review & Checkout The final page of the checkout Submit Review & Submit process where the customer can Elements review order details before submitting the order. Checkout - Shipping Checkout The fulfillment methods available for Shipping an order. You can also use widgets to Elements add a place for order notes or to allow costumers to send email confirmation to additional emails. Checkout - Order Order The confirmation after a customer Confirmation Confirmation completes an order. Use widgets to Elements display order details and provide an account sign-up option. My Account My Account The customer's main account page. Elements Use widgets to display recent orders, lists, or quotes. Account Settings Account The page where customers can Settings manage their subscriptions or change Elements their default billing and shipping addresses. Addresses Addresses The page where customers can view Elements and add addresses in their account. Budget Management Budget The page where customers can Management assign, configure, and review Elements budgets.  Cart Reminder Cart Reminder The page where customers can Unsubscribe Unsubscribe unsubscribe from cart reminders. Elements Change Customer Change The page where customers can Customer change their billing address or Elements shipping method. Change Password Change The page where customers can Password change their password. Elements Create Account Create Account The page where customers can create Elements an account. Expired Account Rich Content The page to alert customers of an Activation Link widget expired account activation link. Use the Rich Text Widget to display a message such as The link you used for activating your account is invalid. Please get a new link by trying Forgot Password. Expired Reset Rich Content The page to alert customers of an Password Link widget expired reset password link. Use the Rich Text Widget to display a message such as The link you used for resetting your password is invalid. Please get a new link by trying Forgot Password again. Invoice History Invoice History The listing of a customer's previous Elements invoices. Invoice Details The details from a specific invoice. o Invoice Elements Details My Lists My Lists The page where customers can create Elements a new list or view ones they have already created.  My Lists Details The details about a specific list. o My Lists Elements Details Order Approval Order Approval The listing of a customer's approved List Elements orders. Order Approval The details of a specific approved Order Details order. Approval Elements Details Order History Order History The listing of a customer's previous Elements orders. Order Details The details of a specific order, such Order Details Elements as Billing Address, Notes, and Shipping Method. Requisitions Requisitions The listing of a customer's requested Elements items. Job Quotes RFQ Job Quotes The listing of a customer's quote Elements requests for specific quantities of products that do not need to be RFQ My Quotes fulfilled at one time. Elements RFQ Job Quote The details of a specific job quote Job Quote Details request. Details Elements My Quotes RFQ My Quotes The listing of a customer's pricing Elements requests for products or groups of products. RFQ Job Quotes The details of a quote request. Quote Details Details Elements RFQ Quote Details Elements Saved Orders Saved Order List The listing of a customer's saved Elements orders.  Saved Order The details of a saved order, such as Saved Order Details the Product List and Total. Details Elements Saved Payments Saved Payments The listing of a customer's saved Elements payment methods. Use widgets to allow them to add additional cards. User Administration User List The listing of users for a customer Elements that can only be viewed by an Administrator. User Setup A page to create or edit a user with User Setup Elements information such as Username, Activation Email, and Role. VMI Dashboard VMI Dashboard The dashboard users see when they Elements switch to viewing Vendor Managed Inventory VMI Locations VMI Locations A page to display or add locations to Elements VMI VMI Locations A page to display information for a o VMI Locations Details specific location Details Elements VMI Reporting The metrics of products moving o VMI Reporting Elements throughout VMI VMI Bins The listing of products at a location VMI Products Elements VMI Order History VMI Order The page that displays previous History orders placed in VMI Elements VMI Order The details for a specific order VMI Order Details Details Elements VMI Users VMI Users A page to display or add users to VMI Elements Order Status Order Status A page to search for the status of an Elements order. Display elements such as Address Details and Product List. Order Upload Order Upload A page for customers to add items to Elements their cart from a CSV or Excel file. Product Compare Product A page to display the product Compare comparison carousel. Elements Product List Product List The listing of products. Use widgets to Elements allow customers to customize the page, such as various filters and list Rich Content controls. widget Use the Rich Text Widget to display a custom message when user enters a search term that results in no products being returned. Quick Order Quick Order A page for customers to quickly Elements search for, view, and add items to their cart. Requisition Confirmation Requisition The confirmation after a customer Confirmation submits a requisition, such as the Elements Product List and Total. Request a Quote RFQ Request A page for customers to request Quote Elements pricing for a product or group of products. Quote Confirmation RFQ Quote The confirmation of a requested Confirmation quote. Elements Sign In Sign In Elements A page for customers to sign in or create a new account. Static List Static List The page for a shared list. Elements News News List The listing of your news pages. Elements News News Page The content of a particular news page. Elements Footer Footer Elements Elements for your footer, such as logos and links.