A Yahoo! Store Item Description Tabs!
This would be the second tutorial I have written for the Yahoo! store for the all the Yahoo! store owners. The first one was a big success and had a couple of people looking for the tutorial on the description tabs. Well, here it is! Again, I will do my best to keep it as easy as possible for everyone to follow.
This is only for the Yahoo! Store Editor V3.
You also must know how to edit RTML for this tutorial.
1. Download & Upload Script - Download Here
Once you have downloaded the script from the above link you will need to create a directory called "tabs" and then upload the script files to the "tabs" directory.
2. Setting the header scripts
The script will require you to put a couple of lines in the Head-tags text box so lets get that part done! You must keep in mind that you have have a website with a out side page than your website must be as followed "http://www.yoursiteurlhere.com" if you have your Yahoo! store set at your home page then your website links must be "http://site.yoursiteurlhere.com".
Login into your store manager >> Store Editor >> Variables
Now scroll down the page until you find the "Head-tags" text box. Then paste the head tag script in text box.
3. Preparing for RTML Editing
Okay, now that we have the files downloaded and uploaded to your website server and the head scripts are in place we can now work on getting code in the store editor.
On the store editor tools is a red arrow on the right to open the "Advanced Editor". Once the second line of options show up if not already click on the "templates" or "storetemplates" button.
If you clicked on "storetemplates" then we you get to the next page you will have to click on the "templates" button on the top of the page to show you all of your store templates.
Now we are looking for the "text template".
4. The RTML Editing
We need to start the "tab" rtml code right under the DIV class "pageTextHeader".
The RTML need in below;
5. Adding the variable to the store table
Now that we have the "tab" RTML code in place, we need to add a couple of custom variable to the store table.
On the store editor tool bar click Store Manager >> Catalog Manager >> Manage Your Tables >> default-table
On the very bottom under the "custom fields" click on the edit button on the right hand side. On the botton of the page click on the "Add Another Custom Field." we are going to need to add two with a Big-Text format.
Size-chart - Big Text
Specs - Big Text
6. Adding Custom Varaiable to the store
Now we have the text areas in place for each item with need to go back the the store editor and add a couple of custom varaiables.
Store Manager >> Store Editor >> Varaiables
At the top of the page here is a button called Define New Variable click and added the following with the type next to them.
H2-description - Text
H2-Size - Text
H2-Specs
Tab-menu - Big Text
End-tab-menu - Text
7. Placing the code in the custom variables
After you have put the new variables in place we need some code in each one. Below are the new variables you just added with the code need for each one.
H2-description
H2-Size
H2-Specs
Tab-menu
End-tab-menu
8. Things to remember
Ok that should be it! Now remember if you want change the names of the tabs then just go into
Store Edior >> Variables
If change the name(s) in the "Tab-menu" text field, but remember if you change the link name, to change the div name back in the RTML code.
If you would like to add each featured specs to its own line plus use the following code.
I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is unmaintained tutorial. Use at your own risk. I worked hard on figuring out this code many years ago and didn't want these tutorials to go to waste.
This would be the second tutorial I have written for the Yahoo! store for the all the Yahoo! store owners. The first one was a big success and had a couple of people looking for the tutorial on the description tabs. Well, here it is! Again, I will do my best to keep it as easy as possible for everyone to follow.
This is only for the Yahoo! Store Editor V3.
You also must know how to edit RTML for this tutorial.
1. Download & Upload Script - Download Here
Once you have downloaded the script from the above link you will need to create a directory called "tabs" and then upload the script files to the "tabs" directory.
2. Setting the header scripts
The script will require you to put a couple of lines in the Head-tags text box so lets get that part done! You must keep in mind that you have have a website with a out side page than your website must be as followed "http://www.yoursiteurlhere.com" if you have your Yahoo! store set at your home page then your website links must be "http://site.yoursiteurlhere.com".
Login into your store manager >> Store Editor >> Variables
Now scroll down the page until you find the "Head-tags" text box. Then paste the head tag script in text box.
JavaScript:
<!--Start Tab Script--!>
<!--[if IE]>
<link rel="stylesheet" href="http://site.yoursiteurlhere.com/tabs/css/jquery-ui-1.7.custom.css" type="text/css"/>
<![endif]-->
<link rel="stylesheet" href="http://site.yoursiteurlhere.com/tabs/css/jquery-ui-1.7.custom.css" type="text/css"/>
<script src="http://site.yoursiteurlhere.com/tabs/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://site.yoursiteurlhere.com/tabs/js/jquery-ui-1.7.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#tabs').tabs();
});
</script>
<!--End Tab Script--!>3. Preparing for RTML Editing
Okay, now that we have the files downloaded and uploaded to your website server and the head scripts are in place we can now work on getting code in the store editor.
On the store editor tools is a red arrow on the right to open the "Advanced Editor". Once the second line of options show up if not already click on the "templates" or "storetemplates" button.
If you clicked on "storetemplates" then we you get to the next page you will have to click on the "templates" button on the top of the page to show you all of your store templates.
Now we are looking for the "text template".
4. The RTML Editing
We need to start the "tab" rtml code right under the DIV class "pageTextHeader".
The RTML need in below;
5. Adding the variable to the store table
Now that we have the "tab" RTML code in place, we need to add a couple of custom variable to the store table.
On the store editor tool bar click Store Manager >> Catalog Manager >> Manage Your Tables >> default-table
On the very bottom under the "custom fields" click on the edit button on the right hand side. On the botton of the page click on the "Add Another Custom Field." we are going to need to add two with a Big-Text format.
Size-chart - Big Text
Specs - Big Text
6. Adding Custom Varaiable to the store
Now we have the text areas in place for each item with need to go back the the store editor and add a couple of custom varaiables.
Store Manager >> Store Editor >> Varaiables
At the top of the page here is a button called Define New Variable click and added the following with the type next to them.
H2-description - Text
H2-Size - Text
H2-Specs
Tab-menu - Big Text
End-tab-menu - Text
7. Placing the code in the custom variables
After you have put the new variables in place we need some code in each one. Below are the new variables you just added with the code need for each one.
H2-description
HTML:
<strong>Item Description</strong><br /><br />H2-Size
HTML:
<strong>Size Chart</strong><br /><br />H2-Specs
HTML:
<strong>Item Specs</strong><br /><br />Tab-menu
HTML:
<div id="tabs">
<ul>
<li><a href="#description">Description</a>
</li>
<li><a href="#specs">Specs</a>
</li>
<li><a href="#size">Size Chart</a>
</li>
</ul>End-tab-menu
HTML:
</div>8. Things to remember
Ok that should be it! Now remember if you want change the names of the tabs then just go into
Store Edior >> Variables
If change the name(s) in the "Tab-menu" text field, but remember if you change the link name, to change the div name back in the RTML code.
If you would like to add each featured specs to its own line plus use the following code.
HTML:
<li>Your item spec here</li>I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is unmaintained tutorial. Use at your own risk. I worked hard on figuring out this code many years ago and didn't want these tutorials to go to waste.
Last edited:
