What is X-cart?
X-Cart is a PHP/MySQL based secure shopping cart software with open source code.X-Cart would be the best choice for online store owners who are looking for a quality PHP shopping cart program at a low price.An eCommerce platform that helps users to create and operate an online store.
Why X-Cart?
- Easy to use, easy to maintain, easy to modify.
- X-Cart shopping cart is fast enough.
- Open source PHP code- Full control over everything for us. We can add our own extra features.
- X-Cart is 100% PCI-DSS(Payment Card Industry Data Security Standard) compatible.
What is Nosto?
Nosto is the easiest way to provide personalized shopping experiences for our customers.Nosto reviews our customers’ actions, learning their likes and dislikes and allows us to deliver automated, personalized recommendations in real-time.It truly makes integrating and managing product on our site easy and seamless, and they work beautifully across any device.
Features
- Personalized Facebook Ads – This will be the fastest and easiest way to deliver personalized advertising to a marketplace of over 1.4 billion people.Nosto’s personalized Facebook Ads fires our products automatically on Facebook to user’s past browsing and buying behavior. The ads will be displays right in their news feed.
- Personalized Product Recommendations – Customers are recommended by the most relevant products in real-time based on their unique user behavior.
- Personalized Behavioral Pop-ups – Nosto allows us to create time-limited special offers and one-time discounts giving us the tools to need to create a sense of urgency and encourage customers to act now.
- Personalized Triggered Emails – There are a few different email types that we can send out to our customers all of which are triggered emails.
We miss you emails to bring back customers to site who have’nt visited for a while
Another one abandoned cart emails. When an item is added to the cart and the customer leaves the site, Nosto can send that customer a reminder email, like the one below, that will let the customer know they left a product in their cart, and try to bring that customer back to our site to make a purchase.
Why Nosto?
With the help of Nosto, we get detailed information of how our store is running.
Using Nosto we can analyse these:
- Potential Sales: Describes what sales would have been without cart abandonment
- Audience: overall stats of visitors on our site
- Nosto Recommendations: Nosto specific performance statistics
- Discount Pop-ups: Nosto discount specific statistics
- Triggered Emailing: Nosto email specific statistics
- Total Sales: Overall sales statistics
- Sales through Nosto: Nosto specific sales statistics
Implementing Nosto in X-Cart
Now we can look into how Nosto can be implemented in X-cart.First of All we need to create a account in Nosto.Every Nosto account has a unique identifier known as accountID, which is required in the implementation.After creating the account next step is to Add the embed script to our site.This enables Nosto to receive details about our Site’s usage.
This is the Nosto Recommended embed script
f.appendChild(d);try{c=d.contentWindow.document}catch(g){b=document.domain,d.src=”javascript:var d=document.open();d.domain='”+b+”‘;void(0);”,c=d.contentWindow.document}return c.open()._l=function(){b&&(this.domain=b);var c=this.createElement(“scr”.concat(“ipt”));c.src=a,this.body.appendChild(c)},c.write(“‘)),c.close(),d}var b=”nostojs”;window[b]=window[b]||function(a){(window[b].q=window[b].q||[]).push(a)},window[b].l=new Date;var c=function(d,e){if(!document.body)return setTimeout(function(){c(d,e)},30);e=e||{},window[b].o=e;var f=document.location.protocol,g=[“https:”===f?f:”http:”,”//”,e.host||”connect.nosto.com”,e.path||”/include/”,d].join(“”);a(g)};window[b].init=c})();
In this script replace the [accountID] with our account ID and place the code in <head> section of our site HTML.In X-Cart our main template file is
home.tpl(skin->reboot->customer->home.tpl) so we should paste the script in head section of home.tpl page. we can find our account ID on Settings->Account Settings.
Next step is to Tag our Product pages.
This enables Nosto to show product information in Nosto elements. Add the following tagging into our online store’s product pages.Here in Xcart we are adding this code to product_details.tpl(skin->reboot->customer->main->product_details.tpl).
<div class="nosto_page_type">product</div>
<div class="nosto_product">
<span class="product_id">{$product.productcode}</span>
<span class="name">{$product.producttitle}</span>
<span class="image_url">{$product.nosto_image_url}</span>
<span class="price">{$product.taxed_price}</span>
<span class="price_currency_code">USD</span>
{if $product.avail gt 0}
InStock
{else}
OutOfStock
{/if}
<span class="category">{$product.category_info}</span>
<!– Optional properties –>
<span class="description">{$product.fulldescr}</span>
<span class="list_price">{$product.price}</span>
<span class="brand">{$product.manufacturer}</span>
</div>
Here $product is the array in which we stored the product details.
We can check it by active a debug mode for Nosto on our site. Calling our online store with an additional request parameter ?nostodebug=true will enable the debug mode and we can see a css-window displaying information sent to Nosto.
Tagging the shopping cart content
This enables Nosto to recommend products based on the user’s shopping cart and to notice abandoned carts. Add the following tagging to our shopping cart segment. Here in Xcart we are adding this code to cart.tpl(skin->reboot->customer->main->cart.tpl).
<div class="nosto_page_type">cart</div>
<div class="nosto_cart">
{foreach from=$products item=product}
<div class="line_item">
<span class="product_id">{$product.productcode}</span>
<span class="quantity">{$product.amount}</span>
<span class="name">{$product.product}</span>
<span class="unit_price">{$product.display_price}</span>
<span class="price_currency_code">USD</span>
</div>
{/foreach}
<div class="restore_link">{$return_link}</div>
</div>
Tagging the customer information
This enables Nosto to send automatic triggered emails to our customers. Whenever the user has logged in, or user information is otherwise available.We are adding iy in our order_invoice.tpl(skin->reboot->customer->mail->html->order_invoice.tpl).Here
$order is the array in which we are storing the order information.
<div class="nosto_customer"><span class="email">{$order.email}</span>
<span class="first_name">{$order.firstname}</span>
<span class="last_name">{$order.lastname}</span><!– Optional properties –><!– –></div>
Mark order content
This enables Nosto to show recommendations based on customers purchase behavior. Adding the following tagging to the page that is shown to the customer after their purchase has been confirmed.In X-Cart we are adding this code to order_invoice.tpl(skin->reboot->customer->mail->html->order_invoice.tpl).Here
$order is the array in which we are storing the order information.
<div class="nosto_purchase_order">
<span class="order_number">#{$order.orderid}</span>
<div class="buyer"><span class="email">{$order.email}</span>
<span class="first_name">{$order.firstname}</span>
<span class="last_name">{$order.lastname}</span></div>
<div class="purchased_items">
{foreach from=$products item=product}
<div class="line_item"><span class="product_id">{$product.productcode}</span>
<span class="quantity">{$product.amount}</span>
<span class="name">{$product.product}</span>
<span class="unit_price">{$product.price}</span>
<span class="price_currency_code">USD</span></div>
{/foreach}
</div>
</div>
Tagging category pages
This enables Nosto to show recommendations for the customer’s currently viewed category.Need to add this following code to subcategories.tpl(skin/reboot/customer/main/subcategories.tpl)
<!– Tag our page type. See Page Types for values to use. –>
<div class="nosto_page_type">category</div>
<!– Tag our category page with the category path, replace static example values to equivalent database/ecom engine variables –>
<div class="nosto_category">/{$nosto_category}</div>
Tagging page types
This enables Nosto to provide correct types of content (e.g. recommendations or pop-ups) depending on the type of section the customer is browsing. Add this tag to every page that fall into the categories listed below.
<!– Tag our page type. See Page Types for values to use. –>
<div class="nosto_page_type">product</div>
The Page Types are.
Value | Description |
front | Front Page |
category | Category Page |
product | Product Detail Page |
cart | Shopping Cart Page |
order | Order Confirmation Page |
search | Search Result Page |
notfound | “Not Found” Error Page |
Abandoned Cart Email
When an item is added to the cart and the customer leaves the site, Nosto can send that customer a reminder email, that will let the customer know they left a product in their cart, and try to bring that customer back to our site to make a purchase.
First We need to Add an Addon in X-cart called Abandoned Cart Reminder.So this will help us to get the abandoned Cart link that which we can send to Nosto.
The Following codes will create a cart restore link and send it to Nosto,and Nosto will send the Abandoned Cart Email to the customer.
Code for creating the restore link.
Add these code in our cart.php file.
function test_return_link($cart)
{
global $http_location;
if (
isset($cart['email'])
&& isset($cart['cart_hash'])
) {
$cart_skey = $cart['email'] . '%' . $cart['cart_hash'] . '%';
if (isset($cart['coupon']['coupon'])) {
$cart_skey .= $cart['coupon']['coupon'];
}
return $http_location . DIR_CUSTOMER . '/abandoned_cart_in.php?cart_skey=' . urldecode(base64_encode($cart_skey));
} else {
return $http_location . DIR_CUSTOMER . '/home.php';
}
}
$customer_info = func_userinfo($logged_userid, $current_area);
$useremail=$customer_info['email'];
$cart1=func_query
("select email,cart_hash,coupon from xcart_abcr_abandoned_carts where email ='$useremail' limit 1");
$return_link = test_return_link($cart1[0]);
// Assign the current location line
$smarty->assign('location', $location);
$smarty->assign('return_link', $return_link);
$smarty->assign('useremail', $useremail);
func_display('customer/home.tpl', $smarty);
After getting the restore link pass it to the Nosto.We can add the following code to cart.tpl(skin->reboot->customer->main->cart.tpl).
<div class="nosto_cart">
<!– Optional restore cart link for abandoned cart emails. Check ecom platform if it supports this kind of link –>
<div class="restore_link">{$return_link}</div>
</div>