Vibe Trib GS Add-on & Template Design
Est. Reading Time: 3 minutes
Vibe offers a variety of add-ons for ASPDotNetStorefront. However, its pretty common that a template design will get nuked or lose its style after the add-ons or functionality is included. One add-on. On a previous post, I explained how to integrate Vibe’s Product Compare Add-on with their Vibe Trib Add-on, both of which make use of the product listing and detail pages. I’ve run into a common template design problem with the Vibe Trib GS Add-on (includes filters, search, sort, and attributes) and on that can be easily resolved, given you know where to look. If you make use of a left navigation for products, you will unavoidably run into this issue. If you don’t this add-on will simply serve as your one and only left navigation pane for product filtering. (See Vibe’s example page.)
Notice in the previous post how the results filters are in the left navigation underneath other topic pages? The Vibe Trib plugin allows site visitors to filter results by different attributes of your store’s products. Getting these filters into the left navigation for the first time took quite some effort to resolve. The page content is rendered using “entity.vibe.trib.xml.config” and would obviously populate the right side, where the placeholder is positioned in the template. (See image below) Because this XML package is responsible for generating those filters, if the original template uses a left navigation area, the filters will be called too late by the XML package to be properly rendered. You could always use CSS to float the filters to the right, thats an easy solution, but recent projects have required using the left nav.
- The first step is to carve out your leftNav from your template and save a copy of it in your ‘skins/skin_id’ directory.
- Since these Vibe add-ons relate to products, I generally name it ‘products.ascx’.
- In the admin screen, navigate to your product categories. Under ‘Extension Data’ for every category change the “Use Skin Template” field to match your new template name. (Include .ascx!)
- With the leftNav on your clipboard, open the relevant XML Package to develop and simply build the leftNav as part of the XML Package in ‘skins/skin_id/XMLPackages’.
- Remember to use a customized XML Package, you need to open the XML Packages directory in the root directory of your site.
- Once the XML Package has been changed to include the leftNav
- VibeTrib Add-on uses ‘entity.vibe.trib.xml.config’ for listing pages, but this will also need done for the search page (if you want filters on your search page–which of course you will).
- In order to make the change on the search page, we need to develop the search content’s responsible XML Package as well. This can usually be a copy-paste job once its done for a prior package.
- Once the search page has the modifications, they will not show without adding a custom AppConfig.
- Again navigate to the admin screen, select the Configuration tab < Advanced < AppConfig Parameters.
- On the left-hand side, we need to create a new AppConfig that directs the search page to use a different template.
- The config name needs to start with : “Template” followed by the name of the ASPX page that will be called (no spaces). The Vibe Search included with the add-on is vsearch.aspx
- The config value simply needs to be the name of the new template to use: products.ascx
- Click add and the AppConfig should change the search pages template over to support the leftNav with filters all being produced by the calling XML Package.