Skip to content

Instantly share code, notes, and snippets.

@matheusgnreis
Last active April 15, 2024 13:09
Show Gist options
  • Save matheusgnreis/60d3fcd962d3fc1a28f16beab57f6ea9 to your computer and use it in GitHub Desktop.
Save matheusgnreis/60d3fcd962d3fc1a28f16beab57f6ea9 to your computer and use it in GitHub Desktop.
Useful variables and libs from E-Com Plus storefront

Libs:

ecomUtils

http://developers.e-com.plus/utils/

If you wanna use on sections inside of ejs, you can reach him with #_.ecomUtils. Or if you just want to use in to pages.js, you can reach him with window.ecomUtils.

You have a lot of rich methods. Like: _.ecomUtils.inStock(product), will return a boolean meaning if has stock or not. Or _.ecomUtils.formatMoney(10.6, 'BRL', 'pt_br') => R$ 10,60

Just see the lib and enjoy.

ecomCart

http://developers.e-com.plus/shopping-cart/

If you wanna use, you need to import him to your project, just like:

import ecomCart from '@ecomplus/shopping-cart'

Or if you just want to use on checkout.js or pages.js, you can get from #window.ecomCart You have a lot of methods, to add, remove, edit and until watch changes from cart and do something.

ecomSearch

https://developers.e-com.plus/search-engine/

If you wanna use in ejs: #_.EcomSearch(). It´s important to create a instance before use, like: const search = new _.EcomSearch()

ecomClient

https://developers.e-com.plus/client/

Mostly you wanna use to get a specific resource

If you wanna use in ejs: #_.ecomClient Or in pages/checkout.js window.ecomClient

ecomPassport

You wanna use to check authentication

http://developers.e-com.plus/passport-client/

In pages/checkout.js you can use #window.ecomPassport

Storefront

We have anothers, that you can see https://developers.e-com.plus/storefront One example is @ecomplus/storefront-twbs (https://developers.e-com.plus/storefront/@ecomplus/storefront-twbs/docs/06-javascript.html#animate-css-util) You can import some important variables, like:

import {
  isSafari,
  isIOS,
  isIE,
  isMobile
} from '@ecomplus/storefront-twbs'

To know if is mobile, or ios.

If you need to create a new experience for your client, changing all default template for a specific component, you just need to use: https://developers.e-com.plus/storefront/docs/customization.html#replace-vue-components

You replace entirely vue component if you want. Or just css, or just javascript or just html.

Variables

Inside of ejs, if you wanna check, console log variable _, just like: console.log(_) You will see in _.state, a body for your current product or _.grids all grids for products:

  • _.state: Current information product/category/brand
  • _.grids: All grids
  • _.categories: All categories
  • _.cms('header'): Config from cms, in case is header, but can be footer, or blog posts.
  • _.pageName: Name of your current page.
  • _.breadcrumbs: Array with your current breadcrumb
  • _.items: Array of items loaded in your current page

Above variablies is the most used, but there is a lot more, just check in _

Now i list variables from frontend

  • window.storefront: Lists a summary of information about your website. If you are inside of product page, you can get all body from product using: window.storefront.context.body. If you use window.storefront.data.items, you reach items from your currente page.
  • window.storefrontApp :Lists a summary of information about your checkout only.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment