Gala_Colorswatches - Version 1.0.4

Version Notes

Ver 1.0.4 - 09/20/2011
- Added CSS
- Fixed IE js error

First Release - 09/02/2011

Download this release

Release Info

Developer Magento Core Team
Extension Gala_Colorswatches
Version 1.0.4
Comparing to
See all releases


Code changes from version 1.0.3 to 1.0.4

Files changed (4) hide show
  1. app/design/frontend/base/default/layout/em_colorswatches.xml +4 -1
  2. app/design/frontend/base/default/template/em_colorswatches/settings.phtml +91 -38
  3. package.xml +9 -5
  4. skin/frontend/base/default/css/em_colorswatches.css +5 -0
app/design/frontend/base/default/layout/em_colorswatches.xml CHANGED
@@ -33,11 +33,14 @@ Default layout, loads most of the pages
33
  -->
34
 
35
  <catalog_product_view translate="label">
 
 
 
36
  <reference name="product.info.options.wrapper">
37
  <block type="colorswatches/settings" name="colorswatches.setting" template="em_colorswatches/settings.phtml"/>
38
  </reference>
39
  <reference name="before_body_end">
40
- <block type="core/text" name="colorswatches.copy">
41
  <action method="setText"><text><![CDATA[<p style="text-align:center;font-size:0.8em"><a style="color:inherit;text-decoration:none" href="http://galathemes.com/magento-extensions/color-swatches.html">Color Swatches Magento extension</a> by Galathemes <a style="color:inherit;text-decoration:none" href="http://galathemes.com/">Magento Themes</a></p>]]></text></action>
42
  </block>
43
  </reference>
33
  -->
34
 
35
  <catalog_product_view translate="label">
36
+ <reference name="head">
37
+ <action method="addCss"><stylesheet>css/em_colorswatches.css</stylesheet></action>
38
+ </reference>
39
  <reference name="product.info.options.wrapper">
40
  <block type="colorswatches/settings" name="colorswatches.setting" template="em_colorswatches/settings.phtml"/>
41
  </reference>
42
  <reference name="before_body_end">
43
+ <block type="core/text" name="galathemes.copy">
44
  <action method="setText"><text><![CDATA[<p style="text-align:center;font-size:0.8em"><a style="color:inherit;text-decoration:none" href="http://galathemes.com/magento-extensions/color-swatches.html">Color Swatches Magento extension</a> by Galathemes <a style="color:inherit;text-decoration:none" href="http://galathemes.com/">Magento Themes</a></p>]]></text></action>
45
  </block>
46
  </reference>
app/design/frontend/base/default/template/em_colorswatches/settings.phtml CHANGED
@@ -4,76 +4,129 @@ $swatches = $this->get_option_swatches();
4
  <!-- GALATHEMES: COLOR SWATCHES -->
5
  <script type="text/javascript">
6
  document.observe('dom:loaded', function() {
7
- var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;
 
8
 
9
- function find_swatch(key, value) {
10
- for (var i in swatches) {
11
- if (swatches[i].key == key && swatches[i].value == value)
12
- return swatches[i];
 
 
13
  }
14
- return null;
15
- }
16
 
17
- function has_swatch_key(key) {
18
- for (var i in swatches) {
19
- if (swatches[i].key == key)
20
- return true;
 
 
21
  }
22
- return false;
23
- }
24
 
25
- $$('#product-options-wrapper dt').each(function(dt) {
26
-
27
- // get custom option's label
28
- var label = '';
29
- $A(dt.down('label').childNodes).each(function(node) {
30
- if (node.nodeType == 3) label += node.nodeValue;
31
- });
32
- label = label.trim();
33
-
34
- var dd = dt.next();
35
- var select = dd.down('select');
36
- if (select && has_swatch_key(label)) {
37
-
38
  // create swatches div, and append below the <select>
39
  var sw = new Element('div', {'class': 'swatches-container'});
40
  select.up().appendChild(sw);
41
-
 
 
 
 
42
  // hide select
43
  select.setStyle({position: 'absolute', top: '-9999px'})
44
-
45
  $A(select.options).each(function(opt, i) {
46
- if (opt.value) {
47
  var elm;
48
- var key = opt.innerHTML.trim();
49
-
50
  // remove price
51
- if (opt.getAttribute('price')) key = key.replace(/\+([^+]+)$/, '').trim();
52
-
53
  var item = find_swatch(label, key);
54
  if (item)
55
  elm = new Element('img', {
56
- src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>colors_watches/'+item.img,
57
  alt: opt.innerHTML,
58
  title: opt.innerHTML,
59
  'class': 'swatch-img'});
60
  else {
61
- elm = new Element('span', {'class': 'swatch-span'});
 
62
  elm.update(opt.innerHTML);
63
  }
64
  elm.observe('click', function(event) {
65
  select.selectedIndex = i;
 
66
  var cur = sw.down('.current');
67
  if (cur) cur.removeClassName('current');
68
  elm.addClassName('current');
69
- })
70
  sw.appendChild(elm);
71
  }
72
  });
73
-
74
  }
75
- });
76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  });
79
  </script>
4
  <!-- GALATHEMES: COLOR SWATCHES -->
5
  <script type="text/javascript">
6
  document.observe('dom:loaded', function() {
7
+ try {
8
+ var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;
9
 
10
+ function find_swatch(key, value) {
11
+ for (var i in swatches) {
12
+ if (swatches[i].key == key && swatches[i].value == value)
13
+ return swatches[i];
14
+ }
15
+ return null;
16
  }
 
 
17
 
18
+ function has_swatch_key(key) {
19
+ for (var i in swatches) {
20
+ if (swatches[i].key == key)
21
+ return true;
22
+ }
23
+ return false;
24
  }
 
 
25
 
26
+ function create_swatches(label, select) {
 
 
 
 
 
 
 
 
 
 
 
 
27
  // create swatches div, and append below the <select>
28
  var sw = new Element('div', {'class': 'swatches-container'});
29
  select.up().appendChild(sw);
30
+
31
+ // store these element to use later for recreate swatches
32
+ select.swatchLabel = label;
33
+ select.swatchElement = sw;
34
+
35
  // hide select
36
  select.setStyle({position: 'absolute', top: '-9999px'})
37
+
38
  $A(select.options).each(function(opt, i) {
39
+ if (opt.getAttribute('value')) {
40
  var elm;
41
+ var key = trim(opt.innerHTML);
42
+
43
  // remove price
44
+ if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$/, ''));
45
+
46
  var item = find_swatch(label, key);
47
  if (item)
48
  elm = new Element('img', {
49
+ src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>swatches/'+item.img,
50
  alt: opt.innerHTML,
51
  title: opt.innerHTML,
52
  'class': 'swatch-img'});
53
  else {
54
+ console.debug(label, key, swatches);
55
+ elm = new Element('a', {'class': 'swatch-span'});
56
  elm.update(opt.innerHTML);
57
  }
58
  elm.observe('click', function(event) {
59
  select.selectedIndex = i;
60
+ fireEvent(select, 'change');
61
  var cur = sw.down('.current');
62
  if (cur) cur.removeClassName('current');
63
  elm.addClassName('current');
64
+ });
65
  sw.appendChild(elm);
66
  }
67
  });
 
68
  }
 
69
 
70
+ function recreate_swatches_recursive(select) {
71
+ // remove the old swatches
72
+ if (select.swatchElement) {
73
+ select.up().removeChild(select.swatchElement);
74
+ select.swatchElement = null;
75
+ }
76
+
77
+ // create again
78
+ if (!select.disabled)
79
+ create_swatches(select.swatchLabel, select);
80
+
81
+ // recursively recreate swatches for the next select
82
+ if (select.nextSetting)
83
+ recreate_swatches_recursive(select.nextSetting);
84
+ }
85
+
86
+ function fireEvent(element,event){
87
+ if (document.createEventObject){
88
+ // dispatch for IE
89
+ var evt = document.createEventObject();
90
+ return element.fireEvent('on'+event,evt)
91
+ }
92
+ else{
93
+ // dispatch for firefox + others
94
+ var evt = document.createEvent("HTMLEvents");
95
+ evt.initEvent(event, true, true ); // event type,bubbling,cancelable
96
+ return !element.dispatchEvent(evt);
97
+ }
98
+ }
99
 
100
+ function trim(str) {
101
+ return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
102
+ }
103
+
104
+
105
+ $$('#product-options-wrapper dt').each(function(dt) {
106
+
107
+ // get custom option's label
108
+ var label = '';
109
+ $A(dt.down('label').childNodes).each(function(node) {
110
+ if (node.nodeType == 3) label += node.nodeValue;
111
+ });
112
+ label = trim(label);
113
+
114
+ var dd = dt.next();
115
+ var select = dd.down('select');
116
+ if (select && has_swatch_key(label)) {
117
+ create_swatches(label, select);
118
+
119
+ // if configurable products, recreate swatches of the next select when the current select change
120
+ if (select.hasClassName('super-attribute-select')) {
121
+ select.observe('change', function() {
122
+ recreate_swatches_recursive(select.nextSetting);
123
+ });
124
+ }
125
+ }
126
+ });
127
+ }
128
+ catch(e) {
129
+ alert("Color Swatches javascript error. Please report this error to support@galathemes.com. Error:" + e.message);
130
+ }
131
  });
132
  </script>
package.xml CHANGED
@@ -1,18 +1,22 @@
1
  <?xml version="1.0"?>
2
  <package>
3
  <name>Gala_Colorswatches</name>
4
- <version>1.0.3</version>
5
  <stability>stable</stability>
6
  <license uri="http://galathemes.com/license.html">Commercial</license>
7
  <channel>community</channel>
8
  <extends/>
9
  <summary>Gala Color Swatches Magento Extension</summary>
10
  <description>Color Swatches Magento Extensions, transform drop-down custom options to swatches, it supports all type of products such as simple product, configurable products...</description>
11
- <notes>First Release - 09/02/2011</notes>
 
 
 
 
12
  <authors><author><name>galathemes</name><user>auto-converted</user><email>contact@galathemes.com</email></author></authors>
13
- <date>2011-09-01</date>
14
- <time>13:11:37</time>
15
- <contents><target name="magemedia"><dir name="colors_watches"><file name="9.jpg" hash="f836843f7c41cfcbc3bb9ad060340d3d"/><file name="10.jpg" hash="682a217b52553b0b836bb670393ab07c"/><file name="11.jpg" hash="3a4f381f2c63cb74d44833345d9e7587"/><file name="12.jpg" hash="50071c7dcc1f1d06ace20eee30ad00b0"/><file name="95.jpg" hash="1ca78c083d6445af4907e5a03eb17bfa"/><file name="105.jpg" hash="f5e2faba89dcda154f57db8f0a5458f0"/><file name="color-black.png" hash="b7e2043b596a4c16e98394e5e0e0bb61"/><file name="color-yellow.png" hash="b7e2043b596a4c16e98394e5e0e0bb61"/></dir></target><target name="magecommunity"><dir name="EM"><dir name="Colorswatches"><dir name="Block"><file name="Settings.php" hash="934e26bae7e4eb8c485d9e1624e912ef"/></dir><dir name="etc"><file name="config.xml" hash="42ac94059dc34cfdd7187b8f36abc496"/><file name="system.xml" hash="06ea7e33de7cfd4bcfd802f18cda1eec"/></dir><dir name="Helper"><file name="Data.php" hash="e90743912e617d9a91f9e94fa97eb6fc"/></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="base"><dir name="default"><dir name="layout"><file name="em_colorswatches.xml" hash="47de324772962de44f467bc05043e6eb"/></dir><dir name="template"><dir name="em_colorswatches"><file name="settings.phtml" hash="028ea968383bf700915099f791abae0f"/></dir></dir></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="EM_Colorswatches.xml" hash="28c2dfd0b5e565ee1765e6f9fd29e7a0"/></dir></target></contents>
16
  <compatible/>
17
  <dependencies/>
18
  </package>
1
  <?xml version="1.0"?>
2
  <package>
3
  <name>Gala_Colorswatches</name>
4
+ <version>1.0.4</version>
5
  <stability>stable</stability>
6
  <license uri="http://galathemes.com/license.html">Commercial</license>
7
  <channel>community</channel>
8
  <extends/>
9
  <summary>Gala Color Swatches Magento Extension</summary>
10
  <description>Color Swatches Magento Extensions, transform drop-down custom options to swatches, it supports all type of products such as simple product, configurable products...</description>
11
+ <notes>Ver 1.0.4 - 09/20/2011
12
+ - Added CSS
13
+ - Fixed IE js error
14
+
15
+ First Release - 09/02/2011</notes>
16
  <authors><author><name>galathemes</name><user>auto-converted</user><email>contact@galathemes.com</email></author></authors>
17
+ <date>2011-09-20</date>
18
+ <time>13:16:40</time>
19
+ <contents><target name="magemedia"><dir name="colors_watches"><file name="9.jpg" hash="f836843f7c41cfcbc3bb9ad060340d3d"/><file name="10.jpg" hash="682a217b52553b0b836bb670393ab07c"/><file name="11.jpg" hash="3a4f381f2c63cb74d44833345d9e7587"/><file name="12.jpg" hash="50071c7dcc1f1d06ace20eee30ad00b0"/><file name="95.jpg" hash="1ca78c083d6445af4907e5a03eb17bfa"/><file name="105.jpg" hash="f5e2faba89dcda154f57db8f0a5458f0"/><file name="color-black.png" hash="b7e2043b596a4c16e98394e5e0e0bb61"/><file name="color-yellow.png" hash="b7e2043b596a4c16e98394e5e0e0bb61"/></dir></target><target name="magecommunity"><dir name="EM"><dir name="Colorswatches"><dir name="Block"><file name="Settings.php" hash="934e26bae7e4eb8c485d9e1624e912ef"/></dir><dir name="etc"><file name="config.xml" hash="42ac94059dc34cfdd7187b8f36abc496"/><file name="system.xml" hash="06ea7e33de7cfd4bcfd802f18cda1eec"/></dir><dir name="Helper"><file name="Data.php" hash="e90743912e617d9a91f9e94fa97eb6fc"/></dir></dir></dir></target><target name="mageskin"><dir name="frontend"><dir name="base"><dir name="default"><dir name="css"><file name="em_colorswatches.css" hash="525694144497b548902e7ddfe2389c14"/></dir></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="base"><dir name="default"><dir name="layout"><file name="em_colorswatches.xml" hash="005523237754c4e581cea60b7b808b65"/></dir><dir name="template"><dir name="em_colorswatches"><file name="settings.phtml" hash="3566639f48b490fc5a15ba0271b195d8"/></dir></dir></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="EM_Colorswatches.xml" hash="28c2dfd0b5e565ee1765e6f9fd29e7a0"/></dir></target></contents>
20
  <compatible/>
21
  <dependencies/>
22
  </package>
skin/frontend/base/default/css/em_colorswatches.css ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
1
+ .swatches-container .swatch-img,
2
+ .swatches-container .swatch-span { margin:0 2px 2px 0; }
3
+ .swatches-container .swatch-img { border:1px solid #eee; }
4
+ .swatches-container .swatch-img.current { border:1px solid #333; }
5
+ .swatches-container .swatch-span { }