-
Notifications
You must be signed in to change notification settings - Fork 63
Corresponding Web Store functionality with a Theme
For a beginning theme designer, it may be unclear what constitutes the "pages" of Web Store. A person looking at the home page for the first time may see lots of menu tabs, product dropdowns, product pages and so forth. How do these sections actually translate into the view files themselves, and how do you locate what you want to change?
We will answer this by providing some relationships between the Web Store sections and the documents.
The convention we will use for pathing files will be paths like views/site/_header.php. This path can be found by going to the themes directory followed by the theme you are working on. If you are working on "brooklyn-copy", generally a good starting point, the full path would be themes/brooklyn-copy/views/site/_header.php
Broadly speaking, theme files can be grouped into five categories:
- Wraparound menus/headers/footers
- Grid display
- Custom Pages
- Checkout
- An optional custom index page
As you navigate through Web Store, you will notice that many of the elements are consistent from page to page. There's always the login buttons, top menu, and bottom menus and footers.
When clicking a menu option, or a product itself, the inner portion, or viewport will show the content specific to the page. For a product grid, the grid itself will display in this area. For a custom page, this will be populated by the store owner's HTML content.
Finally, notice that on most pages, such as in the default Brooklyn theme, the shopping cart and two additional bars appear on the left side. However, if you have an item in your cart and click Checkout, the Checkout page displays the whole width and there is no shopping cart here. For this functionality, there is a change in the column layout file. Most pages use a two column layout (views/site/column2.php) where the second column is where the shopping cart is placed. Checkout uses a one column layout (views/site/column1.php), hence taking up the entire width. You can specify the layout file used on top of other theme files to override the default.
Wraparound and layout files are split between two folders. The first directory is layouts which contains the broad structure files for Web Store. Here the most important files are main.php, as well as two column definition files column1.php and column2.php.
The layout is determined in the controller for the page. Most controllers use either column1 or column2 layout files. Nearly all the controllers use column2, with the single page checkout being the notable exception. This is why when you navigate the site normally you consistently see the second column displaying the shopping cart. Going to checkout shows you the page for the entire width. This is because each section is using one of these two files.
As a designer, you have several choices with these files. First, you can make a view file use a different column layout file. If you edit views/custompage/index.php in your theme and put in the code at the top
<?php $this->layout = '/site/column1'; ?>
Then view any custom page (except for Contact Us), notice that the shopping cart is gone and the page now takes up the entire width. This is because you've modified the view file to use a different column layout at runtime.
You can create additional column files (perhaps a file column2-left.php which has the shopping cart on the left side instead of the right) and then use this in your view files.
You can also modify column2.php directly, which saves you from having to modify lots of view files since they all point to column2.php anyway.
The other major file in the layouts folder is main.php which is the most top-level php file in the views. This is the file that contains your opening <html> tags and calls the other files for elements such as the HTML headers and body content. It's a pretty empty file itself. You could modify this file to bring in other global elements (or use a custom _head.php).
The other wrapper element files can be found in /views/site since these are global files. The files that will be of most interest to a designer are:
- _header.php
- _footer.php
- _head.php
- _header.php
- _navigation.php
Header and footer are the visible elements on the page (which in-turn call things like the navigation bar). _head.php refers to the actual HTML <head> section in the page, where CSS stylesheets are loaded and <meta> information is set.
Remember that files that begin with an underscore are "partial" files that are rendered inside other files. Only change the files you need to because anything not changed will be removed at the end of your development process and use the Web Store core files instead.
Other than the products dropdown itself to show categories, each tab corresponds to a separate custom page. These tabs appear on both the top and bottom of the Web Store layout, including things like New Products and the Terms and Conditions.
However, collectively all custom pages use a single layout file (views/custom/index.php) since the actual content of these pages is under custom control through Admin Panel. Therefore as a designer, you have to consider that the customer will enter their own HTML to appear in the viewport and your design will be limited.
The Contact Us tab is a special tab because it displays the form for submitting a question. This file is views/custom/contact.php but it can still contain custom page content which is placed above the actual form.
Each major section of the website corresponds to a controller. This controller is normally visible on the URL of the site (with two exceptions). The views folder structure matches the controller list, making it easier to find which files control what.
For example, if your store URL is http://example.com/wishlist/search, this means that the controller is "Wishlist" (since all URLs break down as domainname.com/controller/action)
Therefore, if you were working on the Wishlist function, because that's the controller in use, the view files that belong to this would be under themes/wishlist. Index.php is nearly always the default view file (the one that comes up if you don't have a function on your URL, just http://example.com/wishlist as an example). Most functions have a corresponding file so wishlist/search in the URL goes to the wishlist/search.php file in your themes folder.
One notable exception to the URL format is when viewing a product. For SEO purposes, a product URL will follow the format http://example.com/a-long-title-of-a-product-on-my-store/dp/12345 because using the product description in the URL works better with Google et. al.
The "dp" in the URL is for Display Product, and is followed by the id. The actual theme file used by this is views/product/index.php (which in turn calls two subfiles in that same folder, _photos.php and _matrixdropdown.php for any child matrix products).
The site directory we have previously mentioned is the default view for when you do not specify any other controller on the URL, meaning you simply go to http://example.com by itself.
Finally, the mail view folder contains email templates used for receipts and other emails that are sent from the system. Mail doesn't have its own controller (meaning you would never see a URL like http://example.com/mail) but instead these are used at the end of checkout or other events that require an email to be sent.