简单灯箱中的Wordpress简码

Question

当客户在WooCommerce中将产品添加到购物车中时，我正在使用以下代码来显示灯箱。它可以工作，但是问题是我需要在灯箱中显示一个简码或PHP，而不能使其与标准的do_shortcode一起使用。

现在它只显示一个简单的文本，但是我需要显示更多信息，例如产品名称，图像和东西。是否可以分离灯箱标记，因此它不是直接出现在jQuery代码中，而是分开存在，因此我可以使用普通的HTML / PHP？

任何帮助将不胜感激。

这是我的代码：

jQuery(document).ready(function($) {

    $('body').on('added_to_cart', function(e) {

        //prevent default action (hyperlink)
        e.preventDefault();

        //Get clicked link href
        var image_href = $(this).attr("href");

        /*  
        If the lightbox window HTML already exists in document, 
        change the img src to to match the href of whatever link was clicked

        If the lightbox window HTML doesn't exists, create it and insert it.
        (This will only happen the first time around)
        */

        if ($('#lightbox').length > 0) { // #lightbox exists

            //place href as img src value
            $('#content').html('<img src="' + image_href + '" />');

        }

        else { //#lightbox does not exist - create and insert (runs 1st time only)

            //create HTML markup for lightbox window
            var lightbox = 
            '<div id="lightbox" style="display:none">' +
                '<div id="content">' + //insert clicked link's href into img src woocommerce_bought_together
                    '<p>Produktet blev tilføjet til kurven!</p>' + 
                '</div>' +  
            '</div>';

            //insert lightbox HTML into page
            $('body').append(lightbox);
        }
        //show lightbox window
        $('#lightbox').fadeIn(200);

    });

    //Click anywhere on the page to get rid of lightbox window
    $(document).on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
        $('#lightbox').fadeOut(100);
    });
});

和CSS：

#content {
height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    #lightbox {
            /* keeps the lightbox window in the current viewport. position:fixed makes our overlay appear correctly in the current viewport, no matter the user’s position on screen (top or bottom of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won’t appear correctly.  */
            position:fixed; /* keeps the lightbox window in the current viewport */
            top:0; 
            left:0; 
            /* This makes our #lightbox div, which acts as the black overlay, cover the entire viewport no matter the end user’s screen resolution */
            width:100%; 
            height:100%; 
            background: rgba(0,0,0,.5); 
            text-align:center;
            z-index:9999;
            }
        /* we will add some text in the lightbox overlay stating they can click anywhere to have the lightbox window disappear */
        #lightbox p { 
            text-align:right;
            margin-right:20px;
            font-size:12px;
            width: 600px;
text-align: center;
background: #fff;
color: #000;
padding: 20px;
border-radius: 5px;
            }
        #lightbox img {
            box-shadow:0 0 25px #111;
            -webkit-box-shadow:0 0 25px #111;
            -moz-box-shadow:0 0 25px #111;
            /* Adding a max-width will shrink any high-resolution images we might be linking to. This helps to ensure all images fit into the viewport. */
            max-width:940px;
            }