[toc]

Welcome

Introduction

Fastest and secure digital assets selling E-commerce app built with Laravel, React, NextJS, TypeScript and Tailwind CSS. Its very easy to use, we use axios and react-query for data fetching . You can setup your api endpoint's very easily and your frontend team will love using it.

Navigation

You can find different topics in the table of contents. On desktop, you should see it in the left sidebar. On mobile, you should see it after pressing an icon with Hamberger in the top right corner.

Supported Platforms For Local Development

• Compatible Browsers (Firefox, Safari, Chrome, Edge)
• Server(Node.js 16.15.0 or later)
• MacOS, Windows, and Linux are supported

Requirements

• node(16.15.0 or later)

• yarn

• PHP 8.1

• MySQL 8

• ext_curl

• ext_gmp

• editor: Visual Studio Code(recommended)

Tech We Have Used

We have used monorepo folder structure with Yarn Workspace. In our app we have three different services:

• api
• shop
• admin

Tech specification for specific part is given below:

Admin Dashboard

• NextJs
• Typescript
• Tailwindcss
• React Hook Form
• React-Query

Shop Frontend

• NextJs
• Typescript
• Tailwindcss
• React Hook Form
• React-Query
• Next SEO
• Next PWA

API

• Laravel

Getting Started

For getting started with the template you have to follow the below procedure. For quick guide you can check below videos for installation.

Installation Windows

Prerequisites

• PHP 8.1

• Composer

• Xamp/Wamp/Lamp for any such application for apache, nginx, mysql

• PHP plugins you must need

  • simplexml
  • PHP's dom extension
  • mbstring
  • GD Library
  • ext_curl
  • ext_gmp

Frontend

• node(16.15.0 or later)
• yarn
• editor: Visual Studio Code(recommended)

Getting Started

1. First download the file from codecanyon.
2. Unzip the downloaded file and folder structure you get

pixer
|-- pixer-api
|-- admin
|-- shop

3. From the above folder structure you should notice that our app has three parts pixer-api ,shop and admin. So you have to run all the parts separately and sequentially.

   Getting started with api

   • Make sure you have run xamp/mamp/wamp/lamp for mysql and php

   • Create a database in your mysql and put those info in next step

   • Rename .env.example file to .env and provide necessary credentials. Like database credentials, stripe credentials, s3 credentials(only if you use s3 disk) admin email shop url etc. Specially check for this env variables

     DB_HOST=localhost
     DB_DATABASE=pixer_laravel
     DB_USERNAME=root
     DB_PASSWORD=

   • Run composer install

     

     

   • run php artisan key:generate

     

   • Run php artisan marvel:install and follow necessary steps.

     

   • For image upload to work properly you need to run php artisan storage:link.

   

   • run php artisan serve

     

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost:8000/

For MAC and Linux(with sail and docker)

There is an alternate installation procedure for linux and mac. You can follow below procedure to getting started with sail

Prerequisites

• Docker

  NB: Move pixer-laravel folder from Pixer - React Laravel Multivendor Digital Marketplace folder

Installation Mac

Video

• Run Docker application first
• Now go to your pixer-laravel root directory and run bash install.sh. It will guide you through some process. Follow those steps carefully and your app will be up and running
• Navigate to pixer-api then sail down to stop the container. If you want to remove the volumes then sail down -v

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost/

For details api doc and requirements details you can go to Laravel API

Getting Started with Frontend

4. After configuring API & running it successfully you can choose the directory where you need to work

Below are the directories where you will choose to work for frontend stuffs

cd admin

cd shop

After choosing your working directory Go to specific folder and rename the .env.template => .env and put your api endpoint here. You will find .env.template file at the root of your admin or shop

5. Run yarn at the root directory.

# on pixer/root directory
yarn

6. Scripts To Run the fronted App

For Admin :

For starting the admin dashboard part with corresponding api data run below commands.

• using workspace (At the root of the pixer directory, you can run the below commands)

# for dev mode run below command
yarn dev

• without workspace(if you want to run the command within specific project root of admin/{chosen-directory-name})

# for dev mode run below command
yarn dev

This command will run the app in development mode. Open the suggested url in your terminal. like => http://localhost:3000 .

Note:

• The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
• If you saw any error while running make Sure you setup your API endpoint properly at .env file.

For Shop :

• using workspace (At the root of the pixer directory, you can run the below commands)

# for dev mode run below command
yarn dev

• without workspace(if you want to run the command within specific project root of shop)

yarn dev

If you want to test your production build admin or shop in local environment then run the below commands.

Admin (At the root of the pixer directory, you can run the below commands)

# build admin for production
yarn build

#start admin in production mode
yarn start

Shop (At the root of the pixer directory, you can run the below commands)

# build shop for production
yarn build

# start shop in production mode
yarn start

Note : Please see package.json file for other builtin helper commands.

7. For development purpose we use yarn workspace if you want to use it then see the package.json file at root, for various workspace specific command.

• if you prefer single template then just copy the required template folder and separate them. you'll find their package.json file within them and follow the command for dev, build, start.

8. For further development & customization check our Frontend Customization guide.

How to upgrade the existing deployed laravel 9 server to laravel 10?

You can check older laravel version upgrade guides here

At first, remove all the existing php 8.0 and its extensions by using this command,

sudo apt purge php8.0-fpm php8.0-mysql
sudo apt purge php8.0-mbstring php8.0-xml php8.0-bcmath php8.0-simplexml php8.0-intl php8.0-mbstring php8.0-gd php8.0-curl php8.0-zip composer

Then remove the composer,

sudo rm /usr/bin/composer

Then delete the vendor folder from the pixer-laravel -> api folder.

cd /var/www/pixer-laravel/api

sudo chown -R $USER:www-data storage
sudo chown -R $USER:www-data bootstrap/cache

rm vendor -rf

Then install PHP 8.1, and its extensions,

sudo add-apt-repository ppa:ondrej/php
sudo apt update

sudo apt install php8.1-fpm php8.1-mysql

sudo apt install php8.1-mbstring php8.1-xml php8.1-bcmath php8.1-simplexml php8.1-intl php8.1-gd php8.1-curl php8.1-zip php8.1-gmp

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

sudo mv composer.phar /usr/bin/composer

Then update 8.0 fpm to 8.1 fpm from,

/etc/nginx/sites-enabled/pixer

Make sure you didn’t introduce any syntax errors by typing:

sudo nginx -t

Next, restart Nginx:

sudo systemctl restart nginx

Then install composer packages,

cd /var/www/pixer-laravel/api

composer install

php artisan optimize:clear

php artisan marvel:install

php artisan marvel:install will remove all of your existing data. Ensure you export or backup your data before using that command.

sudo chown -R www-data:www-data storage
sudo chown -R www-data:www-data bootstrap/cache

Admin dashboard

• Analytics Dashboard

You will get a complete analytics dashboard to know the overview of your shop.

• Manage Layout Type

  In Layout Types menu you will get the product types and you can add, remove or modify product type from there.

  

• Manage Product Category

  In Categories menu you will get the product types and you can add, remove or modify product categories from there.

  

• Product Management

  In Products menu you will get the products and you can add, remove or modify products from there.

  

  A portion of product form

  

• Order Status

  In Order Status menu you will get the order status list and you can add, remove or modify order status from there.

  

  Order Management

  In Order menu you will get the order list and you can add, remove or modify order from there.

  

A portion of order management. Order status change.

Customer Management

In Customer menu you will get the Customer list and you can add, remove or modify Customer from there.

Tax Management

In Tax menu you will get the Tax list and you can add, remove or modify Tax from there.

Settings Management

In settings menu you will get the settings management form there.

Available Scripts:

You can run below commands in the root folder for your need.

Shop

"clean": "rimraf \"{node_modules,.next,.cache}\"",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prepare": "husky install"

Admin

"dev": "next dev -p 3002",
"build": "next build",
"start": "next start -p 3002"

For customizing the template's default site settings:

[your-frontend-project] = admin or shop

• To setup you site's basic information like [Logo,Site title,Description, Menus,etc] go to -> src/settings/site-settings.ts file
• To customize tailwind configuration go to -> tailwind.config.js file.
• /public: To change your app favicon images here.
• /src/assets: We managed our css & images in this directory.
• /src/components: This folder contains all the app related components.
  • auth: In this folder we contains our auth components and logics.
  • cart: Here you will find all of our cart & checkout components, utilities function, context api and etc.
  • drawer-views: We managed all of our side Drawer's view, context api & drawer UI in this folder.
  • modal-views: We managed all of our modal's view, context api & modal UI in this folder.
  • icons: Our app's custom svg icons components directory, if you need any then add your custom svg icon components here.
  • product: All the product related card, popup, loaders, description etc components in this folder.
  • search: Search handler, Search Popup & Results related components are here.
  • shop: Shop related components are goes in this folder.
  • ui: This folder contains common reusable ui components.
• /src/config: This folder contains all necessary configuration related for this app. Like env, routes etc.
• /src/data: It's contain all the data fetching related codes along side with our app's static data.
  • /src/data/static: Here you can find our terms, privacy, help, licensing data and in the site-settings.ts file we manage our dark & light mode logo along side with our explore page carousel images.
• /src/layout: It's contain all layouts and layout's related components like header, bottom navigation, sidebar, container and etc.
• /src/lib : This folder contains constants, hooks, framer motion & general utils functions.
• /src/pages: All the pages created here which is used by nextjs routing mechanism.
• /src/types: Reusable function & component's types are located in this folder.

NOTE ** Some of these options are customizable through ADMIN Dashboard.

CSS styles:

[your-frontend-project] = admin or shop

We use tailwindcss framework with some customization which you find at :

open [your-frontend-project]/tailwind.config.js

For tailwindcss documentation:

Go to Tailwindcss

Icons:

for our icons

open [your-frontend-project]/src/components/icons

For Adding a custom Icon:

To add a custom icon please follow this procedure.

1. Open your custom SVG icon file in the code editor and copy all the code.
2. Then Go to src -> components -> icons folder and create a new .tsx file.
3. Then here create a function component and paste your copied SVG code inside the return statement.
4. Then covert all the SVG's kebab-cases properties into camelCase format except the data-name property. For ex. change the stroke-width and fill-color into strokeWidth and fillColor. (for reffernce you can see one of our icon. )
5. If your custom SVG code has any single custom color then change them into fillColor.

Utilities

In this template, We have used some custom helper functions which is located in

[your-frontend-project] = admin or shop

cd [your-frontend-project]/src/utils/

You can use or customize these helper functions according to your needs.

Backend integration

For API Integration:

[your-frontend-project] = admin or shop

We have used env variables using .env file format. You have to put your API url within this file.

For example:

Put that url in the shop/.env and admin/.env

NEXT_PUBLIC_REST_API_ENDPOINT= '{put_your_api_url_here}'

Data fetching

[your-frontend-project] = admin or shop

For this project we provide an laravel rest api integration. We have used react-query ~~ hook pattern ~~ and fetched data from laravel API. Please go to data/ folder for those hooks.

• Creating the hook.
  • We have imported the Product type from @/types (We have used typescript path aliasing for this. For more info please see our tsconfig.json file).
  • We have built an axios instance and a wrapper class which called http-client.
  • We have put all ours endpoint at @data/client/endpoints file using constant value.
  • We have created a client class which will define all the methods required for API actions.

class Client{
  users = {
    me: () => HttpClient.get<User>(API_ENDPOINTS.USERS_ME),
    update: (user: UpdateProfileInput) =>
      HttpClient.put<User>(`${API_ENDPOINTS.USERS}/${user.id}`, user),
    login: (input: LoginUserInput) =>
      HttpClient.post<AuthResponse>(API_ENDPOINTS.USERS_LOGIN, input),
    register: (input: RegisterUserInput) =>
      HttpClient.post<AuthResponse>(API_ENDPOINTS.USERS_REGISTER, input),
    forgotPassword: (input: ForgetPasswordInput) =>
      HttpClient.post<PasswordChangeResponse>(
        API_ENDPOINTS.USERS_FORGOT_PASSWORD,
        input
      ),
  }
  ....
}
export default new Client();

using the client class

you can use the client class to fetch data from the API. like below

import client from '@/data/client';
async () => await client.users.me();

• We have built our product hook useProduct using react-query and the client instance.

import type { Product } from '@/types';
import { useQuery } from 'react-query';
import { API_ENDPOINTS } from '@/data/client/endpoints';
import client from '@/data/client';

export function useProduct(slug: string) {
  const { data, isLoading, error } = useQuery<Product, Error>(
    [API_ENDPOINTS.PRODUCTS, slug],
    () => client.products.get(slug)
  );
  return {
    product: data,
    isLoading,
    error,
  };
}

For more information about react-query please visit React Query.

• Using the hook

const { product, isLoading, error } = useProduct(slug.toString());

Deployment

AWS (Amazon Web Service)

If you want to use all the scripts (shop, admin, api) on the same server as this tutorial, then we recommend creating a blank ubuntu-based server with at least 2+ CPU cores and 2GB+ memory.

How to create ec2 server?

In this AWS tutorial, we're going to create an ec2 server. To do that at first, login to your AWS account and then click,

ec2 -> Instance -> Launch Instance

Then select a ubuntu 20.04 server

After that, click Next -> Next -> Next -> Next

And on security pages, add a rule for HTTP,HTTPS and SSH,

Our automation scripts setup HTTPS in your domain so you should open HTTPS

After review, click Launch, and you'll get and popup for KeyPair, which will be required to login to the server using ssh.

If you already have a previous KeyPair, you can use that; otherwise, you can create a new one. After completing that, make sure you download that KeyPair.

After launching the instance, you'll get the server IP, which will be required to login into ssh.

Domain Setup

Now copy the server IP and connect it with your domain name.

Please contact your domain provider for detailed explanation of how to do that.

Login to Server

At first, login to your AWS server using ssh. to do that, go to the folder from the terminal where KeyPair is downloaded.

then click Connect

From the Connect dashboard, go to SSH Client and copy the example line and paste it to your terminal.

With this command, you will successfully connect to your server throw ssh.

Change permission .pem

You've to change the permission downloaded .pem file to 400 to access the server. To do that, at first go to the location where .pem store then run,

chmod 400 pixer.pem

Change the pixer.pem filename if you use a different name during generate the key.

Now go to the VPS Server section for deploy the Pixer Laravel

VPS Server

Virtual Private Server (Automated Script)

With this tutorial, you can install Pixer to any type of blank or empty ubuntu server. For example, Digital Ocean Droplets, Amazon Lightsail, AWS, Google Cloud Virtual Private Server, Azure Ubuntu Virtual Private Server, etc.

If you want to use all the scripts (shop, admin, api) on the same server as this tutorial, then we recommend creating a blank ubuntu-based (v20.0.4 lts) server with at least 2+ CPU cores and 2GB+ memory.

Please connect your domain with server. We don't recommend/support deployment the project via IP.

Please follow this video with the documentation, and it'll make the installation process relatively easy.

Prerequisite

This automated script is for the *nix system. So if you are using mac or Linux, then you're good to go. But if you are using windows, then install WSL on your computer and use this script using WSL or follow this manual installation

Before starting, the procedure ensures that NodeJS 16 (the latest) is installed on your computer.

npm i -g yarn zx

Now you can follow the script installation procedure,

At first login your server from terminal

ssh SERVER_USERNAME@SERVERIP

Make sure that you are logged in your server then follow the next step and run suggested command.

Upload api and deployment project to Virtual Server form your PC - RUN on Local PC

To upload the zipped pixer-api and deployment files to server you need to run the below command form your pixer project root

while running below command you will asked for enter your server username and ip address by entering and a successful connection you will also asked for enter your pixer-api.zip and deployment.zip files path and the path will be look like /home/your_project_folder_path/pixer-laravel/pixer-api.zip for pixer-api.zip file so forth for deployment.zip

bash deployment/deployment.sh

Then login your server using ssh and,

Server Environment setup script - RUN on Virtual Server

bash /var/www/pixer-laravel/deployment/nodesetup.sh

Nginx Setup And Settings - RUN on Virtual Server

zx /var/www/pixer-laravel/deployment/setenv.mjs

Backend build - RUN on Virtual Server

sudo zx /var/www/pixer-laravel/deployment/backendbuildscript.mjs

Frontend build script - RUN on Local PC

Run the below command from your pixer-laravel project root

zx deployment/frontendbuildscript.mjs

Frontend run script - RUN on Virtual Server

zx /var/www/pixer-laravel/deployment/frontendrunscript.mjs

cPanel

It's quite hard to debug any deployment issue on the cPanel or any managed server as the provider manages this type of server, and they've complete control of the server. And for that, We don't recommend Cpanel or any managed server for deployment. We suggest you use any VPS server where you have complete control of it. you can purchase any $5 – $10/mo server from amazon lightsail, ec2 or digitalocean or any ubuntu server

If you still decide to proceed with cpanel, our support team won't be able to help you. We have put some resources for Cpanel in this documentation section to help our users to get started but other than that, we don't have much to offer with Cpanel.

Access Server

To install the API, access the server using the cPanel terminal first,

If you don't find the terminal, then login to your local computer terminal or putty for Windows using SSH.

After enabling the ssh login to your server using ssh,

If you dont't see any option, then contact your hosting provider as cPanel control by hosting provider.

After logging in, Check if the composer is already installed or not using this command,

composer -v

If composer is not installed then, install composer to your server.

Check this YouTube Video for install composer on your server,

After that, check the PHP version using,

php -v

make sure it's 8.1

Create Subdomains

Now create two subdomains, for example,

-> your_domain.com -> host frontend store.
-> api.your_domain.com -> host laravel API.
-> admin.your_domain.com -> host admin dashboard.

Or if you want to host all the script on subdomains, then create subdomains like this,

-> store.your_domain.com -> host frontend store.
-> api.your_domain.com -> host laravel API.
-> admin.your_domain.com -> host admin dashboard.

After creating domain/subdomains, make sure all the domain/subdomains are HTTPS enabled. Please contact your hosting provider to enable this, as most hosting providers provide some sort of free SSL.

Install API

1. Extract the pixer-laravel package that you download from CodeCanyon.
2. On that folder, you'll get another zip called pixer-laravel.zip.
3. Now extract this pixer-laravel.zip file.
4. On that file, you'll get a folder called pixer-api

Now upload this pixer-api folder to the api.your_domain.com folder in your server

Make sure your api.your_domain.com subdomain Document Root points to that api/public folder.

Now create a MySQL database and user from MySQL wizard

After creating the MySQL database, go to your api folder from your cPanel file manager and copy .env.example to .env.

After the copy, edit .env and add MySQL credentials,

Also, add https://YOUR_DOMAIN.COM/api to APP_URL. Without this, the upload function will be broken.

Then go to your ssh terminal again and,

go to api folder and run,

composer install

If composer installs all the packages successfully, then run this command on the api folder,

php artisan key:generate

php artisan marvel:install

You'll get several confirmations for migration, dummy data, and admin account. Make sure you check the confirmation step and take the necessary actions based on your requirement.

After that, run this command to link storage,

php artisan storage:link

After install, go to your api.your_domain_name.com, and you'll get a webpage like this,

Install FrontEnd

Before proceeding next step, make sure you already create two subdomains like this,

-> your_domain.com -> host frontend store.
-> admin.your_domain.com -> host admin dashboard.

OR

-> store.your_domain.com -> host frontend store.
-> admin.your_domain.com -> host admin dashboard.

FrontEnd Project Build

Typescript requires a huge chunk of memory to build the project, so if your server has at least 8gb+ of memory, then you can build the project on your server directly. If not, then build the project on your server, then move the folder to the server then serve the project. We'll do the second method in this tutorial.

We'll suggest you build the frontend part on your computer and then upload the build file to the server.

step 1 - Build Custom Server

go to your pixer-laravel folder

shop rest

Create custom server for shop rest,

nano shop/server.js

and paste this code,

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3003, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3003')
  })
})

Now update package.json for shop rest,

nano shop/package.json

and replace start script with this,

"start": "NODE_ENV=production node server.js"

admin rest

Similarly, create custom server for admin rest,

nano admin/server.js

and paste this code,

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3002, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3002')
  })
})

Now update package.json for admin rest,

nano admin/package.json

and replace start script with this,

"start": "NODE_ENV=production node server.js"

Step 2 - Install & Build

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn

Step 3 - Build the project

At first, we've to copy the sample .env.template to production .env for the shop and admin first.

Go to,

cd shop

then use this command to copy,

cp .env.template .env

Now edit .env and add you API url to .env

nano .env

and use

NEXT_PUBLIC_REST_API_ENDPOINT=https://api.YOUR_DOMAIN.com/

After that, go to the admin -> rest folder,

cd ../admin

then use this command to copy,

cp .env.template .env

nano .env

and use

NEXT_PUBLIC_REST_API_ENDPOINT=https://api.YOUR_DOMAIN.com/

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn build

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn build

and run,

After build the project upload the

• shop to root_domain -> public_html folder
• admin-rest to admin.your_domain.com folder

shop,

shop-admin,

Install NodeJs Project

We'll run both shop and admin using the cPanel NodeJs application in this step.

To do that at first go to the NodeJS section from your cPanel,

For shop,

Now,

• Select NodeJS version
• Make environment production.
• Set Application Root
• And application startup file as server.js

You can get the Application Path from your cPanel file manager

After create NodeJS app, install all the packages and restart the app,

For admin,

Similarly, create a another NodeJS application for admin with admin subdomain and admin subdirectory

After installing and run both NodeJS application, you can access your domain to check Pixer,

Thank You!

Vercel

vercel.com

If you want to host the template in vercel.com then follow this documentation with this tutorial,

API

It's not possible to host the API to vercel. Vercel doesn't support laravel API deployment. So you've to host the API on a separate server. We suggest you create a VPS server and host the API there.

To host the API to a seperate server, follow this doc from Beginning to Install API

After host the API successfully follow this part,

Frontend

Now for frontend add API URL and other necessary config details to,

shop -> vercel.json

Open shop -> next.config.js and add your domain to images object

If your API is hosted on a subdomain, then add that subdomain with root domain on next.config.js

admin -> vercel.json

Open admin -> next.config.js and add your domain to images object

If your API is hosted on a subdomain, then add that subdomain with root domain on next.config.js

after that, install vercel cli on your computer using this command,

npm i -g vercel

After that, log in to vercel using this command,

vercel login

Then go to the shop directory and use this command to deploy,

vercel

Similarly, go to the admin directory and use this command to deploy,

vercel

For more details,

Please follow nextjs deployment docs:

Virtual Private Server (Manual)

If you want to deploy the app using automated script then follow this

If you want to use all the scripts (shop, admin, api) on the same server as this tutorial, then we recommend creating a blank ubuntu-based server with at least 2+ CPU cores and 2GB+ memory.

Please connect your domain with server. We don't recommend/support deployment the project via IP.

Please use the ubuntu 20.04 LTS version for this documentation.

With this tutorial and documentation, you can install Pixer to any type of blank or empty ubuntu server. For example, Digital Ocean Droplets, Amazon Lightsail, AWS, Google Cloud Virtual Private Server, Azure Ubuntu Virtual Private Server, etc.

Please follow this video with the documentation, and it'll make the installation process relatively easy.

Access Server

At first login your server using SSH and Terminal

Install NodeJS & Required Application

Install NodeJS

At first, we've to install NodeJS and npm to run the pixer app. To install NodeJS and npm, run this command on your terminal,

sudo apt-get update

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt-get install -y nodejs

Install Yarn

Pixer is highly dependent on yarn, it would be best to handle all the script parts using yarn. So to install yarn, use this command,

sudo npm i -g yarn

If you face any permission issue, then please check this official doc to resolve that,

Npm Permission Issue

Install Zip & Unzip

sudo apt install zip unzip

Install PM2

Now we will install PM2, which is a process manager for Node.js applications. PM2 provides an easy way to manage and daemonize applications (run them in the background as a service). To install PM2 use this command,

sudo npm install -g pm2

After restarting the server or if the server crash, then pm2 will halt the process. To prevent that, we'll add pm2 as a startup process to run automatically after restart the server.

pm2 startup systemd

After running this command, it'll provide you a command. Just copy -> paste -> enter to execute that command.

Setup Server

Introduction

Nginx is one of the most popular web servers in the world. In this deployment tutorial, we're going to use Nginx to host our website. In this tutorial, we're going to use ubuntu 20.04 to host pixer

Step 1 - Installing Nginx

After creating the server, make sure the apt library is up to date. To update the apt library, use this command,

sudo apt update

Add PPA to get the specific php version

sudo add-apt-repository ppa:ondrej/php

sudo apt update

After the update apt, we're going to install Nginx. To do that, use this command

sudo apt install nginx

Step 2: Adjusting the Firewall

Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

To check the ufw list, use this command,

sudo ufw app list

You will get a listing of an application list like this,

At first, add ssh to the firewall,

sudo ufw allow ssh
sudo ufw allow OpenSSH

After that, to enable Nginx on the firewall, use this command,

sudo ufw allow 'Nginx HTTP'

Now enable the firewall,

sudo ufw enable

sudo ufw default deny

You can verify the change by typing:

sudo ufw status

The output will be indicated which HTTP traffic is allowed:

Step 3 – Checking your Web Server

Now check the status of the Nginx web server by using this command,

systemctl status nginx

You'll get an output like this,

Step 4 - Install MySQL

sudo apt install mysql-server

Step 5 - Install PHP & Composer

sudo apt install php8.1-fpm php8.1-mysql

sudo apt install php8.1-mbstring php8.1-xml php8.1-bcmath php8.1-simplexml php8.1-intl php8.1-gd php8.1-curl php8.1-zip php8.1-gmp

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

sudo mv composer.phar /usr/bin/composer

Step 6 - Create MySQL Database & User

sudo mysql

CREATE DATABASE pixer;

CREATE USER 'pixer_user'@'%' IDENTIFIED WITH mysql_native_password BY 'pixer1';

GRANT ALL ON pixer.* TO 'pixer_user'@'%';

FLUSH PRIVILEGES;

We use MySQL user name pixer_user and MYSQL password pixer1. Make sure you change at least MySQL password for security.

Step 7 - Change permission for the www folder

sudo chown -R $USER:$USER /var/www/

Step 8 - Upload API to Server

At first, use this command to create a directory on /var/www/pixer-laravel

mkdir /var/www/pixer-laravel

Then, go to your local computer

1. Extract the zip package that you download from CodeCanyon.
2. On that folder, you'll get another zip called pixer-laravel.
3. Extract that zip package.
4. On that folder, you'll get a folder called pixer-api

Now upload this pixer-api folder to the server /var/www/pixer-laravel/

Step 9: Setting Up Server & Project

In this chapter, we'll set up our server and also will set up Reverse Proxy to host all of our sites from the same server.

At first, we'll disable the default configuration.

sudo rm /etc/nginx/sites-enabled/default

Step 10 - Create New Nginx for the domain

sudo touch /etc/nginx/sites-available/pixer

sudo nano /etc/nginx/sites-available/pixer

Add this Nginx config file to that edited file,

server {
    listen 80;

    server_name YOUR_DOMAIN.com;

    client_max_body_size 256M;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    # For API
    location /backend {
        alias /var/www/pixer-laravel/pixer-api/public;
        try_files $uri $uri/ @backend;
            location ~ \.php$ {
            include fastcgi_params;
            fastcgi_param SCRIPT_FILENAME $request_filename;
            fastcgi_pass   unix:/run/php/php8.1-fpm.sock;
         }
   }

   location @backend {
      rewrite /backend/(.*)$ /backend/index.php?/$1 last;
   }

   # For FrontEnd
   location /{
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /admin{
        proxy_pass http://localhost:3002/admin;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Make sure you change YOUR_DOMAIN.com to your specific domain name

You can change api path, if you want to change the the domain path for the laravel application

You can change admin path, if you want to change the the domain path for the frontend admin

Save and close the file by typing CTRL and X, then Y and ENTER when you are finished.

Then enable the config

sudo ln -s /etc/nginx/sites-available/pixer /etc/nginx/sites-enabled/

Make sure you didn’t introduce any syntax errors by typing:

sudo nginx -t

Next, restart Nginx:

sudo systemctl restart nginx

Secure Server

Step 1: Secure Nginx with Let's Encrypt

sudo apt install certbot python3-certbot-nginx

sudo ufw status

sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'

sudo ufw status

sudo certbot --nginx -d YOUR_DOMAIN

After this command, you'll get several command prompt. Make sure you take the necessary steps and provide information on that command prompt.

Install API

Step 1: Build and Run api

At first, go to the pixer-api folder, then copy .env.example to .env,

cd /var/www/pixer-laravel/pixer-api

cp .env.example .env

Edit .env

nano .env

And add MySQL, stripe, mail or others configuration.

Also, add https://YOUR_DOMAIN.COM/backend to APP_URL. Without this, the upload function will be broken.

Then install all the packages and install api

composer install

php artisan key:generate

php artisan marvel:install

You'll get several confirmations for migration, dummy data, and admin account. Make sure you check the confirmation step and take the necessary actions based on your requirement.

Enable laravel storage,

php artisan storage:link

Then give proper permission for laravel folder,

sudo chown -R www-data:www-data storage
sudo chown -R www-data:www-data bootstrap/cache

Now, when you go to the YOUR_DOMAIN/backend you'll get a welcome page like this

FrontEnd Project Build

Typescript requires a huge chunk of memory to build the project, so if your server has at least 8gb+ of memory, then you can build the project on your server directly. If not, then build the project on your server, then move the folder to the server then serve the project. We'll do the second method in this tutorial.

We'll suggest you build the frontend part on your computer and then upload the build file to the server.

Go to your pixer-laravel folder from your local computer.

Step 1 - Config Next Admin App For /admin Sub Directory

Edit admin/next.config.js,

add basePath for '/admin'

Step 2 - Install & Build

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn

Step 3 - Build the project

At first, we've to copy the sample shop -> .env.template to shop -> .env.

Now edit .env and add you API url to .env

and use

NEXT_PUBLIC_REST_API_ENDPOINT="https://YOUR_DOMAIN/backend"

After that, copy the sample admin -> .env.template to admin -> .env.

and use

NEXT_PUBLIC_REST_API_ENDPOINT="https://YOUR_DOMAIN/backend"

Then open shop -> next.config.js and admin -> next.config.js

and add your domain to images object

If your API is hosted on a subdomain, then add that subdomain with root domain on next.config.js

Build Project

Now go to the pixer-laravel -> admin folder,

and run,

yarn build

again,

Now go to the pixer-laravel -> shop folder,

and run,

yarn build

Now zip admin, shop files and upload them to the server /var/www/pixer-laravel

Now go to the server /var/www/pixer-laravel using terminal

Install FrontEnd And Run

Then install all the node packages go to /var/www/pixer-laravel/shop and use this command,

yarn

Then go to /var/www/pixer-laravel/admin and use this command,

yarn

Run frontend app

For shop app, use this command from pixer-laravel -> shop folder,

pm2 --name shop-rest start yarn -- run start

And, For admin app, use this command from pixer-laravel -> admin folder,

pm2 --name admin-rest start yarn -- run start

Now go to Now, go to your YOUR_DOMAIN to access the shop page and YOUR_DOMAIN/admin for the access admin section.

Update

Pixer Update - Virutal Private Server

If you follow this Virtual Private Server docs to host your site, then follow this documentation to update Pixer to a new version.

To build the frontend you've to update the API first. But before that this time, we'll use git and GitHub to make upload and download relatively easy.

Step 1: Setup Git - Server

This step is only for first update. From second update start from Step 2

At first, we've to install git on our server and config it.

Install git

sudo apt install git

Config for first time

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

Make sure you change you@example.com and Your Name with your email and name.

Prepare Git Repository

At first, go to your pixer directory on your server,

cd /var/www/pixer

2. Then initialize a git on that folder,

git init

3. Create a new .gitignore file

nano .gitignore

and paste this code to that .gitignore,

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js

# testing
/coverage
# *~
*.swp
tmp/

# misc
.DS_Store

# If Packages have their independent repo
# /packages

# ignore log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.idea/
.vscode/
node_modules/
.DS_Store
*.tgz
my-app*
lerna-debug.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.changelog
.npm/
packages/server/node_modules
packages/server/error.log
packages/server/debug.log
packages/web/.env
packages/reusecore
packages/cloud

.docz
.now
.vercel

After that, save that file and use this command for the initial commit,

git init

git add .

git commit -m "Initial commit"

Create a separate branch to maintain the updated code.

git branch pixer

Git & Github

1. At first, go to https://github.com/ and create an account first. If you already have an account then Sign In on that account.
2. Then create a new repository,
3. After creating the repository you'll get a page like this and from this page copy the second command block and go to your server using SSH & terminal,

And paste that copied command to pickabazar folder and press enter

It'll ask your GitHub username and password, provide your GitHub username and password

Your existing repository is successfully connected with GitHub.

Step 2: Shut Down Current Process

At first use this command to shut down all the applications for update,

pm2 stop 'all'

Step 3: Local Repository & Updated Code

In this step,

1. Clone that GitHub repository to your local computer
2. Download update package from CodeCanyon
3. Open your terminal and clone that repository to your computer
4. Checkout to pixer branch

git checkout -b pixer

5. replace repository file with downloaded pixer-laravel folder content.
6. Then use this command to add all files to git

git add .

git commit -m "Update Pixer API"

7. Merge new code with main branch

git checkout -b main

git merge pixer

In this step, you'll face a merge conflict issue. Make sure you resolve all the conflicts to maintain your customization with the updated code. You can check this video about resolve merge conflict.

After resolve and commit, push the code to GitHub.

git push origin main

Step 4: Update API

In this step, go to your server terminal and go to /var/www/pixer directory and pull all updated code,

git pull origin main

After pull go to api folder,

cd api

and install composer package and optimize compiled file,

composer install

php artisan optimize:clear

With that updated API will be installed. To check go to your YOUR_API_DOMAIN/products

Step 5: FrontEnd Project Build

Typescript requires a huge chunk of memory to build the project, so if your server has at least 8gb+ of memory, then you can build the project on your server directly. If not, then build the project on your server, then move the folder to the server then serve the project. We'll do the second method in this tutorial.

We'll suggest you build the frontend part on your computer and then move the build file to the server using git and github.

Go to your local git repository using terminal.

Config Next Admin App For /admin Sub Directory

Edit admin/next.config.js,

add basePath for '/admin'

Install & Build

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn

Build the project

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn build

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn build

Upload to GitHub

Use this command to add all files to git,

git add .

git commit -m "Build frontend"

git push origin main

Step 6: Upload Frontend & Run

At first go to your server pixer or git folder and use this command to pull all the build file,

git pull origin main

Then install all the node packages,

go to your pixer-laravel -> admin folder again

To install all the npm packages run this command,

yarn

Again,

go to your pixer-laravel -> shop folder again

To install all the npm packages run this command,

yarn

Run frontend app

Use this command to run frontend app as PM2 again.

pm2 start 'all'

Now go to Now, go to your YOUR_DOMAIN to access the shop page and YOUR_DOMAIN/admin for the access admin section.

SEO and Analytics

SEO

For SEO, we use Next SEO packages, and we provide two boilerplates at

shop -> src -> components -> seo

With that boilerplate, check Next SEO docs to use SEO on your pixer site,

https://github.com/garmeeh/next-seo

Analytics

We have not used any analytics integration in this template yet. But, you can easily integrate any analytics using Next JS examples.

Laravel API

Introduction

Pixer is a laravel multi api package for ecommerce. This package is for building dynamic ecommerce site using pixer package with rest.

Getting Started

For getting started with the template you have to follow the below procedure. For quick guide you can check below videos for installation.

Installation Windows

Prerequisites

• PHP 8.1

• Composer

• Xamp/Wamp/Lamp for any such application for apache, nginx, mysql

• PHP plugins you must need

  • simplexml
  • PHP's dom extension
  • mbstring
  • GD Library

Resources you might need

1. https://laravel.com/docs/8.x
2. https://lighthouse-php.com/5/getting-started/installation.html
3. https://github.com/spatie/laravel-medialibrary
4. https://github.com/andersao/l5-repository
5. https://spatie.be/docs/laravel-permission/v3/introduction

Packages we have used

"laravel/socialite": "5.5.2",
"laravel/tinker": "2.7.2",
"messagebird/php-rest-api": "3.1.2",
"symfony/http-client": "6.0.9",
"psr/log": "2.0.0",
"symfony/mailgun-mailer": "6.0.7",
"twilio/sdk": "6.40.0",
"srmklive/paypal": "3.0",
"mll-lab/graphql-php-scalars": "5.4.0",
"nuwave/lighthouse": "5.57.0",
"laravel/legacy-factories": "1.3.0",
"cviebrock/eloquent-sluggable": "9.0.0",
"laravel/sanctum": "2.15.1",
"mll-lab/laravel-graphql-playground": "2.6.0",
"prettus/l5-repository": "2.8.0",
"spatie/laravel-medialibrary": "10.4.1",
"spatie/laravel-permission": "5.5.5",
"php-http/guzzle7-adapter": "1.0.0",
"bensampo/laravel-enum": "5.3.1",
"league/flysystem-aws-s3-v3": "3.1.1",
"spatie/laravel-newsletter": "4.11.0",
"spatie/period": "2.3.3",
"kodeine/laravel-meta": "2.1.0",
"maatwebsite/excel": "3.1.44",
"niklasravnsborg/laravel-pdf": "4.1.0",
"cknow/laravel-money": "7.0.0",
"mollie/laravel-mollie": "2.19.1",
"razorpay/razorpay": "2.8.4",
"unicodeveloper/laravel-paystack": "1.0.8",
"stripe/stripe-php": "8.11.0",
"stevebauman/purify": "5.1.1",

Installation

• Make sure you have run xamp/mamp/wamp/lamp for mysql and php

  • Create a database in your mysql and put those info in next step

  • Rename .env.example file to .env and provide necessary credentials. Like database credentials, stripe credentials, s3 credentials(only if you use s3 disk) admin email shop url etc. Specially check for this env variables

    DB_HOST=localhost
    DB_DATABASE=pixer_laravel
    DB_USERNAME=root
    DB_PASSWORD=

  • Run composer install

    

    

  • run php artisan key:generate

    

  • Run php artisan marvel:install and follow necessary steps.

    

  • For image upload to work properly you need to run php artisan storage:link.

  

  • run php artisan serve

    

NB: You must need to run php artisan marvel:install to finish the installation. Otherwise your api will not work properly. Run the command and follow the necessary steps.

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost:8000/

For MAC and Linux(with sail and docker)

There is an alternate installation procedure for linux and mac. You can follow below procedure to getting started with sail

Prerequisites

• Docker

REST API

• Run Docker application first
• Now go to your pixer-laravel root directory and run bash install.sh. It will guide you through some process. Follow those steps carefully and your app will be up and running
• Navigate to api then sail down to stop the container. If you want to remove the volumes then sail down -v

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost/

Configuration

All the configurations files are in packages/marvel/config folder. You can change any necessary configuration from these files. You can also publishes the shop configuration using artisan vendor:publish --provider="Marvel\ShopServiceProvider" --tag="config" command in your root folder.

• Create .env file from our example.env file and put necessary configuration
• By default s3 is using for media storage but you can also use local folder. Change MEDIA_DISK IN .env file as your need. Supported options are public and 's3`
• Set Payment related configuration to STRIPE_API_KEY .env variable
• Set ADMIN_EMAIL, SHOP_URL and necessary Database credentials.

Console Commands

• php artisan marvel:install complete installation with necessary steps
• php artisan marvel:seed seeding demo data
• php artisan marvel:copy-files copy necessary files
• php artisan vendor:publish --provider="Marvel\ShopServiceProvider" --tag="config" published the configuration file

All of the above custom command you will find in packages/marvel/src/Console folder.

Development

All the rest routes is resides in packages/marvel/src/Rest/Routes.php file and you can easily navigate to corresponding controller and necessary files.

Endpoints

https://documenter.getpostman.com/view/11693148/UVC5Fo9R

Folder structure

config

The packages/marvel/config folder contains all the config for our app.

database

The packages/marvel/database folder contains all the factories and migrations.

• Http:

  Contains two folders. Controllers and Requests. All the necessary controllers and requests are in this two folder.

• Database:

  Contains Models and Repositories. For repositories we have used l5-repository(https://github.com/andersao/l5-repository).

Enums

All the enums that are used throughout the app is in packages/marvel/src/Enums folder.

Events

All the events are in packages/marvel/src/Events folder.

Listeners

All the listeners corresponding to the above events are in packages/marvel/src/Listeners folder

Mail

All the mailables are in packages/marvel/src/Mails folder.

Notifications

Notifications related to order placed is reside packages/marvel/src/Notifications. Currently we have provided mail notification but you can easily add others notification system using laravel conventions.

Providers

All the secondary service providers that we have used in our app resides in packages/marvel/src/Providers folder. The main ShopServiceProviders reside in packages/marvel/src/ folder.

stubs

The packages/marvel/stubs folder contains all the necessary email templates and demo data related resources for the app.

Before Finishing up

Before you finishes the installation process make sure you have completed the below steps.

• Copied necessary files and content to your existing laravel projects(if using existing projects)
• Installed all the necessary dependencies.
• Ran marvel:install commands and followed the necessary steps.
• Created a .env file with all the necessary env variables in the provided projects.
• Put DISK_NAME configuration for public or 's3`
• Set Payment related configuration to STRIPE_API_KEY

Payment Gateway

We have used omnipay for payment and given stripe and cash_on_delivery default. We have used ignited/laravel-omnipay by forking it in our packages due to some compatibility issue with Laravel 8.

Extending The Functionality

If you want to extend the functionality of the app you can easily do it on your app. You would not need to modify code from our packages folder. Like you can add any routes and corresponding controller in your laravel app as your need. We highly suggest you to do all the modification in your app so you can update the package easily.

Deployment

Its a basic laravel application so you can deploy it as any other laravel application. Make sure you have installed all the php required plugins we mentioned above.

Wallet

The wallet is a virtual currency that a customer can use for purchase items. On pixer, there are two ways that can be used to generate wallet points for a customer.

1. Sign up points.
2. Manually by admin

Sign Up Points:

When new users sign up, they will get signup rewards points for the signup. You can set that signup points from admin -> settings

Manually By Admin:

You can give wallet points to a specific user from admin -> users

Wallet Ratio:

You can set the conversion ratio for currency amount with wallet from admin -> settings

For example, you set 3 for the currency ratio. Now, if the customer asks for a refund that is 8$ price and you approve it, then the customer will get 8x3=24 wallet points. Similarly, if the customer tries to use this wallet to purchase an 8$ item, then the wallet deduction will be like this, 24/3=8$.

Payment

Introduction

We have introduced the new Payment architecture feature on Pixer v2.3.0. So if you want to use Payment with Pixer, then make sure your Pixer is v2.3.0 or later.

We have plan to enrich this feature area by integrating more payment gateways in future. List of available payment gateways now.

• Stripe
• PayPal
• RazorPay
• Mollie
• Paystack
• Bitpay
• Coinbase

Let's discuss those sequentially.

Stripe

Stripe is a financial service & Software as a service (SaaS) company. It offers payment processing software & API for e-commerce applications. In Pixer we have integrated Stripe API for payment system. Though currently Card based features are available only, Stripe Element for other payment options will be integrate in future updates.

Stripe integrate inside Pixer.

Please follow & complete this steps for stripe integration for your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in stripe.

STRIPE_API_KEY=[YOUR_STRIPE_API_SECRET_KEY]
STRIPE_WEBHOOK_SECRET_KEY=[YOUR_STRIPE_API_WEBHOOK_SECRET_KEY]

• Activate Stripe from Pixer admin dashboard. (e.g. webhook URL is coming from local development. This static link will dynamically generated in live environment)

• Add Stripe publishable key inside Pixer shop.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=[YOUR_STRIPE_PUBLISHABLE_KEY]

How to create & setup Stripe information properly?

• Go to the stripe website and login https://stripe.com If you aren't a registered user, the complete the stripe registration first.

• After logged in into stripe dashboard, follow the developer link to create the API keys.

• Then create API keys from there. for more details follow up this official documentation https://stripe.com/docs/keys

• Create Webhook secret key if you decide to up & running webhooks in your App.

• Create this two webhook events for monitoring the payment flow.

  • payment_intent.succeeded
  • payment_intent.payment_failed

Special Notes for Stripe users.

If we have used any third party system/plugin/packages, then we have always encouraged our respected customers to follow the official documentation for detailed & in-depth knowledge.

• Stripe DOCS [home page] -- https://stripe.com/docs
• Stripe API Docs -- https://stripe.com/docs/api
• Stripe JavaScript Docs -- https://stripe.com/docs/js

How can I add card in my user profile for future payments in Stripe?

In Pixer we have provided an feature for saving card in case of future usages. This is an on-session process. So, if a customer wants to pay via Cards, s/he must have present in the application lively. No off-session payment was applied here.

A customer can save a card via two process.

• Save card during checkout process.

• Save card in his user profile My Card section.

There are something needs to keep in mind.

• No confidential information was saved in this features. By maintaing the guideline only available information which are permitted to save via Stripe is implemented here.
• Guest user can't save card for future payment.

PayPal

PayPal is an American multinational financial technology company operating an online payments system. In Pixer we have integrated PayPal APIs which may cover a vast area of PayPal supported region. It will help your business to grow and reach to a wide region.

PayPal integrate inside Pixer.

Please follow & complete this steps for PayPal integration for your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in PayPal.

# Values: sandbox or live (Default: live)
PAYPAL_MODE=sandbox

# Add currency like USD
PAYPAL_CURRENCY=USD

# Change this accordingly for your application.
PAYPAL_NOTIFY_URL=

# force gateway language  i.e. it_IT, es_ES, en_US ... (for express checkout only)
PAYPAL_LOCALE=en

#Validate SSL when creating api client.
PAYPAL_VALIDATE_SSL=

# PayPal Setting & API Credentials -> sandbox

PAYPAL_SANDBOX_CLIENT_ID=[YOUR_PAYPAL_SANDBOX_CLIENT_ID]
PAYPAL_SANDBOX_CLIENT_SECRET=[YOUR_PAYPAL_SANDBOX_CLIENT_SECRET_KEY]

# PayPal Setting & API Credentials -> live

PAYPAL_LIVE_CLIENT_ID=[YOUR_PAYPAL_LIVE_CLIENT_ID]
PAYPAL_LIVE_CLIENT_SECRET=[YOUR_PAYPAL_LIVE_CLIENT_SECRET_KEY]

# PayPal Webhook settings

PAYPAL_WEBHOOK_ID=[YOUR_PAYPAL_WEBHOOK_URL]
SHOP_URL=[YOUR_SHOP_URL]

• Activate PayPal from Pixer admin dashboard. (e.g. webhook URL is coming from local development. This static link will dynamically generated in live environment)

How to create & setup PayPal information properly?

• Create an account in https://developer.paypal.com
• Choose sandbox if your are testing your development environment.
• Click on Default Applicaiton. or create a new App.
• You will get your Sandbox API credentials. Copy & paste those inside Pixer app .env file like mentioned above.

• You will find the Webhook ID and link too.

• Then Add the webhook events if you want to up & running the services.

  • PAYMENT.CAPTURE.COMPLETED
  • PAYMENT.CAPTURE.PENDING
  • PAYMENT.CAPTURE.CANCELLED
  • PAYMENT.CAPTURE.REVERSED

• At last, For going live with your application please follow this official documentation. https://developer.paypal.com/docs/archive/paypal-here/sdk-dev/going-live/

RazorPay

Razorpay is the only payments solution in India that allows businesses to accept, process and disburse payments with its product suite. It gives you access to all payment modes including credit card, debit card, netbanking, UPI and popular wallets including JioMoney, Mobikwik, Airtel Money, FreeCharge, Ola Money and PayZapp.

RazorPay integration inside Pixer.

Please follow & complete this steps for RazorPay integration with your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in RazorPay.

RAZORPAY_KEY_ID=[YOUR_RAZORPAY_KEY_ID]
RAZORPAY_KEY_SECRET=[YOUR_RAZORPAY_KEY_SECRET]
RAZORPAY_WEBHOOK_SECRET_KEY=[YOUR_RAZORPAY__WEBHOOK_URL]

• Activate RazorPay from Pixer admin dashboard. (e.g. webhook URL is coming from local development. This static link will dynamically generated in live environment)

• Add RazorPay publishable key inside pixer shop.

NEXT_PUBLIC_RAZORPAY_KEY=[YOUR_RAZORPAY_KEY_ID]

How to create & setup RazorPay information properly?

• Go to the RazorPay website & login https://razorpay.com If you aren't a registered user, Complete the RazorPay registration first.
• After logged in into RazorPay dashboard, Click on Settings

• Select API Keys option & click on Generate Test Key.

• The Client Id and Secret Key will appear. Download these keys and click on OK

• Select Webhooks option & click on Add New Webhooks.

• Enter Webhook URL , Secret key , Alert Email and tick mark the checkbox in Active Event then click on create Webhook

• Copy & paste those inside Pixer app .env file like mentioned above. after that test your RazorPay Payment Status

Special Notes for RazorPay.

If we have used any third party system/plugin/packages, then we have always encouraged our respected customers to follow the official documentation for detailed & in-depth knowledge.

• RazorPay DOCS -- https://razorpay.com/docs/#home-payments
• RazorPay Webhooks -- https://razorpay.com/docs/webhooks/setup-edit-payments

Mollie

Mollie is a Payment Service Provider (PSP) that processes online payments for companies. If you buy something online from one of our merchants, we make sure that your money is transferred safely from your bank to the merchant's bank. Since we arrange the payment process, you may see Mollie or Stg Mollie Payments on your bank statement.

Mollie integrate inside Pixer.

Please follow & complete this steps for Mollie integration for your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in Mollie.

MOLLIE_KEY=[YOUR_MOLLIE_API_KEY]

Mollie Webhook settings

SHOP_URL=[YOUR_SHOP_URL]
MOLLIE_WEBHOOK_URL=[YOUR_MOLLIE_WEBHOOK_URL]

• Activate Mollie from Pixer admin dashboard. (e.g. Mollie Webhook URL is coming from local development. This static link will dynamically generated in live environment)

• Copy & paste those inside Pixer app .env file like mentioned above.

• If you want to use webhook during development on localhost, you must use a tool like ngrok to have the webhooks delivered to your local machine.

• Copy the forwarding https link & paste .env file after link add line- /webhooks/mollie

How to create & setup Mollie information properly?

• Go to the Mollie website & login https://www.mollie.com If you aren't a registered user, the complete the Mollie registration first.
• After logged in into Mollie dashboard, follow the developer link to copy the API keys.
• Choose Test API key your are testing your development environment.
• Copy & paste those inside Pixer app .env file like mentioned above.

Special Notes for Mollie.

If we have used any third party system/plugin/packages, then we have always encouraged our respected customers to follow the official documentation for detailed & in-depth knowledge.

• Mollie DOCS -- https://docs.mollie.com/
• Mollie Webhooks -- https://docs.mollie.com/overview/webhooks

Paystack

Paystack is a Nigerian fintech company that provides online payment solutions for businesses. It offers a range of services, including online and offline payments, subscriptions, and invoicing. Paystack's platform enables businesses to easily and securely accept payments from customers via credit card, debit card, and mobile money.

Paystack integrate inside Pixer.

Please follow & complete this steps for Paystack integration for your e-commerce system.

• First go to settings from Pixer admin dashboard. Inside settings you will find Currency option.Select your Currency. If you want to Test development on localhost.then Select South African Rand(ZAR).

Here is a breakdown of countries and the currencies they can accept payments in.

For more information: Paystack currency is available.

• Inside api there is .env file. You have to copy & paste this line of codes inside the .env file. We will discuss later about how to create those API keys in Paystack official website.

PAYSTACK_PUBLIC_KEY=[YOUR_PAYSTACK_PUBLIC_KEY]
PAYSTACK_SECRET_KEY=[YOUR_PAYSTACK_SECRET_KEY]
PAYSTACK_PAYMENT_URL=https://api.paystack.co
MERCHANT_EMAIL=[YOUR_PAYSTACK_MERCHANT_EMAIL]

• Add Paystack publishable key inside Pixer shop.

NEXT_PAYSTACK_PUBLIC_KEY=[YOUR_YOUR_PAYSTACK_PUBLIC_KEY]

Paystack Webhook settings

• To activate Paystack go to settings from Pixer admin dashboard. Inside settings you will find configure payment option. (e.g. Paystack Webhook URL is coming from local development. This static link will dynamically generated in live environment)

• Copy the webhook url & registered in Paystack Dashboard.

• If you want to use webhook during development on localhost, you must use a tools like ngrok to have the webhooks delivered to your local machine.

• Copy the forwarding https link & paste on Test Webhook URL, after paste forwarding https link, add line- /webhooks/paystack.

How to create & setup Paystack information properly?

• Go to the Paystack official website & login If you aren't a registered user, Complete the Paystack registration first.
• After logged in into Paystack dashboard, Click on Settings.

• After That Click on API Keys & Webhooks for Paystack Secret Key & Paystack Public Key.

• Copy & paste those inside Pixer API and Pixer Shop .env file like mentioned above.

Special Notes for Paystack.

If we have used any third party system/plugin/packages, then we have always encouraged our respected customers to follow the official documentation for detailed & in-depth knowledge.

• Paystack official documentation
• Paystack Webhooks documentation
• Accept Payments in US Dollars (USD)

BitPay

BitPay is a bitcoin payment service provider headquartered in Atlanta, Georgia, United States. It was founded in May 2011 by Tony Gallippi and Stephen Pair. BitPay provides Bitcoin and Bitcoin Cash payment processing services for merchants.

Before integrate BitPay check the list that your country is not restricted. Restricted Country List

BitPay integrate inside Pixer.

Please follow & complete this steps for BitPay integration for your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in BitPay.

# `BITPAY_IS_PRODUCTION` value either true or false
BITPAY_IS_PRODUCTION=false

# Set any password you want that will use for encrypting your private key
BITPAY_KEY_STORAGE_PASSWORD=[LONG_SECRET]

# This is used for generating your token.
BITPAY_ENABLE_MERCHANT=true
BITPAY_ENABLE_PAYOUT=false

# This is important generating your json or yml file 
BITPAY_GENERATE_JSON_FILE=true
BITPAY_GENERATE_YML_FILE=false

# All Files are located `storage/app/private/`. Which will use for initiating you BITPAY client.
 
SHOP_URL=[YOUR_SHOP_URL]

• Activate BitPay from Pixer admin dashboard. (e.g. webhook URL is coming from local development. This static link will dynamically generated in live environment)

How to create & setup BitPay information properly?

• Create an account in https://bitpay.com/authenticate/signup?business

• Choose sandbox if your are testing your development environment signup in here https://test.bitpay.com/authenticate/signup.

• Now go to the terminal run php artisan marvel:generate_bitpay_config to generate your private key and config file

• You will find an output like below, With some instructions.

• You can approve the API Token by logon to that url, or just copy The ParingCode and goto your bitpay merchant account's dashboard. Go to Payment Tools find API TOKEN section paste Paring Code there. Then find and approve it.

Webhook is most import thing to manage payments status with bitpay setup.

• Available Webhooks Status.

  • new
  • paid
  • confirmed
  • complete
  • expired
  • invalid

• At last, For going live with your application please follow this official documentation. https://github.com/bitpay/php-bitpay-client-v2 and https://test.bitpay.com/api/

Coinbase

Coinbase Global, Inc., branded Coinbase, is an American publicly traded company that operates a cryptocurrency exchange platform. Coinbase is a distributed company; all employees operate via remote work. It is the largest cryptocurrency exchange in the United States by trading volume.

In Pixer Laravel we integrate Coinbase Commerce API. Coinbase Commerce does not provide test or sandbox environment, So be careful. It will cost you money even in testing.

Coinbase integrate inside Pixer.

Please follow & complete this steps for Coinbase integration for your e-commerce system.

• Inside .env file copy & paste this line of codes. We will discuss later about how to create those API keys in Coinbase.

# Payment -> CoinBase
COINBASE_API__KEY=
 
SHOP_URL=[YOUR_SHOP_URL]

• In Pixer Laravel Http Client has been used to implement Coinbase Commerce.

• Activate Coinbase from Pixer admin dashboard. (e.g. webhook URL is coming from local development. This static link will dynamically generated in live environment)

How to create & setup Coinbase information properly?

• Create an account in https://beta.commerce.coinbase.com/signup

• Get API key from your dashboard. Copy the API_KEY then set it to COINBASE_API__KEY env variable.

• Coinbase Commerce do not provide any kind of test or sandbox environment.

Webhook is most import thing to manage payments status with coinbase setup.

• To Set Webhook notification URL go to coinbase commerce dashboard -> settings -> notification set url

• Available Webhooks Status.

  • charge:created New charge is created
  • charge:confirmed Charge has been confirmed and the associated payment is completed
  • charge:failed Charge failed to complete
  • charge:delayed Charge received a payment after it had been expired
  • charge:pending Charge has been detected but has not been confirmed yet
  • charge:resolved Charge has been resolved

• At last, For going live with your application please follow this official API Guide https://docs.cloud.coinbase.com/commerce/reference and documentation https://docs.cloud.coinbase.com/commerce/docs/welcome

Integratioin of new payment gateway

To integrate a payment gateway in Pixer-Laravel, you will need to follow these general steps:

Getting Started with API

Step 1: Install and configure the payment gateway package

First, you will need to install the payment gateway package for Laravel (if there are any available package). There are several packages available that provide integration with various payment gateways. Example is given in the screenshot.

Once you have chosen and installed a package, you will need to configure it by adding your payment gateway credentials and any other required settings.

To check the installed dependencies of payment gateway in Pixer-Laravel, you can open the composer.json file in a text editor and find that.

Step 2: Add payment gateway name in the Enum.

Add PaymentGateway Enum API -> package -> marvel -> src -> Enums -> PaymentGatewayType.php

Step 3: Configure the Payment Facade for the new payment gateway.

Now go to API -> package -> marvel -> src -> Payment then create new payment Class (e.g. Stripe, PayPal, Razorpay, Mollie) for implements the PaymentInterface.The Class must implements all of the methods defined in the PaymentInterface.

Methods defined in the PaymentInterface

Here's an example of a class that implements that PaymentInterface:

Note : It is important to note that each payment gateway has its own set of requirements and may have different methods for processing payments. You will need to follow the official documentation of that specific payment gateway.

Step 4: Using that payment gateway for submitting the order.

Go to API -> package -> marvel -> src -> Http -> Controllers -> OrderController.php -> submitPayment then you've to add your PaymentGatewayType and function name in switch case.

After That go to API -> package -> marvel -> src -> Traits -> PaymentStatusManagerWithOrderTrait.php for verify your payment status update, you've to add function like Stripe, PayPal, Razorpay or Mollie.

Step 5: How to Setup webhook in Pixer follow the steps

To use a payment gateway webhook, you would first configure the webhook URL in your payment gateway account. Then, whenever the specified events occur, the payment gateway will send an HTTP POST request to the webhook URL with a payload of data about the event.

First go to API -> package -> marvel -> src -> Routes then add a post route.

Add your function in WebHookController

To handle webhook events follow your payment gateway offical webhook documentation

Note : For locally webhook testing you can use ngrok tools for that. Please follow their official documentation.

Getting Started with admin dashboard.

First go to marvel-admin -> rest -> types -> index.ts -> export enum PaymentGateway then add PaymentGateway Name.

after that go to marvel-admin -> rest -> src ->components -> setings -> payment.ts add name & Title.

Then it will automatically add that payment gateway in the marvel-admin settings.

Getting Started with shop front.

There are two types of payment gateway system can be integrated here.

• Redirect based payment gateway (e.g PayPal). Where the customer will redirect to that payment gateway site during order checkout. Complete the payment there. And then comeback to the application.

• Non redirect based payment gateway. Where the customer will stay on the application and complete the whole payment process here. Here we consider Stripe as a non-redirect based payment gateway. Though Stripe has features too similar to redirect based payment gateway.

Redirect-base Payment Gateway

if you want to integrate redirect based payment gateway (e.g. PayPal, Mollie). follow the steps

First go to shop -> src -> types -> index.ts -> export enum PaymentGateway then add PaymentGateway Name.

after that go to shop -> src -> components -> checkout -> payment -> Payment-grid.tsx then add your PaymentGateway object.

Non-redirect based payment gateway

First, complete the redirect-based payment gateway steps mentioned above. Because that two steps is universal for all payment gateway to apply.

After That go to shop -> src -> components -> payment then add a folder like Stripe, Razorpay. Inside your payment folder you can create your required typescript files with related functionalities for your Payment Gateway. For example, you can checkout the Stripe folder. You can find all the necessary indication, components guide, payment-method (card) saving options etc in the Stripe folder.

That's all for today. If you need any more help you can always contact with our support agents in our support portal.

Multivendor

Create New Shop

To create new shop login as an administrator or create a new account for creating shop

After creating the account you'll be redirected to this page,

After that, click Create Shop

And provide all the information for the store.

After creating the shop you'll redirect to this page,

By default, the shop will be inactive. Only administrator can active a shop.

From administrator account go to shopand clicktickmark toactivateordeactivate` a shop.

After activate the shop by administrator the vendor dashboard will be like this,

After click on shop, you'll be redirected to dashboard page,

From this dashboard, you can maintain you shop,

Dashboard:

Products:

Order:

Staff:

WithDraw:

User Roles:

Super Admin:

Super admin can do everything. the admin can maintain and edit every store on the site.

Store Owner:

Store owner can edit or main it's store, staff or payment.

Staff:

The staff of a store has similar permission as store owner, but the staff can't update the store or withdraw payment.

Withdraw Payment:

Only the store owner can withdraw its payment. To do that go to your shop dashboard -> withdraws -> Request a withdraw,

After request payment, the dashboard will be like this,

After request, the admin has to be approved the admin.

After approved,

FrontEnd Shop

From frontend when customers click on the shop page they'll get all the shops as a card list,

Also when customers click on a product they will get the seller link,

After clicking the seller link they will redirect to the seller shop page,

Multilingual

If your business or site doesn't require multiple languages, then we don't recommend enabling the multilanguage feature. It'll increase the complexity of maintaining all the language simultaneously. Only enable it if you know what multilanguage is and your business or site needs that feature.

Step 1: Enable Multilingual Feature

API:

At first open api -> .env and make true of ``

TRANSLATION_ENABLED=true

Admin

For admin,

update admin -> .env and update,

NEXT_PUBLIC_ENABLE_MULTI_LANG=true

And add available language to NEXT_PUBLIC_AVAILABLE_LANGUAGES with a comma separator.

For example, at your site, you want to support three languages, one is English, and the rest of the two will be german and Arabic. Then NEXT_PUBLIC_AVAILABLE_LANGUAGES will be like this,

NEXT_PUBLIC_AVAILABLE_LANGUAGES=en,de

Shop

For shop, similarly,

update shop -> .env and update,

NEXT_PUBLIC_ENABLE_MULTI_LANG=true

And add available language to NEXT_PUBLIC_AVAILABLE_LANGUAGES with a comma separator.

For example, at your site, you want to support three languages, one is English, and the rest of the two will be german and Arabic. Then NEXT_PUBLIC_AVAILABLE_LANGUAGES will be like this,

NEXT_PUBLIC_AVAILABLE_LANGUAGES=en,de

After that, if you already host your site on server then make sure you redeploy the API and rebuild the frontend,

https://pixer-doc.vercel.app/faq#how-to-rebuild-the-project

Step 2: How to add new language in admin?

File Location

admin\public\locales\sg\banner.json

File Location

admin\src\utils\locals.tsx

File Location

admin\src\components\icons\flags\

Step 3: How to add new language in shop?

File Location

shop\public\locales\sg\common.json

File Location

shop\src\lib\locals.tsx

File Location

shop\src\components\icons\flags\

Step 3: How to translate static content for admin?

File Location

admin\public\locales\sg\common.json

Step 4: How to translate static content for shop?

File Location

shop\public\locales\sg\common.json

Step 5: How to translate content?

Now after successfully configuring the Multilingual follow this procedure to translate your existing content to another one.

Data Type

Now before starting the translation, you've to understand about dependent and non-dependent data at pixer.

At pixer, some data are required to create another data, and it's called dependent data, and the independent data is called non-dependent data.

For example,

To create product types, categories, tags, author, manufacture, attributes, etc are required.

And for coupons or settings, no prior data is required.

Now, to translate a product, you must have to translate types, categories, tags, authors, manufacturers, and attributes at first. Without that, when you translate a product, you can't add your categories or types as those data are not translated yet.

To simplify the process, we made a serial for you. Just follow this serial, and it'll make the process relatively easy.

1. Settings
2. Order Status
3. Layouts Type
4. Tags
5. Categories
6. Products

Translate Settings

If you want to translate the settings,

just go to your admin -> settings

It'll open default language settings.

Then change the language from the navbar, and the settings page will be redirected,

Then update the text of the settings page and click save.

Translate Order Status

To translate the order status,

1. Go to the order status page from the admin
2. Then click Three Dot and Create translate,
3. Then translate the text and click Save.

Similarly, translate all the order status.

Translate Layouts Type, Tags, Categories:

Follow order status procedure to translate Layouts Type, Tags, and Categories.

Translate Products

Similarly, just edit three dots and translate the product.

But during the translation, don't change the SKU. SKU for a product has to be similar for all languages. We calculate the quantity based on that field.

Translate Layouts Type

Step 6: How to add custom or solved broken font issue?

File Location

pixer-api\config\pdf.php

'font_path' => base_path('resources/fonts/'),
'font_data' => [
   'example' => [
      'R'  => 'example.ttf',    // regular font
      'B'  => 'example.ttf',       // optional: bold font
      'I'  => 'example.ttf',     // optional: italic font
      'BI' => 'example.ttf', // optional: bold-italic font
      'useOTL' => 0xFF,
      'useKashida' => 75,
   ]
],

File Location

pixer-api\resources\fonts\

File Location

pixer-api\packages\marvel\stubs\resources\views\pdf\order-invoice.blade.php
pixer-api\resources\views\pdf\order-invoice.blade.php

@if($language === "ex")
   <style type="text/css">
      body {
         font-family: Arial, sans-serif, example;
      }
   </style>
@endif

If you are facing above the issue just replace these code.

File Location

pixer-api\config\pdf.php

'font_path' => base_path('resources/fonts/'),
'font_data' => [
   'example' => [
      'R'  => 'example.ttf',    // regular font
      'B'  => 'example.ttf',       // optional: bold font
      'I'  => 'example.ttf',     // optional: italic font
      'BI' => 'example.ttf', // optional: bold-italic font
      // 'useOTL' => 0xFF,
      'useKashida' => 75,
   ]
],

If you face any issues with Multilingual, or you've any suggestions to improve the Multilingual feature, then please open a ticket at (https://redqsupport.ticksy.com/)[https://redqsupport.ticksy.com/]

New Static Page

Both shop and admin are built using React NextJS framework. So all the existing pages are available to this location. You can create new pages from,

Shop,

pixer-laravel/shop/src/pages

Admin,

pixer-laravel/admin/src/pages

You can use the NextJS routing feature for the new pages. Check these official NextJS docs for pages and routing,

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/docs/routing/introduction

FAQ:

How to configure Stripe payment gateway?

To configure Stripe payment gateway,

1. At first, create a developer account from stripe developer dashboard (https://dashboard.stripe.com/)
2. log in to that account
3. Then go to the Developer -> API Keys section and on that section create an API key. After creating, you'll get one Secret key and one Publishable key.
4. Then copy Secret key to your pixer api->.env

5. And similarly, add Publishable key to your shop -> .env

After configuration, make sure you rebuild your project using this command,

yarn build

Why am I facing "You may need an appropriate loader to handle this file type" during running shop?

Ans: Please remove node_modules from shop then yarn then run yarn dev

I am changing schema files but changes is not working

Your changes might not work because schema is cached. SO you might need to clear schema cache using the below command php artisan lighthouse:clear-cache.

Changing .env files but not getting the changes

Run Below command php artisan optimize:clear

Changing route but not getting the changes.

Run php artisan optimize:clear or php artisan route:clear

I have set STRIPE_API_KEY in .env but still getting error.

In some cases STRIPE_API_KEY value can't read from .env in those cases you have to put the key in the config file directly in api/packages/marvel/src/Config/laravel-omnipay.php

6. Getting error on forget password email sending Make sure you have run the php artisan marvel:install commands successfully and copied the necessary email templates to your resources folder. You can also do it by php artisan marvel:copy-files command.

   NB: This same issue can occur during order creation.

Can I use it with my existing laravel?

Yes, you can. Follow the below steps.

• Make sure you are using laravel 8.
• Copy api/packages folder from the downloaded files into your laravel root folder.
• Put below code in your laravel composer.json file into require section.

"ignited/laravel-omnipay": "dev-master",
"omnipay/common": "dev-master",
"omnipay/stripe": "dev-master",
"pixer/shop": "dev-master"

• Put below code in bottom of your composer.json. If you already have an repositories section then put code inside repositories to your existing repositories

"repositories": {
        "pixer/shop": {
            "type": "path",
            "url": "packages/marvel"
        },
        "ignited/laravel-omnipay": {
            "type": "path",
            "url": "packages/laravel-omnipay"
        },
        "omnipay/common": {
            "type": "path",
            "url": "packages/omnipay-common"
        },
        "omnipay/stripe": {
            "type": "path",
            "url": "packages/omnipay-stripe"
        }
    }

• Now run composer install
• Copy necessary env variables from .env.example to you env file.
• Run php artisan marvel:install and follow necessary steps.
• To run server php artisan serve
• For image upload to work properly you need to run php artisan storage:link.

Why am I getting Access denied for user?

navigate to api then run ./vendor/bin/php down -v. It will delete any of your existing mysql volumes. Now run ./vendor/bin/php up -d on same directory or run bash install.sh on root directory

Why am I getting permission issue during deployment?

Run below commands for fixing permission issue in your laravel app during deployment

sudo chown -R $USER:www-data storage
sudo chown -R $USER:www-data bootstrap/cache

sudo chown -R www-data:www-data storage
sudo chown -R www-data:www-data bootstrap/cache

Why am I getting "The GET method is not supported for this route. Supported methods: HEAD"?

Run php artisan optimize:clear

How to resolve the Load More Infinity loading issue?

If you click on the Load More button and the button is spinning continuously, then check API request from the network tab. If it is HTTP and your API is hosted on HTTPS, then open,

pixer-api/app/Providers/AppServiceProvider.php

And add this code to boot method,

if (!\App::environment('local')) {
    $this->app['request']->server->set('HTTPS', true);
}

I'm trying to upload images, but the images are not displayed on the frontend?

We support two types of file uploads; one is local, and another is AWS S3.

Both uploading systems follow this procedure,

API

At first, add your API URL to your pixer-api -> .env.

If you're using windows and your API is running with ports like localhost:8000 or 127.0.0.1:8000, then make sure you add the domain with port to APP_URL. Like this API_URL=http://localhost:8000

After that, clear your API cache by using this command from the pixer-api folder,

php artisan optimize:clear

Then link the storage system by using this command,

php artisan storage:link

If you're using AWS S3, then update MEDIA_DISK=s3 and add all AWS_ credentials For AWS s3, make sure your properly setup permission of the bucket with ACL enable by follow this link -> https://stackoverflow.com/a/70603995/2158023

Admin

Then add your domain to your pixer-laravel -> admin -> next.config.js

If you're using AWS S3, then also add your root S3 domain like this,

Shop

Similarly, add your domain to your pixer-laravel -> shop -> next.config.js

If you're using AWS S3, then also add your root S3 domain like this,

Build Frontend,

If you run in dev mode, then re-run will affect your update. But if you're running as a production mode, then you've to rebuild the project and re-run again. Otherwise, image upload will not work.

https://pixer-doc.vercel.app/vps-server#build-project

After building the project, replace your server shop and admin folder using this rebuild folder and re-run the app using this command,

pm2 restart all

After that, make sure you rebuild the frontend part and upload it to your server again.

How to resolve the 502 Bad Gateway error for frontend/admin?

There can be several reasons that throw 502 errors for the frontend in the production server.

Reason 1:

On your Nginx file, a specific port is set for shop or the admin, so when you run the script as a PM2` instance, the script has to be run that specific port; otherwise, your domain/subdomain will throw a 502 error.

PORT:

3000 -> Shop Rest
3001 -> Admin Rest

To check that at the first stop the PM2 instance by this command,

pm2 stop 'all'

then go to the pixer folder from your server and try to run the script using yarn and check which port it is running,

From admin directory

yarn start

From shop directory

yarn start

And, check if the port matched with the Nginx port or not? If not matched, then change the port to Nginx config.

Reason 2:

To check that at the first stop the PM2 instance by this command,

pm2 stop 'all'

then go to the pixer folder from your server and try to run the script using yarn and check which port it is running,

From admin directory

yarn start

From shop directory

yarn shop

With this command, it'll give you an error that no build file is found. To resolve that, rebuild your project and then rerun the scripts.

https://pixer-doc.vercel.app/vps-server#frontend-project-build

How to resolve javascript heap out of memory issue?

If you're using cPanel based server, then you maybe get an error like "call_and_retry_last allocation failed - javascript heap out of memory".

To resolve that issue, you've to add a limit of the memory bound,

Please check this,

https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory

https://support.snyk.io/hc/en-us/articles/360002046418-JavaScript-heap-out-of-memory

https://blog.openreplay.com/javascript-heap-out-of-memory-error

Image upload throw Internal Server Error; how to resolve that?

For uploading, the php8.1-gd library is required. So make sure you install the php8.1-gd library on your server.

How to resolve docker invalid reference format: repository name must be lowercase?

To resolve that issue, you've to move the laravel-ecommerce folder from Pixer Laravel - React Next REST Ecommerce to a genric folder where you store your code. After that, use this command from your laravel-ecommerce folder,

chmod +x install.sh
bash install.sh

Sometimes my server shutdown or halts automatically. After restart, it works fine again; how to resolve that?

In general, this happens mainly when your upstream server fails to handle its processing power when there is lots of traffic or requires lots of operation. Please upgrade your server configuration to double to check the issue. Please check this video,

https://www.youtube.com/watch?v=4pIqAz5bzX0

If that doesn't solve the issue, then you've to redeploy again with a new ec2 instance.

S3 uploading doesn't work after adding credentials to .env; how to resolve that?

For AWS s3, make sure your properly setup permission of the bucket with ACL enable by follow this link

https://stackoverflow.com/a/70603995/2158023

How to rebuild the project?

When you upload the code to the server as a production, NextJS fetch its code from the build file. So after deployed, when you update or change code on scripts, the updated scripts don't work at the front end until you rebuild the project again. NextJs works this way.

Now there are two ways you can follow to rebuild the project,

If your server has more than 2+ CPU core and 6GB+ of memory, then you can directly edit code at your server then rebuild the project from the server directly using this command,

For shop,

Go to /var/www/pixer-laravel/shop

yarn build

And for admin,

Go to /var/www/pixer-laravel/admin

yarn build

After completing the build, restart the PM2 process using this command,

pm2 restart 'all'

But suppose your server doesn't have that processing power, and you try to build your scripts directly from the server. In that case, your server will be shut down during the build, and you've to restart the server.

In that case, you can rebuild the scripts at your local computer and upload them to your server. If you follow our VPS Server Deployment guide, then you already know the process. To build the scripts on your pc, follow this procedure,

At first, download the pixer-laravel folder from the server to your computer, and customize the code at your computer.

Then to build shop, go to shop folder and use this command,

To install all the packages,

yarn

Then build the shop,

yarn build

Then to build the admin, go to admin folder and use this command,

To install all the packages,

yarn

yarn build

Then delete the shop and admin folder from the server and upload your build shop and admin folder to the server at the exact same location and use this command to restart the PM2,

pm2 restart 'all'

How to increase upload size?

The API supports 10MB of upload limit for a single file by default. If your upload file is more than 10MB, then please follow this,

At first, login to the server using ssh, and then,

Edit,

/etc/php/8.1/fpm/php.ini

Then update,

upload_max_filesize = 256M
post_max_size = 256M
max_execution_time = 300

Then restart the PHP,

sudo service php8.1-fpm restart

After that update,

pixer-api/packages/marvel/config/media-library.php

'max_file_size' => 1024 * 1024 * 256,

After that, run this command from the pixer-api. folder,

php artisan optimize:clear

And for admin, increase timeout from,

admin/src/utils/api/http.ts

timeout: 600000

After that Rebuild Your Project and restart again.

How to resolve docker: invalid reference format: repository name must be lowercase.?

Please open your terminal and use this command,

brew services stop mysql

It'll stop any MySQL instance that is installed using brew.

Then use this command to check is there MySQL running or not,

mysql -v

If no MySQL is running then, go to,

pixer-laravel -> pixer-api

and use this command,

./vendor/bin/sail down -v

After that,

Open docker dashboard and delete all the existing container and images,

And after that remove,

pixer-laravel -> pixer-api -> .env

And then go to your root pixer-laravel folder and use this command again,

chmod +x install.sh
bash install.sh

What type of stripe payment support in pixer?

Pixer only supports a card-based payment system, so if your country doesn't support a card-based payment system, then you've to customize the script to implement another payment system in stripe.

How to remove the existing payment gateway?

You can remove the Stripe Payment from the available payment array,

shop/src/components/checkout/payment/payment-grid.tsx

How do I log in to the admin panel as the main administrator?

When you install the API using php artisan marvel:install or using bash install.sh(docker), you'll get a prompt to create an admin account, and you've to create admin credentials that time. And then, you can use that credentials for the main admin account.

How to upgrade the existing deployed laravel 8 server to laravel 9?

At first, remove all the existing php 7.4 and its extensions by using this command,

sudo apt purge php-fpm php-mysql
sudo apt purge php-mbstring php-xml php-bcmath php-simplexml php-intl php-mbstring php7.4-gd php7.4-curl php7.4-zip composer

Then remove the composer,

sudo rm /usr/bin/composer

Then delete the vendor folder from the pixer-laravel -> api folder.

cd /var/www/pixer-laravel/api

sudo chown -R $USER:www-data storage
sudo chown -R $USER:www-data bootstrap/cache

rm vendor -rf

Then install PHP 8, and its extensions,

sudo add-apt-repository ppa:ondrej/php
sudo apt update

sudo apt install php8.0-fpm php8.0-mysql

sudo apt install php8.0-mbstring php8.0-xml php8.0-bcmath php8.0-simplexml php8.0-intl php8.0-mbstring php8.0-gd php8.0-curl php8.0-zip

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

sudo mv composer.phar /usr/bin/composer

Then update 7.4 fpm to 8.0 fpm from,

/etc/nginx/sites-enabled/pixer

Then install composer packages,

cd /var/www/pixer-laravel/api

composer install

php artisan optimize:clear

php artisan marvel:install

php artisan marvel:install will remove all of your existing data. Ensure you export or backup your data before using that command.

sudo chown -R www-data:www-data storage
sudo chown -R www-data:www-data bootstrap/cache

Support

For support, Please open a ticket in the support forum

https://redqsupport.ticksy.com/

There are some basic requirements for our application so that support team can help you quick such as,

1. Asking queries regarding feature that is already implemented in the application
2. Following recommended configuration, environments & server which you need to met first before you proceed with installation, deployment in your server to receive support.
3. Support query need to be within Envato item support policy. (https://themeforest.net/page/item_support_policy)
4. You should maintain only one support ticket at a time. Creating multiple ticket can cause unexpected delays.
5. Ticket should provide as much details as possible related to the issue such as screenshot, video explanation, access, how to reproduce, environments, if any changes or customisations are made etc

During working days our ticket response can take 24 hours to 48 hours depending on the volume of tickets pending prior to your ticket . We follow Envato Item support policy https://themeforest.net/page/item_support_policy to provide standard support for our items

Export Import

Export Import works under a shop. So, You have to go to the shop page -> products menu for product or shop page -> attributes menu to import or export attributes.

Export Import work different way for simple and variable product

Simple Product

For simple products, you've to export only products data. To do that, go to Your Shop -> products. Then click on three dots and export the simple products.

Similarly, for import csv, go to the same option and import exported csv

variable products

For variable products, you will need three different csv.

• Attributes csv
• products csv
• variation options csv

Make sure to re-import you export these three csv.

Now, during import variations product, At First, you have to import Attributes then Products and Then products variation.

NB: Here, type_id is the group id like Grocery or clothing id. You can get type info from api_url/types url;

Withdrawals

The procedure by which a seller can move their profits or balance from the Pixer platform to their own bank account or another payment method is known as a withdrawal mechanism in Pixer. In most withdrawal systems, the seller must ask to remove money from their account balance. With the seller's identification being confirmed, the platform may impose conditions regarding the minimum withdrawal amounts or withdrawal costs.

The platform will transfer the money to the seller's chosen payment method as soon as the withdrawal is accepted. The payment method and the platform's rules will determine how long this procedure will take, which might be several business days.

The ability for sellers to obtain their revenues and use them for either personal or professional objectives makes withdrawal mechanisms an essential component.

Vendor

The store owner must first log in, then from the dashboard, we must locate "my shops". The seller's shop is where he may locate withdrawal options. The options below will be displayed if he visits his own store.

The seller may submit withdrawal requests under the withdrawals area.

The seller can select request withdrawals and enter a request for a lesser quantity than what is now available.

Super Admin

Requested withdrawals will show up in the "recent withdrawals" section of the admin dashboard. The administrator can use the action function and change the withdrawal request's status from pending to approved by clicking on change status button..