Introduction
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.1. JavaScript Event Triggers of Elements
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}));
2. Subscribe to Page Load Event in Ecwid
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.
3. Redirecting to another page in Ecwid
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:
- General page like cart and shipping stage at checkout
- Page with parameters, like product, category, search, etc.
