Pop Up Box Options
To turn on the pop up box , and make it appear when your users hover over the swatches on the public side of the website, go to
System >> Configuration, then select SMD Color Swatch from the left menu, and open the “Pop Up Box” magento box.
Set the value of Popup Info Box to “Yes”.
Once pop up box is activated, you’ll need to set what to appear in the pop up box. You have two options to administer this setting:
1. Set the value of “Text to show in Popup Info Box” to : “Use Info Text from Config.”
– This option allows you to set the content of the info box right from the “Info Text” textarea box that’s just under the current setting.
Enter any demo text in the Info text area, and see how it’ll appear on the public side of the website.
You also have three custom options available for using in the content of the pop up box. They are:
- – #{attribute}
- – #{option}
- – #{image}
Try them out, to see how they work.
2. Set the value of “Text to show in Popup Info Box” to : “Show swatch description”
– This option allows you to set the content of the pop up box from the Catalog >> SMDesign Color Swatch page.
The values you enter in the label field under each swatch will be the text values that will appear on the public side of the website in the pop up box.
You have the #{image} special attribute available with this setting.
Which will give you something like this to work with on the public side of the website:
To get the best out of the pop up box option, available in our plugin, you’ll have to do a bit of styling and code editing.
Here’s an example of what you can achieve with just a bit of css code and some templates change:
First of, to turn off the red border ( if it’s there at all ) please open the following file:
appdesignfrontenddefaultdefaulttemplatecolorswatchproductviewselection.phtml
and on line 126 of that file, you’ll see a code similar to this:
$(PopUpTextElement).setStyle({ border: ‘1px solid red’, display: ‘block’});
change it to:
$(PopUpTextElement).setStyle({ border: ‘0px solid red’, display: ‘block’});
on line 131 of that file, you’ll see a code similar to this:
$(PopUpTextElement).setStyle({ minWidth: (3*parseInt($(element).getWidth()))+’px’ });
Change it to:
//$(PopUpTextElement).setStyle({ minWidth: (3*parseInt($(element).getWidth()))+’px’ });
( yes, comment that line out )
Now, add some simple styling to your .css file:
All pop up boxes are div’s with a class of popup-div and have a span element in them.
.popup-div{
display:block;
float:left;
border: 2px solid #DDDDDD;
width:56px;
height:56px;
background-color:white;
text-align:center;
}
.popup-div span{
width:56px;
}
Once all that’s done, set the administrative settings to look a bit like this:
And here’s the result:
