DM Classic - S7 - Show default image when a specific Image or Vignette object not found

Missing Product Image

In Dynamic Media Classic (S7), if the image (specified in URL with others modifiers) is NOT found, you can serve a default image by adding parameter &defaultImage. This helps when there are new images for a product not published yet or missing for some reason, so when users clicks the link or the specific swatch, a default image for the product is shown (instead of a broken or generic 404 image...)

Image not found URL eg: http://sample.scene7.com/is/image/S7trainRender/image_does_not_exist

With &defaultImage URL parameter: http://sample.scene7.com/is/image/S7trainRender/image_does_not_exist?defaultImage=ninewest_shoe

Unavailable Vignette Object

While serving an Image Render or Vignette (composed of objects) if the Object name is NOT found, there is no default image parameter here and error Object not found is shown...

                  Sample Object not found URL : 

                  http://sample.scene7.com/ir/render/S7trainRender/ninewest_shoe?wid=300&obj=object_does_not_exist&color=200,40,60

Workaround below is for showing a default product image when specified object name (in url parameters) is unavailable...

             Objects Available:

             http://sample.scene7.com/ir/render/S7trainRender/ninewest_shoe?wid=300&obj=shoe/quarter&color=200,40,60&obj=shoe/large%20leather%20piece&color=20,60,20

             Object Not Found

Github - https://github.com/schoudry/eaem-extensions/tree/master/eaem-65-extensions/eaem-dm-classic-s7-vignette-default-image

1) For running this sample with code in a local file and image we are requesting existing on a different domain (http://sample.scene7.com/) with CORS headers not set in response... we need to tone down chrome security a bit...

                     i. Create a new profile in chrome...

                   ii. Create a shortcut with target : 

                                      "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory="Profile 1"  

                                      --user-data-dir="C:/Users/<user>/AppData/Local/Google/Chrome/User Data/Profile 1" --disable-web-security 

                   iii.  Run the new shortcut to open a browser instance disabling CORS...

2) Add the following JS logic in your html to first request the vignette contents using ?req=contents and match the object names in image request url parameters for validation...

    (function () {
        $(document).ready(function(){
            $("#eaem-s7-run-code").click(showImages);

            showImages();
        });

        function showImages() {
            var imageUrl = $("#eaem-s7-vignette-url").val();

            showImage(imageUrl);

            checkContentsAndShowImage(imageUrl);
        }

        function showImage(imageUrl) {
            $("#eaem-s7-default-image").attr("src", imageUrl);
        }

        function checkContentsAndShowImage(imageUrl) {
            var contentsUrl = imageUrl.substring(0, imageUrl.indexOf("?")) + "?req=contents",
                    objectsInVignette = [];

            $.ajax({type: "GET", url: contentsUrl, dataType: "xml", async: false}).done(function (xml) {
                objectsInVignette = checkVignetteObjects(xml);
            });

            var objectParamsInUrl = getImageURLObjParameters(imageUrl),
                invalidObjects = [];

            for(var x = 0; x < objectParamsInUrl.length; x++){
                if(!objectsInVignette.includes(objectParamsInUrl[x])){
                    imageUrl = imageUrl.substring(0, imageUrl.indexOf("?"));
                    invalidObjects.push(objectParamsInUrl[x]);
                }
            }

            $("#eaem-s7-vignette-objects").html(objectsInVignette.join(" | "));

            $("#eaem-s7-url-objects").html(objectParamsInUrl.join(" | "));

            $("#eaem-s7-url-invalid-objects").html(invalidObjects.join(" | "));

            $("#eaem-s7-ext-image").attr("src", imageUrl);
        }

        function checkVignetteObjects(xml) {
            var path = "/vignette/contents/group",
                    nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null),
                    group = nodes.iterateNext(), objects = [];

            while (group) {
                var object = group.getAttribute("id");

                objects.push(object);

                var children = group.getElementsByTagName("object");

                for (var x = 0; x < children.length; x++) {
                    objects.push(object + "/" + children[x].id);
                }

                group = nodes.iterateNext();
            }

            return objects;
        }

        function getImageURLObjParameters(imageUrl) {
            var paramsStr = imageUrl.substring(imageUrl.indexOf("?") + 1),
                objParams = [], index, objName;

            while(true){
                index = paramsStr.indexOf("obj=");

                if(index == -1){
                    break;
                }

                paramsStr = decodeURIComponent(paramsStr.substring( index + "obj=".length));

                objName = paramsStr.substring(0, paramsStr.indexOf("&"));

                objParams.push(objName);
            }

            return objParams;
        }
    }())