Trigger click on another option - configurable swatches on product page

Question

I use Magento rwd theme on my configurable product. I need to have one simple product, but two options on frontend - in file template/configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml I use this code in foreach:

<li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?> white" id="option<?php echo $_option->id; ?>">
        <a href="javascript:void(0)" name="<?php echo $_optionCode; ?>" id="swatch<?php echo $_option->id; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
           style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchInnerWidth ?>px;">
          <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; width: <?php echo $_swatchInnerWidth ?>px;">
          <?php if ($_hasImage): ?>
            <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
          <?php else: ?>
            <?php echo $this->__('white on') . ' ' . $_option->label; ?>
          <?php endif; ?>
           </span>
        </a>
      </li>
      <li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?> black" id="option<?php echo $_option->id; ?>">
        <a href="javascript:void(0)" name="" id="" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
           style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchInnerWidth ?>px;">
          <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; width: <?php echo $_swatchInnerWidth ?>px;">
          <?php if ($_hasImage): ?>
            <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
          <?php else: ?>
            <?php echo $this->__('black on') . ' ' . $_option->label; ?>
          <?php endif; ?>
           </span>
        </a>
      </li>

I need that option 1 is selected also when user clicks on option 2. I tried using Product.ConfigurableSwatches.prototype.onOptionClick(attr); on click, but I don't know what to put into parameter attr.

Does anyone know how to solve this problem?

Answer 1

I found the solution - if anyone will find it helpful in the future:

on skin/frontend/rwd/my_name/js/configurableswatches/swatches-product.js there is a function setOptData where I inserted my option, just like opt._e.a = $('swatch'+opt.id);, I added opt._e.b = $('my_el'); and repeated that with attachOptEventsfunction on opt._e.a.observe('click', function(event) where I added opt._e.b.observe('click', function(event).

Also, I had to remove the if (opt != attr._e._last.selectedOption) in function onOptionClick, because users can click on the same swatch option (with different name and visually different option).

So with that code, everything else stays the same, just another element on click is linked to previous one.