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.


1 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;

            Event.observe(element, 'change', this.configure.bind(this))

        // fill state
            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;

        // 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;
            else {
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;

        // 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];

        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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.