Functionality Changes for Shopify Website

After successfully creating orders on the Shopify website we are sending the call to Artifi to update the order status from “Add to cart” to “Checked Out”.

 

For updating order status in Shopify Admin and replacing webhook concepts

Please follow the below steps

  • Go to Shopify Admin -> Settings -> Checkout -> Additional Scripts

In the additional script box (textarea), we need to add below JS code. If any code is present there in the box then we need to add this code below the existing code.

  • NOTE - Please update your Shopify domain name with “yourDomain.myshopify.com” in below code.


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" >

var Order_ID = {{ order.id }};

var shopDomain = 'yourDomain.myshopify.com';

var custEmail = '{{ customer.email }}';

window.onload = function() {

    if (window.jQuery) {  

        // jQuery is loaded

        jQuery.ajax({

    type:'post',

    url:'https://shopify.artifi.net/getOrderData.php',

    data: 'order_id='+ Order_ID +'&shop_domain='+ shopDomain + '&email='+ custEmail,                 

    success: function(data){

        

            }

    }); 

    } else {

        // jQuery is not loaded

        alert("jQuery doesn't work");

    }

}

</script>

If your code is working without loading min.js you can remove the reference of jquery-1.11.2.min.js from the script.


If you are facing issues with the Personalize button overlapping on the Add-To-Cart button after installing the Artifi extension, following theme related changes need to be done


This code needs to be placed into the add-to-cart form in the template (product-template.liquid).

This code needs to be placed below the closing of the form tag.

Ex - <form class="form" action="/cart/add" method="post" enctype="multipart/form-data" data-product-id="Template:Product.id" data-enable-history-state="true">

<!--  Assigning personalization value if personalize option is required / optional →

 

            {% for field in product.metafields.artifi %}              

                 {% if field.first == 'isPersonalizationOptional'%}

                      {% assign personalizevalue = field.last  %}

                 {% endif %}               

            {% endfor %}

 

  <!-- end artifi code -->  

We need to find the code of the current add-to-cart button and replace it with the below-mentioned script.

Also, we need to take care of the button attribute if already applied on the button we also need to apply the same attribute according to the existing button.


Ex - class, id...


{% if personalizevalue == 0 %} 

             <input style="display:none" type="submit" class="btn" id="buttonAddToCart" value="{{ 'products.product.add_to_cart' | t }}">

             <button class="btn" id="artifiPersonalize" name="personalize" type="button"><span id="artifiPersonalizeText">Personalize</span></button>

             

             {% elsif personalizevalue == 1 %}

             

             <input type="submit" class="btn" id="buttonAddToCart" value="{{ 'products.product.add_to_cart' | t }}">

             <button class="btn" id="artifiPersonalize" name="personalize" type="button"><span id="artifiPersonalizeText">Personalize</span></button>

             

             {% else %} 

             <input type="submit" name="add" class="btn" id="buttonAddToCart" value="{{ 'products.product.add_to_cart' | t }}">

             {% endif %}


By adding the above code, we need to remove the personalize button code from artifi.js file. Need to remove the button which is highlighted in red.

jQuery(artifiButtonAddToCart).after('<input type="hidden" name="artifiSku" id="artifiSku" value="' + meta.product.variants[0].sku + '"' + '/><input type="hidden" name="issimple" id="issimple" value="' + issimple + '"><button class="' + artifiPersonalizeButtonClass + '" id="artifiPersonalize" name="personalize" type="button">' + '<span id="artifiPersonalizeText">' + text_personalize_button + '</span>' + '</button>');


When removing any items from the cart, if you want it to be removed from Artifi admin, you have to modify the below file.


For deleting cart items from Artifi admin as well as Shopify store, we need to add below code in cart-template.liquid file.

Note - We need to add this code accordingly in the cart_item of the template.

We need to find out the existing remove cart functionality and replace it with below code.

{% if item.properties._ArtifiDesignId %}

     

           <a href="#" data-confirm="Are you sure to delete this item?" id="removeItem-{{ forloop.index }}" data-id="{{item.variant_id}}" data-datac="{{item.properties._ArtifiDesignId}}"  class="remove toggler" title="Remove Item"> ×</a>

{% else %}

 

        <a class="remove toggler" onclick="return confirm('Are you sure to delete this item?');"  href="/cart/change?line={{ forloop.index }}&quantity=0" title="Remove Item">×</a>

 

{% endif %}

After adding above code we need to add below JS script closing the loop of cart item.

<script type="text/javascript">

       // *Note*/ new js code for delete cart items if the order has been placed from the second tab

 

       jQuery.get('/cart.js').complete(function (data) {

         var responseObject = JSON.parse(data.responseText);

         var cartToken = responseObject.token;

         

         var index = '#removeItem-{{forloop.index }}';

         $(index).on('click', function(event){

         event.preventDefault();

         var choice = confirm($(this).attr('data-confirm'));

            if (choice) {

               var designID = jQuery(this).data('datac');

                 //jQuery.post('/cart/change.js', { quantity:0, line: 1 });            

                    var ajaxRequest = $.post('/cart/change.js', { quantity:0, line: {{forloop.index }} },null,'json');

                //When the request successfully finished, execute passed in function

                  ajaxRequest.done(function(response){                                

                 if(response.token == cartToken)

                   {

        console.log("need to perform Artifi delete call");

                        jQuery.ajax

                          ({

                              url: artifi_integration_url+'/Designer/Services/DeleteCustomizedProduct?websiteid='+website_id+'&webApiClientKey='+webapi_client_key+'&customizedProductId='+designID+'&orderStatus=InProgress',

                              type: 'post',

                              success: function(result)

                              {

                                if(result.Response == 'Success'){

                                    document.location = '/cart';

                                }

                              }

                          });

                    } else {

                        console.log("no need to perform delete call for Artifi");

                        document.location = '/cart/change?line=1&quantity=0';

                    }

                  });

                  //When the request failed, execute the passed in function

                  ajaxRequest.fail(function(status){

                 document.location = '/cart/change?line=1&quantity=0';

              });                                              

            }                                                         

          });         

       }); 

      </script>



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.