DEV Community: Lao Ning

Implementing a Dynamic Free Shipping Progress Bar in Shopify with JavaScript

Lao Ning — Mon, 18 Dec 2023 12:34:42 +0000

In the competitive e-commerce world, online stores must innovate to boost average order values and enhance customer experiences.

A key strategy is adding a free shipping progress bar to Shopify stores. This feature motivates customers to increase their cart size, thus improving their shopping experience.

We'll show you how to add a dynamic free shipping progress bar to your Shopify store with the help of JavaScript.

What is Free Shipping Progress Bar?

A free shipping progress bar is a visual indicator. It shows how close customers are to earning free shipping based on their cart value.

For example, Imagine you're browsing an online clothing store, adding cute sweaters and comfy sweatpants to your cart. Suddenly, a progress bar appears, inching closer to "Free Shipping!" with every item. Now, picture the thrill of seeing it reach 100% and realizing you just snagged free delivery on your cozy haul. That's the magic of a free shipping progress bar in Shopify!

By encouraging customers to add items to reach the free shipping limit, it helps increase the store's average order value.

Step-by-Step Implementation

Step 1: Set Your Free Shipping Threshold
Before implementing the progress bar, determine the minimum order value for free shipping in your store. This amount will be the target customers try to reach as they shop.

Step 2: Access Your Shopify Theme Code

Log in to your Shopify admin panel.
Navigate to Online Store > Themes.
Find your active theme, click Actions, and select Edit code.

Step 3: Insert the Progress Bar HTML
In your theme's code editor, locate the file where you want the progress bar to appear, such as cart.liquid or header.liquid. Insert the following HTML code where you want the progress bar to display:

<div class="free-shipping-progress-bar"></div>

Step 4: Style the Progress Bar
Add custom CSS to your theme's theme.scss.liquid file to style the progress bar:

.free-shipping-progress-bar {
    height: 20px;
    background-color: #ddd;
    border-radius: 5px;
    transition: width 0.3s ease;
}

Step 5: Implement the Progress Logic with JavaScript
This is where the dynamic aspect of the progress bar comes into play. You will need to edit your theme's JavaScript file (usually theme.js or theme.js.liquid).

A. Define the Free Shipping Threshold

const freeShippingThreshold = 50; // Set your free shipping threshold

B. Get the Current Cart Total
Use Shopify's AJAX API:

function getCartTotal(callback) {
    fetch('/cart.js')
        .then(response => response.json())
        .then(data => callback(data.total_price / 100)); // Price in cents
}

C. Update the Progress Bar
Create a function to adjust the progress bar's width:

function updateProgressBar(cartTotal) {
    let progressBar = document.querySelector('.free-shipping-progress-bar');
    let percentage = Math.min(cartTotal / freeShippingThreshold * 100, 100);
    progressBar.style.width = percentage + '%';
}

D. Initial Update and Event Binding
Ensure the bar updates correctly:

document.addEventListener('DOMContentLoaded', () => {
    getCartTotal(updateProgressBar);
});

document.addEventListener('cart:updated', () => {
    getCartTotal(updateProgressBar);
});

Step 6: Testing and Optimization
After implementing the JavaScript logic, test the progress bar by adding or removing items from the cart. Ensure that the bar updates in real time and is compatible across different browsers and devices.

In Final words,
Adding a dynamic free shipping progress bar can significantly improve the shopping experience and boost sales.

This feature engages customers to add more to their carts, increasing your store's average order value. With our guide, anyone with basic coding skills can implement this enhancement in their Shopify store.

To get more Shopify resources, Visit: https://meetanshi.com/blog/category/shopify/

How to Create a Custom Magento 2 API?

Lao Ning — Fri, 08 Dec 2023 09:51:12 +0000

Magento 2 is a robust e-commerce platform with extensive API support. While it offers default REST APIs, you might need to create a custom REST API. This article explores the process of creating a custom REST API in Magento 2.

What is a Magento 2 Custom REST API?

A Custom REST API in Magento 2 is a web service endpoint you create for specific actions or data retrieval from your Magento store. Custom APIs are tailored to your business needs. They integrate Magento with external systems, mobile apps, or other software applications. Custom APIs are crucial when default APIs do not cover certain functionalities or data needs.

Scenarios for Creating a Custom REST API in Magento 2:

Integrating with Third-party Systems: Custom APIs allow data exchange with external platforms like ERP systems, CRM software, or payment gateways.
Building Mobile Apps: These APIs are essential for mobile apps that need interaction with your Magento store.
Implementing Unique Features: Custom APIs enable features like unique loyalty programs or personalized product recommendation engines.

Steps to Create a Custom Magento 2 REST API:

Step 1: Set Up Your Development Environment

Ensure that you have a development environment with Magento 2 installed. You'll also need a code editor and a REST client for testing.

Step 2: Define Your API Endpoints

Determine the functionality you want to expose. For this example, let's create an API to retrieve product details by SKU.

Step 3: Create a Module

Create a custom module for your API. Replace Vendor and Module with your own module and namespace names.

Create app/code/Vendor/Module/etc/module.xml with the following content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0" />
</config>

Create app/code/Vendor/Module/registration.php with the following content:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

Step 4: Create a Web API Schema
Create a webapi.xml file to define the API endpoint.

Create app/code/Vendor/Module/etc/webapi.xml with the following content:

<?xml version="1.0"?>
<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Webapi:etc/webapi.xsd">
    <route method="GET" url="/V1/custom/product/:sku">
        <service class="Vendor\Module\Api\ProductInterface" method="getProductBySku"/>
        <resources>
            <resource ref="anonymous"/>
        </resources>
    </route>
</routes>

Step 5: Create a Di.xml File

Create a di.xml file to specify the implementation of your API interface.

Create app/code/Vendor/Module/etc/di.xml with the following content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Vendor\Module\Api\ProductInterface" type="Vendor\Module\Model\Product"/>
</config>

Step 6: Create the API Interface

Create an interface for your API. This defines the methods your API will expose.

Create app/code/Vendor/Module/Api/ProductInterface.php with the following content:

<?php
namespace Vendor\Module\Api;

interface ProductInterface
{
    /**
     * Retrieve product details by SKU
     *
     * @param string $sku
     * @return \Vendor\Module\Api\Data\ProductInterface
     * @throws \Magento\Framework\Exception\NoSuchEntityException If product with the specified SKU doesn't exist.
     */
    public function getProductBySku($sku);
}

Step 7: Implement the API Interface

Create the implementation of your API interface.

Create app/code/Vendor/Module/Model/Product.php with the following content:

<?php
namespace Vendor\Module\Model;

use Vendor\Module\Api\Data\ProductInterface;
use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Framework\Exception\NoSuchEntityException;

class Product implements ProductInterface
{
    /**
     * @var \Magento\Catalog\Api\ProductRepositoryInterface
     */
    protected $productRepository;

    public function __construct(
        ProductRepositoryInterface $productRepository
    ) {
        $this->productRepository = $productRepository;
    }

    /**
     * {@inheritdoc}
     */
    public function getProductBySku($sku)
    {
        try {
            $product = $this->productRepository->get($sku);
            return $product;
        } catch (NoSuchEntityException $e) {
            throw new NoSuchEntityException(__('Product with SKU %1 not found.', $sku));
        }
    }
}

Step 8: Test Your Custom API
You can now test your custom API using a REST client like Postman. Make a GET request to the following endpoint:

[YourMagentoURL]/rest/V1/custom/product/{SKU}

Replace {SKU} with the SKU of the product you want to retrieve. You should receive a JSON response with the product details.

Note: This post was referenced from https://meetanshi.com/blog/create-custom-rest-api-in-magento-2/. It may contain excerpts from the original author.

If you have any questions or need further clarification, please feel free to leave a comment.