18 | The page you are looking for might have been removed, had its name 19 | changed, or is temporarily unavailable. 20 |
21 |
12 |
20 | );
21 | };
22 |
23 | export default OpenCart;
24 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/loadings/skeleton/SkeletonProductThumb.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SkeletonProductThumb = () => {
4 | return (
5 |
16 | {quantity}
17 |
18 | ) : null}
19 |
6 |
23 | );
24 | };
25 |
26 | export default SkeletonProductThumb;
27 |
--------------------------------------------------------------------------------
/src/lib/typeGuards.ts:
--------------------------------------------------------------------------------
1 | export interface ShopifyErrorLike {
2 | status: number;
3 | message: Error;
4 | cause?: Error;
5 | }
6 |
7 | export const isObject = (
8 | object: unknown,
9 | ): object is Record
7 |
8 |
9 |
22 |
10 | {Array(4)
11 | .fill(0)
12 | .map((_, index) => {
13 | return (
14 |
18 | );
19 | })}
20 |
21 |
8 |
26 |
9 |
24 |
25 | 28 | {formattedAmount} 29 | {currencyCode} 30 |
31 | ); 32 | }; 33 | 34 | export default Price; 35 | -------------------------------------------------------------------------------- /src/lib/utils/sortFunctions.ts: -------------------------------------------------------------------------------- 1 | // sort by date 2 | export const sortByDate = (array: any[]) => { 3 | const sortedArray = array.sort( 4 | (a: any, b: any) => 5 | new Date(b.data.date && b.data.date).valueOf() - 6 | new Date(a.data.date && a.data.date).valueOf(), 7 | ); 8 | return sortedArray; 9 | }; 10 | 11 | // sort product by weight 12 | export const sortByWeight = (array: any[]) => { 13 | const withWeight = array.filter( 14 | (item: { data: { weight: any } }) => item.data.weight, 15 | ); 16 | const withoutWeight = array.filter( 17 | (item: { data: { weight: any } }) => !item.data.weight, 18 | ); 19 | const sortedWeightedArray = withWeight.sort( 20 | (a: { data: { weight: number } }, b: { data: { weight: number } }) => 21 | a.data.weight - b.data.weight, 22 | ); 23 | const sortedArray = [...new Set([...sortedWeightedArray, ...withoutWeight])]; 24 | return sortedArray; 25 | }; 26 | -------------------------------------------------------------------------------- /src/layouts/functional-components/loadings/skeleton/SkeletonFeaturedProducts.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const SkeletonFeaturedProducts = () => { 4 | return ( 5 |
6 | {Array(8)
7 | .fill(0)
8 | .map((_, index) => {
9 | return (
10 |
20 | );
21 | };
22 |
23 | export default SkeletonFeaturedProducts;
24 |
--------------------------------------------------------------------------------
/src/styles/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | @apply text-base-sm md:text-base;
3 | }
4 |
5 | body {
6 | @apply bg-body text-base dark:bg-darkmode-body font-primary font-normal leading-relaxed text-text dark:text-darkmode-text;
7 | }
8 |
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6 {
15 | @apply font-primary font-bold leading-tight text-text-dark dark:text-darkmode-text-dark;
16 | }
17 |
18 | h1,
19 | .h1 {
20 | @apply text-h1-sm md:text-h1;
21 | }
22 |
23 | h2,
24 | .h2 {
25 | @apply text-h2-sm md:text-h2;
26 | }
27 |
28 | h3,
29 | .h3 {
30 | @apply text-h3-sm md:text-h3;
31 | }
32 |
33 | h4,
34 | .h4 {
35 | @apply text-h4;
36 | }
37 |
38 | h5,
39 | .h5 {
40 | @apply text-h5;
41 | }
42 |
43 | h6,
44 | .h6 {
45 | @apply text-h6;
46 | }
47 |
48 | b,
49 | strong {
50 | @apply font-semibold;
51 | }
52 |
53 | code {
54 | @apply after:border-none;
55 | }
56 |
57 | blockquote > p {
58 | @apply my-0!;
59 | }
60 |
61 | button {
62 | @apply cursor-pointer;
63 | }
64 |
--------------------------------------------------------------------------------
/src/lib/utils/readingTime.ts:
--------------------------------------------------------------------------------
1 | // content reading
2 | const readingTime = (content: string): string => {
3 | const WPS = 275 / 60;
4 |
5 | let images = 0;
6 | const regex = /\w/;
7 |
8 | let words = content.split(" ").filter((word) => {
9 | if (word.includes("
11 |
12 |
17 | );
18 | })}
19 |
13 |
14 |
15 |
16 |
7 |
22 | );
23 | };
24 |
25 | export default SkeletonDescription;
26 |
--------------------------------------------------------------------------------
/src/layouts/shortcodes/Accordion.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | const Accordion = ({
4 | title,
5 | children,
6 | className,
7 | }: {
8 | title: string;
9 | children: React.ReactNode;
10 | className?: string;
11 | }) => {
12 | const [show, setShow] = useState(false);
13 |
14 | return (
15 |
8 |
11 |
14 |
15 |
16 |
17 |
21 |
18 |
19 |
20 |
16 |
31 |
33 | );
34 | };
35 |
36 | export default Accordion;
37 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/rangeSlider/rangeSlider.css:
--------------------------------------------------------------------------------
1 | .range-slider-container {
2 | padding: 0 0;
3 | margin: 0 0;
4 | }
5 |
6 | .range-slider {
7 | position: relative;
8 | height: 8px;
9 | margin: 10px 0 15px;
10 | }
11 |
12 | .slider-track {
13 | position: absolute;
14 | width: 100%;
15 | height: 8px;
16 | background-color: #e7e7e7;
17 | border-radius: 10px;
18 | top: 50%;
19 | transform: translateY(-50%);
20 | }
21 |
22 | .slider-range {
23 | position: absolute;
24 | height: 8px;
25 | background-color: gray;
26 | top: 50%;
27 | transform: translateY(-50%);
28 | }
29 |
30 | .slider-thumb {
31 | position: absolute;
32 | width: 20px;
33 | height: 20px;
34 | background-color: white;
35 | border: 3px solid gray;
36 | border-radius: 50%;
37 | top: 50%;
38 | transform: translate(-50%, -50%);
39 | cursor: pointer;
40 | z-index: 2;
41 | }
42 |
43 | .slider-thumb:hover {
44 | box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
45 | }
46 |
47 | .slider-thumb:active {
48 | box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.1);
49 | cursor: grabbing;
50 | }
51 |
52 | /* For touch devices */
53 | @media (pointer: coarse) {
54 | .slider-thumb {
55 | width: 24px;
56 | height: 24px;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/styles/safe.css:
--------------------------------------------------------------------------------
1 | /* navbar toggler */
2 | input#nav-toggle:checked + label #show-button {
3 | @apply hidden;
4 | }
5 |
6 | input#nav-toggle:checked + label #hide-button {
7 | @apply block;
8 | }
9 |
10 | input#nav-toggle:checked ~ #nav-menu {
11 | @apply block;
12 | }
13 |
14 | /* swiper pagination */
15 | .testimonial-slider-pagination {
16 | .swiper-pagination-bullet {
17 | @apply h-2.5 w-2.5 bg-light opacity-100 dark:bg-darkmode-light;
18 | }
19 |
20 | .swiper-pagination-bullet-active {
21 | @apply h-4 w-4 bg-primary dark:bg-darkmode-primary;
22 | }
23 | }
24 |
25 | .iiz__hint {
26 | @apply rounded-md;
27 | }
28 |
29 | /* change input autofield color */
30 | input:-webkit-autofill,
31 | input:-webkit-autofill:hover,
32 | input:-webkit-autofill:focus,
33 | input:-webkit-autofill:active {
34 | -webkit-box-shadow: 0 0 0 30px #f2f2f2 inset !important;
35 | }
36 |
37 | .dark input:-webkit-autofill,
38 | .dark input:-webkit-autofill:hover,
39 | .dark input:-webkit-autofill:focus,
40 | .dark input:-webkit-autofill:active {
41 | -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.9) inset !important;
42 | }
43 |
44 | /*Change text in autofill textbox*/
45 | .dark input:-webkit-autofill {
46 | -webkit-text-fill-color: #ddd !important;
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/[regular].astro:
--------------------------------------------------------------------------------
1 | ---
2 | export const prerender = true;
3 | import Base from "@/layouts/Base.astro";
4 | import { getSinglePage } from "@/lib/contentParser.astro";
5 | import PageHeader from "@/partials/PageHeader.astro";
6 | import { render } from "astro:content";
7 |
8 | // get static paths for all pages
9 | export async function getStaticPaths() {
10 | const COLLECTION_FOLDER = "pages";
11 |
12 | const pages = await getSinglePage(COLLECTION_FOLDER);
13 |
14 | const paths = pages.map((page) => ({
15 | params: {
16 | regular: page.id,
17 | },
18 | props: { page },
19 | }));
20 | return paths;
21 | }
22 |
23 | const { page } = Astro.props;
24 | const { title, meta_title, description, image } = page?.data;
25 | const { Content } = await render(page);
26 | ---
27 |
28 | {children}
32 |
37 |
45 |
38 |
44 |
39 |
43 |
40 |
42 |
7 |
29 |
8 |
28 |
9 |
27 |
10 |
26 |
11 | {Array(9)
12 | .fill(0)
13 | .map((_, index) => {
14 | return (
15 |
25 |
16 |
17 |
22 | );
23 | })}
24 |
18 |
19 |
20 |
21 |
14 |
34 |
36 | ))}
37 |
38 | );
39 | };
40 |
41 | export default Accordion;
42 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | ARG INSTALLER=yarn
2 |
3 | FROM node:22.20.0-alpine AS base
4 |
5 | # Install dependencies only when needed
6 | FROM base AS deps
7 | ARG INSTALLER
8 |
9 | # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
10 | RUN apk add --no-cache libc6-compat
11 | WORKDIR /app
12 |
13 | # Install dependencies based on the preferred package manager
14 | COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
15 | RUN \
16 | if [ "${INSTALLER}" == "yarn" ]; then yarn --frozen-lockfile; \
17 | elif [ "${INSTALLER}" == "npm" ]; then npm ci; \
18 | elif [ "${INSTALLER}" == "pnpm" ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
19 | else echo "Valid installer not set." && exit 1; \
20 | fi
21 |
22 |
23 | # Rebuild the source code only when needed
24 | FROM base AS builder
25 | WORKDIR /app
26 | COPY --from=deps /app/node_modules ./node_modules
27 | COPY . .
28 |
29 | # RUN chmod u+x ./installer && ./installer
30 | ARG INSTALLER
31 | RUN \
32 | if [ "${INSTALLER}" == "yarn" ]; then yarn build; \
33 | elif [ "${INSTALLER}" == "npm" ]; then npm run build; \
34 | elif [ "${INSTALLER}" == "pnpm" ]; then pnpm run build; \
35 | else echo "Valid installer not set." && exit 1; \
36 | fi
37 |
38 | # Production image, copy all the files and run nginx
39 | FROM nginx:alpine AS runner
40 | COPY ./config/nginx/nginx.conf /etc/nginx/nginx.conf
41 | COPY --from=builder /app/dist /usr/share/nginx/html
42 |
43 | WORKDIR /usr/share/nginx/html
44 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import mdx from "@astrojs/mdx";
2 | import netlify from "@astrojs/netlify";
3 | import react from "@astrojs/react";
4 | import sitemap from "@astrojs/sitemap";
5 | import tailwindcss from "@tailwindcss/vite";
6 | import AutoImport from "astro-auto-import";
7 | import { defineConfig } from "astro/config";
8 | import remarkCollapse from "remark-collapse";
9 | import remarkToc from "remark-toc";
10 | import sharp from "sharp";
11 | import config from "./src/config/config.json";
12 |
13 | // https://astro.build/config
14 | export default defineConfig({
15 | site: config.site.base_url ? config.site.base_url : "http://examplesite.com",
16 | base: config.site.base_path ? config.site.base_path : "/",
17 | trailingSlash: config.site.trailing_slash ? "always" : "never",
18 | image: { service: sharp() },
19 | output: "server",
20 | adapter: netlify({
21 | edgeMiddleware: true,
22 | }),
23 | vite: { plugins: [tailwindcss()] },
24 | integrations: [
25 | react(),
26 | sitemap(),
27 | AutoImport({
28 | imports: [
29 | "@/shortcodes/Button",
30 | "@/shortcodes/Accordion",
31 | "@/shortcodes/Notice",
32 | "@/shortcodes/Video",
33 | "@/shortcodes/Youtube",
34 | "@/shortcodes/Tabs",
35 | "@/shortcodes/Tab",
36 | ],
37 | }),
38 | mdx(),
39 | ],
40 | markdown: {
41 | remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
42 | shikiConfig: { theme: "one-dark-pro", wrap: true },
43 | extendDefaultPlugins: true,
44 | },
45 | });
46 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/ProductLayoutViews.tsx:
--------------------------------------------------------------------------------
1 | import { layoutView } from '@/cartStore';
2 | import type { PageInfo, Product } from '@/lib/shopify/types';
3 | import { useStore } from '@nanostores/react';
4 | import React, { Suspense, lazy } from 'react';
5 | import SkeletonCards from './loadings/skeleton/SkeletonCards';
6 |
7 | const ProductGrid = lazy(() => import('./ProductGrid'));
8 | const ProductList = lazy(() => import('./ProductList'));
9 |
10 | const ProductLayoutViews = ({
11 | initialProducts,
12 | initialPageInfo,
13 | sortKey,
14 | reverse,
15 | searchValue,
16 | }: {
17 | initialProducts: Product[];
18 | initialPageInfo: PageInfo;
19 | sortKey: string;
20 | reverse: boolean;
21 | searchValue: string | null;
22 | }) => {
23 | const layout = useStore(layoutView);
24 |
25 | return (
26 | {faq.content}
35 |
27 |
47 | );
48 | };
49 |
50 | export default ProductLayoutViews;
51 |
--------------------------------------------------------------------------------
/src/layouts/components/ImageMod.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { ImageMetadata } from "astro";
3 | import { Image } from "astro:assets";
4 |
5 | // Props interface for the component
6 | interface Props {
7 | src: string;
8 | alt: string;
9 | width: number;
10 | height: number;
11 | loading?: "eager" | "lazy" | null | undefined;
12 | decoding?: "async" | "auto" | "sync" | null | undefined;
13 | format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
14 | class?: string;
15 | style?: any;
16 | }
17 |
18 | // Destructuring Astro.props to get the component's props
19 | let {
20 | src,
21 | alt,
22 | width,
23 | height,
24 | loading,
25 | decoding,
26 | class: className,
27 | format,
28 | style,
29 | } = Astro.props;
30 |
31 | src = `/public${src}`;
32 |
33 | // Glob pattern to load images from the /public/images folder
34 | const images = import.meta.glob("/public/images/**/*.{jpeg,jpg,png,gif}");
35 |
36 | // Check if the source path is valid
37 | const isValidPath = images[src] ? true : false;
38 |
39 | // Log a warning message in red if the image is not found
40 | !isValidPath &&
41 | console.error(
42 | `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /public/images folder.`,
43 | );
44 | ---
45 |
46 | {
47 | isValidPath && (
48 |
35 | {tags.map((tag) => (
36 |
45 | ))}
46 |
47 | );
48 | };
49 |
50 | export default ShowTags;
51 |
--------------------------------------------------------------------------------
/src/lib/shopify/queries/collection.ts:
--------------------------------------------------------------------------------
1 | import productFragment from "../fragments/product";
2 | import seoFragment from "../fragments/seo";
3 |
4 | const collectionFragment = /* GraphQL */ `
5 | fragment collection on Collection {
6 | handle
7 | title
8 | description
9 | image {
10 | altText
11 | url
12 | }
13 | seo {
14 | ...seo
15 | }
16 | updatedAt
17 | products(first: 100) {
18 | edges {
19 | node {
20 | id
21 | }
22 | }
23 | }
24 | }
25 | ${seoFragment}
26 | `;
27 |
28 | export const getCollectionQuery = /* GraphQL */ `
29 | query getCollection($handle: String!) {
30 | collection(handle: $handle) {
31 | ...collection
32 | }
33 | }
34 | ${collectionFragment}
35 | `;
36 |
37 | export const getCollectionsQuery = /* GraphQL */ `
38 | query getCollections {
39 | collections(first: 100, sortKey: TITLE) {
40 | edges {
41 | node {
42 | ...collection
43 | }
44 | }
45 | }
46 | }
47 | ${collectionFragment}
48 | `;
49 |
50 | export const getCollectionProductsQuery = /* GraphQL */ `
51 | query getCollectionProducts(
52 | $handle: String!
53 | $sortKey: ProductCollectionSortKeys
54 | $reverse: Boolean
55 | $filterCategoryProduct: [ProductFilter!]
56 | ) {
57 | collection(handle: $handle) {
58 | products(
59 | sortKey: $sortKey
60 | reverse: $reverse
61 | first: 100
62 | filters: $filterCategoryProduct
63 | ) {
64 | edges {
65 | node {
66 | ...product
67 | }
68 | }
69 | }
70 | }
71 | }
72 | ${productFragment}
73 | `;
74 |
--------------------------------------------------------------------------------
/src/config/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "site": {
3 | "title": "Storeplate",
4 | "base_url": "https://storeplate.vercel.app/",
5 | "base_path": "/",
6 | "trailing_slash": false,
7 | "favicon": "/images/favicon.png",
8 | "logo": "/images/logo.png",
9 | "logo_darkmode": "/images/logo-darkmode.png",
10 | "logo_width": "150",
11 | "logo_height": "33",
12 | "logo_text": "Storeplate"
13 | },
14 |
15 | "announcement": {
16 | "enable": true,
17 | "content": "♥️ Loving Storeplate? Please ⭐️ on Github",
18 | "expire_days": 7
19 | },
20 |
21 | "settings": {
22 | "search": true,
23 | "account": true,
24 | "sticky_header": true,
25 | "theme_switcher": true,
26 | "default_theme": "system"
27 | },
28 |
29 | "params": {
30 | "contact_form_action": "#",
31 | "copyright": "Designed And Developed by [Zeon Studio](https://zeon.studio)"
32 | },
33 |
34 | "navigation_button": {
35 | "enable": true,
36 | "label": "Get Started",
37 | "link": "https://github.com/zeon-studio/storeplate"
38 | },
39 |
40 | "google_tag_manager": {
41 | "enable": false,
42 | "gtm_id": "GTM-XXXXXX"
43 | },
44 |
45 | "metadata": {
46 | "meta_author": "zeon.studio",
47 | "meta_image": "/images/og-image.png",
48 | "meta_description": "Shopify Storefront Boilerplate"
49 | },
50 |
51 | "shopify": {
52 | "currencySymbol": "৳",
53 | "currencyCode": "BDT",
54 | "collections": {
55 | "hero_slider": "hidden-homepage-carousel",
56 | "featured_products": "featured-products"
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/product/PaymentSlider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import { BsChevronRight } from "react-icons/bs";
3 | // Import Swiper styles
4 | import "swiper/css";
5 | import "swiper/css/navigation";
6 | import "swiper/css/pagination";
7 | import { Navigation, Pagination } from "swiper/modules";
8 | import { Swiper, SwiperSlide } from "swiper/react";
9 |
10 | const PaymentSlider = ({ paymentMethods }: { paymentMethods: any }) => {
11 | const [_, setInit] = useState(false);
12 |
13 | const prevRef = useRef(null);
14 | const nextRef = useRef(null);
15 | return (
16 |
8 | {/* categories */}
9 |
57 |
--------------------------------------------------------------------------------
/src/layouts/components/Share.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import config from "@/config/config.json";
3 | import {
4 | IoLogoFacebook,
5 | IoLogoLinkedin,
6 | IoLogoPinterest,
7 | IoLogoTwitter,
8 | } from "react-icons/io5";
9 |
10 | const { base_url }: { base_url: string } = config.site;
11 | const {
12 | title,
13 | description,
14 | slug,
15 | className,
16 | }: { title?: string; description?: string; slug?: string; className?: string } =
17 | Astro.props;
18 | ---
19 |
20 |
10 |
33 |
34 | {/* tags */}
35 | Categories
11 |
12 |
32 | -
13 | {
14 | categories.map((category: any) => {
15 | const count = allCategories.filter(
16 | (c: any) => c === category
17 | ).length;
18 | return (
19 |
- 20 | 24 | {humanize(category)} ({count}) 25 | 26 | 27 | ); 28 | }) 29 | } 30 |
36 |
56 | Tags
37 |
38 |
55 | -
39 | {
40 | tags.map((tag: any) => {
41 | return (
42 |
- 43 | 47 | {humanize(tag)} 48 | 49 | 50 | ); 51 | }) 52 | } 53 |
-
21 |
-
22 |
28 |
29 | 30 |
31 | -
32 |
38 |
39 | 40 |
41 | -
42 |
48 |
49 | 50 |
51 | -
52 |
58 |
59 | 60 |
61 |
15 |
50 |
16 |
49 |
17 |
48 |
18 |
22 |
23 |
27 |
28 | {data.button.enable && (
29 |
33 | {data.button.label}
34 |
35 | )}
36 |
37 |
38 |
39 |
47 |
30 |
34 |
31 |
33 |
39 |
44 |
40 |
42 | Collections
41 |
49 |
55 |
50 |
53 | Featured Products
51 |Explore Today's Featured Picks!
52 |
7 |
38 |
8 |
37 |
9 |
10 |
11 |
12 |
13 |
14 |
36 |
15 |
35 |
16 |
17 |
18 |
19 |
20 | {Array(9)
21 | .fill(0)
22 | .map((_, index) => {
23 | return (
24 |
34 |
25 |
26 |
31 | );
32 | })}
33 |
27 |
28 |
29 |
30 |
22 |
57 |
23 |
44 |
45 |
24 | {item?.description && (
25 |
43 | 26 | {item.description} 27 |
28 | )} 29 |
30 |
34 | {item.handle && (
35 |
39 | Shop Now
40 |
41 | )}
42 | 31 | {item.title} 32 |
33 |
46 | {item.featuredImage && (
47 | 
54 | )}
55 |
56 | Loading...
; 16 | } 17 | 18 | return ( 19 | <> 20 |
21 |
30 | {contentArray[1] && (
31 |
40 | )}
41 |
42 |
43 | {selectedTab === 0 && (
44 |
48 | )}
49 | {selectedTab === 1 && contentArray[1] && (
50 |
54 | )}
55 |
56 |
57 | );
58 | };
59 |
60 | export default Tabs;
61 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/cart/EditItemQuantityButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { FaMinus, FaPlus } from "react-icons/fa6";
3 | import { updateCartItemQuantity, refreshCartState } from "@/cartStore";
4 | import type { CartItem } from "@/lib/shopify/types";
5 | import LoadingDots from "../loadings/LoadingDots";
6 |
7 | interface Props {
8 | item: CartItem;
9 | type: "plus" | "minus";
10 | }
11 |
12 | const EditItemQuantityButton: React.FC
45 |
73 | );
74 | };
75 |
76 | export default Tabs;
77 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { IoSearch, IoClose } from "react-icons/io5";
3 |
4 | const SearchBar = () => {
5 | const [isInputEditing, setInputEditing] = useState(false);
6 | const [inputValue, setInputValue] = useState("");
7 |
8 | useEffect(() => {
9 | const searchParams = new URLSearchParams(window.location.search);
10 | const query = searchParams.get("q");
11 | if (query) {
12 | setInputValue(query);
13 | setInputEditing(true);
14 | }
15 |
16 | const inputField = document.getElementById("searchInput") as HTMLInputElement;
17 | if (isInputEditing || query) {
18 | inputField.focus();
19 | }
20 | }, [isInputEditing]);
21 |
22 | const updateURL = (query: string) => {
23 | const newURL = query ? `/products?q=${encodeURIComponent(query)}` : '/products';
24 | // window.history.pushState({}, '', newURL);
25 | window.location.href = newURL.toString();
26 | };
27 |
28 | const handleChange = (e: React.ChangeEvent-
46 | {tabLinks.map(
47 | (item: { name: string; children: string }, index: number) => (
48 |
- handleKeyDown(event, index)} 54 | onClick={() => setActive(index)} 55 | //@ts-ignore 56 | ref={(ref) => (tabRefs.current[index] = ref)} 57 | > 58 | {item.name} 59 | 60 | ), 61 | )} 62 |
7 |
40 |
8 | {/* right side contents */}
9 |
39 |
10 |
11 |
24 |
25 | {/* left side contents */}
26 |
12 | {Array(4)
13 | .fill(0)
14 | .map((_, index) => {
15 | return (
16 |
20 | );
21 | })}
22 |
23 |
27 | {Array(8)
28 | .fill(0)
29 | .map((_, index) => {
30 | return (
31 |
35 | );
36 | })}
37 |
38 |
44 |
60 |
45 | {Array(9)
46 | .fill(0)
47 | .map((_, index) => {
48 | return (
49 |
59 |
50 |
51 |
56 | );
57 | })}
58 |
52 |
53 |
54 |
55 |
74 |
77 |
84 |
85 | );
86 | };
87 |
88 | export default Announcement;
89 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/SocialShare.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import DynamicIcon from "@/helpers/DynamicIcon";
3 |
4 | const SocialShare: React.FC<{ socialName: string; className: string; pathname: string }> = ({
5 | socialName,
6 | className,
7 | pathname,
8 | }) => {
9 | const [baseUrl, setBaseUrl] = useState("");
10 | const [isTooltipVisible, setIsTooltipVisible] = useState(false);
11 |
12 | useEffect(() => {
13 | setBaseUrl(window.location.origin);
14 | }, []);
15 |
16 | const handleCopyLink = async () => {
17 | const fullLink = `${baseUrl}${window.location.pathname}`;
18 |
19 | try {
20 | await navigator.clipboard.writeText(fullLink);
21 | // Show the tooltip
22 | setIsTooltipVisible(true);
23 | setTimeout(() => {
24 | setIsTooltipVisible(false);
25 | }, 1000);
26 | } catch (error) {
27 | console.error("Failed to copy text: ", error);
28 | }
29 | };
30 |
31 | return (
32 | -
33 |
-
34 |
40 | {socialName}
41 |
42 | 43 |
44 |
45 | -
46 |
52 | {socialName}
53 |
54 | 55 |
56 |
57 | -
58 |
64 | {socialName}
65 |
66 | 67 |
68 |
69 | -
70 |
75 | Copy Link
76 | {isTooltipVisible && (
77 |
78 |
{" "} 82 | copied! 83 | 84 | )} 85 | 86 | 87 |
88 |
38 |
62 |
63 | {openSelect && (
64 |
82 | );
83 | };
84 |
85 | export default DropdownMenu;
86 |
--------------------------------------------------------------------------------
/src/layouts/components/FeaturedProducts.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import config from "@/config/config.json";
3 | import { AddToCart } from "@/functional-components/cart/AddToCart";
4 | import type { Product } from "@/lib/shopify/types";
5 |
6 | interface Props {
7 | products: Product[];
8 | }
9 |
10 | const { products } = Astro.props;
11 | const { currencySymbol } = config.shopify;
12 | ---
13 |
14 | {
67 | setOpenSelect(false);
68 | }}
69 | >
70 |
80 | )}
81 |
75 | {list.map((item, i) => (
76 |
79 |
15 | {
16 | products.map((product: any) => {
17 | const {
18 | title,
19 | handle,
20 | featuredImage,
21 | priceRange,
22 | variants,
23 | compareAtPriceRange,
24 | } = product;
25 |
26 | const defaultVariantId = variants.length > 0 ? variants[0].id : undefined;
27 | return (
28 |
76 |
77 |
29 |
72 | );
73 | })
74 | }
75 |
30 | 
37 |
38 |
47 |
48 |
71 | 49 | 53 | {title} 54 | 55 |
56 |
57 |
58 | {currencySymbol}
59 | {priceRange.minVariantPrice.amount}
60 | {compareAtPriceRange?.maxVariantPrice?.currencyCode}
61 |
62 |
63 | {parseFloat(compareAtPriceRange?.maxVariantPrice.amount) > 0 && (
64 |
65 | {currencySymbol} {compareAtPriceRange?.maxVariantPrice.amount}{" "}
66 | {compareAtPriceRange?.maxVariantPrice?.currencyCode}
67 |
68 | )}
69 |
70 |
78 |
79 | + See All Products
80 |
81 |
82 |
--------------------------------------------------------------------------------
/scripts/removeDarkmode.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 |
4 | (function () {
5 | const rootDirs = ["src/pages", "src/hooks", "src/layouts", "src/styles"];
6 |
7 | const deleteAssetList = [
8 | "public/images/logo-darkmode.png",
9 | "src/layouts/components/ThemeSwitcher.astro",
10 | ];
11 |
12 | const configFiles = [
13 | {
14 | filePath: "tailwind.config.js",
15 | patterns: ["darkmode:\\s*{[^}]*},", 'darkMode:\\s*"class",'],
16 | },
17 | { filePath: "src/config/theme.json", patterns: ["colors.darkmode"] },
18 | ];
19 |
20 | const filePaths = [
21 | {
22 | filePath: "src/layouts/partials/Header.astro",
23 | patterns: [
24 | "
46 |
66 |
67 | {isOpen && (
68 |
81 | );
82 | };
83 |
84 | export default VariantDropDown;
85 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/NavUser.tsx:
--------------------------------------------------------------------------------
1 | import { getUserDetails } from "@/lib/shopify";
2 | import type { user } from "@/lib/shopify/types";
3 | import Cookies from "js-cookie";
4 | import React, { useEffect, useState } from "react";
5 | import Gravatar from "react-gravatar";
6 | import { BsPerson } from "react-icons/bs";
7 |
8 | export const fetchUser = async () => {
9 | try {
10 | const accessToken = Cookies.get("token");
11 |
12 | if (!accessToken) {
13 | return null;
14 | } else {
15 | const userDetails: user = await getUserDetails(accessToken);
16 | const userInfo = userDetails.customer;
17 | return userInfo;
18 | }
19 | } catch (error) {
20 | // console.log("Error fetching user details:", error);
21 | return null;
22 | }
23 | };
24 |
25 | const NavUser = ({ pathname }: { pathname: string }) => {
26 | const [user, setUser] = useState-
69 | {sizeOption?.values?.map((size: string) => (
70 |
- handleSizeChanged(size)} 74 | > 75 | {size} 76 | 77 | ))} 78 |
49 | {user ? (
50 |
82 | ) : (
83 |
88 |
100 | );
101 | };
102 |
103 | export default NavUser;
104 |
--------------------------------------------------------------------------------
/public/.htaccess:
--------------------------------------------------------------------------------
1 | ##### Optimize default expiration time - BEGIN
2 |
94 |
97 |
98 | )}
99 |
11 |
12 |
40 |
41 | )
42 | }
43 |
44 |
89 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/CollectionsSlider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import {
3 | HiOutlineArrowNarrowLeft,
4 | HiOutlineArrowNarrowRight,
5 | } from "react-icons/hi";
6 | import "swiper/css";
7 | import "swiper/css/navigation";
8 | import "swiper/css/pagination";
9 | import { Navigation, Pagination } from "swiper/modules";
10 | import { Swiper, SwiperSlide } from "swiper/react";
11 | import SkeletonCategory from "./loadings/skeleton/SkeletonCategory";
12 |
13 | const CollectionsSlider = ({ collections }: { collections: any }) => {
14 | const [_, setInit] = useState(false);
15 | const [isHovered, setIsHovered] = useState(false);
16 | const [collectionsData, setCollectionsData] = useState([]);
17 | const [loadingCollectionsData, setLoadingCollectionsData] = useState(true);
18 |
19 | const prevRef = useRef(null);
20 | const nextRef = useRef(null);
21 |
22 | useEffect(() => {
23 | setCollectionsData(collections);
24 | setLoadingCollectionsData(false);
25 | }, [collections]);
26 |
27 | if (loadingCollectionsData) {
28 | return setIsHovered(true)}
35 | onMouseLeave={() => setIsHovered(false)}
36 | >
37 | setInit(true)}
62 | >
63 | {collectionsData?.map((item: any) => {
64 | const { title, handle, image, } = item;
65 | return (
66 |
67 |
90 | );
91 | })}
92 |
93 |
113 |
114 | );
115 | };
116 |
117 | export default CollectionsSlider;
118 |
--------------------------------------------------------------------------------
/src/layouts/shortcodes/Notice.tsx:
--------------------------------------------------------------------------------
1 | import { humanize } from "@/lib/utils/textConverter";
2 | import React from "react";
3 |
4 | function Notice({
5 | type,
6 | children,
7 | }: {
8 | type: string;
9 | children: React.ReactNode;
10 | }) {
11 | return (
12 |
68 | 
75 |
89 |
76 |
88 | 77 | 81 | {title} 82 | 83 |
84 |85 | {item.products?.edges.length} items 86 |
87 |
99 |
112 |
103 |
105 |
109 |
111 |
13 |
82 | );
83 | }
84 |
85 | export default Notice;
86 |
--------------------------------------------------------------------------------
/src/pages/contact.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import config from "@/config/config.json";
3 | import Base from "@/layouts/Base.astro";
4 | import { getListPage } from "@/lib/contentParser.astro";
5 | import { markdownify } from "@/lib/utils/textConverter";
6 | import PageHeader from "@/partials/PageHeader.astro";
7 |
8 | const contact = await getListPage("contact", "-index");
9 |
10 | if (contact.data.draft) {
11 | return Astro.redirect("/404");
12 | }
13 |
14 | const { contact_form_action }: { contact_form_action: string } = config.params;
15 | const { title, meta_title, description, image, contact_meta } = contact.data;
16 | ---
17 |
18 |
14 | {type === "tip" ? (
15 |
29 | ) : type === "info" ? (
30 |
46 | ) : type === "warning" ? (
47 |
61 | ) : (
62 |
77 | )}
78 |
80 | {humanize(type)}
79 |{children}
81 |
28 |
43 |
29 | {
30 | contact_meta &&
31 | contact_meta?.map((contact) => (
32 |
42 |
33 |
37 |
38 |
39 | ))
40 | }
41 |
47 |
133 |
48 |
132 | We would love to hear from you!
49 | 50 | 131 |17 | 18 | ### About Storeplate 19 | 20 | #### Service Provided As 21 | 22 | The discovery was made by Richard McClintock , a professor of Latin at Hampden-Sydney College in Virginia, who faced the impetuous recurrence of the dark word consectetur in the text Lorem ipsum researched its origins to identify them in sections 1.10.32 and 1.10.33 of the aforementioned Cicero's 23 | 24 | When referring to Lorem ipsum, different expressions are used, namely fill text , fictitious text , blind text or placeholder text : in short, its meaning can also be zero, but its usefulness is so clear as to go 25 |
26 | 27 | #### Company Liability 28 | 29 | The choice of font and font size with which Lorem ipsum is reproduced answers to specific needs that go beyond the simple and simple filling of spaces dedicated to accepting real texts and allowing to have hands an advertising/publishing product, both web and paper, true to reality. 30 | 31 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores 32 |
33 | 34 | #### When we collect personal data about you 35 | 36 | In order to use our Service, you must meet a number of conditions, including but not limited to: 37 | 38 | - Enhance or improve User experience, our Site, or our Service. 39 | - Send emails and updates about Conclude, Process transactions. 40 | - Send emails about our Site or respond to inquiries. 41 | - Including news and requests for agreement to amended legal documents such as this 42 | Privacy Policy and our Terms of Service. 43 |
44 | 45 | #### Why we collect and use personal data 46 | 47 | Users of Conclude (i) must keep passwords secure and confidential; (ii) are solely responsible for User Data and all activity in their account while using the Service; (iii) must use commercially reasonable efforts access to their account, and notify Conclude promptly 48 | 49 | - Enhance or improve User experience, our Site, or our Service. 50 | - Send emails and updates about Conclude, Process transactions. 51 | - Send emails about our Site or respond to inquiries. 52 | - Including news and requests for agreement to amended legal documents such as this 53 | Privacy Policy and our Terms of Service. 54 |
55 | 56 | #### Type of personal data collected 57 | 58 | Your information may be transferred to — and maintained on — computers located outside of your state, province, country or other governmental jurisdiction where the privacy laws may not be as protective as those in your jurisdiction. If you choose to provide information to us, Conclude transfers Personal Information to Google Cloud Platform and processes it there. Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer. 59 | 60 | Your information may be transferred to — and maintained on — computers located outside of your state, province, country or other governmental jurisdiction where the privacy laws may not be as protective as those in your jurisdiction. If you choose to provide information to us, Conclude transfers Personal Information to Google Cloud Platform and processes it there. Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer. 61 | -------------------------------------------------------------------------------- /src/layouts/partials/Testimonials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | import { markdownify } from "@/lib/utils/textConverter"; 4 | import type { Testimonial } from "@/types"; 5 | 6 | interface Props { 7 | title: string; 8 | testimonials: Array
16 |
79 |
17 |
78 |
18 |
19 |
20 |
21 |
77 |
22 |
74 |
75 |
76 |
23 | {
24 | testimonials.map((item: Testimonial) => (
25 |
70 | ))
71 | }
72 |
73 |
9 |
70 |
10 |
69 |
11 |
68 |
12 |
17 |
18 |
55 |
56 | Login
13 |14 | Please fill your email and password to login 15 |
16 |
57 |
67 | 58 | Don't have an account? 59 |
60 | 64 | Register 65 | 66 |
115 |
150 | );
151 | };
152 |
153 | export default RangeSlider;
154 |
--------------------------------------------------------------------------------
/src/pages/products/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import ProductLayouts from "@/functional-components/product/ProductLayouts";
3 | import ProductFilters from "@/functional-components/ProductFilters";
4 | import ProductLayoutViews from "@/functional-components/ProductLayoutViews";
5 | import Base from "@/layouts/Base.astro";
6 | import { defaultSort, sorting } from "@/lib/constants";
7 | import {
8 | getCollectionProducts,
9 | getCollections,
10 | getHighestProductPrice,
11 | getProducts,
12 | getVendors,
13 | } from "@/lib/shopify";
14 | import type { PageInfo, Product } from "@/lib/shopify/types";
15 | import CallToAction from "@/partials/CallToAction.astro";
16 |
17 | const searchParams = Astro.url.searchParams;
18 | const searchParamsObject = Object.fromEntries(searchParams.entries());
19 |
20 | const sort = searchParamsObject.sort || "";
21 | const searchValue = searchParamsObject.q || "";
22 | const minPrice = searchParamsObject.minPrice || "";
23 | const maxPrice = searchParamsObject.maxPrice || "";
24 | const brand = searchParamsObject.b || "";
25 | const category = searchParamsObject.c || "all";
26 | const tag = searchParamsObject.t || "";
27 | const cursor = searchParamsObject.cursor || null;
28 |
29 | const { sortKey, reverse } =
30 | sorting.find((item) => item.slug === sort) || defaultSort;
31 |
32 | let productsData: any;
33 | let vendorsWithCounts: { vendor: string; productCount: number }[] = [];
34 | let categoriesWithCounts: { category: string; productCount: number }[] = [];
35 |
36 | if (searchValue || brand || minPrice || maxPrice || category || tag) {
37 | let queryString = "";
38 |
39 | if (minPrice || maxPrice) {
40 | queryString += `variants.price:<=${maxPrice} variants.price:>=${minPrice}`;
41 | }
42 |
43 | if (searchValue) {
44 | queryString += ` ${searchValue}`;
45 | }
46 |
47 | if (brand) {
48 | Array.isArray(brand)
49 | ? (queryString += `${brand.map((b) => `(vendor:${b})`).join(" OR ")}`)
50 | : (queryString += `vendor:"${brand}"`);
51 | }
52 |
53 | if (tag) {
54 | queryString += ` ${tag}`;
55 | }
56 |
57 | const query = {
58 | sortKey,
59 | reverse,
60 | query: queryString,
61 | cursor: cursor || undefined,
62 | };
63 |
64 | try {
65 | productsData =
66 | category && category !== "all"
67 | ? await getCollectionProducts({
68 | collection: category,
69 | sortKey,
70 | reverse,
71 | })
72 | : await getProducts(query);
73 | } catch (error) {
74 | console.error("Error fetching products:", error);
75 | productsData = { products: [] };
76 | }
77 |
78 | const uniqueVendors: string[] = [
79 | ...new Set(
80 | ((productsData?.products as Product[]) || []).map((product: Product) =>
81 | String(product?.vendor || "")
82 | )
83 | ),
84 | ];
85 |
86 | const uniqueCategories: string[] = [
87 | ...new Set(
88 | ((productsData?.products as Product[]) || []).flatMap(
89 | (product: Product) =>
90 | product.collections.nodes.map(
91 | (collectionNode: any) => collectionNode.title || ""
92 | )
93 | )
94 | ),
95 | ];
96 |
97 | vendorsWithCounts = uniqueVendors.map((vendor: string) => {
98 | const productCount = (productsData?.products || []).filter(
99 | (product: Product) => product?.vendor === vendor
100 | ).length;
101 | return { vendor, productCount };
102 | });
103 |
104 | categoriesWithCounts = uniqueCategories.map((category: string) => {
105 | const productCount = ((productsData?.products as Product[]) || []).filter(
106 | (product: Product) =>
107 | product.collections.nodes.some(
108 | (collectionNode: any) => collectionNode.title === category
109 | )
110 | ).length;
111 | return { category, productCount };
112 | });
113 | } else {
114 | // Fetch all products
115 | try {
116 | productsData = await getProducts({
117 | sortKey,
118 | reverse,
119 | cursor: cursor || undefined,
120 | });
121 | } catch (error) {
122 | console.error("Error fetching products:", error);
123 | productsData = { products: [] };
124 | }
125 | }
126 |
127 | const categories = await getCollections();
128 | const vendors = await getVendors({});
129 |
130 | const tags = [
131 | ...new Set(
132 | (
133 | productsData as { pageInfo: PageInfo; products: Product[] }
134 | )?.products.flatMap((product: Product) => product.tags)
135 | ),
136 | ];
137 |
138 | const maxPriceData = await getHighestProductPrice();
139 |
140 | const initialProducts = productsData.products;
141 | const initialPageInfo = productsData.pageInfo;
142 | ---
143 |
144 |
116 |
125 |
126 | 117 | {currencySymbol} 118 | {minValue} {maxPriceData?.currencyCode || currencyCode} 119 |
120 |121 | {currencySymbol} 122 | {maxValue} {maxPriceData?.currencyCode || currencyCode} 123 |
124 |
127 |
128 |
129 |
134 |
139 |
140 |
141 | {showSubmitButton && (
142 |
148 | )}
149 |
156 |
180 |
181 |
--------------------------------------------------------------------------------
/src/layouts/functional-components/cart/AddToCart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import type { ProductVariant } from "@/lib/shopify/types";
3 | import { BiLoaderAlt } from "react-icons/bi";
4 | import { addItemToCart } from "@/cartStore";
5 |
6 | interface SubmitButtonProps {
7 | availableForSale: boolean;
8 | selectedVariantId: string | undefined;
9 | stylesClass: string;
10 | handle: string | null;
11 | pending: boolean;
12 | onClick: (e: React.FormEvent) => void;
13 | }
14 |
15 | function SubmitButton({
16 | availableForSale,
17 | selectedVariantId,
18 | stylesClass,
19 | handle,
20 | pending,
21 | onClick,
22 | }: SubmitButtonProps) {
23 | const buttonClasses = stylesClass;
24 | const disabledClasses = "cursor-not-allowed flex";
25 |
26 | const DynamicTag = handle === null ? "button" : "a";
27 |
28 | if (!availableForSale) {
29 | return (
30 |
37 | );
38 | }
39 |
40 | if (!selectedVariantId) {
41 | return (
42 |
157 |
168 |
169 |
179 |
71 |
163 |
72 |
162 |
73 |
161 |
74 |
77 |
78 |
136 |
137 | Create an account
75 |Create an account and start using...
76 |
138 |
148 |
149 | 139 | I have read and agree to the 140 |
141 | 145 | Terms & Conditions 146 | 147 |
150 |
160 | 151 | Have an account? 152 |
153 | 157 | Login 158 | 159 |