modal product popup changes main product

A modal product panel will visually change the parent product price details.

Steps to reproduce:

  1. Using the demo store as a test case, set 'Product Modal Window' to true in the Appearance control panel
  2. Go to the full page for the Green Duck
  3. Notice the price: 22 + 2 tax
  4. Click the Yellow Duck to view the modal popup
  5. Poke at the price changing options
  6. >Through the haze, one can observe the Green Duck's price changing as well
  7. Close the modal popup
  8. >The Green Duck price has retained Yellow's price and tax information
  9. >Manipulating Green will retain the base price of Yellow, but use the option values as shown
  10. Add to cart properly uses the original 22 price information

This appears to be a purely visual oddity of using the modal window, as the underlying JS refers to the #box_product id; which is duplicated by the modal popup.  This duplication seems to overwrite the variables and methods called when updating the main product after having opened a modal window.  The cart backend appears unaffected and the add-to-cart functionality properly uses the database information.  And, as such, it is reported here for a record of observation and notes of causes/workarounds.

A short-term 'fix' is to catch the ajax calls via the pages/product.ajax template file and modify the resultant html/JS to not broadly reference $("#box-product") id, but rather the id inside the modal frame: $(".featherlight-content #box-product").  Of course, this does not change the fact that the id now exists in two places in the dom.

The 'better', but more intensive fix is to pass a whole different id (#ajax-box-product) instead into the 'view' via a snippet, and modifying the view to build around a passed id value.  The additional css is easy enough by adding the alternative id to the Less file(s) and re-outputting.  This is just one id duplicated in such a manner.
In includes/templates/default.catalog/views/box_product.inc.php. Try replacing

    $('#box-product .regular-price').text(regular_price.toMoney());
    $('#box-product .campaign-price').text(sales_price.toMoney());
    $('#box-product .price').text(sales_price.toMoney());
    $('#box-product .total-tax').text(tax.toMoney());

With

    $(this).find('.regular-price').text(regular_price.toMoney());
    $(this).find('.campaign-price').text(sales_price.toMoney());
    $(this).find('.price').text(sales_price.toMoney());
    $(this).find('.total-tax').text(tax.toMoney());

I have not tested the code.