| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| v:2.0:templates:primer [2015/06/25 05:40] – [CSS Class and ID Naming Principles with BEM] foxybrett | v:2.0:templates:primer [2017/04/26 07:02] (current) – external edit 127.0.0.1 |
|---|
| ====== FoxyCart Templates and Caching Primer ====== | ====== FoxyCart Templates and Caching Primer ====== |
| | |
| | <WRAP center round box 70%> |
| | **Working with FoxyCart Templates** |
| | * [[v:2.0:templates|Basic Customizations]]\\ Utilising the new configuration option for common changes |
| | * [[v:2.0:templates:intermediate-automagicache|Intermediate Customizations]]\\ Incorporating your own designs in the FoxyCart templates |
| | * [[v:2.0:templates:advanced|Advanced Customizations]]\\ Altering the raw templates |
| | * [[v:2.0:templates:primer|FoxyCart Templates and Caching Primer]] |
| | * [[v:2.0:templates:view_data|Template View Data]]\\ Cheatsheet for the variables accessible on the templates |
| | </WRAP> |
| |
| Below, you'll find our best attempt at explaining each aspect of our templates and how you can override, hook into, or remove the aspects that you're interested in. If you have questions, post on our [[http://forum.foxycart.com|forum]] and let us know what is confusing, or email support if you have a suggestion on how this documentation can be more helpful. | Below, you'll find our best attempt at explaining each aspect of our templates and how you can override, hook into, or remove the aspects that you're interested in. If you have questions, post on our [[http://forum.foxycart.com|forum]] and let us know what is confusing, or email support if you have a suggestion on how this documentation can be more helpful. |
| </code> | </code> |
| |
| Now all we have to do is listen for a click, and then rerender the template with the current context. This makes it much easier to scale our code - now we can have as many options as we need. We could also pass in products as data and add new products easily, which it turns out is exactly what happens in FoxyCart templates. | Now all we have to do is listen for a click, and then re-render the template with the current context. This makes it much easier to scale our code - now we can have as many options as we need. We could also pass in products as data and add new products easily, which it turns out is exactly what happens in FoxyCart templates. |
| |
| |
| To help make the base FoxyCart theme easily modifiable, we've adopted the [[http://bem.info/method/definitions/|BEM methodology]] for element naming. BEM stands for Block, Element, Modifier and it introduces a funky identifier scheme that we've tried to apply consistently in our templates. | To help make the base FoxyCart theme easily modifiable, we've adopted the [[http://bem.info/method/definitions/|BEM methodology]] for element naming. BEM stands for Block, Element, Modifier and it introduces a funky identifier scheme that we've tried to apply consistently in our templates. |
| |
| [[http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/|This article]] will give you an extensive background on the BEM philosophy we used. Basically, Blocks are defined as distinct elements of a template, Elements are the individual HTML elements that make up the Block, and modifiers are variations of the Elements. They are represented like so: | [[http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/|This article]] will give you an extensive background on the BEM philosophy we used. Basically, Blocks are defined as distinct elements of a template, Elements are the individual HTML elements that make up the Block, and Modifiers are variations of the Elements. They are represented like so: |
| <code>block--element__modifier</code> | <code>block--element__modifier</code> |
| And they can be strung together: | And they can be strung together: |
