ecomplus / storefront

Modern and high performant headless eCommerce Storefront. PWA & JAMstack architecture ready for E-Com Plus APIs. Built with Vue.js, extensible through widgets and editable with Netlify CMS.

Storefront

🚀 Modern and high performant headless eCommerce Storefront:

• PWA & JAMstack architecture;
• Ready for E-Com Plus REST APIs;
• Micro-frontends built with Vue.js 2;
• Extensible through widgets;
• Easy to customize with Netlify CMS;
• Conversion focused following Google Retail UX Playbook;
• Internationalization support;
• A11Y compliance;
• Going for Lighthouse 💯 overall;

📃 Explore the docs · 🛍️ Demo store · Report bug · Request feature · Forum 🇧🇷

Quick start for merchants

⚡ Take a look at the Storefront Starter if you just want to deploy your E-Com Plus store, or go to customization docs if you're searching for theming guides.

Development

Fork/clone this monorepo and install dependencies normally:

git clone https://github.com/ecomplus/storefront
cd storefront
npm i

Then you can edit source files at @ecomplus/* folders and test template locally with npm run serve.

As any project maintained with Lerna, you should run commands from root directory.

Packages

Official packages composing Storefront are listed here with respective description and latest version.

They're published for both npm and GPR.

Contributing

Please read the contribution guidelines.

Check some example useful commands

Compile template for production

npm run build

Compile all packages

npx lerna exec -- build

Serve template locally

npm run serve

Serve some specific package tests

lerna run --scope=@ecomplus/{pkg} serve --stream

Lint changed files

npx lerna exec -- lint-staged

Release and publish all changed packages

npm run release

storefront's Issues

Partial build

Is your feature request related to a problem? Please describe.
Build process is too long in some cases, we're building again all partials and pages with no necessity.

Describe the solution you'd like

1. Start building EJS partials (not only entire pages) separately and saving output HTML;
2. Merge respective partials to compose pages;
3. We may be able to build just edited EJS partials or pages for edited resources (from API);

Describe alternatives you've considered
Not yet.

Additional context
Is an idea to start using Vue SSR for some components, it would be incompatible (or harder) with partially build?

Filtros nas categorias e marcas

Além de mostrar os filtros na página de pesquisa, permitir mostrar os filtros nas páginas de categorias e marcas implementando o mesmo componente da página de busca (SearchEngine) nas demais páginas citadas, vide post da comunidade:

https://community.e-com.plus/t/filtros-nas-categorias/274/4

Improve header and mobile layout

Is your feature request related to a problem? Please describe.
Sticky header animation is being "heavy", specially on mobile, decreasing user experience.

Describe the solution you'd like

1. On desktop we should just use CSS position: sticky (header should be almost refactored) to prevent updating header with JS on scroll (that is not cool);
2. On mobile we may keep header static and use a bottom fixed bar 🍏 ;
3. Footer should be collapsed on mobile;

Describe alternatives you've considered
Maybe the second point is not necessary if new header works good on mobile 🤔 .

Additional context
N/A

Inserir accordion de parcelamento na página de produto

Aparecer na página de produto um accordion com o parcelamento da forma de pagamento, vide solicitação https://community.e-com.plus/t/informacoes-nos-produtos/181/23

npm i & npm run serve errros on windows 10 x64

warning when npm i

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

warnings when npm run serve

`WARNING in ./node_modules/@ecomplus/storefront-template/template/js/index.js 40:13-22
"export 'default' (imported as 'cloneDeep') was not found in 'lodash.clonedeep'
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js

WARNING in ./node_modules/@ecomplus/search-engine/src/methods/reset.js 5:13-22
"export 'default' (imported as 'cloneDeep') was not found in 'lodash.clonedeep'
 @ ./node_modules/@ecomplus/search-engine/src/index.js
 @ ./node_modules/@ecomplus/widget-search-engine/dist/widget-search-engine.es.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/lib/load-widgets.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/index.js
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js

WARNING in ./node_modules/@ecomplus/storefront-template/template/js/index.js 41:9-14
"export 'default' (imported as 'merge') was not found in 'lodash.merge'
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js

WARNING in ./node_modules/@ecomplus/storefront-template/template/js/netlify-cms/init.js 5:25-30
"export 'default' (imported as 'merge') was not found in 'lodash.merge'
 @ ./node_modules/@ecomplus/storefront-template/template/js/admin.js
 @ ./template/js/admin.js

WARNING in ./node_modules/@ecomplus/search-engine/src/methods/merge-filter.js 34:2-7
"export 'default' (imported as 'merge') was not found in 'lodash.merge'
 @ ./node_modules/@ecomplus/search-engine/src/index.js
 @ ./node_modules/@ecomplus/widget-search-engine/dist/widget-search-engine.es.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/lib/load-widgets.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/index.js
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js

WARNING in ./node_modules/@ecomplus/search-engine/src/methods/set-search-term.js 3:2-7
"export 'default' (imported as 'merge') was not found in 'lodash.merge'
 @ ./node_modules/@ecomplus/search-engine/src/index.js
 @ ./node_modules/@ecomplus/widget-search-engine/dist/widget-search-engine.es.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/lib/load-widgets.js
 @ ./node_modules/@ecomplus/storefront-template/template/js/index.js
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js

WARNING in ./node_modules/@ecomplus/storefront-template/template/js/lib/load-widgets.js 75:15-32
"export 'default' (imported as 'widgetProductCard') was not found in '@ecomplus/widget-product-card'
 @ ./node_modules/@ecomplus/storefront-template/template/js/index.js
 @ ./template/js/index.js
 @ multi ./template/scss/styles.scss ./template/js/index.js`

Date range for homepage banners

Is your feature request related to a problem? Please describe.
Homepage must be manually edited every time a new promotion (with new banners) is being applied, right before the scheduled campaign.

Describe the solution you'd like
Add optional fields for home slider config items to specify start and end date for each banner, then edit home.ejs view to treat respective fields and select the banners by date properly.

Describe alternatives you've considered
N/A

Additional context
N/A

Bloco conteúdo customizado não aparece

Mesmo inserindo o bloco conteúdo customizado no cms, o mesmo não aparece nas lojas. Um exemplo está no commit: ecomplus-stores/loja-lov@19f6236

Onde inseri tanto em markdown para ver se parseava o html e o texto em markdown mesmo, mas não mostrou nenhum dos dois na loja. Outro teste feito pelo lojista:

ecomplus-stores/loja-lov@343f73f

Um teste feito por mim, clicando no botão code block dentro do plugin colocando, e o código vem assim:
ecomplus-stores/loja-lov@1bc3896
Com uns ``` antes, não sei se isso valida o html.

Inserir variação com inputs

Permitir que seja renderizado variação com input de texto na loja, onde o cliente do lojista poderá inserir um nome, ou qualquer outro texto. Vide sugestão da comunidade:
https://community.e-com.plus/t/campo-para-personalizados/293

Fix summary items image sizes

https://community.e-com.plus/t/css-imagem-do-produto-no-checkout/182

Purposed solution

.ec-summary__item img {
  width: 50px;
}

Backport to v1

CMS config & preview for each widget

Is your feature request related to a problem? Please describe.
To be more flexible, widget config should not be dependent on template source, it must be provided by the widget itself.

Describe the solution you'd like
Create a standard place on widget packages for the CMS config to be loaded by template, in the same way, widget may be able to provide a script for self preview (Netlify CMS registerPreviewTemplate).

Describe alternatives you've considered
N/A

Additional context
Related files:

• storefront-template/template/js/netlify-cms/pages-preview.js
• storefront-template/template/js/netlify-cms/base-config/collections/widgets.js

For previews, we may compile Vue components to React or load precompiled HTML (as done for template).

Base UI docs

Document base UI with @ecomplus/storefront-twbs:

• Components examples (must check);
• CSS vars reference;
• Colors usage guide;
• Icons list with examples;
• CSS animations list with examples;
• Minor explanation about included JS (jQuery mention);

[WIP] CMS & Page builder

My current opinion about storefront page builder:

We must create a builder to dnd and edit storefront-template components, we can do it with:

• Option 1: Edit CMS config to work such as a layout editor with components dnd (create Netlify CMS widget ?);
• Option 2: Add a separate page builder such as TinaCMS (looks awesome but I'm not sure if it'll work for our case, it's called a toolkit for React-based frameworks);

In addition, each widget should have your own Netlify CMS configuration object with visual options whenever possible, and preferably a proper preview.

[REFACTOR] Storefront Components

Is your feature request related to a problem? Please describe.
Components must be available in a unique package to resolve monorepo dependency warns, reuse and make easier/predictable customization with Webpack aliases.

Describe the solution you'd like
Put all Vue components from widgets and storefront app together on @ecomplus/storefront-components package, then import it properly.

TODOs [WIP]

While refactoring, we should also:

• Fix components to use @ecomplus/i18n (in place of internal dictionary);
• Adapt for @ecomplus/storefront-twbs v5:
  • No more bootstrap-vue, default Bootstrap 4 + jQuery plugins instead;
  • Some utility classes removed;
  • New additional CSS vars;

Base components for v1

• APicture
• APrices
• ABackdrop
• ProductCard (docs: #175)
• SearchEngine
• InstantSearch
• CartItem
• CartQuickview
• ShippingCalculator
• ShippingLine
• ProductGallery
• ProductVariations
• TheProduct
• LoginModal

Inserir link nos selos

Atualmente nos selos existem apenas a opção de link da imagem e tag alt, sugiro inserir url de destino, pois muitos dos selos levam o lojista para outro local, ou é uma pop up de segurança o que justifica a necessidade do uso para aqueles que precisam. Caso alguém não necessite, deixar a opção como vazio.

Trustvox seal

Is your feature request related to a problem? Please describe.
Currently Trustvox seal must be manually included to EJS (insert) code on stores the app and widget, it should be automatically inserted by the widget.

Describe the solution you'd like
Add Trustvox seal (with widget) to footer stamps.

Describe alternatives you've considered
N/A

Additional context
Reference: https://help.trustvox.com.br/article/258-instalacao-do-selo-site-sincero-v2

[REFACTOR] App components

Is your feature request related to a problem? Please describe.
Components should be available in a unique package to reuse and make easier/predictable customization with Webpack aliases.

Describe the solution you'd like
Put all Vue components together on @ecomplus/storefront-components package, then import it properly.

Describe alternatives you've considered
N/A

Additional context
It's the continuation of #167

TODOs [WIP]

While refactoring, we should also:

• Fix components to use @ecomplus/i18n (in place of internal dictionary);
• Adapt for @ecomplus/storefront-twbs v5:
  • No more bootstrap-vue, default Bootstrap 4 + jQuery plugins instead (:heavy_check_mark: done);
  • Some utility classes removed;
  • New additional CSS vars;

Components

• DiscountApplier
• LoginBlock
• TheAccount
• AddressForm
• AccountAddresses
• AccountForm
• OrdersList
• TheCart
• TheCheckout
• TheOrder
• TheConfirmation
• ...

Storefront documentation

Update: Using Vuepress

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

---

Choose the right tool, setup devops and initial doc files for template usage/customization.

Documentation will include:

• Base UI reference and colors guide;
• Vue components references and examples;
• Storefront global variables and events;
• Guide/examples for advanced customization with Webpack aliases;
• Netlify CMS mention, default config and how to customize;
• Guide/examples for creating new widgets;

Which and why?

1. Storybook
2. Vuepress
3. Vuese / Vue styleguidist
4. Start from Bootstrap 4 docs, add things for Vue components (seems laborious)
5. Another (?)

After that we can start documenting base UI with @ecomplus/storefront-twbs #168

Fix Storefront App components for v2

Alguns componentes do Storefront App não são compatíveis com as atualizações do UI (v5):

1. Na nova versão não há mais componentes do BootstrapVue, entretando componentes como EcAccount e EcDiscount, devemos substituir estes componentes do BootstrapVue (<b-*>) por Bootstrap "vanilla".

2. Agora estamos utilizando animate.css, devemos parar de importar vue2-transitions (será removido das dependências) em componentes como o EcAddresses e substituir as transitions no template usando os nomes de classes do animate.css, como feito no EcCart por exemplo.

Observação para o item 1: Esta implementação do alert pode servir de referência 👍

Fixar cabeçalho/rodapé padrão do checkout

O padding nos selos está ruim https://tiasonia.netlify.com/app/#/ aqui, além disto o cabeçalho está com informações faltando (possivelmente só por causa do content desta loja), mas vale checar também..

Criar coleções automáticas de ofertas e lançamentos

Conforme os produtos entrarem em ofertas, mostrar uma vitrine de produtos em oferta. Assim como produtos em lançamento. Vide tópico https://community.e-com.plus/t/grid-ofertas-como-na-e-com-club/241

Preço em destaque configurado no cms

Ao selecionar Parcelado, total ou em desconto não acontece nada ainda.

Error with first access with social login

After trying to login at first time into passport, i select my account, log in and then nothing happen, just url just like this photo:

To pass to another page to continue the register i have to click f5 and then i go to the correct page and works, just like this photo:

See that the url is the same before, but just work when i click f5

Add phone number or wpp in menu's mobile version

Following Google's retail UX playbook menu in the menu and navigation section, it is a good practice to include phone number and whatsapp in the menu.

Maybe a good way to go is inserting it on the top or the botton of the side menu...

Update template styles to twbs v5

Template layout and component styles are out of date, using some classes not available on Storefront Twbs v5, so we must:

1. Update some EJS views removing no more used utility classes;
2. Update some template components SCSS adding CSS vars always then possible;

Defaults no Netlify CMS

Os defaults no Netlify CMS não preenchem as propriedades na collection do tipo file (com o arquivo já existente), na verdade pelo que li funciona apenas para folder collections com create: true, isto vale tanto para props tipo boolean e hidden.

Ou seja, na implementação atual adicionar um novo widget no storefront-template e na configuração padrão do CMS não funciona como deveria porque no storefront o lojista vai adicionar o novo widget sem as props que seriam preenchidas com defaults (ex.: lojatiasonia/emporiotiasonia@69726ac).

Na verdade eu já pensei em uma solução para o bug, mas encontrei uma alternativa que parece melhor aqui https://www.netlifycms.org/docs/collection-types/#filtered-folder-collections :

The entries for any folder collection can be filtered based on the value of a single field. By filtering a folder into different collections, you can manage files with different fields, options, extensions, etc. in the same folder.

Neste caso não utilizaríamos mais file collection para os widgets, e não precisaríamos mais mockar os arquivos (:hankey:) e acredito que (isto é o principal) resolveria o problema com defaults em widgets novos.

Dois possíveis problemas:

1. Não sei se isto é uma feature disponível na versão que utilizamos agora do Netlify CMS (não achei na changelog), pode ser necessário outro deploy https://github.com/ecomclub/netlify-cms;
2. Não sei se estes filtros funcionariam assim que o novo widget estiver sendo adicionado (filtrando por um campo title usando select ?) e já aplicariam de cara os fields, ou isto funcionaria apenas na edição de um widget já "criado" 🤔

Accessibility problems lighthouse

1. Buttons do not have an accessible name (link):

<button class="btn header__toggler" type="button" onclick="toggleSidenav()">

<button class="d-lg-none btn btn-lg btn-light" id="mobile-search-btn" type="button" data-toggle="collapse" data-target="#search-bar" aria-expanded="false" aria-controls="search-bar">

<button type="button" id="ec-user-popover" title="" class="btn btn-lg btn-light" data-original-title="Minha conta">

<a id="cart-button" class="btn btn-lg btn-light" role="button" href="/app/#/cart" data-toggle="tooltip" data-placement="bottom" data-original-title="Abrir carrinho">

<button class="glide__bullet glide__bullet--active" data-glide-dir="=0"></button>

<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">

<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">

<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">

<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">

<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">

<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">

2. <frame> or <iframe> elements do not have a title (link)

<iframe src="https://passport.e-com.plus/v1/1024/4aPiC3GLIytD3Vr1QykZHYEyPUC977Qv/13850106/oauth-session" style="width:0;height:0;border:0;border:none;"></iframe>

3. Form elements do not have associated labels (link)

<input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Seu melhor Email">

4. Links do not have a discernible name (link)

<a href="https://www.facebook.com/alimentostiasonia" target="_blank" rel="noopener" style="color: #3b5998">

<a href="https://www.youtube.com/alimentostiasonia" target="_blank" rel="noopener" style="color: #ff0000">

<a href="https://instagram.com/tiasoniaoficial/" target="_blank" rel="noopener" style="color: #e1306c">

Avisa-me quando chegar

Inserção do avisa-me quando chegar em produtos que acabaram estoque. Acredito que o envio de email seja mais importante, pelo menos foi assim que já vi funcionar em outros lugares. Solicitação vide https://community.e-com.plus/t/avise-me-quando-chegar/178/5

Assign info.json on window

Should setup window._info on ejs scripts with content/info.json object to use info links and texts on widgets.

js/lib/fetch-info.js should also be editted to prevent overriting window._info.

Import only active widgets

• Check if widget is active before importing it;
• Move widgets to dependencies instead of dev deps;

sort menu orders

It was an bug when i put a sort at menu.json it became inverted. So after 2 weeks this bug was fixed, it became to inverted. So tia sonia ask me, and i change the words. Recently i open the website and see another order again. And last week became inverted and now according to https://community.e-com.plus/t/ordem-das-categorias/213/15 is floating between to orders

Organizar forma de pagamento no checkout

Ao invés das formas de pagamento aparecerem de forma aleatória no checkout, manter em uma mesma posição, se possível poder ter a escolha de qual forma de pagamento irá aparecer primeiro. Vide https://community.e-com.plus/t/fixar-formas-de-pagamento/309

Adicionar scroll checkout mobile

A cada etapa do checkout inserir um scroll to top para que o cliente veja toda a informação e não fique eventualmente perdido na inserção de dados no checkout. Vide post da comunidade:
https://community.e-com.plus/t/finalizacao-da-compra/265/12

Installments info on checkout summary

Is your feature request related to a problem? Please describe.
Checkout doesn't show installment/discount option before loading payment methods, may be a problem, it should be visible on entire purchase process.

Describe the solution you'd like
Maybe we can just use APrice on current summary component.

Describe alternatives you've considered
N/A

Additional context
https://community.e-com.plus/t/finalizacao-da-compra/265

Enable form address for custom street/borough

Describe the bug
On checkout, form fields are being disabled after first char input when not auto filled by zip code (BR CEP, viaCEP).

To Reproduce
Steps to reproduce the behavior:

1. Go to checkout
2. Set CEP 55940-000
3. Try to edit street name
4. See error

Expected behavior
Just let the user to edit street/borough name.

Screenshots

Fix postinstall copy path

Should use public/assets/storefront-template/ to work well with sw cache, must fix public path on webpack output too.

[RFC] Customization

How Storefront V2 may be customized (from easier to harder) and TODOs:

1. Insert HTML, JS and CSS with specified files predefined at Storefront Starter:

   • Split views in new partials to make possible to insert HTML in more (any) places;
   • Update Storefront Starter pages with new insert partials and respective imports;

🚫 Update: new (better) approach with Storefront Starter git update ecomplus/storefront-starter#119

2. Edit prerendered HTML through EJS or dynamically update DOM with custom JS (can use jQuery):

   • Template EJS components may have predefined places for additional HTML;
   • Vue components must have slots to support most common additional HTML cases (#167);
   • Widgets must try to keep custom prerendered HTML, preferably trough respective component slots;

Update: tracked on #191

3. Use Webpack aliases on storefront.webpack.js to make deeper edits on Vue component parts (HTML, JS or SCSS);

Fix styles script

Should use env INIT_CWD to require correct content/settings.json file.

Ordenar categorias no menu via CMS

Sugiro implementar através de uma lista ordenável com o widget list, depois basta ordenar o array categoryParents em menu.ejs seguindo a lista definida.

Para não precisar escrever as categorias manualmente, depende da implementação de um novo custom widget: ecomplus/netlify-cms-widgets#2

LTS policy

Write about LTS compliance, current and scheduled next major versions (if any).

Page builder

Is your feature request related to a problem? Please describe.
Merchants usually wants to create components on places we've not planned, mock layout seems to be a not so good approach 😑

Describe the solution you'd like
Create a "page builder" with Netlify CMS using list widget variable type.

Already started it with sections on home (f5da9c9).

• Update all pages collections config to replace mocked layout with sections, keeping only meta fields and sections list.

• Update EJS views to render (include) configured sections properly (WIP @/layout/sections.ejs);

• Update custom preview template implementing a preview (React component) for each section:

  • Use widgetFor and treat each object type to handle respective section preview;
  • To implement each section render function:
    1. Import respective section EJS file (as text with raw-loader), search for includes and also import EJS of included partials file,s, then paste on main EJS (manual include);
    2. Mount data object following our "global" _ EJS data mounted here and checking the data used on sections (may be unnecessary to set all fields as set by framework);
    3. Compile EJS markup;

Describe alternatives you've considered
Update "mocked" layout superpowering pages collections config with needed (most common) customizations (such as #186), but Imo it'll be always not good enough and can become too big.

Additional context
N/A

Adicionar PayPal aos payment icons

Adicionar ícone (carteira PayPal) à imagem vetorial e depois no respectivo SCSS.

Adicionar "scroll to top" no rodapé

Adicionar um ícone no rodapé do storefront-template que ao clique role a página para o header.

O JS deve ser adicionado neste arquivo.

Consistent EJS customization

Is your feature request related to a problem? Please describe.
Some customization on EJS views/components are overwritten by widgets and Vue components, specially for product card now, it's not intuitive and makes customization harder for partners and merchants.

Describe the solution you'd like

• Template EJS components may have predefined places for additional HTML;
• Vue components must have slots to support most common additional HTML cases;
• Widgets must try to keep custom prerendered HTML, preferably trough respective component slots;

Describe alternatives you've considered
N/A

Additional context
From customization RFC.

Alterar plugin editor de texto cms

Sugestão da comunidade para alterar plugin editor de texto do cms para summernote, que permite mais opções de personalização e ainda assim não fica tão poluíde, vide sugestão:
https://community.e-com.plus/t/sugestao-editor-wysiwyg/277/13

Bootstrap themes

Provide custom Bootstrap themes with Bootswatch to chose on CMS 🍦

Banner & logo em WebP (com fallback)

Podemos melhorar report do Lighthouse substituindo o formato das imagens utilizadas de PNG para JPEG 2000.

JPEG2000 does support transparency

Lighthouse Report Viewer.pdf

Actions on navbar

Add links do navbar buttons and submit action to search bar, should work even before widgets loaded.

Banners before each collection on homepage

Is your feature request related to a problem? Please describe.
Merchants frequently want to add banners between collections on home, it should be easy to do inside CMS.

Describe the solution you'd like
Add a banners array field to each showcase object, then handle it on home.ejs to render a banner or list of banners (row) before each respective collection.

Describe alternatives you've considered
Edit it with EJS, more flexible but not so easy.

Additional context
Community topic: https://community.e-com.plus/t/imagens-na-pagina-inicial/203/4

error na ordenação de produtos do filtro

Describe the bug
Na página de pesquisa não está fazendo ordenação de produtos por nenhuma opção escolhida.
To Reproduce
Basicamente ao realizar uma pesquisa por exemplo em https://www.emporiotiasonia.com.br/search?term= e em Ordenar, escolher pro exemplo Menor preço e clicar

Expected behavior
Deveria ordenar os produtos pelo menor preço

Additional context
Ao rodar no local, temos:

found in

---> <SearchEngine> at node_modules/@ecomplus/storefront-components/src/SearchEngine.vue
       <Root> ```

```[Vue warn]: Error in v-on handler: "TypeError: _vm.setSortOrder is not a function"

found in

---> <SearchEngine> at node_modules/@ecomplus/storefront-components/src/SearchEngine.vue
       <Root>

TypeError: "_vm.setSortOrder is not a function"
    click SearchEngine.html:361

[WIP] Dependências duplicadas

#58