-
Notifications
You must be signed in to change notification settings - Fork 63
Theme View file breakdown
This article will break down the purpose of each file in the View layer, which can be used to help determine which files need to be modified for theme development. We will go into greater detail with respect to the actual content that is required on specific pages in a later section.
There are a total of 63 files which make up the view layer of Web Store 3.1. This includes layout files which control the major pieces of how a theme looks, individual files for the different sections of Web Store, and some minor files which serve as includes for other files. A few even only contain javascript code and no actual formatting.
The /layouts folder contains the top level files that are used no matter what section or item is being displayed by web store. Files in this folder include the header, footer, column layouts, meta tags for the HTML header and some special files for credit card processing (which should not be modified).
| Filename | Purpose |
| main.php | Main contains the opening and closing HTML tags as well as calls to the other primary files. No actual formatting is contained in this file. |
| column1.php | A one-column layout file (meaning the main portion of the site extends from left margin to right margin. Displays widget for breadcrumbs and alert messages. Calls main.php |
| column2.php | A two-column file, where the primary portion takes up most of the width, with the right-most reserved for a second column of information. (In the case of web Store, the shopping cart) Displays widget for breadcrumbs and alert messages. Calls main.php |
| errorlayout.php | Dedicated page for error condition (i.e. 404 errors). Does not use column1 or column2, is standalone |
| jumper.php | Code only, used by payment processors that redirect to another site. Do not modify or override. |
| plain.php | Blank display page, no HTML headers or anything, used in special cases. Do not modify or override. |
As you can see from this, you only have four files to review. You can also create additional layout files (alternatives to column1 and column2). More on this section here.
The /cart folder contains view files that deal with cart display, cart editing and checkout. All files that begin with an underscore _ character are partial files which are included in other files.
| Filename | Purpose |
| index.php | Cart editing (i.e. change qty, remove items from cart, etc.) |
| checkout.php | The checkout file. This is the largest file in all of Web Store. This is primarily a form file, so it outputs the form fields from the CheckoutForm class. The buttons (such as Apply Promo Code, Calculate Shipping and Submit) contain javascript code so any customizations should be careful to not modify this or it may break functionality. The form layout uses standard Yii commands. Some divs are created hidden and are shown based on functionality (such as the credit card form), shown only when a person chooses certain payment modules. NOTE: Plans are in place to refactor the checkout process from a single form to a multiple progressive form/page experience. |
| jumper.php | Outputs form only. Do not modify or override. |
| receipt.php | Final receipt display after checkout has completed. Also can be called from an email message or at a later date. |
| _cartitems.php | Inner table of actual cart contents. |
| _cartjs.php | Javascript code only, do not modify or override. |
| _cartaxes.php | Inner table of taxes on a cart |
| _facebookwall.php | Post to Facebook, used on final receipt to allow customer to post message to wall for advertising purposes |
| _googleconversion.php | Code only for Google conversion tracking, do not modify or override. |
| _paymentform.php | Inner form used for certain payment modules when additional fields are required. |
| _sharecart.php | Popup form for sharing a cart (i.e. emailing to a third party) |
The /custompage folder contains view files that deal with custom pages. Keep in mind that most of the tabs on the home page, such as About, Terms and Conditions, Top Products, New Products, etc are all custom pages generated by the user, and all use a single template file.
| Filename | Purpose |
| index.php | Primary file for any custom page display. Also includes code for slider widget. Inner contents generally are read from MySQL database and will be under user's control through Admin Panel. |
| contact.php | Contact Us form, email form for soliciting question and submitting to store. |
The /mail folder contains view files that are used in emailed receipts. None of these files are displayed normally on the website. Because they are used in email, CSS should be inline instead of externally referenced since many email clients block remote CSS or other files due to security issues.
| Filename | Purpose |
| _cart.php | File for emailing a cart. Will pull _cartitems from /cart folder |
| _contactform.php | Contact Us form template to send results of /custompage/contact. |
| _customerreceipt.php | Emailed receipt upon completion of checkout. |
The /myaccount folder contains view files for viewing and editing customer account details. Also used when a customer is registering for a new account.
| Filename | Purpose |
| index.php | Primary My Account menu, displays address book, order history, Wish Lists and SROs if enabled |
| edit.php | Form for editing account details |
| address.php | Form for adding or editing an address book entry |
The /product folder contains view files for viewing product details.
| Filename | Purpose |
| index.php | Primary product detail page. Like checkout, this is a longer page and contains some javascript especially related to matrix items because portions of the page update via AJAX depending on customer selections. Also AJAX buttons for adding to Wish list and adding to cart. |
| _photos.php | Inner layout page for product photos (primary and additional). Also contains javascript to handle zoom functionality. |
| _matrixdropdown.php | Inner layout page for color and size matrix dropdowns, primarily Javascript code. |
The /search folder contains view files for search results, which ALSO is the primary viewing grid during normal navigation. Nearly all "browsing" is in fact a search (such as clicking a category from the products menu is in fact running a search by category), so these pages are used for almost all product viewing other than the details page.
| Filename | Purpose |
| index.php | Advanced search form, viewed when clicking + by search bar |
| grid.php | Primary grid layout for products. Repeats inner cell for each product on grid, contains pagination widget on bottom |
The /site folder contains pages which are used along with layout for all navigation. Most of these pages are included in other views, again designated by the underscore charater.
| Filename | Purpose |
| _flashmessages.php | Include file for page footer, displays store name, address, hours by default |
| _footer.php | Include file for page footer, displays store name, address, hours by default |
| _google.php | Code only for google analytics, do not modify or override |
| _head.php | HTML head data, i.e. title, meta tags, etc. Rarely needs modifying since it should call CSS files from your theme automatically. |
| _header.php | Header of site. In the brooklyn theme it includes the store banner, login button and language menus (if enabled) that appear on top of each page during navigation. |
| _navigation.php | Calls menu widget for product menu, tabs for additional menuing across top |
| _search.php | search |
| _sharing_footer.php | Code only, for social sharing code that needs to be at bottom of page. Do not modify or override |
| _sharing_header.php | Code only, for social sharing code that needs to be at top of page. Do not modify or override. |
| _sharing_tools.php | Code only, sharing buttons for social networks. |
| _sidecart.php | Side shopping cart display, used by column2.php layout file to display shopping cart alongside normal page content. |
| _topcart.php | Displays brief information about the cart, meant to be displayed at the top of the page |
| _wishlists.php | Hidden by default list that offers the option to search for a wishlist and if a user is logged in, to view the list of wishlists or create a new wishlist |
| category.php | (candidate for deletion, was designed to display categories in a grid format but system should call grid.php instead since it's common) |
| error.php | Error 404 page, works in conjunction with /layout file of same name |
| index.php | This is, ironically, a little used page, only displayed if the user sets Web Store to display it to a new visitor instead of the normal product grid. This file should be included in your theme but not modified since it's only there for specific customer customizations. |
| login.php | Before v3.1, login was performed in a pop-up modal window. Now, login is its own page which allows for it to be better secured. |
| map.php | Sitemap, largely widget code to display directory of all pages. |
| offline.php | The page that is displayed to customers when the store owner sets the status of the site to Offline in the Admin Panel |
| redirect.php | Hosted stores who do not have their own SSL certificates require redirect to secure versions of certain pages (ex. login, checkout). Do not modify or override. |
The /sro folder contains view files for SROs (Service Repair Orders). Not all webstores use this feature but those who do repairs for electronic equipment will allow customers to review repairs and their status online.
| Filename | Purpose |
| sro.php | SRO layout file |
| _sroitems.php | Inner table of products on an SRO |
| _srorepairs.php | Inner table of labor line items on an SRO |
The /wishlist folder contains view files that are used in wish lists (or gift registries), where a shopper can mark items they wish to purchase at a later date. Also used by certain stories as bridal registries or other public registry functionality.
| Filename | Purpose |
| index.php | Primary view file for listing all wish lists on customer account, menu to other options |
| create.php | Create/Edit a wish list, including title, visibility, etc. |
| search.php | Search for a wish list, including on another user's account if enabled |
| view.php | Display the product contents of a wish list. Can be used in edit or read only mode. |
| _addtolist.php | Popup called by /product/index.php details page when Add To Wish List is cilcked. This is only displayed if the user has more than one wish list, to ask which list to add to. |
| _edititem.php | Edit product item on wish list, optionally delete |
| _sharelist.php | Popup form to email a wish list to an email address |