0

We are Providing an option for customer to upload product image from frontend.

once we visit product page , we need to click on small image present below Product base image.

enter image description here

Than we need to click on Product image.

enter image description here

than only it will display an option to upload an image below Product Name.

enter image description here

Instead of this what we need is by default it should display an option to upload an image if value of Input Type under "custom options" is Custom Product Preview

enter image description here

initPreview: function()
    {
        var scale = this.option.calcScale(),
            elementId = this.config.previewContainer,
            container = $(elementId),
            c      = this.config,
            area   = c.area,
            thumb  = c.productImage.thumb;
        this.previewScale = scale;

        var areaParams = {
            width : Math.round(area.sizeX   * scale),
            height: Math.round(area.sizeY   * scale),
            left  : Math.round(area.offsetX * scale),
            top   : Math.round(area.offsetY * scale)
        };

        var html =
                '<div class="aitraph aitraph-bot"></div>' +
                '<img class="aitcg_preview_bg" src="' + thumb.fullUrl + '" />'+
                '<div class="aitraph aitraph-top"></div>' +
                '<div class="aitcg-overlay" style="width:'+ thumb.sizeX +'px;height:'+thumb.sizeY+'px;"></div>';
        container.update(html);

        this._showPreviewBlock( container );

        container.observe('click', this.onPreviewClick.bind(this));

        var title         = c.editorEnabled ? c.text.thumbTooltipEdit : c.text.thumbTooltipPreview,
            viewIconClass = c.editorEnabled ? '' : 'view-icon';
        container.select('.aitcg-overlay')[0]
            .observe('mouseover', function(){Aitcg.tooltip().update(title).show()})
            .observe('mouseout', function(){Aitcg.tooltip().hide()})
            .addClassName(viewIconClass);


        var styleParams = Aitcg.addPxToValue(areaParams);
        $$('#' + elementId + ' .aitraph').each( function(element) {
            element.setStyle(styleParams);
        });

        Aitoc_Common_Events.dispatch('aitcg_option_preview_create_after_' + this.id, {element: container});

        this.preview = new Aitcg_Editor(this.option);
        this.preview.init(container, Aitcg_Editor.MODE_PREVIEW, true, this.previewScale);
        this.preview.load( $('options_' + this.id).getValue() );

    },
0

jQuery( "#aitcg_image_container1" ).trigger( "click" ); made the trick.....

 initPreview: function()
        {
            var scale = this.option.calcScale(),
                elementId = this.config.previewContainer,
                container = $(elementId),
                c      = this.config,
                area   = c.area,
                thumb  = c.productImage.thumb;
            this.previewScale = scale;

            var areaParams = {
                width : Math.round(area.sizeX   * scale),
                height: Math.round(area.sizeY   * scale),
                left  : Math.round(area.offsetX * scale),
                top   : Math.round(area.offsetY * scale)
            };

            var html =
                    '<div class="aitraph aitraph-bot"></div>' +
                    '<img class="aitcg_preview_bg" src="' + thumb.fullUrl + '" />'+
                    '<div class="aitraph aitraph-top"></div>' +
                    '<div class="aitcg-overlay" style="width:'+ thumb.sizeX +'px;height:'+thumb.sizeY+'px;"></div>';
            container.update(html);

            this._showPreviewBlock( container );

            container.observe('click', this.onPreviewClick.bind(this));

            var title         = c.editorEnabled ? c.text.thumbTooltipEdit : c.text.thumbTooltipPreview,
                viewIconClass = c.editorEnabled ? '' : 'view-icon';
            container.select('.aitcg-overlay')[0]
                .observe('mouseover', function(){Aitcg.tooltip().update(title).show()})
                .observe('mouseout', function(){Aitcg.tooltip().hide()})
                .addClassName(viewIconClass);


            var styleParams = Aitcg.addPxToValue(areaParams);
            $$('#' + elementId + ' .aitraph').each( function(element) {
                element.setStyle(styleParams);
            });

            Aitoc_Common_Events.dispatch('aitcg_option_preview_create_after_' + this.id, {element: container});

            this.preview = new Aitcg_Editor(this.option);
            this.preview.init(container, Aitcg_Editor.MODE_PREVIEW, true, this.previewScale);
            this.preview.load( $('options_' + this.id).getValue() );
            // jQuery( "#aitcg_image_container1" ).trigger( "click" );
        },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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