Header Navigation
Headers are navigation components that display information and actions relating to the current screen.
setup
Import the DesktopNavigation component in a script tag.
Svelte Copy
import { DesktopNavigation } from "@mgisolutions/design-system/svelte";
usage
Basic usage Desktop Navigation
Demonstrate
product count in the wishlist 6
product count in the cart 2
Svelte Copy
let exampleMiniCart = {
couponCode: null,
totalQty: 2,
totalPrice: 289.8,
baseGrandTotal: 289.8,
productCarts: [
{
sku: "b-bt-s",
urlKey: "biotin-shampoo",
name: "Biotin Shampoo",
qty: 2,
specialPrice: 14.95,
regularPrice: 18.9,
imageUrl: "https://drberg-dam.imgix.net/product-images/biotin-shampoo-2023-3d3.png",
categories: [{ id: 327, name: "All Products" }],
discount: 3.95,
visibility: 1,
},
{
sku: "NutritionalYeast",
urlKey: "nutritional-yeast-regular",
name: "Nutritional Yeast Tablets ",
qty: 10,
specialPrice: 25.99,
regularPrice: 33.31,
imageUrl: "https://drberg-dam.imgix.net/product-images/nutritional-yeast-1.png",
categories: [{ id: 327, name: "All Products" }],
discount: 7.32,
},
],
};
let exampleMiniWishlist = [
{
sku: "WHEA-GR-POW",
urlKey: "raw-wheat-grass-juice-powder",
name: "Organic Raw Wheatgrass Juice Powder",
qty: 1,
specialPrice: 41.99,
regularPrice: 53.79,
imageUrl: "https://drberg-dam.imgix.net/product-images/wheat-grass-supperfood-02.png",
categories: [{ id: 327, name: "All Products" }],
discount: 11.8,
stockIndicator: "InStock",
visibility: 1,
},
{
sku: "hairf-90-c",
urlKey: "hair-formula-capsules",
name: "Hair Formula",
qty: 1,
specialPrice: 39.99,
regularPrice: 54.99,
imageUrl: "https://drberg-dam.imgix.net/product-images/hair-formula-capsules-02.png",
categories: [{ id: 327, name: "All Products" }],
discount: 15,
stockIndicator: "OutOfStock",
visibility: 4,
},
{
sku: "EP-RL-REG25",
urlKey: "electrolyte-powder-raspberry-lemon-100-servings",
name: "Electrolyte Powder Raspberry & Lemon Flavor 100 Servings",
qty: 1,
specialPrice: 44.99,
regularPrice: 58.37,
imageUrl: "https://drberg-dam.imgix.net/product-images/electrolyte-powder-raspberry-lemon-02.png",
categories: [{ id: 327, name: "All Products" }],
discount: 13.38,
},
{
sku: "Orange-Electlyte",
urlKey: "electrolyte-orange",
name: "Electrolyte Powder Orange Flavor",
qty: 2,
specialPrice: 33.99,
regularPrice: 48.65,
imageUrl: "https://drberg-dam.imgix.net/product-images/electrolyte-powder-orange-02.png",
categories: [{ id: 327, name: "All Products" }],
discount: 14.66,
},
{
sku: "s-tgt",
urlKey: "turmeric-ginger-tea",
name: "Turmeric Ginger Tea",
qty: 2,
specialPrice: 19.99,
regularPrice: 23.99,
imageUrl: "https://drberg-dam.imgix.net/product-images/turmeric-ginger-tea-01.png",
categories: [
{ id: 327, name: "All Products" },
{ id: 332, name: "Beauty" },
],
discount: 4,
},
{
sku: "b-bt-s",
urlKey: "biotin-shampoo",
name: "Biotin Shampoo",
qty: 2,
specialPrice: 14.95,
regularPrice: 18.9,
imageUrl: "https://drberg-dam.imgix.net/product-images/biotin-shampoo-2023-3d3.png",
categories: [{ id: 327, name: "All Products" }],
discount: 3.95,
},
{
sku: "B1-60-c",
urlKey: "natural-vitamin-b1",
name: "Natural Vitamin B1",
qty: 6,
specialPrice: 23.99,
regularPrice: 25.99,
imageUrl: "https://drberg-dam.imgix.net/product-images/natural-b1-02.png",
categories: [
{ id: 327, name: "All Products" },
{ id: 331, name: "Devices" },
{ id: 332, name: "Beauty" },
],
discount: 2,
},
];
const categories = [
{
id: 1,
name: "All products",
numberProducts: 100,
link: "category",
type: "Category",
characteristicId: null,
badge: null,
},
{
id: 2,
name: "Supplements",
numberProducts: 100,
link: "category/supplements",
type: "Category",
characteristicId: null,
badge: null,
},
{
id: 3,
name: "Powders",
numberProducts: 100,
link: "category/powders",
type: "Category",
characteristicId: null,
badge: null,
},
{
id: 4,
name: "Bundles",
numberProducts: 100,
link: "category/bundles",
type: "Category",
characteristicId: null,
badge: null,
},
{
id: 5,
name: "Beayty",
numberProducts: 100,
link: "category/beauty",
type: "Category",
characteristicId: null,
badge: null,
},
{
id: 9,
name: "Deals",
link: "/deals",
numberProducts: 0,
type: "Category",
characteristicId: null,
badge: "SALE",
},
];
<DesktopNavigation
domain="https://pwa-pilot.drberg.com"
isAuth=true
isWishlistLoading={isWishlistLoading}
wishlistCount={4}
wishlistProducts={wishlist}
addToCartProducts={miniCart}
isAddCartLoading={isAddCartLoading}
addToCartCount={6}
listAccountPage={LIST_ACCOUNT_PAGE}
listSuggest={listSuggest}
categories={categories}
categoryActive={categoryName}
{handleImageError}
on:clickWishlist={onClickWishlist}
on:clickCart={onClickCart}
on:sigout={onRedirectLogoutPage}
on:createAccount={() => onOpenPopupAccount()}
on:sigin={() => onOpenPopupAccount()}
on:clickMiniCart={onClickMiniCart}
on:moveToCart={moveToCart}
on:removeFromCart={removeFromCart}
on:removeFromWishlist={removeFromWishlist}
on:clickCheckoutButton={onClickCheckoutButton}
on:viewCart={trackingViewCart}
on:searchSuggest={onSearchSuggest}
on:submitSearch={handleSubmitSearch}
on:searchKeydownEnter={onSearchKeyDownEnter}
on:openCS={onOpenCSFAQ} />
Component Data
- props
- events
| Name | Description | Type | Default |
|---|---|---|---|
| isAuth | If user login , value isAuth = true | boolean | false |
| dataSyncCompleted | If true, disabled icon cart, icon wishlist and icon account | boolean | false |
| isAutoship | Value of autoship | boolean | false |
| isAutdisabledMiniCartActionoship | Disabled button when call api | boolean | false |
| domain | domain use in more app button | string | http://localhost:3000 |
| appLinks | Props of more app button, pass props to create more name and link for more app button | object | [ { name: "drberg.com", link: https://www.drberg.com/?utm_source=domainURL&utm_medium= network-icon&_gl=1*1ujeqpj*_gcl_au*ODIyNDUzNDA2LjE2OTQ1NzA1NjU. *FPAU*ODIyNDUzNDA2LjE2OTQ1NzA1NjU.&_ga=2.22415291.1266207633.1694570565-1733349163.1694570565, }, { name: "courses.drberg.com", link: https://courses.drberg.com/?utm_source={domainURL}&utm_medium=network-icon&_gl=1*1ujeqpj* _gcl_au*ODIyNDUzNDA2LjE2OTQ1NzA1NjU. *FPAU*ODIyNDUzNDA2LjE2OTQ1NzA1NjU.&_ga=2.22415291.1266207633.1694570565-1733349163.1694570565, }, ]; |
| listSuggest | Props list search suggest after call api suggest | Array | [] |
| wishlistCount | The number off add to wishlist product | number | 0 |
| addToCartCount | The number off add to cart product | number | 0 |
| wishlistProducts | Mini cart information: products have been added to the wishlist | Object | null |
| addToCartProducts | Mini cart information: products have been added to the cart | Object | null |
| categories | List category | Array | [ { id: 1, name: "All products", numberProducts: 100, link: "category", type: "Category", characteristicId: null, badge: null, }, { id: 2, name: "Supplements", numberProducts: 100, link: "category/supplements", type: "Category", characteristicId: null, badge: null, }, { id: 3, name: "Powders", numberProducts: 100, link: "category/powders", type: "Category", characteristicId: null, badge: null, }, { id: 4, name: "Bundles", numberProducts: 100, link: "category/bundles", type: "Category", characteristicId: null, badge: null, }, { id: 5, name: "Beayty", numberProducts: 100, link: "category/beauty", type: "Category", characteristicId: null, badge: null, }, { id: 9, name: "Deals", link: "/deals", numberProducts: 0, type: "Category", characteristicId: null, badge: "SALE", }, ]; |
| categoryName | The category name off current page | string | |
| cartPageUrl | Url off cart page want going when click on View cart button in cart button | string | /cartkout |
| accountDescriptonsTexts | List text off account button when guest user | Array | [ { text: "Personalized shopping", }, { text: "Faster checkouts using saved data", }, { text: "Full order history tracking", }, { text: "You can use wishlist", }, { text: "Members-only discounts", }, { text: "Members reward program", badge: "(soon)", }, ]; |
| listAccountPage | List name and url in account button when status = login | Array | [ { id: 1, name: "My Dashboard", link: "/customer/account", icon: null, }, { id: 2, name: "Purchase History", link: "/sales/order/history", }, { id: 3, name: "My Wishlist", link: "/wishlist", }, { id: 4, name: "My Downloads", link: "/downloadable/customer/products", }, { id: 5, name: "My Returns", link: "/rma/returns/history", }, { id: 6, name: "My Addresses", link: "/customer/address", }, { id: 7, name: "My Cards", link: "/vault/cards/listaction", }, { id: 8, name: "Notifications", link: "/newsletter/manage", }, ]; |