A Yahoo! Store Popular Item Slider!
This is going to be one of the hardest tutorials to not only write but to follow as well. This is not one for the beginners to start with.
This is only for the Yahoo! Store Editor V3.
You also must know how to edit RTML for this tutorial.
Where to start?
Well for this tutorial lets start by telling you what you are going to be expecting. The Item Slider uses a jquery and javascript for it's funcation. It will be placed on every single item page. To change out the items you just have to change the item id in the "Item-Slider" field of your variables page in your store editor! There are different ways to show this but I am only going to be showing you how to get it on the item template.
1. Lets Get Started
Blow is a link to the script you will need to download. This will give you all of the files needed to run the script!
Download Item Slider Script - Click Here
2. Head Tags
Now that we have the copy of the files downloaded let get the a copy of the "Head Tags"!
3. Download & Upload Scipt
Once you have downloaded your Item Slider script upload to your website. 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".
4. Setting the header scripts
This script requires you to insert a java script into the header of each page you would like the script to work on. Here is how this is done! With Yahoo! Store template if you edit one you will edit it for every page. Gotta love that!!!
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.
5. Preparing for RTML Editing
Okay, now that we have the files downloaded and uploaded them to your website server and the head scripts are in place we can now start work on getting the rtml of this tutorial.
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.
6. Making a new template
In the store editor click on the "New Template" button. We need to make a new template to be called by the functions.
The id of the new template will need to be called "item-sliders". Now lets make the template! Here is a copy of what it should look like!
7. Making a couple variables
We now need to add a couple variables for the item slider to work right.
Store Editor >> Variables
The first one on the list is the top image!
Define New Variable >>
Name: popularitems | Type: image
****DO NOT forget to make and upload the image for the popularitems variable!****
The last one we need to make is the one that you will be adding and remove this item ids you would like to show in the item slider!
Define New Variable >>
Name: itemsslide | Type: objects
****DO NOT forget to copy and paste the item ids you would like to put in the slider. Please remember that each id must be sperated with one space!****
8. Placing in store
Now that we have the "Item Slider" template in place we will now need to make a some changes to the "Text" template to show the item slider on each item page!
Store Editor >> Templates >> yhst-xxxxxxxxxxxxxx-text
Now under this RTML code (WHEN AND OR NOEMPTY @code) add this RTML just below it! Here is an image of the RTML that yours should look like!
9. Checking the work
Check one of the item pages to ensure that the item slider works correctly before publishing your store.
10. Also, if you would like to change the color of the part numbers under the images in the slider change the color code in the itemsslide template you created. Also, if you would like to just remove the part numbers all together remove this rtml from the itemslide template!
I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is a 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 is going to be one of the hardest tutorials to not only write but to follow as well. This is not one for the beginners to start with.
This is only for the Yahoo! Store Editor V3.
You also must know how to edit RTML for this tutorial.
Where to start?
Well for this tutorial lets start by telling you what you are going to be expecting. The Item Slider uses a jquery and javascript for it's funcation. It will be placed on every single item page. To change out the items you just have to change the item id in the "Item-Slider" field of your variables page in your store editor! There are different ways to show this but I am only going to be showing you how to get it on the item template.
1. Lets Get Started
Blow is a link to the script you will need to download. This will give you all of the files needed to run the script!
Download Item Slider Script - Click Here
2. Head Tags
Now that we have the copy of the files downloaded let get the a copy of the "Head Tags"!
JavaScript:
<!-- Start Item Slider -->
<script language="javascript" type="text/javascript" src="http://site.yoursiteurlhere.com/itemslider/js/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="http://site.yoursiteurlhere.com/itemslider/js/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript" src="http://site.yoursiteurlhere.com/itemslider/js/load.js"></script>
<link rel="stylesheet" type="text/css" href="http://site.yoursiteurlhere.com/itemslider/css/styles.css" />
<!-- End Item Slider -->3. Download & Upload Scipt
Once you have downloaded your Item Slider script upload to your website. 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".
4. Setting the header scripts
This script requires you to insert a java script into the header of each page you would like the script to work on. Here is how this is done! With Yahoo! Store template if you edit one you will edit it for every page. Gotta love that!!!
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.
5. Preparing for RTML Editing
Okay, now that we have the files downloaded and uploaded them to your website server and the head scripts are in place we can now start work on getting the rtml of this tutorial.
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.
6. Making a new template
In the store editor click on the "New Template" button. We need to make a new template to be called by the functions.
The id of the new template will need to be called "item-sliders". Now lets make the template! Here is a copy of what it should look like!
7. Making a couple variables
We now need to add a couple variables for the item slider to work right.
Store Editor >> Variables
The first one on the list is the top image!
Define New Variable >>
Name: popularitems | Type: image
****DO NOT forget to make and upload the image for the popularitems variable!****
The last one we need to make is the one that you will be adding and remove this item ids you would like to show in the item slider!
Define New Variable >>
Name: itemsslide | Type: objects
****DO NOT forget to copy and paste the item ids you would like to put in the slider. Please remember that each id must be sperated with one space!****
8. Placing in store
Now that we have the "Item Slider" template in place we will now need to make a some changes to the "Text" template to show the item slider on each item page!
Store Editor >> Templates >> yhst-xxxxxxxxxxxxxx-text
Now under this RTML code (WHEN AND OR NOEMPTY @code) add this RTML just below it! Here is an image of the RTML that yours should look like!
9. Checking the work
Check one of the item pages to ensure that the item slider works correctly before publishing your store.
10. Also, if you would like to change the color of the part numbers under the images in the slider change the color code in the itemsslide template you created. Also, if you would like to just remove the part numbers all together remove this rtml from the itemslide template!
I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is a 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:
