wordpress and elementor create buttons and popups with dynamic content

adschimmo · Feb 25, 2025

I want to make a page on wordpress and use elementor. Description: the page will have many sections. With 1 section is the title of an article and 1 "BUY NOW" button on the right of each title
When I press the first BUY NOW button, a popup and information of title 1 will appear
And when I press the second BUY NOW button, the popup will still appear but the content is of the second title
And the other buttons are the same. It's still the same popup but the content has changed
I asked ChatGPT but couldn't help. Hope you guys can help me

CodiBot · Feb 25, 2025

https://elementor.com/help/popups/

In the popup template, use dynamic tags to display the article information. You can use custom fields or ACF (Advanced Custom Fields) to store the article details.
To pass the specific article information to the popup, you will need to use custom attributes or JavaScript to dynamically update the popup content based on which button is clicked.

Code:

// JavaScript to dynamically update popup content
jQuery(document).ready(function($) {
    $('.buy-now-button').on('click', function() {
        var articleTitle = $(this).data('title');
        var articleContent = $(this).data('content');
        
        // Update the popup content
        $('#popup-title').text(articleTitle);
        $('#popup-content').text(articleContent);
        
        // Open the popup
        elementorProFrontend.modules.popup.showPopup({ id: 'your-popup-id' });
    });
});

And in your Elementor page, set custom attributes for each button:

Code:

<a class="elementor-button buy-now-button" data-title="Article 1" data-content="Content of Article 1">BUY NOW</a>
<a class="elementor-button buy-now-button" data-title="Article 2" data-content="Content of Article 2">BUY NOW</a>
<!-- Repeat for other buttons -->

adschimmo · Feb 25, 2025

kilroy said:
https://elementor.com/help/popups/

Trong mẫu bật lên, sử dụng thẻ động để hiển thị thông tin bài viết. Bạn có thể sử dụng các trường tùy chỉnh hoặc ACF (Trường tùy chỉnh nâng cao) để lưu trữ chi tiết bài viết.
Để chuyển thông tin bài viết cụ thể cho cửa sổ bật lên, bạn sẽ cần sử dụng các thuộc tính tùy chỉnh hoặc JavaScript để tự động cập nhật nội dung cửa sổ bật lên dựa trên nút nào được nhấp.

Code:

// JavaScript để tự động cập nhật nội dung bật lên jQuery (document) . yet (function ($) { $('.buy-now-button') .on ('nhấp chuột', function () { var articleTitle = $(this) .data ('title'); var articleContent = $(this) .data ('nội dung'); // Cập nhật nội dung bật lên $('# popup-title') .text (articleTitle); $('#popup-content') .text (articleContent); // Mở cửa sổ bật lên ElementorProFrontend.modules.popup.showPopup ({ id: 'your-popup-id' }); }); }); [/ MÃ] Và trong trang Elementor của bạn, đặt các thuộc tính tùy chỉnh cho từng nút: [CODE] < một lớp = dữ liệu "nút mua-nút-nút" tiêu đề dữ liệu = "Điều 1" = "Nội dung của Điều 1" > MUA NGAY < / a > <một lớp = "nút bổ sung mua-nút" tiêu đề dữ liệu = "Điều 2" nội dung dữ liệu = "Nội dung của Điều 2" > MUA NGAY < / a > <! - Lặp lại cho các nút khác - > [/ MÃ] [/QUOTE] Cảm ơn bạn đã hướng dẫn, tôi sẽ thử và cập nhật lại

Emma xx · Mar 4, 2025

Instead of a single popup, have you considered using Elementor's accordion or tabs widget? It might be easier to manage all those different content sections.

wordpress and elementor create buttons and popups with dynamic content

adschimmo

BANNED

Attachments

CodiBot

BANNED - Failed to resolve a dispute

adschimmo

BANNED

Emma xx

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World