ts-glitter 18.2.6 → 18.2.8

package/lowcode/public-components/product/pd-class.ts

@@ -1,15 +1,16 @@
-import { GVC } from '../../glitterBundle/GVController.js';
-import { Tool } from '../../modules/tool.js';
-import { ApiShop } from '../../glitter-base/route/shopping.js';
-import { ApiCart } from '../../glitter-base/route/api-cart.js';
-import { GlobalUser } from '../../glitter-base/global/global-user.js';
-import { CheckInput } from '../../modules/checkInput.js';
-import { Ad } from '../public/ad.js';
-import { Language } from '../../glitter-base/global/language.js';
-import { Currency } from '../../glitter-base/global/currency.js';
-import { Product, ProductInitial } from '../../public-models/product.js';
-import { VoucherContent } from '../user-manager/um-voucher.js';
+import {GVC} from '../../glitterBundle/GVController.js';
+import {Tool} from '../../modules/tool.js';
+import {ApiShop} from '../../glitter-base/route/shopping.js';
+import {ApiCart} from '../../glitter-base/route/api-cart.js';
+import {GlobalUser} from '../../glitter-base/global/global-user.js';
+import {CheckInput} from '../../modules/checkInput.js';
+import {Ad} from '../public/ad.js';
+import {Language} from '../../glitter-base/global/language.js';
+import {Currency} from '../../glitter-base/global/currency.js';
+import {Product, ProductInitial} from '../../public-models/product.js';
 import {ApiTrack} from "../../glitter-base/route/api-track.js";
+import {Animation, AnimationConfig} from "../../glitterBundle/module/Animation.js";
+import {ShareDialog} from "../../glitterBundle/dialog/ShareDialog.js";
 
 const html = String.raw;
 const css = String.raw;
@@ -122,7 +123,14 @@ export type FileItem = {
 export type FileList = FileItem[];
 
 export class PdClass {
-    static jumpAlert(obj: { gvc: GVC; text: string; justify: 'top' | 'bottom'; align: 'left' | 'center' | 'right'; timeout?: number; width?: number }) {
+    static jumpAlert(obj: {
+        gvc: GVC;
+        text: string;
+        justify: 'top' | 'bottom';
+        align: 'left' | 'center' | 'right';
+        timeout?: number;
+        width?: number
+    }) {
         const className = 'pd-class';
 
         const fixedStyle = (() => {
@@ -176,7 +184,8 @@ export class PdClass {
             }
         `);
 
-        const htmlString = html` <div class="bounce-effect-${className}">${obj.text}</div>`;
+        const htmlString = html`
+            <div class="bounce-effect-${className}">${obj.text}</div>`;
         obj.gvc.glitter.document.body.insertAdjacentHTML('beforeend', htmlString);
         setTimeout(() => {
             const element = document.querySelector(`.bounce-effect-${className}`) as HTMLElement;
@@ -269,6 +278,7 @@ export class PdClass {
             }
 
             .add-cart-imd-btn {
+                border: none;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
@@ -332,37 +342,42 @@ export class PdClass {
 
     static addCartAction(obj: { gvc: GVC; titleFontColor: any; prod: any; vm: any }) {
         obj.gvc.glitter.innerDialog((gvc: GVC) => {
-            return html` <div class="bg-white shadow rounded-3" style="overflow-y: auto; ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;` : 'width:calc(100vw - 20px);'}">
-                <div class="bg-white shadow rounded-3" style="width: 100%; overflow-y: auto; position: relative;">
-                    <div class="w-100 d-flex align-items-center p-3 border-bottom" style="position: sticky; top: 0; background: #fff;z-index:12;">
-                        <div class="fw-bold fs-5" style="color:${obj.titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
-                            ${obj.prod.title}
-                        </div>
-                        <div class="flex-fill"></div>
-                        <i
-                            class="fa-regular fa-circle-xmark fs-5 text-dark"
-                            style="cursor: pointer"
-                            onclick="${gvc.event(() => {
-                                gvc.closeDialog();
-                            })}"
-                        ></i>
-                    </div>
-                    <div class="c_dialog">
-                        <div class="c_dialog_body">
-                            <div class="c_dialog_main" style="gap: 24px;  max-height: calc(100vh - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
-                                ${PdClass.selectSpec({
-                                    gvc,
-                                    titleFontColor: obj.titleFontColor,
-                                    prod: obj.prod,
-                                    vm: obj.vm,
-                                    preview: true,
-                                })}
+            return html`
+                <div class=" bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : ` position-absolute bottom-0`}"
+                     style=" ${document.body.clientWidth > 768 ? `min-width: 400px; width: 1000px;max-height:calc(100% - 150px);overflow-y: auto;` : 'width:calc(100vw);height:100%;'}">
+                    <div class="bg-white shadow  ${document.body.clientWidth > 768 ? `rounded-3` : `h-100`}" style="
+                width: 100%;  position: relative;${document.body.clientWidth > 768 ? `` : `overflow-y: auto;`}">
+                        <div class="w-100 d-flex align-items-center p-3 border-bottom"
+                             style="position: sticky; top: 0; background: #fff;z-index:12;">
+                            <div class="fw-bold fs-5"
+                                 style="color:${obj.titleFontColor}; white-space: nowrap;text-overflow: ellipsis;max-width: calc(100% - 40px); overflow: hidden;">
+                                ${obj.prod.title}
                             </div>
+                            <div class="flex-fill"></div>
+                            <i
+                                    class="fa-regular fa-circle-xmark fs-5 text-dark"
+                                    style="cursor: pointer"
+                                    onclick="${gvc.event(() => {
+                                        gvc.closeDialog();
+                                    })}"
+                            ></i>
+                        </div>
+                        <div class="c_dialog_main"
+                             style="gap: 24px;  max-height: calc(100% - 100px); ${document.body.clientWidth < 800 ? `padding: 12px 20px;` : `padding: 30px;`}">
+                            ${PdClass.selectSpec({
+                                gvc,
+                                titleFontColor: obj.titleFontColor,
+                                prod: obj.prod,
+                                vm: obj.vm,
+                                preview: true,
+                            })}
+                            <div class="d-sm-none" style="height:100px;"></div>
                         </div>
                     </div>
-                </div>
-            </div>`;
-        }, Tool.randomString(7));
+                </div>`;
+        }, Tool.randomString(7), {
+            animation: (document.body.clientWidth < 768) ? Animation.popup : Animation.fade
+        });
     }
 
     static showSwiper(obj: { gvc: GVC; prod: Product; vm: any }) {
@@ -377,11 +392,12 @@ export class PdClass {
                     src: `https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js`,
                 },
             ],
-            () => {},
-            () => {}
+            () => {
+            },
+            () => {
+            }
         );
 
-        console.log(`obj.prod.preview_image=>`,JSON.stringify(obj.prod.preview_image))
         obj.prod.variants.forEach((variant) => {
             variant.preview_image = (variant as any)[`preview_image_${Language.getLanguage()}`] || variant.preview_image;
             if (variant.preview_image && !obj.prod.preview_image.includes(variant.preview_image)) {
@@ -400,8 +416,8 @@ export class PdClass {
             return image !== 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg';
         });
 
-        if(obj.prod.preview_image.length===0){
-            obj.prod.preview_image=['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg']
+        if (obj.prod.preview_image.length === 0) {
+            obj.prod.preview_image = ['https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg']
         }
         return obj.gvc.bindView(() => {
             const id = obj.gvc.glitter.getUUID();
@@ -409,37 +425,44 @@ export class PdClass {
                 bind: id,
                 view: () => {
                     return html`
-                        <div class="swiper${id}" id="dynamic-swiper${id}" style="width: 500px;position:relative;overflow: hidden;max-width: 100%;">
+                        <div class="swiper${id}" id="dynamic-swiper${id}"
+                             style="width: 500px;position:relative;overflow: hidden;max-width: 100%;">
                             <div class="swiper-wrapper">
                                 ${obj.prod.preview_image
-                                    .map((image, index) => {
-                                        return html` <div class="swiper-slide swiper-slide-def">
-                                            <img src="${image}" alt="${obj.prod.title}-${index}" />
-                                        </div>`;
-                                    })
-                                    .join('')}
+                                        .map((image, index) => {
+                                            return html`
+                                                <div class="swiper-slide swiper-slide-def">
+                                                    <img src="${image}" alt="${obj.prod.title}-${index}"/>
+                                                </div>`;
+                                        })
+                                        .join('')}
                             </div>
                             <div class="swiper-button-prev"></div>
                             <div class="swiper-button-next"></div>
                         </div>
                         ${obj.prod.preview_image.length > 1
-                            ? html` <div class="swiper-sm${id} mt-2" style="height: ${isPhone ? 75 : 100}px; overflow: hidden;">
-                                  <div class="swiper-wrapper">
-                                      ${obj.prod.preview_image
-                                          .map((image, index) => {
-                                              return html` <div class="swiper-slide swiper-slide-sm" data-image-index="${index}">
-                                                  <img src="${image}" alt="${obj.prod.title}-${index}-sm" style="height: ${isPhone ? 75 : 100}px;width: auto !important;" />
-                                              </div>`;
-                                          })
-                                          .join('')}
-                                  </div>
-                              </div>`
-                            : ``}
+                                ? html`
+                                    <div class="swiper-sm${id} mt-2"
+                                         style="height: ${isPhone ? 75 : 100}px; overflow: hidden;">
+                                        <div class="swiper-wrapper">
+                                            ${obj.prod.preview_image
+                                                    .map((image, index) => {
+                                                        return html`
+                                                            <div class="swiper-slide swiper-slide-sm"
+                                                                 data-image-index="${index}">
+                                                                <img src="${image}" alt="${obj.prod.title}-${index}-sm"
+                                                                     style="height: ${isPhone ? 75 : 100}px;width: auto !important;"/>
+                                                            </div>`;
+                                                    })
+                                                    .join('')}
+                                        </div>
+                                    </div>`
+                                : ``}
                     `;
                 },
                 divCreate: {
                     class: ``,
-                    option: [{ key: 'id', value: id }],
+                    option: [{key: 'id', value: id}],
                     style: `overflow:hidden;position:relative;${document.body.clientWidth > 800 ? `width:500px;` : `width:100%:`}`,
                 },
                 onCreate: () => {
@@ -547,7 +570,7 @@ export class PdClass {
         callback?: () => void;
         preview?: boolean;
         only_select?: (data: any) => void;
-        is_gift?:boolean;
+        is_gift?: boolean;
     }) {
         const gvc = obj.gvc;
         const glitter = gvc.glitter;
@@ -560,6 +583,7 @@ export class PdClass {
             addCartButton: glitter.getUUID(),
             stock_count: glitter.getUUID(),
             qty_count: glitter.getUUID(),
+            ids_spec: glitter.getUUID()
         };
         obj.gvc.addStyle(`
             .insignia {
@@ -581,12 +605,12 @@ export class PdClass {
                 justify-content: center;
                 align-items: center;
                 gap: 4px;
-                border-radius: 7px;
-                background: #FFE9B2;
+                border-radius: 2px;
                 font-size: 14px;
             }
         `);
-        let changePage = (index: string, type: 'page' | 'home', subData: any) => {};
+        let changePage = (index: string, type: 'page' | 'home', subData: any) => {
+        };
         gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
             changePage = cl.changePage;
         });
@@ -608,157 +632,190 @@ export class PdClass {
             }
         }
 
+        function refreshAll(){
+            gvc.notifyDataChange([ids.price, ids.addCartButton, ids.stock_count, ids.qty_count,ids.ids_spec])
+        }
+        const solidButtonBgr = glitter.share.globalValue['theme_color.0.solid-button-bg'] ?? '#dddddd';
+        const solidButtonText = glitter.share.globalValue['theme_color.0.solid-button-text'] ?? '#000000';
         const aboutVoucherHTML =
             vm.data && vm.data.content.about_vouchers && vm.data.content.about_vouchers.length > 0
-                ? html`<div class="d-flex flex-column gap-2 mt-3">
-                      ${vm.data.content.about_vouchers
-                          .map((v) => {
-                              return html`
-                                  <div class="d-flex gap-2 align-items-center">
-                                      <div class="insignia insignia-voucher">${eventName(v.reBackType)}</div>
-                                      <div style="font-size: 14px; font-weight: 500;">${v.title}</div>
-                                  </div>
-                              `;
-                          })
-                          .join('')}
-                  </div>`
+                ? html`
+                        <div class="d-flex flex-column gap-2 mt-3">
+                            ${vm.data.content.about_vouchers
+                                    .map((v) => {
+                                        return html`
+                                            <div class="d-flex gap-2 align-items-center">
+                                                <div class="insignia insignia-voucher"
+                                                     style="background:${solidButtonBgr};color:${solidButtonText};font-size:12px;">
+                                                    ${eventName(v.reBackType)}
+                                                </div>
+                                                <div class="fs-sm" style="font-weight: 500;color:${titleFontColor};">
+                                                    ${v.title}
+                                                </div>
+                                            </div>
+                                        `;
+                                    })
+                                    .join('')}
+                        </div>`
                 : '';
-        return html`
-            <div class="d-flex flex-column flex-lg-row w-100" style="gap:${this.isPhone() ? 20 : 40}px;">
-                <div class="w-100">
+        let viewMap = [
+            `   <div class="w-100">
                     <div class="w-100">
                         ${obj.preview
-                            ? PdClass.showSwiper({
-                                  gvc: gvc,
-                                  prod: obj.prod,
-                                  vm: obj.vm,
-                              })
-                            : ``}
+                ? PdClass.showSwiper({
+                    gvc: gvc,
+                    prod: obj.prod,
+                    vm: obj.vm,
+                })
+                : ``}
                     </div>
-                    <div class="w-100">${aboutVoucherHTML}</div>
-                </div>
-                <div class="w-100">
-                    <h1 style="color: ${titleFontColor};font-size:${document.body.clientWidth > 991 ? `36` : `24`}px;">${prod.title}</h1>
+                </div>`,
+            `   <div class="w-100">
+                    <h1 style="color: ${titleFontColor};font-size:${document.body.clientWidth > 991 ? `28` : `20`}px;">
+                        ${prod.title}</h1>
                     <div class="d-flex flex-wrap" style="gap:10px;">
                         ${(prod.product_tag as any).language[Language.getLanguage()]
-                            .map((tag: any) => {
-                                return html`<div
-                                    class="mb-3 rounded-1 text-white d-flex align-items-center justify-content-center px-2 "
-                                    style="background: ${glitter.share.globalValue['theme_color.0.solid-button-bg']};font-size: 13px;"
-                                >
-                                    ${tag}
-                                </div>`;
-                            })
-                            .join('')}
+                .map((tag: any) => {
+                    return html`
+                        <div
+                                class="mb-3 rounded-1 text-white d-flex align-items-center justify-content-center px-2 "
+                                style="background: ${glitter.share.globalValue['theme_color.0.solid-button-bg']};font-size: 12px;"
+                        >
+                            ${tag}
+                        </div>`;
+                })
+                .join('')}
                     </div>
                     ${prod.min_qty && `${prod.min_qty}` > `1`
-                        ? html` <div class="insignia mx-0 w-auto mt-0 mb-3 fw-500  py-2 me-1" style="background: #ffe9b2;margin-left:5px;">
-                              ${Language.text('min_p_count').replace('_c_', `<span class="fw-bold mx-1">${prod.min_qty}</span>`)}
-                          </div>`
-                        : ``}
+                ? html`
+                        <div class="insignia mx-0 w-auto mt-0 mb-3 fw-500  py-2 me-1"
+                             style="background: #ffe9b2;margin-left:5px;">
+                            ${Language.text('min_p_count').replace('_c_', `<span class="fw-bold mx-1">${prod.min_qty}</span>`)}
+                        </div>`
+                : ``}
                     ${prod.max_qty && `${prod.max_qty}` > `1`
-                        ? html` <div class="insignia mx-0 w-auto mt-0 mb-3 fw-500  py-2" style="background: #ffe9b2;margin-left:5px;">
-                              ${Language.text('max_p_count').replace('_c_', `<span class="fw-bold mx-1">${prod.max_qty}</span>`)}
-                          </div>`
-                        : ``}
-                    ${language_data && language_data.sub_title ? html` <div class="mb-3">${language_data.sub_title}</div> ` : ``}
+                ? html`
+                        <div class="insignia mx-0 w-auto mt-0 mb-3 fw-500  py-2"
+                             style="background: #ffe9b2;margin-left:5px;">
+                            ${Language.text('max_p_count').replace('_c_', `<span class="fw-bold mx-1">${prod.max_qty}</span>`)}
+                        </div>`
+                : ``}
+                    ${language_data && language_data.sub_title ? html`
+                <div class="mb-3">${language_data.sub_title}</div> ` : ``}
                     ${gvc.bindView({
-                        bind: ids.price,
-                        view: () => {
-                            const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
+                bind: ids.price,
+                view: () => {
+                    const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
 
-                            if (!v) return '錯誤';
+                    if (!v) return '錯誤';
 
-                            const comparePrice = parseInt(`${v.compare_price ?? 0}`, 10);
-                            const originPrice = parseInt(`${v.origin_price ?? 0}`, 10);
-                            const lineThroughPrice = comparePrice > originPrice ? originPrice : comparePrice;
+                    const comparePrice = parseInt(`${v.compare_price ?? 0}`, 10);
+                    const originPrice = parseInt(`${v.origin_price ?? 0}`, 10);
+                    const lineThroughPrice = comparePrice > originPrice ? originPrice : comparePrice;
 
+                    return html`
+                        <div class="d-flex align-items-end" style="font-family: 'Noto Sans'; gap: 8px;">
+                            <div style="color: ${(lineThroughPrice > 0 && lineThroughPrice > v.sale_price) ? '#ff5353':titleFontColor}; font-size: 24px; font-weight: 700; line-height: normal">
+                                ${Currency.convertCurrencyText(v.sale_price)}
+                            </div>
+                            ${lineThroughPrice > 0 && lineThroughPrice > v.sale_price
+                                    ? html`
+                                        <div style="color: #8D8D8D; font-size: 16px; text-decoration: line-through;">
+                                            ${Currency.convertCurrencyText(lineThroughPrice)}
+                                        </div> `
+                                    : ''}
+                        </div>
+                    `;
+                },
+                divCreate: {
+                    style: 'margin-bottom: 12px;'
+                }
+            })}
+                    ${gvc.bindView(() => {
+
+                return {
+                    bind: ids.ids_spec,
+                    view: () => {
+                        return prod.specs.map((spec, index1) => {
                             return html`
-                                <div class="d-flex align-items-end" style="font-family: 'Noto Sans'; gap: 8px;">
-                                    <div style="color: ${titleFontColor}; font-size: 26px; font-weight: 700; line-height: normal">${Currency.convertCurrencyText(v.sale_price)}</div>
-                                    ${lineThroughPrice > 0 && lineThroughPrice > v.sale_price
-                                        ? html`<div style="color: #8D8D8D; font-size: 18px; text-decoration: line-through;">${Currency.convertCurrencyText(lineThroughPrice)}</div> `
-                                        : ''}
-                                </div>
-                            `;
-                        },
-                        divCreate: {
-                            style: 'margin-bottom: 12px;'
-                        }
-                    })}
-                    ${gvc.map(
-                        prod.specs.map((spec, index1) => {
-                            return html` <div>
+                                <div>
                                     <h5 class="mb-2" style="color: ${titleFontColor};font-size:14px;">
                                         ${(spec.language_title && (spec.language_title as any)[Language.getLanguage()]) || spec.title}
                                     </h5>
                                     <div class="d-flex gap-2 flex-wrap">
                                         ${gvc.map(
-                                            spec.option.map((opt: any) => {
-                                                return html` <div
-                                                    gvc-option="spec-option-${index1}"
-                                                    class="spec-option ${vm.specs[index1] === opt.title ? 'selected-option' : ''}"
-                                                    onclick="${gvc.event((e) => {
-                                                        const allOptions = document.querySelectorAll(`div[gvc-option=spec-option-${index1}]`);
-                                                        allOptions.forEach((option: any) => {
-                                                            option.classList.remove('selected-option');
-                                                        });
-                                                        e.classList.toggle('selected-option');
-                                                        vm.specs[index1] = opt.title;
-                                                        const v = prod.variants.find((variant) => {
-                                                            return PdClass.ObjCompare(variant.spec, vm.specs, true);
-                                                        });
-                                                        if (v?.preview_image) {
-                                                            let index = prod.preview_image.findIndex((src) => {
-                                                                return src == v.preview_image;
-                                                            });
-                                                            if (index >= 0) {
-                                                                vm.swiper.slideTo(index);
-                                                            }
-                                                        }
-                                                        gvc.notifyDataChange([ids.price, ids.addCartButton, ids.stock_count, ids.qty_count]);
-                                                    })}"
-                                                >
+                                                spec.option.map((opt: any) => {
+                                                    return html`
+                                                        <div
+                                                                gvc-option="spec-option-${index1}"
+                                                                class="spec-option ${vm.specs[index1] === opt.title ? 'selected-option' : ''}"
+                                                                onclick="${gvc.event((e) => {
+                                                                    const allOptions = document.querySelectorAll(`div[gvc-option=spec-option-${index1}]`);
+                                                                    allOptions.forEach((option: any) => {
+                                                                        option.classList.remove('selected-option');
+                                                                    });
+                                                                    e.classList.toggle('selected-option');
+                                                                    vm.specs[index1] = opt.title;
+                                                                    const v = prod.variants.find((variant) => {
+                                                                        return PdClass.ObjCompare(variant.spec, vm.specs, true);
+                                                                    });
+                                                                    if (v?.preview_image) {
+                                                                        let index = prod.preview_image.findIndex((src) => {
+                                                                            return src == v.preview_image;
+                                                                        });
+                                                                        if (index >= 0) {
+                                                                            vm.swiper.slideTo(index);
+                                                                        }
+                                                                    }
+                                                                    refreshAll()
+                                                                })}"
+                                                        >
                                                     <span style="font-size: 15px; font-weight: 500; letter-spacing: 1.76px;"
-                                                        >${(opt.language_title && (opt.language_title as any)[Language.getLanguage()]) || opt.title}</span
+                                                    >${(opt.language_title && (opt.language_title as any)[Language.getLanguage()]) || opt.title}</span
                                                     >
-                                                </div>`;
-                                            })
+                                                        </div>`;
+                                                })
                                         )}
                                     </div>
                                 </div>
                                 <div class="mt-3"></div>`;
-                        })
-                    )}
+                        }).join('')
+                    },
+                    divCreate: {
+                        class: `w-100`
+                    }
+                }
+            })}
                     ${[
-                        //數量按鈕
-                        gvc.bindView(() => {
-                            return {
-                                bind: ids.qty_count,
-                                view: () => {
-                                    const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
-                                    const cartItem = new ApiCart().cart.line_items.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
-                                    if (
-                                        variant &&
-                                        (variant.stock < parseInt(vm.quantity, 10) || (cartItem && variant.stock < cartItem.count + parseInt(vm.quantity, 10))) &&
-                                        `${variant.show_understocking}` !== 'false'
-                                    ) {
-                                        return '';
-                                    }
-                                    return html`
-                                        <h5 class="mb-0" style="color: ${titleFontColor};font-size:14px;">${Language.text('quantity')}</h5>
-                                        <div class="d-flex align-items-center" style="color:${titleFontColor};">
-                                            <select
-                                                class="form-select custom-select me-2"
-                                                style="border-radius: 5px; color: #575757; width: 100px;height:38px;"
-                                                onchange="${gvc.event((e) => {
-                                                    vm.quantity = e.value;
-                                                    gvc.notifyDataChange([ids.addCartButton, ids.stock_count]);
-                                                })}"
-                                            >
-                                                ${gvc.map(
-                                                    [
-                                                        ...new Array(
+                //數量按鈕
+                gvc.bindView(() => {
+                    return {
+                        bind: ids.qty_count,
+                        view: () => {
+                            const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
+                            const cartItem = new ApiCart().cart.line_items.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
+                            if (
+                                variant &&
+                                (variant.stock < parseInt(vm.quantity, 10) || (cartItem && variant.stock < cartItem.count + parseInt(vm.quantity, 10))) &&
+                                `${variant.show_understocking}` !== 'false'
+                            ) {
+                                return '';
+                            }
+                            return html`
+                                <h5 class="mb-0" style="color: ${titleFontColor};font-size:14px;">
+                                    ${Language.text('quantity')}</h5>
+                                <div class="d-flex align-items-center" style="color:${titleFontColor};">
+                                    <select
+                                            class="form-select custom-select me-2"
+                                            style="border-radius: 5px; color: #575757; width: 100px;height:38px;"
+                                            onchange="${gvc.event((e) => {
+                                                vm.quantity = e.value;
+                                                gvc.notifyDataChange([ids.addCartButton, ids.stock_count]);
+                                            })}"
+                                    >
+                                        ${gvc.map(
+                                                [
+                                                    ...new Array(
                                                             (() => {
                                                                 const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
                                                                 if (!variant || variant.show_understocking === 'false') {
@@ -766,270 +823,780 @@ export class PdClass {
                                                                 }
                                                                 return variant.stock < 50 ? variant.stock : 50;
                                                             })()
-                                                        ),
-                                                    ].map((item, index) => {
-                                                        return html` <option value="${index + 1}">${index + 1}</option>`;
-                                                    })
-                                                )}
-                                            </select>
-                                            ${(prod.unit as any)[Language.getLanguage()] || Language.text('pieces')}
-                                        </div>
-                                    `;
-                                },
-                                divCreate: {
-                                    class: `flex-column gap-2  ${obj.with_qty === false ? `d-none` : `d-flex`} `,
-                                },
-                            };
-                        }),
-                        //庫存顯示
-                        gvc.bindView(() => {
-                            return {
-                                bind: ids.stock_count,
-                                view: () => {
-                                    return [
-                                        (() => {
-                                            const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
-
-                                            if (variant && variant.show_understocking !== 'false') {
-                                                const stockClass = `${variant.stock}` === '0' ? 'text-danger' : '';
-                                                return html`
-                                                    <div class="${stockClass} fw-500 mt-2" style="font-size: 14px; color: ${titleFontColor};">${Language.text('stock_count')}：${variant.stock}</div>
-                                                `;
-                                            }
-
-                                            return '';
-                                        })(),
-                                    ].join('');
+                                                    ),
+                                                ].map((item, index) => {
+                                                    return html`
+                                                        <option value="${index + 1}">${index + 1}</option>`;
+                                                })
+                                        )}
+                                    </select>
+                                    ${(prod.unit as any)[Language.getLanguage()] || Language.text('pieces')}
+                                </div>
+                            `;
+                        },
+                        divCreate: {
+                            class: `flex-column gap-2  ${obj.with_qty === false ? `d-none` : `d-none d-sm-flex`} `,
+                        },
+                    };
+                }),
+                //庫存顯示
+                gvc.bindView(() => {
+                    return {
+                        bind: ids.stock_count,
+                        view: () => {
+                            return [
+                                (() => {
+                                    const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
+
+                                    if (variant && variant.show_understocking !== 'false') {
+                                        const stockClass = `${variant.stock}` === '0' ? 'text-danger' : '';
+                                        return html`
+                                            <div class="${stockClass} fw-500 mt-2"
+                                                 style="font-size: 14px; color: ${titleFontColor};">
+                                                ${Language.text('can_buy')}：${variant.stock}
+                                            </div>
+                                        `;
+                                    }
+
+                                    return '';
+                                })(),
+                            ].join('');
+                        },
+                        divCreate: {},
+                    };
+                }),
+                //購物車按鈕
+                gvc.bindView({
+                    bind: ids.addCartButton,
+                    view: () => {
+                        const variant = prod.variants.find((item) => {
+                            return PdClass.ObjCompare(item.spec, vm.specs, true);
+                        });
+                        const cartItem = new ApiCart().cart.line_items.find((item) => {
+                            return PdClass.ObjCompare(item.spec, vm.specs, true);
+                        });
+                        if (!variant) {
+                            return html`
+                                <button class="no-stock w-100" disabled>發生錯誤</button>`;
+                        }
+
+                        Ad.gtagEvent('view_item', {
+                            currency: 'TWD',
+                            value: variant.sale_price,
+                            items: [
+                                {
+                                    item_id: prod.id,
+                                    item_name: prod.title,
+                                    item_variant: variant.spec.length > 0 ? variant.spec.join('-') : '',
+                                    price: variant.sale_price,
                                 },
-                                divCreate: {},
-                            };
-                        }),
-                        //購物車按鈕
-                        gvc.bindView({
-                            bind: ids.addCartButton,
-                            view: () => {
-                                const variant = prod.variants.find((item) => {
-                                    return PdClass.ObjCompare(item.spec, vm.specs, true);
-                                });
-                                const cartItem = new ApiCart().cart.line_items.find((item) => {
-                                    return PdClass.ObjCompare(item.spec, vm.specs, true);
-                                });
-                                if (!variant) {
-                                    return html` <button class="no-stock w-100" disabled>發生錯誤</button>`;
-                                }
+                            ],
+                        });
+                        Ad.fbqEvent('ViewContent', {
+                            content_ids: [variant.sku || prod.id],
+                            content_type: 'product',
+                            value: variant.sale_price,
+                            currency: 'TWD',
+                        });
+
+                        if (
+                            ((variant.stock < parseInt(vm.quantity, 10)) &&
+                                `${variant.show_understocking}` !== 'false') && (document.body.clientWidth > 800)
+                        ) {
+                            return html`
+                                <button class="no-stock w-100" disabled>${Language.text('out_of_stock')}
+                                </button>`;
+                        }
 
-                                Ad.gtagEvent('view_item', {
-                                    currency: 'TWD',
-                                    value: variant.sale_price,
-                                    items: [
-                                        {
-                                            item_id: prod.id,
-                                            item_name: prod.title,
-                                            item_variant: variant.spec.length > 0 ? variant.spec.join('-') : '',
-                                            price: variant.sale_price,
+                        //當是贈品一個按鈕就好
+                        if (obj.is_gift) {
+                            return `<button
+                                        class="add-cart-imd-btn fw-bold"
+                                        style="width:calc(100% - 10px);cursor: pointer;height:48px;"
+                                        onclick="${gvc.event(() => {
+                                if (obj.only_select) {
+                                    obj.only_select({id: prod.id, specs: vm.specs});
+                                } else {
+                                    new ApiCart(ApiCart.checkoutCart).addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                    gvc.glitter.recreateView('.js-cart-count');
+                                    gvc.glitter.recreateView('.shopping-cart');
+                                    PdClass.jumpAlert({
+                                        gvc,
+                                        text: html`${Language.text('add_to_cart_success')}`,
+                                        justify: 'top',
+                                        align: 'center',
+                                        width: 300,
+                                    });
+                                    ApiTrack.track({
+                                        event_name: "AddToCart",
+                                        custom_data: {
+                                            currency: "TWD",
+                                            value: variant.sale_price,
+                                            content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                            content_name: prod.title,
+                                            content_type: "product"
+                                        }
+                                    })
+                                    obj.callback && obj.callback();
+                                }
+                            })}"
+                                    >
+                                        ${Language.text('confirm_select')}
+                                    </button>`
+                        }
+                        let viewMap = []
+                        if (document.body.clientWidth < 800 && (window as any).store_info.chat_toggle) {
+                            viewMap.push(`<div class="rounded-3  d-flex flex-column align-items-center justify-content-center fs-6 add-cart-btn fw-bold "
+                                         style="height:44px;width:44px;" onclick="${gvc.event(() => {
+                                const userID = (() => {
+                                    if (GlobalUser.token) {
+                                        return GlobalUser.parseJWT(GlobalUser.token).payload.userID
+                                    } else {
+                                        return gvc.glitter.macAddress
+                                    }
+                                })()
+                                gvc.glitter.getModule(new URL('./cms-plugin/customer-message-user.js', gvc.glitter.root_path).href, (cl) => {
+                                    cl.mobileChat({
+                                        gvc: gvc,
+                                        chat: {
+                                            chat_id: [`${userID}`, 'manager'].sort().join('-'),
+                                            type: 'user',
                                         },
-                                    ],
+                                        user_id: `${userID}`
+                                    })
+                                })
+                                // gvc.glitter.getModule('',(module)=>{
+                            })
+                            }">
+                                        <i class="fa-brands fa-rocketchat"></i>
+                                        <div style="font-size:10px;">${Language.text('chat')}</div>
+                                    </div>`)
+                        }
+                        viewMap.push(`<div class="rounded-3  d-flex flex-column align-items-center justify-content-center fs-6 add-cart-btn fw-bold "
+                                         style="height:44px;width:44px;cursor: pointer;" onclick="${gvc.event(() => {
+                            navigator.clipboard.writeText(`${window.location.href}`);
+                            const dialog = new ShareDialog(gvc.glitter)
+                            dialog.successMessage({text: Language.text('copy_link_success')})
+                        })
+                        }">
+                                       <i class="fa-solid fa-share"></i>
+                                        <div style="font-size:10px;">${Language.text('share')}</div>
+                                    </div>`)
+                        if ((window as any).store_info.wishlist) {
+                            viewMap.push(gvc.bindView(() => {
+                                return {
+                                    bind: ids.wishStatus,
+                                    view: () => {
+                                        return html`${(vm.wishStatus) ? ` <i class="fa-solid fa-heart" style="color:white;"></i>` : ` <i class="fa-regular fa-heart"></i>`}
+                                        <div style="font-size:10px; ${(vm.wishStatus) ? `color:white;` : ``}">
+                                            ${(vm.wishStatus) ? Language.text('h_collect') : Language.text('collect')}
+                                        </div>`
+                                    },
+                                    divCreate: () => {
+                                        return {
+                                            option: [
+                                                {
+                                                    key: 'onclick',
+                                                    value: gvc.event(() => {
+                                                        if (CheckInput.isEmpty(GlobalUser.token)) {
+                                                            changePage('login', 'page', {});
+                                                            GlobalUser.loginRedirect = location.href
+                                                            return;
+                                                        }
+                                                        const dialog = new ShareDialog(gvc.glitter)
+                                                        dialog.dataLoading({visible: true})
+                                                        ApiShop.getWishList().then((getRes) => {
+                                                            if (getRes.result && getRes.response.data) {
+                                                                if (getRes.response.data.find((item: Product_l) => `${item.id}` === `${prod.id}`)) {
+                                                                    ApiShop.deleteWishList(`${prod.id}`).then(async () => {
+                                                                        PdClass.jumpAlert({
+                                                                            gvc,
+                                                                            text: '刪除成功',
+                                                                            justify: 'top',
+                                                                            align: 'center',
+                                                                        });
+                                                                        vm.wishStatus = false;
+                                                                        gvc.notifyDataChange(ids.wishStatus);
+                                                                        dialog.dataLoading({visible: false})
+                                                                    });
+                                                                } else {
+                                                                    const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true)) ?? prod.variants[0];
+                                                                    Ad.gtagEvent('add_to_wishlist', {
+                                                                        currency: 'TWD',
+                                                                        value: variant.sale_price,
+                                                                        items: [
+                                                                            {
+                                                                                item_id: prod.id,
+                                                                                item_name: prod.title,
+                                                                                item_variant: variant.spec.length > 0 ? variant.spec.join('-') : '',
+                                                                                price: variant.sale_price,
+                                                                            },
+                                                                        ],
+                                                                    });
+                                                                    Ad.fbqEvent('AddToWishlist', {
+                                                                        content_ids: [prod.id],
+                                                                        contents: [
+                                                                            {
+                                                                                id: prod.id,
+                                                                                quantity: 1,
+                                                                            },
+                                                                        ],
+                                                                        value: variant.sale_price,
+                                                                        currency: 'TWD',
+                                                                    });
+
+                                                                    ApiShop.postWishList(`${prod.id}`).then(async () => {
+                                                                        PdClass.jumpAlert({
+                                                                            gvc,
+                                                                            text: '新增成功',
+                                                                            justify: 'top',
+                                                                            align: 'center',
+                                                                        });
+                                                                        vm.wishStatus = true;
+                                                                        gvc.notifyDataChange(ids.wishStatus);
+                                                                        dialog.dataLoading({visible: false})
+                                                                    });
+                                                                }
+                                                            }
+                                                        });
+                                                    })
+                                                }
+                                            ],
+                                            class: `rounded-3  d-flex flex-column align-items-center justify-content-center fs-6 add-cart-btn fw-bold`,
+                                            style: `height:44px;width:44px;cursor:pointer; ${(vm.wishStatus) ? `background: #ff5353;border:1px solid white;` : ``}`
+                                        }
+                                    }
+                                }
+                            }))
+                        }
+                        viewMap.push(`<button
+                                            class="add-cart-btn fw-bold fs-sm"
+                                            style=" flex: 1;height:44px;"
+                                            onclick="${gvc.event(() => {
+                            if (document.body.clientWidth < 800) {
+                                this.addProductPopUp(obj, 'addCart', () => {
+                                    refreshAll()
+                                })
+                                return
+                            }
+                            if (obj.only_select) {
+                                obj.only_select({id: prod.id, specs: vm.specs});
+                            } else {
+                                new ApiCart().addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                gvc.glitter.recreateView('.js-cart-count');
+                                gvc.glitter.recreateView('.shopping-cart');
+                                PdClass.jumpAlert({
+                                    gvc,
+                                    text: html`${Language.text('add_to_cart_success')}`,
+                                    justify: 'top',
+                                    align: 'center',
+                                    width: 300,
                                 });
-                                Ad.fbqEvent('ViewContent', {
-                                    content_ids: [variant.sku || prod.id ],
-                                    content_type: 'product',
+                                ApiTrack.track({
+                                    event_name: "AddToCart",
+                                    custom_data: {
+                                        currency: "TWD",
+                                        value: variant.sale_price,
+                                        content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                        content_name: prod.title,
+                                        content_type: "product"
+                                    }
+                                })
+                                obj.callback && obj.callback();
+                            }
+                        })}"
+                                    >
+                                        ${Language.text('add_to_cart')}
+                                    </button>`)
+                        viewMap.push(`<button
+                                            class="add-cart-imd-btn fw-bold fs-sm"
+                                            style="cursor: pointer; flex: 1;height:44px;"
+                                            onclick="${gvc.event(() => {
+                            if (document.body.clientWidth < 800) {
+                                this.addProductPopUp(obj, 'buyNow', () => {
+                                    refreshAll()
+                                })
+                                return
+                            }
+                            const buy_it = new ApiCart(ApiCart.buyItNow);
+                            buy_it.clearCart();
+                            buy_it.addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                            ApiCart.toCheckOutPage(ApiCart.buyItNow);
+                            gvc.closeDialog();
+                            ApiTrack.track({
+                                event_name: "AddToCart",
+                                custom_data: {
+                                    currency: "TWD",
                                     value: variant.sale_price,
-                                    currency: 'TWD',
-                                });
-
-                                if (
-                                    (variant.stock < parseInt(vm.quantity, 10) || (cartItem && variant.stock < cartItem.count + parseInt(vm.quantity, 10))) &&
-                                    `${variant.show_understocking}` !== 'false'
-                                ) {
-                                    return html` <button class="no-stock w-100" disabled>${Language.text('out_of_stock')}</button>`;
+                                    content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                    content_name: prod.title,
+                                    content_type: "product"
                                 }
+                            })
+                        })}"
+                                    >
+                                        ${Language.text('buy_it_now')}
+                                    </button>`)
+                        return viewMap.join('')
+                    },
+                    divCreate: {
+                        style: `${document.body.clientWidth > 800 ? `width:100%;height: 38px;` : `width:100%;z-index:10;`}gap:6px;`,
+                        class: `d-flex  ${(document.body.clientWidth < 800) ? `position-fixed bottom-0 start-0 px-2 py-2 pb-4 bg-white shadow border-top` : `mt-3`}`,
+                    },
+                }),
+                (aboutVoucherHTML) ? `
+<div class="w-100 border-top" style="margin-top:${this.isPhone() ? 10 : 20}px;margin-bottom:${this.isPhone() ? 10 : 10}px;"></div>
+<div class="w-100">
+<h1 style="color: ${titleFontColor};font-size:16px;">本商品適用活動</h1>
+${aboutVoucherHTML}
+</div>` : ``,
+            ].join('')}
+                </div>`
+        ]
+        return html`
+            <div class="d-flex flex-column flex-lg-row w-100" style="gap:${this.isPhone() ? 20 : 40}px">
+                ${viewMap.join(``)}
+            </div>
+        `;
+    }
 
-                                //當是贈品一個按鈕就好
-                                if(obj.is_gift ){
-                                    return `<button
+    static addProductPopUp(obj: {
+        gvc: GVC;
+        titleFontColor: string;
+        prod: Product;
+        vm: {
+            data?: Product_l;
+            specs: string[];
+            quantity: string;
+            wishStatus: boolean;
+            swiper?: any;
+        };
+        with_qty?: boolean;
+        callback?: () => void;
+        preview?: boolean;
+        only_select?: (data: any) => void;
+        is_gift?: boolean;
+    }, type: 'addCart' | 'buyNow', close_event: () => void) {
+        const gvc = obj.gvc;
+        const glitter = gvc.glitter;
+        const titleFontColor = obj.titleFontColor;
+        const prod = obj.prod;
+        const vm = obj.vm;
+        const ids = {
+            price: glitter.getUUID(),
+            wishStatus: glitter.getUUID(),
+            addCartButton: glitter.getUUID(),
+            stock_count: glitter.getUUID(),
+            qty_count: glitter.getUUID(),
+        };
+        obj.gvc.addStyle(`
+            .insignia {
+                border-radius: 0.5rem;
+                padding: 6px 8px;
+                font-size: 0.875rem;
+                display: inline-block;
+                font-weight: 500;
+                line-height: 1.5;
+                text-align: center;
+                white-space: normal;
+                vertical-align: baseline;
+            }
+
+            .insignia-voucher {
+                display: flex;
+                height: 22px;
+                padding: 4px 6px;
+                justify-content: center;
+                align-items: center;
+                gap: 4px;
+                border-radius: 2px;
+                font-size: 14px;
+            }
+        `);
+        let changePage = (index: string, type: 'page' | 'home', subData: any) => {
+        };
+        gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
+            changePage = cl.changePage;
+        });
+        const language_data = (prod as any).language_data && (prod as any).language_data[Language.getLanguage()];
+        ProductInitial.initial(prod);
+
+        const solidButtonBgr = glitter.share.globalValue['theme_color.0.solid-button-bg'] ?? '#dddddd';
+        const solidButtonText = glitter.share.globalValue['theme_color.0.solid-button-text'] ?? '#000000';
+        obj.gvc.glitter.innerDialog((gvc: GVC) => {
+            const variant = prod.variants.find((item) => {
+                return PdClass.ObjCompare(item.spec, vm.specs, true);
+            });
+            return `<div class="w-100 h-100 position-absolute bottom-0 left-0" onclick="${gvc.event(() => {
+                gvc.closeDialog()
+            })}"></div>
+<div class="rounded-top bg-white w-100 position-absolute bottom-0 left-0 px-3 pt-3" style="padding-bottom:100px;">
+
+<div class="d-flex align-items-center mb-3 " style="margin-top:20px;gap:10px;">
+<div style="width: 88px;height: 88px;border-radius: 10px;background: 50%/cover url('${variant?.preview_image}');"></div>
+<div class="d-flex flex-column" style="gap:5px;">
+<div class="fw-bold" style="color: ${titleFontColor};font-size:14px;">${prod.title}</div>
+${gvc.bindView({
+                bind: ids.price,
+                view: () => {
+                    const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
+
+                    if (!v) return '錯誤';
+
+                    const comparePrice = parseInt(`${v.compare_price ?? 0}`, 10);
+                    const originPrice = parseInt(`${v.origin_price ?? 0}`, 10);
+                    const lineThroughPrice = comparePrice > originPrice ? originPrice : comparePrice;
+
+                    return html`
+                        <div class="d-flex align-items-end" style=" gap: 8px;">
+                            <div style="color: ${(lineThroughPrice > 0 && lineThroughPrice > v.sale_price) ? '#ff5353':titleFontColor}; font-size: 16px; font-weight: 700; ">
+                                ${Currency.convertCurrencyText(v.sale_price)}
+                            </div>
+                            ${lineThroughPrice > 0 && lineThroughPrice > v.sale_price
+                        ? html`
+                                        <div style="color: #8D8D8D; font-size: 14px; text-decoration: line-through;">
+                                            ${Currency.convertCurrencyText(lineThroughPrice)}
+                                        </div> `
+                        : ''}
+                        </div>
+                    `;
+                },
+                divCreate: {
+                    style: ''
+                }
+            })}
+</div>
+</div>
+${[
+                //規格選擇
+                prod.specs.map((spec, index1) => {
+                    return html`
+                        <div>
+                            <h5 class="mb-2" style="color: ${titleFontColor};font-size:14px;">
+                                ${(spec.language_title && (spec.language_title as any)[Language.getLanguage()]) || spec.title}
+                            </h5>
+                            <div class="d-flex gap-2 flex-wrap">
+                                ${gvc.map(
+                                        spec.option.map((opt: any) => {
+                                            return html`
+                                                <div
+                                                        gvc-option="spec-option-${index1}"
+                                                        class="spec-option ${vm.specs[index1] === opt.title ? 'selected-option' : ''}"
+                                                        onclick="${gvc.event((e) => {
+                                                            const allOptions = document.querySelectorAll(`div[gvc-option=spec-option-${index1}]`);
+                                                            allOptions.forEach((option: any) => {
+                                                                option.classList.remove('selected-option');
+                                                            });
+                                                            e.classList.toggle('selected-option');
+                                                            vm.specs[index1] = opt.title;
+                                                            const v = prod.variants.find((variant) => {
+                                                                return PdClass.ObjCompare(variant.spec, vm.specs, true);
+                                                            });
+                                                            if (v?.preview_image) {
+                                                                let index = prod.preview_image.findIndex((src) => {
+                                                                    return src == v.preview_image;
+                                                                });
+                                                                if (index >= 0) {
+                                                                    vm.swiper.slideTo(index);
+                                                                }
+                                                            }
+                                                            gvc.recreateView();
+                                                        })}"
+                                                >
+                                                    <span style="font-size: 15px; font-weight: 500; letter-spacing: 1.76px;"
+                                                    >${(opt.language_title && (opt.language_title as any)[Language.getLanguage()]) || opt.title}</span
+                                                    >
+                                                </div>`;
+                                        })
+                                )}
+                            </div>
+                        </div>
+                        <div class="mt-3"></div>`;
+                }).join(''),
+
+                //庫存顯示
+                gvc.bindView(() => {
+                    return {
+                        bind: ids.stock_count,
+                        view: () => {
+                            return [
+                                (() => {
+                                    const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
+
+                                    if (variant && variant.show_understocking !== 'false') {
+                                        const stockClass = `${variant.stock}` === '0' ? 'text-danger' : '';
+                                        return html`
+                                            <div class="${stockClass} fw-500 mt-2"
+                                                 style="font-size: 14px; color: ${titleFontColor};">
+                                                ${Language.text('can_buy')}：${variant.stock}
+                                            </div>
+                                        `;
+                                    }
+
+                                    return '';
+                                })(),
+                            ].join('');
+                        },
+                        divCreate: {},
+                    };
+                }),
+                //購物車按鈕
+                gvc.bindView({
+                    bind: ids.addCartButton,
+                    view: () => {
+                        const variant = prod.variants.find((item) => {
+                            return PdClass.ObjCompare(item.spec, vm.specs, true);
+                        });
+                        const cartItem = new ApiCart().cart.line_items.find((item) => {
+                            return PdClass.ObjCompare(item.spec, vm.specs, true);
+                        });
+                        if (!variant) {
+                            return html`
+                                <button class="no-stock w-100" disabled>發生錯誤</button>`;
+                        }
+
+                        Ad.gtagEvent('view_item', {
+                            currency: 'TWD',
+                            value: variant.sale_price,
+                            items: [
+                                {
+                                    item_id: prod.id,
+                                    item_name: prod.title,
+                                    item_variant: variant.spec.length > 0 ? variant.spec.join('-') : '',
+                                    price: variant.sale_price,
+                                },
+                            ],
+                        });
+                        Ad.fbqEvent('ViewContent', {
+                            content_ids: [variant.sku || prod.id],
+                            content_type: 'product',
+                            value: variant.sale_price,
+                            currency: 'TWD',
+                        });
+
+
+                        //當是贈品一個按鈕就好
+                        if (obj.is_gift) {
+                            return `<button
                                         class="add-cart-imd-btn fw-bold h-100"
                                         style="width:calc(100% - 10px);cursor: pointer;"
                                         onclick="${gvc.event(() => {
-                                        if (obj.only_select) {
-                                            obj.only_select({ id: prod.id, specs: vm.specs });
-                                        } else {
-                                            new ApiCart(ApiCart.checkoutCart).addToCart(`${prod.id}`, vm.specs, vm.quantity);
-                                            gvc.glitter.recreateView('.js-cart-count');
-                                            gvc.glitter.recreateView('.shopping-cart');
-                                            PdClass.jumpAlert({
-                                                gvc,
-                                                text: html`${Language.text('add_to_cart_success')}`,
-                                                justify: 'top',
-                                                align: 'center',
-                                                width: 300,
-                                            });
-                                            ApiTrack.track({
-                                                event_name: "AddToCart",
-                                                custom_data: {
-                                                    currency: "TWD",
-                                                    value: variant.sale_price,
-                                                    content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
-                                                    content_name: prod.title,
-                                                    content_type: "product"
-                                                }
-                                            })
-                                            obj.callback && obj.callback();
+                                if (obj.only_select) {
+                                    obj.only_select({id: prod.id, specs: vm.specs});
+                                } else {
+                                    new ApiCart(ApiCart.checkoutCart).addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                    gvc.glitter.recreateView('.js-cart-count');
+                                    gvc.glitter.recreateView('.shopping-cart');
+                                    PdClass.jumpAlert({
+                                        gvc,
+                                        text: html`${Language.text('add_to_cart_success')}`,
+                                        justify: 'top',
+                                        align: 'center',
+                                        width: 300,
+                                    });
+                                    ApiTrack.track({
+                                        event_name: "AddToCart",
+                                        custom_data: {
+                                            currency: "TWD",
+                                            value: variant.sale_price,
+                                            content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                            content_name: prod.title,
+                                            content_type: "product"
                                         }
-                                    })}"
+                                    })
+                                    obj.callback && obj.callback();
+                                }
+                            })}"
                                     >
                                         ${Language.text('confirm_select')}
                                     </button>`
+                        }
+                        let viewMap = []
+
+                        viewMap.push(gvc.bindView(() => {
+                            return {
+                                bind: ids.qty_count,
+                                view: () => {
+                                    vm.quantity = vm.quantity || '1'
+                                    const supportMinus = parseInt(vm.quantity, 10) > 1;
+
+                                    function getSupportAds() {
+                                        return !((variant!!.stock < (parseInt(vm.quantity, 10) + 1)) &&
+                                            `${variant!!.show_understocking}` !== 'false')
+                                    }
+
+                                    function hasStock() {
+                                        return !(((variant!!.stock < (parseInt(vm.quantity, 10))) || (variant!!.stock < 1)) &&
+                                            `${variant!!.show_understocking}` !== 'false')
+                                    }
+
+                                    let supportAdds = getSupportAds()
+                                    if (
+                                        !hasStock()
+                                    ) {
+                                        vm.quantity = `${variant.stock}`;
+                                    }
+
+                                    if (!hasStock()) {
+                                        return ``
+                                    }
+
+                                    return html`
+                                        <div class="d-flex align-items-center" style="color:${titleFontColor};">
+                                            <div class="d-flex align-items-center justify-content-center"
+                                                 style="width:44px;height: 44px;cursor: pointer;" onclick="${
+                                                    gvc.event(() => {
+                                                        if (supportMinus) {
+                                                            vm.quantity = `${parseInt(vm.quantity, 10) - 1}`;
+                                                            gvc.recreateView()
+                                                        }
+                                                    })
+                                            }">
+                                                <i class="fa-solid fa-minus"
+                                                   style="color:${(supportMinus) ? `#ff5353` : `#999`};"></i>
+                                            </div>
+                                            <select
+                                                    class="form-select custom-select mx-0 p-0 "
+                                                    style="border-radius: 5px; color: #575757; width: 100px;height:38px;background-image:none;${parseInt(vm.quantity,10) < 10 ? `text-indent: 43%;`:`text-indent: 40%;`}"
+                                                    onchange="${gvc.event((e) => {
+                                                        vm.quantity = e.value;
+                                                        gvc.notifyDataChange([ids.addCartButton, ids.stock_count]);
+                                                    })}"
+                                            >
+                                                ${gvc.map(
+                                                        [
+                                                            ...new Array(
+                                                                    (() => {
+                                                                        const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true));
+                                                                        if (!variant || variant.show_understocking === 'false') {
+                                                                            return 50;
+                                                                        }
+                                                                        return variant.stock < 50 ? variant.stock : 50;
+                                                                    })()
+                                                            ),
+                                                        ].map((item, index) => {
+                                                            return html`
+                                                                <option value="${index + 1}"
+                                                                        ${(`${vm.quantity}` === `${index + 1}`) ? `selected` : ``}>
+                                                                    ${index + 1}
+                                                                </option>`;
+                                                        })
+                                                )}
+                                            </select>
+                                            <div class="d-flex align-items-center justify-content-center"
+                                                 style="width:44px;height: 44px;cursor: pointer;" onclick="${
+                                                    gvc.event(() => {
+                                                        if (supportAdds) {
+                                                            vm.quantity = `${parseInt(vm.quantity, 10) + 1}`;
+                                                            gvc.recreateView()
+                                                        }
+                                                    })
+                                            }">
+                                                <i class="fa-solid fa-plus"
+                                                   style="color:${(supportAdds) ? `#ff5353` : `#999`};"></i>
+                                            </div>
+                                        </div>
+                                    `;
+                                },
+                                divCreate: {
+                                    class: `flex-column gap-2 d-flex `,
+                                },
+                            };
+                        }),)
+
+                        if (
+                            ((variant.stock < 1) &&
+                                `${variant.show_understocking}` !== 'false')
+                        ) {
+                            viewMap.push(`
+                                        <button class="no-stock w-100 " style="height:44px;" disabled>${Language.text('out_of_stock')}
+                                        </button>`);
+                        } else if (type === 'addCart') {
+                            viewMap.push(`<button
+                                            class="add-cart-imd-btn fw-bold fs-sm"
+                                            style=" flex: 1;height:44px;"
+                                            onclick="${gvc.event(() => {
+                                if (obj.only_select) {
+                                    obj.only_select({id: prod.id, specs: vm.specs});
+                                } else {
+                                    new ApiCart().addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                    gvc.glitter.recreateView('.js-cart-count');
+                                    gvc.glitter.recreateView('.shopping-cart');
+                                    PdClass.jumpAlert({
+                                        gvc,
+                                        text: html`${Language.text('add_to_cart_success')}`,
+                                        justify: 'top',
+                                        align: 'center',
+                                        width: 300,
+                                    });
+                                    ApiTrack.track({
+                                        event_name: "AddToCart",
+                                        custom_data: {
+                                            currency: "TWD",
+                                            value: variant.sale_price,
+                                            content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                            content_name: prod.title,
+                                            content_type: "product"
+                                        }
+                                    })
+                                    obj.callback && obj.callback();
                                 }
-                                return html`
-                                    <div
-                                        class="add-cart-imd-btn fw-bold h-100 "
-                                        style="width:calc(50% - 5px);cursor: pointer;"
-                                        onclick="${gvc.event(() => {
-                                            const buy_it = new ApiCart(ApiCart.buyItNow);
-                                            buy_it.clearCart();
-                                            buy_it.addToCart(`${prod.id}`, vm.specs, vm.quantity);
-                                            ApiCart.toCheckOutPage(ApiCart.buyItNow);
-                                            gvc.closeDialog();
-                                            ApiTrack.track({
-                                                event_name: "AddToCart",
-                                                custom_data: {
-                                                    currency: "TWD",
-                                                    value: variant.sale_price,
-                                                    content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
-                                                    content_name: prod.title,
-                                                    content_type: "product"
-                                                }
-                                            })
-                                        })}"
-                                    >
-                                        ${Language.text('buy_it_now')}
-                                    </div>
-                                    <div class="flex-fill"></div>
-                                    <button
-                                        class="add-cart-btn fw-bold "
-                                        style="width:calc(50% - 5px);"
-                                        onclick="${gvc.event(() => {
-                                            if (obj.only_select) {
-                                                obj.only_select({ id: prod.id, specs: vm.specs });
-                                            } else {
-                                                new ApiCart().addToCart(`${prod.id}`, vm.specs, vm.quantity);
-                                                gvc.glitter.recreateView('.js-cart-count');
-                                                gvc.glitter.recreateView('.shopping-cart');
-                                                PdClass.jumpAlert({
-                                                    gvc,
-                                                    text: html`${Language.text('add_to_cart_success')}`,
-                                                    justify: 'top',
-                                                    align: 'center',
-                                                    width: 300,
-                                                });
-                                                ApiTrack.track({
-                                                    event_name: "AddToCart",
-                                                    custom_data: {
-                                                        currency: "TWD",
-                                                        value: variant.sale_price,
-                                                        content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
-                                                        content_name: prod.title,
-                                                        content_type: "product"
-                                                    }
-                                                })
-                                                obj.callback && obj.callback();
-                                            }
-                                        })}"
+                                gvc.closeDialog()
+                            })}"
                                     >
                                         ${Language.text('add_to_cart')}
-                                    </button>
-                                `;
-                            },
-                            divCreate: {
-                                style: `height: 38px;width:${document.body.clientWidth > 800 ? `400px` : `100%`};`,
-                                class: `d-flex mt-3`,
-                            },
-                        }),
-                    ].join('')}
-                    <div class="d-flex py-3" style="color: #554233">
-                        <span
-                            class="d-flex nav-link p-0 add-wish-container"
-                            onclick="${gvc.event(() => {
-                                if (CheckInput.isEmpty(GlobalUser.token)) {
-                                    changePage('login', 'page', {});
-                                    return;
-                                }
-
-                                ApiShop.getWishList().then((getRes) => {
-                                    if (getRes.result && getRes.response.data) {
-                                        if (getRes.response.data.find((item: Product_l) => `${item.id}` === `${prod.id}`)) {
-                                            ApiShop.deleteWishList(`${prod.id}`).then(async () => {
-                                                PdClass.jumpAlert({
-                                                    gvc,
-                                                    text: '刪除成功',
-                                                    justify: 'top',
-                                                    align: 'center',
-                                                });
-                                                vm.wishStatus = false;
-                                                gvc.notifyDataChange(ids.wishStatus);
-                                            });
-                                        } else {
-                                            const variant = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true)) ?? prod.variants[0];
-                                            Ad.gtagEvent('add_to_wishlist', {
-                                                currency: 'TWD',
-                                                value: variant.sale_price,
-                                                items: [
-                                                    {
-                                                        item_id: prod.id,
-                                                        item_name: prod.title,
-                                                        item_variant: variant.spec.length > 0 ? variant.spec.join('-') : '',
-                                                        price: variant.sale_price,
-                                                    },
-                                                ],
-                                            });
-                                            Ad.fbqEvent('AddToWishlist', {
-                                                content_ids: [prod.id],
-                                                contents: [
-                                                    {
-                                                        id: prod.id,
-                                                        quantity: 1,
-                                                    },
-                                                ],
-                                                value: variant.sale_price,
-                                                currency: 'TWD',
-                                            });
-
-                                            ApiShop.postWishList(`${prod.id}`).then(async () => {
-                                                PdClass.jumpAlert({
-                                                    gvc,
-                                                    text: '新增成功',
-                                                    justify: 'top',
-                                                    align: 'center',
-                                                });
-                                                vm.wishStatus = true;
-                                                gvc.notifyDataChange(ids.wishStatus);
-                                            });
-                                        }
+                                    </button>`)
+                        } else if (type === 'buyNow') {
+                            viewMap.push(`<button
+                                            class="add-cart-imd-btn fw-bold fs-sm"
+                                            style="cursor: pointer; flex: 1;height:44px;"
+                                            onclick="${gvc.event(() => {
+                                const buy_it = new ApiCart(ApiCart.buyItNow);
+                                buy_it.clearCart();
+                                buy_it.addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                gvc.glitter.closeDiaLog()
+                                setTimeout(() => {
+                                    ApiCart.toCheckOutPage(ApiCart.buyItNow);
+                                }, 100)
+                                ApiTrack.track({
+                                    event_name: "AddToCart",
+                                    custom_data: {
+                                        currency: "TWD",
+                                        value: variant.sale_price,
+                                        content_ids: [variant.sku || `${prod.id}-${vm.specs.join('-')}`],
+                                        content_name: prod.title,
+                                        content_type: "product"
                                     }
-                                });
+                                })
                             })}"
-                        >
-                            ${gvc.bindView({
-                                bind: ids.wishStatus,
-                                view: () => {
-                                    if ((window as any).store_info.wishlist == false) {
-                                        return ``;
-                                    } else {
-                                        if (vm.wishStatus) {
-                                            return html` <i class="fa-solid fa-heart"></i>
-                                                <span>${Language.text('remove_to_wishlist')}</span>`;
-                                        } else {
-                                            return html` <i class="fa-regular fa-heart"></i>
-                                                <span>${Language.text('add_to_wishlist')}</span>`;
-                                        }
-                                    }
-                                },
-                            })}
-                        </span>
-                    </div>
-                </div>
-            </div>
-        `;
+                                    >
+                                        ${Language.text('buy_it_now')}
+                                    </button>`)
+                        }
+
+
+                        return viewMap.join('')
+                    },
+                    divCreate: {
+                        style: `${document.body.clientWidth > 800 ? `width:100%;height: 38px;` : `width:100%;z-index:10;`}gap:6px;`,
+                        class: `d-flex  ${(document.body.clientWidth < 800) ? `position-fixed bottom-0 start-0 px-2 py-2 pb-4 bg-white shadow border-top` : `mt-3`}  align-items-center`,
+                    },
+                })
+            ].join('')}
+<div class="position-absolute d-flex align-items-center justify-content-center " style="top:10px;right:10px;width:30px;height:30px;"
+onclick="${gvc.event(() => {
+                gvc.closeDialog()
+            })}">
+<i class="fa-solid fa-xmark text-black fs-5"></i>
+</div>
+</div>
+`
+        }, 'addProductPopUp', {
+            animation: Animation.popup,
+            dismiss: () => {
+                close_event()
+            }
+        })
     }
 
     static isPhone() {