Convert JQuery to work in Shopify

Highlighted
New Member
2 0 0

Hi,

I have never done any work with Shopify before. So apologies for my ignorance.

I have some working JQuery that I need to add to a shopify site.

Am I able to just drop the "vanilla" code into the template or do I have to convert it to something that Shopify understands?

Here is my code:

jQuery(window).on('dpo_before_form_submit', function (e, form) {
    if ($("#dpo_base_image").length) {
        html2canvas(document.querySelector("#dpo_base_image")).then(canvas => {
            console.log(canvas.toDataURL());
            $.ajax({
                type: 'POST',
                url: "https://myapylistener.azurewebsites.net/api/ImageUpload",
                data: canvas.toDataURL(),
                dataType: "json",
                success: function (data) {
                    console.log("Success");
                    $('<input>').attr('type', 'hidden').attr('name', 'DatabaseImageId').attr('value', 'data.ImageDatabaseId').appendTo('form');
                },
                error: function (data) { console.log(data); }
            });
        });
    }
    else {
        console.log("Image div missing!");
    }
});
0 Likes
Highlighted
Shopify Partner
280 29 55

Hi,
You can paste original jquery code in template
just don't forget to wrap in 
<script type="text/javascript">
</script>
if you're putting in any template

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
Give a try to Shopify APP: https://apps.shopify.com/short-track
1 Like