Different display by meta fields on different product page

Technical Q&A
1

Hello,

I would like to put some sections with text, image, movie, and slides like this layout as follows.

I named section 1,2,3, for meta fields from the top.

Group 54.png
Group 54.png880×762 202 KB

In this image, I would like to put picture, movie, or slides depending on the product page.

When the movie is applied in the file in the meta field, it doesn’t start and it’s still on the page.

But the images are shown properly.

Also, I don’t know how to set up slides by meta fields.

Can anyone guide me please?

Thank you in advance!

スクリーンショット 2022-12-22 19.15.07.png
スクリーンショット 2022-12-22 19.15.07.png2880×1800 440 KB

2

You want to create the desired layout with sections containing text, images, videos, and slides, you can utilize a combination of HTML, CSS, and JavaScript. Here’s a step-by-step guide:

<!DOCTYPE html>

<html

lang="en">

<head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width, initial-scale=1.0">

<title>Dynamic Product Page Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="product-page">
        <div class="section" id="section1">
            <h2 class="section-title">Section 1</h2>
            <p class="section-text">Product description for Section 1</p>
            <div class="media-container">
                </div>
        </div>

        <div class="section" id="section2">
            <h2 class="section-title">Section 2</h2>
            <p class="section-text">Product description for Section 2</p>
            <div class="media-container">
                </div>
        </div>

        <div class="section" id="section3">
            <h2 class="section-title">Section 3</h2>
            <p class="section-text">Product description for Section 3</p>
            <div class="media-container">
                </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Use code with caution.

  1. CSS Styling: Define the CSS styles to control the layout and appearance of the product page:

CSS

.product-page {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
}

.section-text {
    font-size: 16px;
    margin-bottom: 10px;
}

.media-container {
    width: 100%;
    height: 300px;
    background-color: #eee;
}

.media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Use code with caution.

  1. JavaScript Implementation: Use JavaScript to dynamically inject images, videos, or slides based on the meta field values.

JavaScript

const metaFields = {
    section1: {
        mediaType: 'image',
        mediaSrc: 'https://example.com/product1.jpg'
    },
    section2: {
        mediaType: 'video',
        mediaSrc: 'https://example.com/product2.mp4'
    },
    section3: {
        mediaType: 'slides',
        mediaSrc: [
            'https://example.com/slide1.jpg',
            'https://example.com/slide2.jpg',
            'https://example.com/slide3.jpg'
        ]
    }
};

for (const sectionId in metaFields) {
    const section = document.getElementById(sectionId);
    const mediaContainer = section.querySelector('.media-container');

    if (metaFields[sectionId].mediaType === 'image') {
        const imageElement = document.createElement('img');
        imageElement.src=metaFields[sectionId].mediaSrc;
        mediaContainer.appendChild(imageElement);
    } else if (metaFields[sectionId].mediaType === 'video') {
        const videoElement = document.createElement('video');
        videoElement.controls = true;
        videoElement.src=metaFields[sectionId].mediaSrc;
        mediaContainer.appendChild(videoElement);
    } else if (metaFields[sectionId].mediaType === 'slides') {
        // Implement slides functionality using a carousel library or custom JavaScript
    }
}

follow this code to create the section for movies, videos and slides.