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 the 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, the 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 to 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 the Shopify store, we need to add the 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 the 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 the above code we need to add below JS script closing the loop of the 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>