• Registered: 2017-03-15
  • Posts: 6

Topic: Purchase URL as modal popup

Looking for some assistance on a way to get my purchase URL page to appear as a modal popup rather than opening a completely new webpage.  Currently I generate a purchase URL for each image which looks like this:

purchaseURL="Cart/ShoppingCart.php?imagename=161210_05124.jpg&galleryname=Gallery Title"

This allows me to pass the image name and Gallery Title to my custom purchase URL which is a PHP page which I'm building as a shopping cart (ShoppingCart.php).  However the functionality of this causes the shopping cart to open a completely new browser tab. I was looking for something closer to the functionality offered by the FotoMoto implementation where the ShoppingCart.PHP is opened as a modal window with the existing gallery still visible to avoid a jarring swith between gallery and shopping cart.  However, I'm not sure how Juicebox is processing the PurchaseURL tag or how it could be formatted to allow this type of functionality. 

I'm actually building the PurchaseURL data programatically from another page although I don't think it impacts this:

<?PHP
$FolderName = $_GET['FolderName'];

$XMLPath = "ClientGalleries/" . $FolderName . "/config.xml";

$xml=simplexml_load_file($XMLPath);

$images = $xml->image;
$xml->addAttribute('folderName','../ClientGalleries/' . $FolderName);
foreach ($images as $image)
{
    echo $xml['galleryTitle'] . "<br>";
    echo $image['imageURL'] . "<br>";
    $imageName = explode("/", $image['imageURL']);
    echo $imageName[1] . "<br>";

    $PurchaseStr = "../../Cart/ShoppingCart.php" . "?imagename=" . $imageName[1] . "&folderName=" . $FolderName. "&galleryName=" . $XML['galleryTitle'];
    echo $PurchaseStr . "<br>";
    $image->addAttribute('purchaseURL', $PurchaseStr);
    $xml->asXML($XMLPath);
}
?>
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Purchase URL as modal popup

However, I'm not sure how Juicebox is processing the PurchaseURL tag or how it could be formatted to allow this type of functionality.

As far as I am aware, Juicebox takes the purchaseURL and uses the JavaScript window.open function to open the URL in a new ('_blank') tab.
Unfortunately, this functionality is hard-coded within the 'juicebox.js' file which is packed and obfuscated and cannot be modified.

The only way I can think of to open a purchaseURL as a modal popup would be to override Juicebox's own handling of the Shopping Cart icon. (You are welcome to try this but please note that such modifications are not officially supported.)
You could then run some custom JavaScript code (to open a modal popup) when the Shopping Cart icon is clicked.
Unfortunately, it is not currently possible to fetch an image's purchaseURL from the gallery's configuration file using the Juicebox-Pro API getImageInfo() method (I have notified the developers of this) but you could parse the file yourself and extract the required purchaseURL manually.

Here's some sample code that should hopefully point you in the right direction and serve as a starting point.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">

    var purchaseURL;

    var strWindowName = 'Shopping Cart';
    var strWindowFeatures = 'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,width=600,height=400';

    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });

    jb.onInitComplete = function() {
        $('.jb-bb-btn-fotomoto').off('click');
        $('.jb-bb-btn-fotomoto').click(function() {
            var windowObjectReference = window.open('about:blank', strWindowName, strWindowFeatures);
            $.get('config.xml', function(data) {
                var index = jb.getImageIndex();
                purchaseURL = $(data).find('image').eq(index - 1).attr('purchaseURL');
            }).done(function() {
                windowObjectReference.location.replace(purchaseURL);
            }).fail(function() {
                windowObjectReference.close();
            });
        });
    };

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
  • Registered: 2015-01-25
  • Posts: 12

Re: Purchase URL as modal popup

Hello racerx2oo3
Hello Steven,

I am very interested by this feature improvement, unable to understand the php, but I will be glad to test and feed back!

Thank You for the work!
Best regards!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Purchase URL as modal popup

@studio tissot mayenfisch

The PHP code provided by the original poster is just racerx2oo3's way of dynamically generating a gallery's 'config.xml' file.
It is not actually part of the suggestion (to have the purchaseURL open in a modal popup). In fact, PHP is not required at all.

To see my code in action, just create a sample gallery with JuiceboxBuilder-Pro, add some purchaseURLs to the gallery's 'config.xml' file (you'll need to do this manually in a plain text editor... please see here for details) and replace the gallery's embedding code in the 'index.html' file with the code I posted above.

  • Registered: 2017-03-15
  • Posts: 6

Re: Purchase URL as modal popup

Steven,

I'm finally getting around to working on this portion of the shopping cart system. I'm pretty sure I understand how your code sample is working.  Is there a template file I can modify so that my galleries are built with the modifed code included, or will I have to hand modify each gallery after it's built?

Thanks

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Purchase URL as modal popup

You could modify the template 'index.html' file that JuiceboxBuilder-Pro uses to generate the gallery's 'index.html' file.
On a Windows PC, this template file is located here: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
Try replacing the contents of this template file with the following. (I would strongly suggest that you take a backup of the original template file first, just in case anything goes wrong and you need to reinstate it at a later date.)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>%%TITLE%%</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="description" content="%%DESCRIPTION%%" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="%%TITLE%%" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="%%GALLERY_URL%%" />
    <meta property="og:image" content="%%IMAGE_URL%%" />
    <meta property="og:description" content="%%DESCRIPTION%%" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script type="text/javascript">

        var purchaseURL;

        var strWindowName = 'Shopping Cart';
        var strWindowFeatures = 'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,width=600,height=400';

        var jb = new juicebox({
            containerId: "juicebox-container",
            galleryWidth: '%%WIDTH%%',
            galleryHeight: '%%HEIGHT%%',
            backgroundColor: '%%COLOR%%'
        });

        jb.onInitComplete = function() {
            $('.jb-bb-btn-fotomoto').off('click');
            $('.jb-bb-btn-fotomoto').click(function() {
                var windowObjectReference = window.open('about:blank', strWindowName, strWindowFeatures);
                $.get('config.xml', function(data) {
                    var index = jb.getImageIndex();
                    purchaseURL = $(data).find('image').eq(index - 1).attr('purchaseURL');
                }).done(function() {
                    windowObjectReference.location.replace(purchaseURL);
                }).fail(function() {
                    windowObjectReference.close();
                });
            });
        };

    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>
  • Registered: 2017-03-15
  • Posts: 6

Re: Purchase URL as modal popup

Thanks. If I succeed in getting the custom shopping cart to work in a modal window, I'll post back to the thread in case anyone is interested in doing something similar.

  • Registered: 2015-01-25
  • Posts: 12

Re: Purchase URL as modal popup

Hello racerx2003,
Hello Steven
Yes I am also interested! let me know, I will try it on my side and provide feedback!

Thank You & best regards!

David

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Purchase URL as modal popup

@racerx2oo3 & @studio tissot mayenfisch

Thanks for offering to share your solutions and feedback!
I hope you get on well with your implementations.

  • Registered: 2017-03-15
  • Posts: 6

Re: Purchase URL as modal popup

Steven,

I've been able to implement 90% of a modal shopping cart. One last issue is holding me up. I used your code above as a guideline, however I'm unable to avoid the default click behavior on the fotomoto shopping cart element.  It seems like $(".jb.bb.btn.fotomoto").off("click") should prevent the default behavior, but no matter what I've tried so far I still get both actions, (my modal shopping cart, and a new page opening).  My code is below: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gallery Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Gallery Title" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }

    
    </style>
</head>

<div id="shoppingcart-container" ></div>
<!--START JUICEBOX EMBED-->
<script src="../ClientGalleries/JD_Kilbride_winter2016/jbcore/juicebox.js"></script>
<script type="text/javascript">

    var purchaseURL;

    var strWindowName = 'Shopping Cart';
    var strWindowFeatures = 'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,width=600,height=400';

    var jb = new juicebox({
        baseURL: '../ClientGalleries/JD_Kilbride_winter2016/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });

    jb.onInitComplete = function() {

      
        $('.jb-bb-btn-fotomoto').off('click');
        $('.jb-bb-btn-fotomoto').click(function(event) {
            

//            var windowObjectReference = window.open('about:blank', strWindowName, strWindowFeatures);
            $.get('../ClientGalleries/JD_Kilbride_winter2016/config.xml', function(data) {
                var index = jb.getImageIndex();
                purchaseURL = $(data).find('image').eq(index - 1).attr('purchaseURL');
//                alert(data);
            }).done(function() {
//                windowObjectReference.location.replace(purchaseURL);

                $("#shoppingcart-container").load(purchaseURL);
                $("#modalShoppingCart").modal('show');
            }).fail(function() {
//                windowObjectReference.close();
                alert("Failed")
            });
        });
    };

</script>
<div id="juicebox-container"></div>

<!--END JUICEBOX EMBED-->

</html>
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Purchase URL as modal popup

The code I posted above seems to work OK for myself. (The default click handler for the Shopping Cart button is removed successfully before adding a new custom one.)
The only way I can make it fail is to load a separate version of jQuery into the gallery's web page (for more than the basic jQuery functionality that is built into the 'juicebox.js' file).
I do not know if you are doing this but I suspect the code you posted above is incomplete (there is no opening <body> tag and your JavaScript code refers to a #modalShoppingCart element which does not exist).
If you are loading a separate version of jQuery, then try adding the following code immediately after loading the external file:

<script>
    $.noConflict();
</script>

... and continue to use:

$('.jb-bb-btn-fotomoto').off('click');

... but use the alias jQuery instead of $ for all other jQuery calls, e.g.:

jQuery('.jb-bb-btn-fotomoto').click(function(event) {

This seems to work in my own tests.
I hope this helps.