{"success":true,"view":"<style id=\"modal-general\">\n.modal.modal-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  max-width: 100%;\n  height: 100%;\n  background-color: rgba( 0, 0, 0, 0.5 );\n  z-index: 9010;\n}\n\n.cart-modal.add-to-cart {\n  display: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  max-width: 650px !important;\n  max-height: 650px !important;\n  margin: auto;\n  z-index: 9090;\n  overflow: auto;\n  background-color: #ffffff;\n}\n.add-to-cart label,\n.add-to-cart input,\n.add-to-cart select {\n  height: 45px;\n  line-height: 45px;\n}\n#addtocart.add-to-cart label {\n  margin-bottom: 0;\n}\n\n.modal--content .title * {\n    font-size: 23px;\n    line-height: 28px;\n}\n.modal--content .description p {\n    font-size: 16px;\n    line-height: 24px;\n}\n.vcenter {\n    align-self: center;\n}\n@media  only screen and (max-width:768px) {\n  .cart-modal .title h3 {\n    font: normal 400 15px\/23px \"Roboto\", sans-serif;\n    color: #000000;\n  }\n  span.close {\n    font: normal 400 14px\/14px;\n  }\n  .cart-modal.add-to-cart {\n    max-width: 345px !important;\n    max-height: 550px !important;\n    overflow: auto;\n  }\n  .modal--content .title * {\n    font-size: 18px;\n    line-height: 30px;\n  }\n  .modal--content .description p {\n    font-size: 12px;\n    line-height: 20px;\n  }\n  .add-to-cart label,\n  .add-to-cart input,\n  .add-to-cart select {\n    height: 35px;\n    line-height: 35px;\n  }\n}\n@media  only screen and (max-width: 480px) {\n  .cart-modal.add-to-cart {\n    max-width: 100%;\n  }\n}\n<\/style>\n\n\n\n        <div class=\"row pb-4\">\n          <div class=\"col-xl-4 col-5\">\n            <img class=\"img-fluid modal-header-img\" src=\"\/assets\/images\/product_thumbnail\/bronze-figurine_1134734509_21-03-19.jpg\" alt=\"Benin Bronze Figurine\">\n          <\/div>\n          <div class=\"col-xl-8 col-7 text-left\">\n            <div class=\"title capitalize\">\n              <h3 class=\"capitalize\">Benin Bronze Figurine<\/h3>\n            <\/div>\n            <div class=\"description\">\n              <p>These beautiful bronze figures originally created by the Edo people,&nbsp;from&nbsp;the Benin kingdom in Nigeria were created in honour of their king....<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <form method=\"GET\" action=\"https:\/\/africancreativeshop.com\/basket\/add\/465\" accept-charset=\"UTF-8\" class=\"text-left\" id=\"addtocart\">\n        <input type=\"hidden\" name=\"product_id\" value=\"465\" \/>\n        \n        <div class=\"row pb-2\">\n          <div class=\"col-4\">\n            <label for=\"qty\">QUANTITY<\/label>\n          <\/div>\n          <div class=\"col-8\">\n            <input name=\"quantity\" class=\"border-elm--light-1 w-100 px-3\" id=\"qty\" type=\"number\" value=\"1\">\n          <\/div>\n        <\/div>\n        <div class=\"row pb-2\">\n          <div class=\"col-4\">\n            <label>PRICE<\/label>\n          <\/div>\n          <div class=\"col-8 text-weight-bold\">\n                        <p>\n              R \n              <span data-price=\"product-price\">700<\/span>\n            <\/p>\n                      <\/div>\n        <\/div>\n        \n        <div class=\"row pt-2\">\n          <div class=\"col-12 cta-add-to-cart uppercase\">\n            <button type=\"submit\" class=\"btn text-center cta add-to-cart btn-bg-green\">\n                <span class=\"addtocart-icon pr-2\"><i class=\"fa fa-shopping-cart\"><\/i><\/span>\n                add to cart\n            <\/button>\n          <\/div>\n        <\/div>\n        <\/form>\n    \n\n    \n\n  \n\n<script>\n$(\".cart-modal .close\").click(function(){\n    $(\".cart-modal.modal-overlay\").fadeOut(500);\n    $(\".cart-modal\").fadeOut(500);\n});\n$(\"section.add-to-cart a.add-to-cart-modal\").click(function(){\n    $(\".cart-modal.modal-overlay\").fadeIn(500);\n    $(\".cart-modal\").fadeIn(500);\n    $(\"html, body\").animate({ scrollTop: 0 }, \"fast\");\n});\n<\/script>\n\n\n<script id=\"product_price_updater\">\nvar all, d, s, c, qfg, qfo, url,\nqfgs = '?filter_group_options=',\nqfos = '&filter_options=';\nb = '\/product\/variant\/price-check\/';\nprd = \"benin-bronze-figurine\";\n\ntry {\n    all = [].slice.call( document.querySelectorAll( '#addtocart select[name*=filter]' ) )\n} catch( e ) { log_error( e ) }\n\ntry {\n    all.map( m => { elem_handler( m ) } );\n} catch( e ) { log_error( e ) }\n\nfunction elem_handler( el )  {\n    var ui;\n    ui = el.classList.value.search( \/(colo[u]r|rope-\\w*?)\/ig ) !== -1;\n    el.addEventListener( 'change', function( event ) {\n        event.stopPropagation();\n        var elem = event.srcElement,\n        valueIs = ( \"\" === elem.value || elem.value === undefined || elem.value === null )\n                    ? 0 : elem.value,\n        attrib  = elem.getAttribute( 'data-group-id' );\n        try {\n            if ( valueIs !== undefined || valueIs !== null || valueIs !== \"\" ) {\n                url  = b + prd + qfgs + attrib + qfos + valueIs;\n                url += ( ui === true ) ? '&ui_selected_price=' + get_currentPrice() : '';\n                console.log( url );\n                update_price( url );\n            }\n        } catch( e ) { log_error( e ) }\n    }, false );\n}\n\nfunction get_currentPrice() {\n    var currentBasePrice;\n\n    currentBasePrice = parseInt( document.querySelector( '#product-price' ).innerHTML );\n\n    return currentBasePrice;\n}\n\nfunction update_price( u ) {\n    var xhr, method, async;\n\n    xhr = new XMLHttpRequest,\n    method  = \"GET\",\n    async   = true;\n\n    xhr.open( method, u, async );\n\n    xhr.onreadystatechange = function() {\n        if ( this.readyState == 4 && this.status == 200 ) {\n          var pre, result, price_elm;\n          pre = JSON.parse( this.responseText );\n          price_elm = document.querySelector( '[data-price=product-price]' );\n          console.log( JSON.parse( this.responseText ) );\n\n          if ( parseInt( pre['cost'] ) != 0 ) {\n              result = parseInt( pre['cost'] );\n              price_elm.innerHTML = result;\n          } else {\n              result = ( parseInt( pre['cost'] ) > parseInt( pre['cost_basis'] ) && pre[cost_ZAR] !== null ) \n                  ? parseInt( pre['cost'] ) : price_elm.innerHTML;\n              price_elm.innerHTML = result;\n          }\n\n          return;\n        }\n    };\n\n    xhr.send();\n}\n\nfunction log_error( err ) {\n    return console.log( \"\\r\\n\" + err + \"\\r\\n\" );\n}\n<\/script>\n\n<script>\n    \/**\n     *\n     * -1:> Get the select input linked to the product gallery images;\n     * -2:> Get the all images attributed with data-linked;\n     * -3:> Setup listener for input on select (from [1]):\n     *   ::--> gets the correspondinding linked image array index,\n     *   ::--> use the slider to slide that image into view;\n     * -4:> Setup up the magnifying\/zooming in on the product image;\n     * -5:> Reset cycle for next such event.\n     *\n     *\/\n    var dd2img_selopt = [].slice.call( document.querySelectorAll( '[data-image-linkedto]' ) ),\n        dd2img_linked = [].slice.call( document.querySelectorAll( '[data-linked]' ) ),\n        seloptCount, imglnkCount, linked_parent;\n\n    try {\n        linked_parent = dd2img_selopt[0].parentElement;\n    } catch( e ) { console.warn( \"\\r\\nError: \" + e + \"\\r\\n\" ) };\n\n    seloptCount = dd2img_selopt.length;\n    imglnkCount = dd2img_linked.length;\n\n    function listen_for_inputChange( e ) {\n      if ( typeof( e ) !== \"undefined\" || e !== undefined || e !== null ) {\n        try {\n          e.addEventListener( 'input', function( event ) {\n            var l = productInfo[ event.srcElement.value ];\n              try {\n                var i = document.querySelector( '[data-linked=\"' + l + '\"]' );\n                var p = i.parentNode.parentNode.parentNode;\n                if ( typeof( i ) !== undefined || typeof( i ) !== null || i !== undefined || i !== null ) {\n                  var n = p.getAttribute( 'data-slick-index' );\n                  var slideIndex = n;\n                  if ( slideIndex !== null && ( slideIndex > 0 && slideIndex <= imglnkCount ) ) {\n                    $( '.product-specific-slider' ).slick( 'slickGoTo', slideIndex );\n                    if ( window.innerWidth <= 768 || document.body.clientWidth <= 768\n                      || document.documentElement.clientWidth <= 768\n                    ) {\n                      document.querySelector( '.product-specific-slider' ).scrollIntoView({\n                        behavior: \"smooth\"\n                      });\n                    }\n                  }\n                }\n              } catch( err ) {\n                console.warn( \"\\r\\nOops! Error message:\\r\\n\\t\" + err + \"\\r\\n\" );\n              }\n          }, false );\n        } catch( err ) { console.warn( \"\\r\\nError:\\r\\n\\t\" + err + \"\\r\\n\" ); }\n      }\n    }\n\n    listen_for_inputChange( linked_parent );\n<\/script>\n\n"}