Multikart Angular Theme

Welcome to Multikart Angular 8!

We are pleased that you have chosen MULTIKART Angular theme for your site and we will not disappoint you with your choice. MultiKart is an excellent theme develop with a concise approach. The code written is a clean and well structured.

MultiKart is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

MultiKart theme template is build focusing on HTML and CSS3 and works perfectly fine in all the browsers and it is powered by jQuery.

Multikart theme include 16 inner pages, 10 product pages, and 3 shop pages.

We request to have a look at our MultiKart manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

  1. Documentation - Documentation for Multikart HTML site template
  2. THEME - Multikart Main Folder
Angular 8 Folder Structure
Html Folder Structure

There are followings basics packages you should install before go further.

Installation
  1. Install Node.js and NPM : Download Node.js from https://nodejs.org/en/download/ and install it on your system. NPM comes bundled with Node.js
  2. angular-cli : You can install angular-cli from your terminal run npm install -g @angular/cli command on your your terminal or command prompt. For more details visit https://github.com/angular/angular-cli
  3. Install npm packages : In terminal go to your project root directory and run npm install command, it will download all the dependencies under node_modules folder.
Running development server
  • Run ng serve command to run dev server and access http://localhost:4200/ to run your app/project on browser. The app will automatically reload if you change any of the source files.
  • As ng serve runs watch command which detects any change in project files so it will automatically reload your app on browser if you make changes in files.
Code Scaffoldings
  • Run ng generate component component-name command to run to generate a new component. You can also use ng generate directive/pipe/service/class
Production building
  • Run ng build to build the project. The build artifacts will be stored dist/ directory. Use the -prod flag for a production build. Use --aot flag for a AoT build for example : ng build --prod --aot
Further help
  1. Add direction rtl in html.

    <html lang="en" dir="rtl">

  2. Add class rtl in Body.

    <body class="rtl">

  3. Add sm-rtl class in vertical menu

    <!-- Vertical Menu -->
    <ul id="sub-menu" class="sm sm-rtl pixelstrap sm-vertical ">

Multikart include 12 color option, You need to change app.scss.

@import 'scss/color1';
@import 'scss/color2'; ... as on

If you want to use another color, change $theme-deafult variable in style scss

$theme-deafult: #ff4c3b;

For customized your facbook chat, refer this links which is below:

https://www.socialmediaexaminer.com/how-to-add-facebook-customer-chat-to-website/
https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/
<!--Google font-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

logo

<!-- Brand Logo -->
<div class="brand-logo">
<a [routerLink]="['/home/one']"> <img src="assets/images/icon/logo.png" class="img-fluid" alt=""></a>
</div>
<!-- footer logo -->
<div class="footer-logo">
<img src="assets/images/icon/logo.png" alt="">
</div>

Menu

Vertical & Horizontal menu

<!-- Vertical Menu -->
<ul id="sub-menu" class="sm pixelstrap sm-vertical ">
...
</ul>
<!-- Horizontal menu -->
<ul id="main-menu" class="sm pixelstrap sm-horizontal">
..
</ul>

Dropdown and Mega menu

<!-- dropdown menu -->
<li><a href="#">pages</a>
<ul>
..
</ul>
</li>
<!-- mega menu -->
<li class="mega"><a href="#">Home</a>
<ul class="mega-menu">
<li>
..
</li>
</ul>
</li>

Button

Multikart theme include 2 types of buttons

<a href="#" class="btn btn-solid">shop now</a>
<a href="#" class="btn btn-outline">shop now</a>

Title

<!-- Title 1 -->
<div class="title1">
<h4>recent story</h4>
<h2 class="title-inner1">trending products</h2>
</div>

<!-- Title 2 -->
<div class="title2">
<h4>recent story</h4>
<h2 class="title-inner2">trending products</h2>
</div>

<!-- Title 3 -->
<div class="title3">
<h4>recent story</h4>
<h2 class="title-inner3">trending products</h2>
<div class="line"></div>
</div>

<!-- Title 4 -->
<div class="title4">
<h2 class="title-inner4">trending products</h2>
<div class="line">
<span>
</span>
</div>
</div>

Footer Copyright

<div class="footer-end">
<p><i class="fa fa-copyright" aria-hidden="true"></i> {{today | date:'y'}} theme forest powered by pixelstrap</p>
</div>

How to Get Product

Located in /shared/services/product.services.ts file.

private products(): Observable {
                         return this.http.get('assets/data/fashion/products.json').map((res:any) => res.json())
                     }
<!-- Sample json data -->
[{ "id": 1, "name": "Flare Dress", "price": 100, "salePrice": 200, "discount": 50, "pictures": ["assets/images/fashion/product/1.jpg", "assets/images/fashion/product/21.jpg", "assets/images/fashion/product/36.jpg", "assets/images/fashion/product/12.jpg"], "shortDetails": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ", "stock": 5, "new": true, "sale": true, "category": "women", "colors": ["yellow", "gray", "green"], "size": ["M", "L", "XL"], "tags": ["nike", "caprese", "lifestyle"], "variants": [ { "color": "yellow", "images": "assets/images/fashion/product/1.jpg" }, { "color": "gray", "images": "assets/images/fashion/product/21.jpg" }, { "color": "green", "images": "assets/images/fashion/product/36.jpg" }] }]

Product Hover swipe image

if you do want second image in product, Add Back div in product.component.ts file

<!-- front image -->
<div class="front">
<a href="#"><img src="assets/images/pro3/1.jpg" class="img-fluid" alt=""></a>
</div>
<!-- hover back image -->
<div class="back">
<a href="#"><img src="assets/images/pro3/2.jpg" class="img-fluid" alt=""></a>
</div>

Remove Product Thumbanail image

if you do no want thumbanail image in product, Remove Code product.component.ts file

 <ul class="product-thumb-list">
                    <li class="grid_thumb_img" [ngClass]="{'active': selectedItem == variant.images}" *ngFor="let variant of product.variants" >
                    <a [routerLink]="" (click)="changeVariantImage(variant.images)" >
                    <img [src]="variant.images">
                    </a >
                    </li >
                </ul >

Change Intagram Access Token

Located in /shared/services/instagram.services.ts file.

public getInstagramData() {
                 return this.http.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=ENTER_YOUR_ACCESS_TOKEN);
             }

Change Stripe Key

Located in /fashion/product/checkout/checkout.component.ts file.

 stripeCheckout() {
              var handler = (window).StripeCheckout.configure({
                key: 'your_publishable_key', // publishble key
                locale: 'auto',
                token: (token: any) => {
                // You can access the token ID with `token.id`.
                // Get the token ID to your server-side code for use.
                this.orderService.createOrder(this.checkOutItems, this.checkoutForm.value, token.id, this.amount);
            }
        });
        handler.open({
        name: 'Multikart',
        description: 'Online Fashion Store',
        amount: this.amount * 100
    }) 
}

Change Paypal Key

Located in /fashion/product/checkout/checkout.component.ts file.

  private initConfig(): void {
              this.payPalConfig = new PayPalConfig(PayPalIntegrationType.ClientSideREST, PayPalEnvironment.Sandbox, {
              commit: true,
              client: {
              sandbox: 'YOUR_CLIENT_ID', // client Id
          },
          button: {
          label: 'paypal',
          size:  'small',    // small | medium | large | responsive
          shape: 'rect',     // pill | rect
          //color: 'blue',     // gold | blue | silver | black
          //tagline: false  
      },
      onPaymentComplete: (data, actions) => {
      this.orderService.createOrder(this.checkOutItems, this.checkoutForm.value, data.orderID, this.amount);
  },
  onCancel: (data, actions) => {
  console.log('OnCancel');
},
onError: (err) => {
console.log('OnError');
},
transactions: [{
amount: {
currency: 'USD',
total: this.amount
}
}]
});
}

How to remove color scheme

if you do no want color scheme, Remove color script in /src/assets/js/script.js file.

How to remove RTL

if you do no want RTL for live preview, Remove code in /src/app/shared/footer/footer.component.html file.

Home slider, Contain Banner & Parallax Text Alignment

Add class in Parent child

Parallax image

If you want parallax image, Add class in Parent child

No color Variant swatches

If you do not want color swatches, add class "no-color-varient" in parent child

How to change header style

there are three types of header(header-one, header-two, header-three). if you change header style open main.component.html and change code. ex. <app-header-one> <app-header-two> <app-header-three>

How to change Footer style

there are two types of header(footer-one, footer-two). if you change header style open main.component.html and change code. ex. <app-footer-one> <app-footer-two>

Dependencies

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards, Pixelstrap