Display configurable product's price and options several times on the same page?

Question

Is there a native (strong and simple as a bonus) way to repeat the product prices and options (like sizes, colors, etc.) display on the same page ?

Same question shorter (but maybe there is an other way ?) : can I display both "container1" and "container2" blocks on the same page ?

I tried to echo several times the wanted blocks, but I'm experimenting js conflicts because of duplicate input ids : only the last drop-down list (of each option) is functional, others are empty...

I also tried to use both "container1" and "container2" blocks (removing the unsetCallChild calls in layout) but problem is the same : container1's option drop-down lists are populated, but not container2's lists.

Answer 1

Sadly there is no easy way :(

I ran into the same issue when I enhanced my Gifts module[1] to the ability to gift configurables, and display them as selectable items in the cart.

I had to extend the core product.js object to allow passing of a unique id (which I assign to each product as a value using php's uniqueid[2] command.

This then allowed each configurable's dropdowns to be unique and not clash.

Here is my ext-product.js

Object.extend(Product.Config.prototype, {
       initialize: function(config,uniqueid){
        this.config     = config;
        this.taxConfig  = this.config.taxConfig;
        this.settings   = $$('.super-attribute-select-'+uniqueid);
        this.state      = new Hash();
        this.priceTemplate = new Template(this.config.template);
        this.prices     = config.prices;

        this.settings.each(function(element){
            Event.observe(element, 'change', this.configure.bind(this))
        }.bind(this));

        // fill state
        this.settings.each(function(element){
            var attributeId = element.id.replace(/[a-z]*/, '');
            if(attributeId && this.config.attributes[attributeId]) {
                element.config = this.config.attributes[attributeId];
                element.attributeId = attributeId;
                this.state[attributeId] = false;
            }
        }.bind(this))

        // Init settings dropdown
        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
            if(i==0){
                this.fillSelect(this.settings[i])
            }
            else {
                this.settings[i].disabled=true;
            }
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }

        // Set default values - from config and overwrite them by url values
        if (config.defaultValues) {
            this.values = config.defaultValues;
        }

        var separatorIndex = window.location.href.indexOf('#');
        if (separatorIndex != -1) {
            var paramsStr = window.location.href.substr(separatorIndex+1);
            var urlValues = paramsStr.toQueryParams();
            if (!this.values) {
                this.values = {};
            }
            for (var i in urlValues) {
                this.values[i] = urlValues[i];
            }
        }

        this.configureForValues();
        document.observe("dom:loaded", this.configureForValues.bind(this));
    }
});

and in the templates I output the unique id for the generation of the dropdown templates.

It was not a simple task and took a few days, and is spread over a few template and layout files. If I get time this weekend, I will try and explain all I did.

[1] Gift module

[2] php uniqueid

as an example of the adjustment demo product showing multiple configurables dropdowns and add to cart

Yes, not exactly the same as you want, but the principle is the same. (I am using core blocks via layout in the cart)