Ecwid is an eCommerce platform that helps to easily create online store and start selling your products instantly anywhere around the globe.
Ecwid is a closed source framework which is very secure and therefore, in some cases very restrictive during development. It also do not allow to make customization easily. In order to start customizing your store, you need to first register an app (public or private) on your store. Afterwards, let the Ecwid team know your preferences and purpose of the app. The Ecwid team will allocate required scopes and permissions to your app. After that you will be able to start building the app according to your business need. This method also offers a number of actions to help streamline the development process. Like, you can subscribe to different webhooks, you can provide link/URL to your own custom CSS or JavaScript that will be registered in your app. And then every time your storefront is loaded, you custom files i.e. CSS and JS will be loaded and executed along.
In the following article I will explain some basic examples that can be used to do simple customization in your Ecwid store.
If you want to programmatically update an input value. Then only selecting and assigning value to the input using JS will not work. But you would also need to rise corresponding event like input or change, to let the framework know the new change. For example, the following code will rise input event for “ec-qty” field.
let el = document.querySelector('input[name="ec-qty"]');
el.dispatchEvent(new Event('input', {bubbles:true, cancelable:true}));
Ecwid loads webpage contents dynamically. That means if you redirect to another page on storefront. It will not refresh the browser. Instead, the framework will load the contents of the page dynamically. So, what if you want to make changes on, lets say, checkout page. How will you know when the checkout page is loaded? Since, typical JavaScript page “onload” event will not be fired after first page is completely loaded in the bowers.
Luckily, Ecwid does provide its own event which is fired whenever a user redirects to another page. You can simply subscribe to the event and voila! All the required page information can be accessible in the callback. Which includes page name, type, keywords, categoryId, orderId, productid etc.
You can use following code block to subscribe to Ecwid’s “OnPageLoaded” event:
Ecwid.OnPageLoaded.add(function(page){
console.log("Current page is of type: " + page.type);
});
In the following code example, we are subscribing to the “OnPageLoaded” event and checking if we are on product details page.
Ecwid.OnPageLoaded.add(function(page){
if (page.type == 'PRODUCT') {
console.log("Current page is of type: " + page.type);
}
});
The other page types can be CATEGORY, CHECKOUT_PAYMENT_DETAILS, CHECKOUT_DELIVERY, CHECKOUT_ADDRESS, ACCOUNT_ROOT, PRODUCT etc.
As we already established that Ecwid loads page contents dynamically. Therefore, if you want to redirect a user using JavaScript you can do this using “openPage” helper method provided in Ecwid global object.
You can open cart page in storefront like so:
Ecwid.openPage('cart');
The pages in storefront can be of two types:
For general pages, specify the name of the page you want to open. However, for pages with parameters, you must need to specify what page you want to open exactly.
The Right Software are Ecwid expert of Pakistan and we have a number of achievements in this area. We worked in cart setup, custom app development, backend and frontend customization, payment gateways, shipping methods and much more. The Right Software is also officially listed as expert at Ecwid website.
You can discuss your Ecwid requirements with us.
Our support staff is available 24/7 to take support calls and messages from clients.
We involve client in all stages of software development to deliver satisfaction and peace of mind.
We hire developers that are technically strong and discuss the project thoroughly before starting.
If you are not happy with the quality of work or we fail to achieve final technical goal, we’ll not take your money.
We have worked with some clients for over 7 years. Our commitment and dedication is a matter of pride for us.
We care about your investment. We will tell it straight if you are making a bad decision.
NDA implied. No spam. Privacy guaranteed.
Best web, app, eCommerce and custom software development company. We provide services to more than 100 clients world-wide.
Contact The Right Software today to discuss the your next big idea.