tutorials:zencartmods:tabs.html
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
tutorials:zencartmods:tabs.html [2011/08/11 15:33] daigo |
tutorials:zencartmods:tabs.html [2016/01/28 18:05] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | Theres a few mods out there like [[http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=924|this one]] that let your zen cart products have tabs. We needed something slightly more cutom (we have some weird tabs) we made a simple mod for ourselves. | + | |
| + | ====== Adding tabs to product pages ====== | ||
| + | |||
| + | We sell very technical things and we often have a lot of stuff we want to add to the product page - technical details like size & weight, electronic details for interfacing, datasheets, example code, schematics, files, tutorials, etc. Before you know it, customers are inundated with too much info! That's why tabs can be very handy, they are easy to use and split up the information into chunks by category. | ||
| + | |||
| + | {{:tutorials:zencartmods:tabs.png?|}} | ||
| + | |||
| + | |||
| + | There's a few mods out there like [[http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=924|this one]] that let your zen cart products have tabs. We needed something slightly more custom (we have some weird tabs) we made a simple mod for ourselves. | ||
| ==== DB changes ==== | ==== DB changes ==== | ||
| - | We'll start by making a tab called "tutorials". Just duplicate these directions and replace "tutorials" with anything else to make ome other tabs as well. | + | We'll start by making a tab called "tutorials". Just duplicate these directions and replace "tutorials" with anything else to make some other tabs as well. |
| <code sql> | <code sql> | ||
| Line 123: | Line 131: | ||
| ?> | ?> | ||
| </div> <!-- end tab_wrapper --> | </div> <!-- end tab_wrapper --> | ||
| + | </code> | ||
| + | |||
| + | ==== Javascript and CSS ==== | ||
| + | |||
| + | Depending on what your template looks like, the CSS and JS might need to be totally custom. Here's how ours looks (you can always view it on any of our product pages as well). | ||
| + | |||
| + | |||
| + | Place this either inline in **tpl_product_info_display.php** or place it in the header by placing it in **includes/modules/pages/product_info/jscript_main.php** | ||
| + | <code javascript> | ||
| + | |||
| + | <script> | ||
| + | |||
| + | var numTabs = <?php echo count($tabs); ?>; | ||
| + | |||
| + | function changeTab(tab) | ||
| + | { | ||
| + | for( i = 0; i < numTabs; i++) | ||
| + | { | ||
| + | document.getElementById('tab_' + i).style.display = 'none'; | ||
| + | document.getElementById('tab_top_' + i).style.backgroundColor = '#EEE'; | ||
| + | document.getElementById('tab_top_' + i).style.borderBottomWidth = '1px'; | ||
| + | document.getElementById('tab_top_' + i).style.borderBottomColor = '#E2E2E2'; | ||
| + | } | ||
| + | document.getElementById('tab_' + tab).style.display = 'inline'; | ||
| + | document.getElementById('tab_top_' + tab).style.borderBottomWidth = '1px'; | ||
| + | document.getElementById('tab_top_' + tab).style.borderBottomColor = '#FFFFFF'; | ||
| + | document.getElementById('tab_top_' + tab).style.backgroundColor = '#FFFFFF'; | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | </code> | ||
| + | |||
| + | Our CSS rules are as follows | ||
| + | <code css> | ||
| + | .tab { | ||
| + | border-top: 1px solid #E2E2E2; | ||
| + | border-left: 1px solid #E2E2E2; | ||
| + | border-right: 1px solid #E2E2E2; | ||
| + | border-bottom: 1px solid #E2E2E2; | ||
| + | margin-left: 10px; | ||
| + | display: inline; | ||
| + | background-color: #EEE; | ||
| + | font-weight: bold; | ||
| + | padding: 5px; | ||
| + | } | ||
| + | .selected_tab | ||
| + | { | ||
| + | margin-left:15px; border-bottom: 1px solid #FFFFFF; background-color: #FFF | ||
| + | } | ||
| </code> | </code> | ||
/home/ladyada/public_html/wiki/data/attic/tutorials/zencartmods/tabs.html.1313076834.txt.gz · Last modified: 2016/01/28 18:05 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
