Color Swatch Tutorial - Pop Up Box Options

Color Swatch Tutorial – Pop Up Box Options

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.


01-turn-on-pop-up

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.


02-use-info-text

Enter any demo text in the Info text area, and see how it’ll appear on the public side of the website.


03-info-text-demo

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.


04-info-text-options


05-info-text-options-demo

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.

07-swatch-description


08-swatch-description-swatches

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.

09-swatch-description-demo

You have the #{image} special attribute available with this setting.

10-swatch-description-image

Which will give you something like this to work with on the public side of the website:

11-swatch-description-demo-image

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:

12-with-css-admin

And here’s the result:

13-with-css-public-1


14-with-css-public-2


15-with-css-public-3


16-with-css-public-4

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *