flowrix 1.0.1-beta.85 → 1.0.1-beta.86

package/dist/runtime/composables/Extras/usePasswordFormatter.js

@@ -0,0 +1,61 @@
+import { computed } from "vue";
+export function usePasswordFormatter(password, inputData) {
+  const minLengthMedium = 8;
+  const minLengthStrong = 10;
+  const checkPasswordStrength = () => {
+    const value = inputData.password ?? "";
+    const hasUppercase = /[A-Z]/.test(value);
+    const hasLowercase = /[a-z]/.test(value);
+    const hasNumber = /\d/.test(value);
+    const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]+/.test(value);
+    let strength = 0;
+    if (value.length >= minLengthStrong) strength += 2;
+    else if (value.length >= minLengthMedium) strength += 1;
+    if (hasUppercase) strength++;
+    if (hasLowercase) strength++;
+    if (hasNumber) strength++;
+    if (hasSpecialChar) strength++;
+    return strength;
+  };
+  const passwordStrength = computed(() => {
+    const valueLength = (inputData.password ?? "").length;
+    if (valueLength < minLengthMedium) return "Password must be 8 characters";
+    const strength = checkPasswordStrength();
+    if (strength >= 4) return "Strong";
+    else if (strength === 3) return "Medium";
+    else return "Weak";
+  });
+  const passwordStrengthClass = computed(() => {
+    const valueLength = (inputData.password ?? "").length;
+    if (valueLength < minLengthMedium) return "bg-danger";
+    const strength = checkPasswordStrength();
+    if (strength >= 4) return "bg-success";
+    else if (strength === 3) return "bg-warning";
+    else return "bg-danger";
+  });
+  const passwordStrengthValue = computed(() => {
+    const valueLength = (inputData.password ?? "").length;
+    if (valueLength < minLengthMedium) return 0;
+    const strength = checkPasswordStrength();
+    inputData.passwordStrengthValue = strength / 6 * 100;
+    return strength / 6 * 100;
+  });
+  const passwordStrengthWidth = computed(() => {
+    return `${passwordStrengthValue.value}%`;
+  });
+  const passwordStrengthTextColor = computed(() => {
+    const valueLength = (inputData.password ?? "").length;
+    if (valueLength < minLengthMedium) return "text-danger";
+    const strength = checkPasswordStrength();
+    if (strength >= 4) return "text-success";
+    else if (strength === 3) return "text-black";
+    else return "text-danger";
+  });
+  return {
+    passwordStrength,
+    passwordStrengthClass,
+    passwordStrengthValue,
+    passwordStrengthWidth,
+    passwordStrengthTextColor
+  };
+}

package/dist/runtime/composables/Extras/useSrcSets.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Composable for generating responsive image URLs and srcset attributes
+ * based on Flowrix CDN's assumed naming convention.
+ */
+export declare function useSrcSets(): {
+    getImageUrl: (originalUrl: string, width: number) => string;
+    getSrcSet: (originalUrl: string) => string;
+};

package/dist/runtime/composables/Extras/useSrcSets.js

@@ -0,0 +1,26 @@
+export function useSrcSets() {
+  const getImageUrl = (originalUrl, width) => {
+    if (!originalUrl) return "";
+    let cleanUrl = originalUrl;
+    if (cleanUrl.endsWith(".jpg")) {
+      cleanUrl = cleanUrl.replace(".jpg", "");
+    } else if (cleanUrl.endsWith(".webp")) {
+      cleanUrl = cleanUrl.replace(".webp", "");
+    }
+    return `${cleanUrl}${width}.webp`;
+  };
+  const getSrcSet = (originalUrl) => {
+    if (!originalUrl) return "";
+    const sizes = [
+      { width: 150 },
+      { width: 320 },
+      { width: 640 },
+      { width: 1024 }
+    ];
+    return sizes.map((size) => `${getImageUrl(originalUrl, size.width.toString())} ${size.width}w`).join(", ");
+  };
+  return {
+    getImageUrl,
+    getSrcSet
+  };
+}

package/dist/runtime/composables/Extras/useTogglePassword.d.ts

@@ -0,0 +1,4 @@
+export declare function useTogglePassword(): {
+    showPassword: import("vue").Ref<string, string>;
+    togglePassword: () => void;
+};

package/dist/runtime/composables/Extras/useTogglePassword.js

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+export function useTogglePassword() {
+  const showPassword = ref("password");
+  const togglePassword = () => {
+    showPassword.value = showPassword.value == "password" ? "text" : "password";
+  };
+  return {
+    showPassword,
+    togglePassword
+  };
+}

package/dist/runtime/composables/Footer/useFooter.d.ts

@@ -0,0 +1,14 @@
+export declare const useFooter: () => {
+    email: import("vue").Ref<string, string>;
+    menuData: import("vue").ComputedRef<any>;
+    successMessage: import("vue").Ref<string, string>;
+    errorMessage: import("vue").Ref<string, string>;
+    handleSubmit: () => Promise<void>;
+    ContactFooter: any;
+    FooterMenu: any;
+    TopFooter: any;
+    BottomFooter: any;
+    companyProfile: any;
+    getmenu: (location: string) => any;
+    NavMenu: any;
+};

package/dist/runtime/composables/Footer/useFooter.js

@@ -0,0 +1,61 @@
+import { ref, computed, defineAsyncComponent } from "vue";
+export const useFooter = () => {
+  const NavMenu = useNavMenu();
+  const { profile: companyProfile } = useCompanyProfile();
+  const getmenu = (location) => NavMenu.Menu?.find((menu) => menu?.location === location)?.items || [];
+  const email = ref("");
+  const successMessage = ref("");
+  const errorMessage = ref("");
+  const menuData = computed(() => {
+    const headmenu = NavMenu.Menu.filter((menu) => menu.location == "footer")[0];
+    return headmenu;
+  });
+  const handleSubmit = async () => {
+    const response = await $fetch("/api/subscribe", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ email: email.value })
+    });
+    if (response.status === "Success") {
+      successMessage.value = "Subscription successful!";
+      email.value = "";
+      setTimeout(() => {
+        successMessage.value = "";
+      }, 5e3);
+    } else if (response.status === "Error") {
+      const errorMessages = response.message?.email || ["Failed to subscribe. Please try again."];
+      errorMessage.value = errorMessages.join(", ");
+      setTimeout(() => {
+        errorMessage.value = "";
+      }, 5e3);
+    }
+  };
+  const ContactFooter = defineAsyncComponent(
+    () => import("~/components/Footer/Template01/ContactFooter.vue")
+  );
+  const FooterMenu = defineAsyncComponent(
+    () => import("~/components/Footer/Template01/FooterMenu.vue")
+  );
+  const TopFooter = defineAsyncComponent(
+    () => import("~/components/Footer/Template01/TopFooter.vue")
+  );
+  const BottomFooter = defineAsyncComponent(
+    () => import("~/components/Footer/Template01/BottomFooter.vue")
+  );
+  return {
+    email,
+    menuData,
+    successMessage,
+    errorMessage,
+    handleSubmit,
+    ContactFooter,
+    FooterMenu,
+    TopFooter,
+    BottomFooter,
+    companyProfile,
+    getmenu,
+    NavMenu
+  };
+};

package/dist/runtime/composables/Header/useHeader.d.ts

@@ -0,0 +1,14 @@
+export default function (): {
+    NavMenu: any;
+    companyProfile: import("vue").ComputedRef<any>;
+    cartStore: any;
+    userData: any;
+    menuData: import("vue").ComputedRef<any>;
+    mobile_menu: import("vue").Ref<boolean, boolean>;
+    MainMenu: any;
+    wordpressUrl: any;
+    OpenMobileMenu: () => void;
+    useSearch: any;
+    getSearchData: (value: string) => void;
+    handleSeachInput: (searchValue: string) => void;
+};

package/dist/runtime/composables/Header/useHeader.js

@@ -0,0 +1,67 @@
+import { defineAsyncComponent, ref, computed } from "vue";
+import { useNavMenu, useCompanyProfile, useCartStore, useSearchStore } from "#imports";
+import { useAuthStore } from "../../stores/auth.js";
+export default function() {
+  const wordpressUrl = import.meta.env.VITE_APP_WORDPRESS_URL;
+  const NavMenu = useNavMenu();
+  const CompanyProfile = useCompanyProfile();
+  const { user } = useAuthStore();
+  const cartStore = useCartStore();
+  const useSearch = useSearchStore();
+  const companyProfile = computed(() => CompanyProfile.profile);
+  const menuData = computed(() => {
+    const headmenu = NavMenu.Menu.filter((menu) => menu.location == "header")[0];
+    return headmenu;
+  });
+  const userData = user?.value || {};
+  const mobile_menu = ref(false);
+  const OpenMobileMenu = () => {
+    if (mobile_menu.value) {
+      mobile_menu.value = false;
+    } else {
+      mobile_menu.value = true;
+    }
+  };
+  const MainMenu = defineAsyncComponent({
+    loader: async () => {
+      try {
+        return await import("~/components/Menu/Template01/MainMenu.vue");
+      } catch (error) {
+        return import("~/components/Menu/Template01/MainMenu.vue");
+      }
+    }
+  });
+  const searchQuery = ref("");
+  let debounceTimer = null;
+  const handleSeachInput = ((searchValue) => {
+    const value = searchValue;
+    searchQuery.value = value;
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(() => {
+      getSearchData(value);
+    }, 300);
+  });
+  const getSearchData = (value) => {
+    if (value != "") {
+      useSearch.fetchSearchData(value);
+    } else {
+      useSearch.data = [];
+    }
+  };
+  return {
+    NavMenu,
+    companyProfile,
+    cartStore,
+    userData,
+    menuData,
+    mobile_menu,
+    MainMenu,
+    wordpressUrl,
+    OpenMobileMenu,
+    useSearch,
+    getSearchData,
+    handleSeachInput
+  };
+}

package/dist/runtime/composables/Menu/MainMenu.d.ts

@@ -0,0 +1,4 @@
+export default function (): {
+    wordpressUrl: any;
+    MegaMenu: any;
+};

package/dist/runtime/composables/Menu/MainMenu.js

@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from "vue";
+export default function() {
+  const MegaMenu = defineAsyncComponent({
+    loader: async () => {
+      try {
+        return await import("~/components/Menu/Template01/MegaMenu.vue");
+      } catch (error) {
+        return import("~/components/Menu/Template01/MegaMenu.vue");
+      }
+    }
+  });
+  const wordpressUrl = import.meta.env.VITE_APP_WORDPRESS_URL;
+  return {
+    wordpressUrl,
+    MegaMenu
+  };
+}

package/dist/runtime/composables/Product/CustomProduct/useAttributeType.d.ts

@@ -0,0 +1,3 @@
+export default function (attribute: any, group: any, template?: string): {
+    DesignComponent: import("vue").Raw<object>;
+};

package/dist/runtime/composables/Product/CustomProduct/useAttributeType.js

@@ -0,0 +1,20 @@
+import { defineAsyncComponent, ref, markRaw } from "vue";
+export default function(attribute, group, template = "default") {
+  const designkey = ref(attribute.designkey);
+  const components = import.meta.glob("@/components/Product/Template*/**/*");
+  let DesignComponent = markRaw("");
+  DesignComponent = defineAsyncComponent({
+    loader: async () => {
+      try {
+        const path = `/components/Product/Template-${template}/customProduct/AttributesComponents/Styles/${designkey.value}.vue`;
+        return await components[path]?.();
+      } catch (error) {
+        const path = `/components/Product/Template-default/customProduct/AttributesComponents/Styles/${designkey.value}.vue`;
+        return await components[path]?.();
+      }
+    }
+  });
+  return {
+    DesignComponent
+  };
+}

package/dist/runtime/composables/Product/CustomProduct/useAttributes.d.ts

@@ -0,0 +1,70 @@
+export default function (product: any, runTime?: number, template?: string): {
+    CustomScript: import("pinia").Store<"CustomScript", import("./useCustomeScript.js").State, {}, {
+        CallScriptFIrstTime(): void;
+        initprocess(): Promise<void>;
+        getAvailableValues(aid: any, parent_value_id?: number): unknown[];
+        setWidthHeightbaseonStyle(): boolean;
+        setSummery(attrib: any, value: any): void;
+        unsetSummery(aid: any): void;
+        hideValue(h_aid: any, h_vid: any): void;
+        showValue(h_aid: any, h_vid: any): void;
+        showAttribute(aid: any): void;
+        hideAttribute(aid: any): void;
+        hideChildValues(aid: any, parent_id: any): void;
+        hideChildValuesOfParentValue(aid: any, parent_attribute_id: any, parent_value_id: any): void;
+        showChildValues(aid: any, parent_selected_val_id: any): void;
+        showGroup(gid: any): void;
+        hideGroup(gid: any): void;
+        markSelected(h_aid: any, h_vid: any): void;
+        markInputSelected(aid: any, vid: any, value?: any): void;
+        markUnselected(h_aid: any, h_vid: any): void;
+        findSelectedValue(values: any, parent_value_id?: number): unknown;
+        processAttributes(): void;
+        processAttribute(attributes: any): void;
+        processAttributeAfterCondition(attributes: any): void;
+        hideAttributeHirerachy(aid: any): void;
+        hideChildAttributes(child_attrib: any): void;
+        processChildAttribute(child_attrib: any): void;
+        setConditions(aid?: string, first_call?: boolean): Promise<boolean>;
+        createCondition(conditionArray: any): any;
+        getelement(classname: any): Element | undefined;
+        toggle(classname: any): Element | undefined;
+        getvalue(classname: any): any;
+        executeCondition(newcondition: any, c_aid: any, v_id: any, changed_values: any, msgValue: any, hiddenValues: any, child_Values: any, first_call: any, available?: any): {
+            msgValue: any;
+            changed_values: any;
+            hiddenValues: any;
+            child_Values: any;
+        };
+        hideAttributeOrGroup(c_aid: any): void;
+        unsetMsg(aid: any): void;
+        showValueAttributeOrGroup(c_aid: any, v_id: any): boolean;
+        selectOneValue(c_aid: any): void;
+        checkChangeAttributesMsg(c_aid: any, msgAttributes: any, msgValue: any, selected_value_hidden: any, child_Values: any, first_call: any, available: any): {
+            child_Values: any;
+        };
+        showbox(popUpMsg: any): Promise<unknown>;
+        confirmChange(changed_attribs: any, hiddenAttributes: any, aid: any, paid?: string): Promise<boolean>;
+        customRoundUp(value: any): number;
+        sqrunitprice(price: any, width: any, height: any, unit_relative: any): number;
+        sqrmeasureprice(price: any, measurement: any, unit_relative: any): number;
+        closest(num: any, arr: any): any;
+        lookupprice(price: any, width?: any, height?: any): any;
+        swatchimage(): void;
+        getMeasurement(attribute_type: any): number;
+        getMeasurementByID(attribute_id: any): number;
+        getSubHeights(): unknown[];
+        getSubWidths(): unknown[];
+        calculateMultiPrice(width: any, height: any, value: any, subWidths: any, subHeights: any): number;
+        getValuePrice(price_type: any, width: any, height: any, PRICE_TYPES: any, price: any, priceArray: any): number;
+        getValuePriceDiscount(discount_type: any, discount: any, value_price: any): void;
+        setValuePricePromotionsDiscount(attributes: any): void;
+        getValuePricePromotionDiscount(product_id: any, value_price: any): void;
+        calculatePrice(): void;
+        calculateDiscount(discounttype: any, discount: any, price: any): any;
+        calculateservicePrice(): void;
+    }>;
+    Steps: any;
+    ConfirmPopup: import("vue").Raw<object>;
+    ConfirmPopupShow: import("vue").ComputedRef<any>;
+};

package/dist/runtime/composables/Product/CustomProduct/useAttributes.js

@@ -0,0 +1,68 @@
+import { watch, onMounted, computed, defineAsyncComponent, markRaw } from "vue";
+import { useCustomScript } from "./useCustomeScript.js";
+export default function(product, runTime = 0, template = "default") {
+  const CustomScript = useCustomScript();
+  const renderdValues = computed(() => useCustomScript().renderdValues);
+  let allactiveattributes = [];
+  watch(renderdValues, (newValue, oldValue) => {
+    if (allactiveattributes.length == 0) {
+      Object.values(product.attributeIdz).forEach((item) => {
+        if (item.active) {
+          allactiveattributes.push(item);
+        }
+      });
+    }
+    if (newValue >= allactiveattributes.length) {
+      setTimeout(function() {
+        callcustomscript();
+      }, 500);
+    }
+  });
+  function callcustomscript() {
+    CustomScript.pdpsummary = {};
+    CustomScript.processAttributes();
+    CustomScript.setConditions("", true);
+    let hasnewMeasurements = CustomScript.setWidthHeightbaseonStyle();
+    if (hasnewMeasurements) {
+      CustomScript.setConditions("", true);
+    }
+    CustomScript.calculatePrice();
+  }
+  onMounted(() => {
+    let totalValues = 0;
+    Object.values(product.attributeIdz).forEach((item, index) => {
+      totalValues = Object.values(item.values).length + totalValues;
+    });
+  });
+  const components = import.meta.glob("~/components/Product/Template*/**/*");
+  const path = `/components/Product/Template-${template}/customProduct/Steps.vue`;
+  const fallbackPath = `/components/Product/Template-default/customProduct/Steps.vue`;
+  const Steps = defineAsyncComponent({
+    loader: async () => {
+      if (components[path]) {
+        return await components[path]();
+      } else {
+        return await components[fallbackPath]();
+      }
+    }
+  });
+  let ConfirmPopup = markRaw("");
+  ConfirmPopup = defineAsyncComponent({
+    loader: async () => {
+      try {
+        const path2 = `/components/Product/Template-${template}/customProduct/ConfirmPopup.vue`;
+        return await components[path2]?.();
+      } catch (error) {
+        const path2 = `/components/Product/Template-default/customProduct/ConfirmPopup.vue`;
+        return await components[path2]?.();
+      }
+    }
+  });
+  const ConfirmPopupShow = computed(() => CustomScript.confirmPopup);
+  return {
+    CustomScript,
+    Steps,
+    ConfirmPopup,
+    ConfirmPopupShow
+  };
+}

package/dist/runtime/composables/Product/CustomProduct/useCustomProduct.d.ts

@@ -0,0 +1,74 @@
+export default function (product: any, template?: string): {
+    CustomScript: import("pinia").Store<"CustomScript", import("./useCustomeScript.js").State, {}, {
+        CallScriptFIrstTime(): void;
+        initprocess(): Promise<void>;
+        getAvailableValues(aid: any, parent_value_id?: number): unknown[];
+        setWidthHeightbaseonStyle(): boolean;
+        setSummery(attrib: any, value: any): void;
+        unsetSummery(aid: any): void;
+        hideValue(h_aid: any, h_vid: any): void;
+        showValue(h_aid: any, h_vid: any): void;
+        showAttribute(aid: any): void;
+        hideAttribute(aid: any): void;
+        hideChildValues(aid: any, parent_id: any): void;
+        hideChildValuesOfParentValue(aid: any, parent_attribute_id: any, parent_value_id: any): void;
+        showChildValues(aid: any, parent_selected_val_id: any): void;
+        showGroup(gid: any): void;
+        hideGroup(gid: any): void;
+        markSelected(h_aid: any, h_vid: any): void;
+        markInputSelected(aid: any, vid: any, value?: any): void;
+        markUnselected(h_aid: any, h_vid: any): void;
+        findSelectedValue(values: any, parent_value_id?: number): unknown;
+        processAttributes(): void;
+        processAttribute(attributes: any): void;
+        processAttributeAfterCondition(attributes: any): void;
+        hideAttributeHirerachy(aid: any): void;
+        hideChildAttributes(child_attrib: any): void;
+        processChildAttribute(child_attrib: any): void;
+        setConditions(aid?: string, first_call?: boolean): Promise<boolean>;
+        createCondition(conditionArray: any): any;
+        getelement(classname: any): Element | undefined;
+        toggle(classname: any): Element | undefined;
+        getvalue(classname: any): any;
+        executeCondition(newcondition: any, c_aid: any, v_id: any, changed_values: any, msgValue: any, hiddenValues: any, child_Values: any, first_call: any, available?: any): {
+            msgValue: any;
+            changed_values: any;
+            hiddenValues: any;
+            child_Values: any;
+        };
+        hideAttributeOrGroup(c_aid: any): void;
+        unsetMsg(aid: any): void;
+        showValueAttributeOrGroup(c_aid: any, v_id: any): boolean;
+        selectOneValue(c_aid: any): void;
+        checkChangeAttributesMsg(c_aid: any, msgAttributes: any, msgValue: any, selected_value_hidden: any, child_Values: any, first_call: any, available: any): {
+            child_Values: any;
+        };
+        showbox(popUpMsg: any): Promise<unknown>;
+        confirmChange(changed_attribs: any, hiddenAttributes: any, aid: any, paid?: string): Promise<boolean>;
+        customRoundUp(value: any): number;
+        sqrunitprice(price: any, width: any, height: any, unit_relative: any): number;
+        sqrmeasureprice(price: any, measurement: any, unit_relative: any): number;
+        closest(num: any, arr: any): any;
+        lookupprice(price: any, width?: any, height?: any): any;
+        swatchimage(): void;
+        getMeasurement(attribute_type: any): number;
+        getMeasurementByID(attribute_id: any): number;
+        getSubHeights(): unknown[];
+        getSubWidths(): unknown[];
+        calculateMultiPrice(width: any, height: any, value: any, subWidths: any, subHeights: any): number;
+        getValuePrice(price_type: any, width: any, height: any, PRICE_TYPES: any, price: any, priceArray: any): number;
+        getValuePriceDiscount(discount_type: any, discount: any, value_price: any): void;
+        setValuePricePromotionsDiscount(attributes: any): void;
+        getValuePricePromotionDiscount(product_id: any, value_price: any): void;
+        calculatePrice(): void;
+        calculateDiscount(discounttype: any, discount: any, price: any): any;
+        calculateservicePrice(): void;
+    }>;
+    screenwidth: number;
+    firstHalf: (summary: any) => [string, unknown][] | undefined;
+    secondtHalf: (summary: any) => [string, unknown][] | undefined;
+    summaryShow: import("vue").Ref<boolean, boolean>;
+    Gallery: import("vue").Raw<object>;
+    Attributes: import("vue").Raw<object>;
+    ProductCard: import("vue").Raw<object>;
+};

package/dist/runtime/composables/Product/CustomProduct/useCustomProduct.js

@@ -0,0 +1,107 @@
+import { ref, defineAsyncComponent, markRaw } from "vue";
+import { useCustomScript } from "./useCustomeScript.js";
+export default function(product, template = "default") {
+  const CustomScript = useCustomScript();
+  CustomScript.attributeIdz = product.attributeIdz;
+  CustomScript.lookupprices = product.lookupprices;
+  CustomScript.servicePriceSetting = product.servicePriceSetting;
+  CustomScript.conditions = product.conditions;
+  CustomScript.TYPES = product.types;
+  CustomScript.PRICETYPE = product.pricetypes;
+  CustomScript.UNIT_RELATIVE = product.unit_relative;
+  CustomScript.DISCOUNTS = product.discounts;
+  CustomScript.measurementUnit = product.unit;
+  CustomScript.promotionSettings = product.promotionSettings;
+  CustomScript.linked_promotionSettings = product.inherit_promotions;
+  CustomScript.B2BTYPE = product.b2btype;
+  CustomScript.USEBASEPRICE = product.usebaseprice;
+  CustomScript.BASEPRICE = product.baseprice;
+  CustomScript.usefitting = product.usefitting;
+  CustomScript.sevice_price_type = product.servicePriceSetting.sevice_price_type;
+  CustomScript.serviceprice = 0;
+  const screenwidth = 1400;
+  const firstHalf = ((summary) => {
+    if (summary != {}) {
+      const dataArray = Object.entries(summary);
+      dataArray.sort((a, b) => {
+        const gsortA = a[1].gsortorder;
+        const gsortB = b[1].gsortorder;
+        const sortA = a[1].sortorder;
+        const sortB = b[1].sortorder;
+        if (gsortA < gsortB) return -1;
+        if (gsortA > gsortB) return 1;
+        if (sortA < sortB) return -1;
+        if (sortA > sortB) return 1;
+        return 0;
+      });
+      const midpoint = Math.ceil(dataArray.length / 2);
+      return dataArray.slice(0, midpoint);
+    }
+  });
+  const secondtHalf = ((summary) => {
+    if (summary != {}) {
+      const dataArray = Object.entries(summary);
+      dataArray.sort((a, b) => {
+        const gsortA = a[1].gsortorder;
+        const gsortB = b[1].gsortorder;
+        const sortA = a[1].sortorder;
+        const sortB = b[1].sortorder;
+        if (gsortA < gsortB) return -1;
+        if (gsortA > gsortB) return 1;
+        if (sortA < sortB) return -1;
+        if (sortA > sortB) return 1;
+        return 0;
+      });
+      const midpoint = Math.ceil(dataArray.length / 2);
+      return dataArray.slice(midpoint);
+    }
+  });
+  const summaryShow = ref(false);
+  const components = import.meta.glob("@/components/Template*/**/*");
+  let Gallery = markRaw("");
+  Gallery = defineAsyncComponent({
+    loader: async () => {
+      try {
+        const path = `/src/components/Template-${template}/Product/Gallery.vue`;
+        return await components[path]?.();
+      } catch (error) {
+        const path = `/src/components/Template-default/Product/Gallery.vue`;
+        return await components[path]?.();
+      }
+    }
+  });
+  let Attributes = markRaw("");
+  Attributes = defineAsyncComponent({
+    loader: async () => {
+      try {
+        const path = `/src/components/Template-${template}/CustomProduct/Attributes.vue`;
+        return await components[path]?.();
+      } catch (error) {
+        const path = `/src/components/Template-default/CustomProduct/Attributes.vue`;
+        return await components[path]?.();
+      }
+    }
+  });
+  let ProductCard = markRaw("");
+  ProductCard = defineAsyncComponent({
+    loader: async () => {
+      try {
+        const path = `/src/components/Template-${template}/Product/ProductCard.vue`;
+        return await components[path]?.();
+      } catch (error) {
+        const path = `/src/components/Template-default/Product/ProductCard.vue`;
+        return await components[path]?.();
+      }
+    }
+  });
+  return {
+    CustomScript,
+    screenwidth,
+    firstHalf,
+    secondtHalf,
+    summaryShow,
+    Gallery,
+    Attributes,
+    ProductCard
+  };
+}