prestashop_accounts_vue_components

prestashop_accounts_vue_components

Community Service & PrestaShop X modules

To work as a Community Service or as PrestaShop X, a module needs three parts:

module ps_accounts

• Contains all the controllers

library npm

• Contains all the vuejs components to manage onboarding

library composer

• Wraps all the calls to ps_accounts
• Contains all the Firebase logic

Installation

yarn

Usage

For view storybook run

yarn start-storybook

and go on local storybook or use online integration storybook

Storybooks

Storybook integration (trigger on PR labeled 'quality assurance needed'):

https://storybook-accounts.distribution-integration.prestashop.net/

Storybook production (trigger on push master/main) :

https://storybook-accounts.distribution.prestashop.net/

CDN

To load a hosted library, copy and paste the HTML snippet for that library (shown below) in your web page.

# To load version 4.0.0
<script src="https://unpkg.com/prestashop_accounts_vue_components@4.0.0"></script>

# To load latest patched version 4.0
<script src="https://unpkg.com/prestashop_accounts_vue_components@4.0"></script>

# To load latest version
<script src="https://unpkg.com/prestashop_accounts_vue_components"></script>

To use the prestashop_accounts_vue_components, you need a prestashop-accounts html tag, when it's in the page you can then call the init function of psaccountsVue

<prestashop-accounts></prestashop-accounts>

<script>
    window.psaccountsVue.init();
</script>

If you need to use the vue cdn for your app, please create your app with the vue esm-browser as follow

<div id="app"></div>

<script src="https://unpkg.com/prestashop_accounts_vue_components@4.0.0"></script>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3.2.26/dist/vue.esm-browser.js';

    const App = {
        data() {
            return {
                name: "John",
            };
        },
        template: `<div>
			<h1>Hello {{ name }}</h1>
			<prestashop-accounts></prestashop-accounts>
		</div>`,
		mounted() {
			window.psaccountsVue.init();
		}

    };

    createApp(App).mount("#app");
</script>