This is a Ralph Storefront template, designed mainly to be used for a fashion type of store. It is built with Nuxt.js and fully integrated with Geins Commerce.
- Geins account - Get a free trial here
- Node.js 16.x.x
- Sign up for a free trial at geins.io
- Fork this repository
- Create an .env file in the root of your project. See the file .env.example for a specification of what variables you need to set.
- Now you're ready to start developing your storefront
Install dependencies and then start the development server with hot reload
npm install
npm run devYou can now access your storefront at localhost:3000
In the Nuxt config file nuxt.config.js you can set up most things, for example routes configuration and your runtime config (global variables that are accessed through the $config object). Please refer to the Nuxt Configuration Glossary for more information.
You will find some channel settings in config/channel-settings.js. This is a good place to set up and add variables that differs between channels. All variables added to the theme propery will get converted into global CSS variables and can be used throughout the application. The channel settings are imported into the Nuxt config file and can be used for setup there.
Add your desired logos and fonts etc to the assets folder. In the static folder, you should replace the favicon.ico, icon.png and the meta-image-fallback.jpg with your own. Here is also where you can add assets for your Geins generated mails, in the static/mail folder.
In the styles folder, you'll find all the styles for the application. For the general setup, it is suggested to look through the styles/variables folder, and also the styles/globlal and the styles/helpers folders.
All styles are written in SASS, and the styles are structured according to the BEM methodology.
Ralph Storefront utilizes Ralph UI, a component and core functionality library for Ralph Storefront. This is where most of the components are located. You can override any component from Ralph UI by creating a component with the same name in the components folder. The components folder is structured according to the Atomic Design methodology.
The easiest way to override a component or style from Ralph UI is to use the ralph-ride command. This will create a scss file or both component and scss files in the correct folder structure, and you can then edit them to your liking.
npm run ralph-rideIf you want to create a new component, you can use the ralph-create command. This will create a component file and a scss file in the correct folder structure, and you can then edit them to your liking.
npm run ralph-createTo see the current documentation for the version of Ralph UI you are using, run the following command:
npm run ralph-ui-docsThis will open upp a locally hosted documentation page for your version of Ralph UI.
In the pages folder, you'll find all the pages for the application. File names that begin with an underscore are used for dynamic routes. For example, product/_alias.vue is used to generate the product detail page dynamically based on the alias in the url. Read more about pages in the Nuxt documentation.
In the layouts folder, you can add or edit the layouts for the application. Read more about layouts in the Nuxt documentation.
When you want to test your site for production locally, this is how you build for production and launch the server
npm run build
npm run startVisit the Geins Commerce documentation to learn more about Geins Commerce, Ralph Storefront and everything else in the Geins Commerce ecosystem.
Detailed changes for each release are documented in the CHANGELOG.md.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent