Community App Developer Code/Guidelines

[NiceTeam]

Hi,

I have an idea to create some kind of Community Guidelines for storefront app developers which will make it easier to make apps compatible with one another.

For example, let's say that you develop an app which displays some products in the merchant's store. You will have to display the product image, title and product price.
And after a few days, you get a support ticket from a merchant with a currency converter app installed. You take a look and figure out that if you add a class .money to the price element, the currency converter app will automatically convert the price in the correct currency.
Great, problem solved.

But after a week, another merchant contacts you, saying that the price doesn't get converted in his store. You check it and see that he is using a different currency converter app. After some debugging, you figure out that you have to add an attribute data-money-convertible to the price element so the app can automatically convert the price.

And now, you app supports 2 currency converter apps. But there are a lot more out there.

So what I was thinking is that we could create some guidelines which would help us make apps compatible with each other from the start.

For example, the currency converter apps could all convert prices in elements with a .money-convertible class.
The apps which would follow these guidelines would generally work better in merchant stores and would cause less issues to the merchants.

I know that not every app would follow these guidelines as their implementation of some specific logic could prevent them from that. But nevertheless, if we get a lot of developers to follow the guidelines, the overall experience with apps would be better for the merchants and for the developers.

Of course, this is just a case for currency converter apps. I am sure that you guys have a lot of other cases which have to be covered.
Let me know what you guys thing about such a thing 🙂

Regards,

Henry

[SBD_]

Hey @NiceTeam,

Thanks for the feedback, I'll pass this along.

[NiceTeam]

Another example of a good practice would be to trigger a custom event whenever an app adds a product to the cart.
This can help the cart drawers and other cart functionalities to correctly react to this action.

Triggering a CustomEvent on the document element would be quite a good solution, as everybody can listen on document, compared to jQuery, where each app might use it's own version of jQuery plugin and some might not use it at all 😄

Here is an example event which I noticed is already triggered by some apps when they add a product to the cart. We will make our developer lives much easier if we all start using it 😉

document.dispatchEvent(new CustomEvent('product:added', {
    bubbles: true,
    detail: {
        variant: variantId,
        quantity: parseInt(quantity, 10)
    }
}));