Customize Product Page

#1

Hi,

Is it possible to customize the product page?

For example I want to convert the main image part to be a slider/carousel, cycling through the images added in the Images section.

Also, is it possible to add a new tab/section in the single product page?

Please see below image for reference

Any help would be appreciated.

Thanks!

0 Likes

#2

Hi octosa,
Yes, it is possible to cycle through the images added in the Images section, but for it additional programming is needed.
You can add new item following the instructions:
open Entity Manager in Administration, and create a new entity.
After that click on Relationships near the Product Entity. Click on Create Link and choose in the Foreign Entity the entity which should be linked with Product entity (the entity you created). Choose the link type (for example One To Many - if this entity should have many items). After that go to the Layout Manager in the Administration, click on Product - Bottom Panels, and drag and drop your new entity from “disabled” to “enabled”.

1 Like

#3

Hi Tetiana,

Thanks for the reply! I’ll experiment on the new entity.

As for the cycling images, can you tell me which file or template I have to edit?
I happened to have some knowledge about HTML/CSS/Javascript/jQuery, but I’m not familiar with the files and folder structure of TreoPIM

Thanks!

0 Likes

#4

Here you can change CSS: https://i.imgur.com/5PHWkvB.png
And here JS: https://i.imgur.com/laxu8o0.png

1 Like

#5

Hi tetiana,

Thank for the help, I have successfully created a new tab/section on the product detail page.

For the cycling images, I’ve managed to get the images details into an array variable. But it seems it has its own function to generate the new image URL, not by an absolute url directing to the image/asset.

    getMainImage() {
        if (this.model.id) {
            this.ajaxGetRequest(`Product/${this.model.id}/productImages`, {
                maxSize: 10,
                offset: 0
            })
            .then(data => {
                console.log("data", data);
                if (data.list.length) {
                    // converting the images detail to an array
                    for(let i=0; i<data.list.length; i++){
                        this.urlImage.push(data.list[i].imageLink);
                        this.imageId.push(data.list[i].imageId);
                        this.imageName.push(data.list[i].imageName);
                    }
                    // old code
                    // this.urlImage = data.list[0].imageLink;
                    // this.imageId = data.list[0].imageId;
                    // this.imageName = data.list[0].imageName;
                    
                    console.log("urlImage", this.urlImage)
                    console.log("imageId", this.imageId)
                    console.log("imageName", this.imageName)
                } else {
                    this.urlImage = null;
                    this.imageId = null;
                    this.imageName = null;
                }
                this.model.trigger('main-image-updated');
                this.reRender();
            })
        }
    },

After the above function, the images details is passed to the getValueForDisplay() function, am I right? I tried to output the image by using the following code, and I got no results

    getValueForDisplay() {
        let imageSize = [];

        if (this.sizeImage.hasOwnProperty(this.previewSize)) {
            imageSize = this.sizeImage[this.previewSize]
        } else {
            imageSize = this.sizeImage['small']
        }

        if (!this.imageId && this.urlImage && this.showPreview) {
            return `<div class="attachment-preview">
                        <a data-action="showRemoteImagePreview" href="${this.urlImage}">
                            <img src="${this.urlImage}" style="max-width:${imageSize[0]}px; max-height:${imageSize[1]}px;">
                        </a>
                    </div>`;
        } else {
            // modified image output
            var imgObj = []
            for(let i=0; i<this.imageId.length; i++){
                imgObj.push({
                    [this.idName]: this.imageId[i], 
                    [this.nameName]: this.imageName[i]
                })
            }
            this.model.set(imgObj);
            return Dep.prototype.getValueForDisplay.call(this);
        }
    }

Do you have any documentation or guides on how to custom the output main Image? Or could you help me to output all the images? If all the images have been outputted right, I’ll carry on my own to create the slider.

Thanks!

0 Likes

#6

Hi octosa,
It seems that you wrote the JS code not correctly, the main problem is in the returning of image. Unfortunatly, we do not have the documentation on how to custom the output main image.

0 Likes