ts-glitter 18.2.6 → 18.2.8

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

@@ -17,6 +17,8 @@ import { Language } from '../../glitter-base/global/language.js';
 import { Currency } from '../../glitter-base/global/currency.js';
 import { ProductInitial } from '../../public-models/product.js';
 import { ApiTrack } from "../../glitter-base/route/api-track.js";
+import { Animation } from "../../glitterBundle/module/Animation.js";
+import { ShareDialog } from "../../glitterBundle/dialog/ShareDialog.js";
 const html = String.raw;
 const css = String.raw;
 export class PdClass {
@@ -69,7 +71,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}`);
@@ -155,6 +158,7 @@ export class PdClass {
             }
 
             .add-cart-imd-btn {
+                border: none;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
@@ -217,37 +221,42 @@ export class PdClass {
     }
     static addCartAction(obj) {
         obj.gvc.glitter.innerDialog((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(() => {
+            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">
-                        <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({
+                            ></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>
+                            <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) {
         const isPhone = document.body.clientWidth < 768;
@@ -259,8 +268,9 @@ 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[`preview_image_${Language.getLanguage()}`] || variant.preview_image;
             if (variant.preview_image && !obj.prod.preview_image.includes(variant.preview_image)) {
@@ -283,13 +293,15 @@ 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>`;
+                        return html `
+                                                <div class="swiper-slide swiper-slide-def">
+                                                    <img src="${image}" alt="${obj.prod.title}-${index}"/>
+                                                </div>`;
                     })
                         .join('')}
                             </div>
@@ -297,17 +309,22 @@ export class PdClass {
                             <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
+                        ? 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>`;
+                            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>`
+                                        </div>
+                                    </div>`
                         : ``}
                     `;
                 },
@@ -387,6 +404,7 @@ export class PdClass {
         });
     }
     static selectSpec(obj) {
+        var _a, _b;
         const gvc = obj.gvc;
         const glitter = gvc.glitter;
         const titleFontColor = obj.titleFontColor;
@@ -398,6 +416,7 @@ export class PdClass {
             addCartButton: glitter.getUUID(),
             stock_count: glitter.getUUID(),
             qty_count: glitter.getUUID(),
+            ids_spec: glitter.getUUID()
         };
         obj.gvc.addStyle(`
             .insignia {
@@ -419,12 +438,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, type, subData) => { };
+        let changePage = (index, type, subData) => {
+        };
         gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
             changePage = cl.changePage;
         });
@@ -444,230 +463,436 @@ export class PdClass {
                     return `免運費活動`;
             }
         }
+        function refreshAll() {
+            gvc.notifyDataChange([ids.price, ids.addCartButton, ids.stock_count, ids.qty_count, ids.ids_spec]);
+        }
+        const solidButtonBgr = (_a = glitter.share.globalValue['theme_color.0.solid-button-bg']) !== null && _a !== void 0 ? _a : '#dddddd';
+        const solidButtonText = (_b = glitter.share.globalValue['theme_color.0.solid-button-text']) !== null && _b !== void 0 ? _b : '#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
+            ? 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>
-                              `;
+                                            <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>`
+                        </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.language[Language.getLanguage()]
-            .map((tag) => {
-            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) => {
+                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: () => {
-                var _a, _b;
-                const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
-                if (!v)
-                    return '錯誤';
-                const comparePrice = parseInt(`${(_a = v.compare_price) !== null && _a !== void 0 ? _a : 0}`, 10);
-                const originPrice = parseInt(`${(_b = v.origin_price) !== null && _b !== void 0 ? _b : 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: ${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>
+                bind: ids.price,
+                view: () => {
+                    var _a, _b;
+                    const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
+                    if (!v)
+                        return '錯誤';
+                    const comparePrice = parseInt(`${(_a = v.compare_price) !== null && _a !== void 0 ? _a : 0}`, 10);
+                    const originPrice = parseInt(`${(_b = v.origin_price) !== null && _b !== void 0 ? _b : 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>
                                     <h5 class="mb-2" style="color: ${titleFontColor};font-size:14px;">
                                         ${(spec.language_title && spec.language_title[Language.getLanguage()]) || spec.title}
                                     </h5>
                                     <div class="d-flex gap-2 flex-wrap">
                                         ${gvc.map(spec.option.map((opt) => {
-                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) => {
-                        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 === null || v === void 0 ? void 0 : 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]);
-                })}"
-                                                >
+                                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) => {
+                                        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 === null || v === void 0 ? void 0 : 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[Language.getLanguage()]) || opt.title}</span
+                                                    >${(opt.language_title && opt.language_title[Language.getLanguage()]) || opt.title}</span
                                                     >
-                                                </div>`;
-            }))}
+                                                        </div>`;
+                            }))}
                                     </div>
                                 </div>
                                 <div class="mt-3"></div>`;
-        }))}
-                    ${[
-            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') {
-                                    return 50;
-                                }
-                                return variant.stock < 50 ? variant.stock : 50;
-                            })()),
-                        ].map((item, index) => {
-                            return html ` <option value="${index + 1}">${index + 1}</option>`;
-                        }))}
-                                            </select>
-                                            ${prod.unit[Language.getLanguage()] || Language.text('pieces')}
-                                        </div>
-                                    `;
+                        }).join('');
                     },
                     divCreate: {
-                        class: `flex-column gap-2  ${obj.with_qty === false ? `d-none` : `d-flex`} `,
-                    },
+                        class: `w-100`
+                    }
                 };
-            }),
-            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>
-                                                `;
-                                }
+            })}
+                    ${[
+                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 '';
-                            })(),
-                        ].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 ((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>`;
-                    }
-                    if (obj.is_gift) {
-                        return `<button
-                                        class="add-cart-imd-btn fw-bold h-100"
-                                        style="width:calc(100% - 10px);cursor: pointer;"
+                            }
+                            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') {
+                                        return 50;
+                                    }
+                                    return variant.stock < 50 ? variant.stock : 50;
+                                })()),
+                            ].map((item, index) => {
+                                return html `
+                                                        <option value="${index + 1}">${index + 1}</option>`;
+                            }))}
+                                    </select>
+                                    ${prod.unit[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,
+                                },
+                            ],
+                        });
+                        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>`;
+                        }
+                        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.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}`
+                                    });
+                                });
+                            })}">
+                                        <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.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) => {
+                                                            var _a;
+                                                            if (getRes.result && getRes.response.data) {
+                                                                if (getRes.response.data.find((item) => `${item.id}` === `${prod.id}`)) {
+                                                                    ApiShop.deleteWishList(`${prod.id}`).then(() => __awaiter(this, void 0, void 0, function* () {
+                                                                        PdClass.jumpAlert({
+                                                                            gvc,
+                                                                            text: '刪除成功',
+                                                                            justify: 'top',
+                                                                            align: 'center',
+                                                                        });
+                                                                        vm.wishStatus = false;
+                                                                        gvc.notifyDataChange(ids.wishStatus);
+                                                                        dialog.dataLoading({ visible: false });
+                                                                    }));
+                                                                }
+                                                                else {
+                                                                    const variant = (_a = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true))) !== null && _a !== void 0 ? _a : 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(() => __awaiter(this, void 0, void 0, function* () {
+                                                                        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(ApiCart.checkoutCart).addToCart(`${prod.id}`, vm.specs, vm.quantity);
+                                new ApiCart().addToCart(`${prod.id}`, vm.specs, vm.quantity);
                                 gvc.glitter.recreateView('.js-cart-count');
                                 gvc.glitter.recreateView('.shopping-cart');
                                 PdClass.jumpAlert({
@@ -691,52 +916,23 @@ export class PdClass {
                             }
                         })}"
                                     >
-                                        ${Language.text('confirm_select')}
-                                    </button>`;
-                    }
-                    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('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;
                             }
-                        });
-                    })}"
-                                    >
-                                        ${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,
-                            });
+                            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: {
@@ -747,46 +943,202 @@ export class PdClass {
                                     content_type: "product"
                                 }
                             });
-                            obj.callback && obj.callback();
-                        }
-                    })}"
+                        })}"
                                     >
-                                        ${Language.text('add_to_cart')}
-                                    </button>
-                                `;
+                                        ${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>
+        `;
+    }
+    static addProductPopUp(obj, type, close_event) {
+        var _a, _b;
+        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, type, subData) => {
+        };
+        gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
+            changePage = cl.changePage;
+        });
+        const language_data = prod.language_data && prod.language_data[Language.getLanguage()];
+        ProductInitial.initial(prod);
+        const solidButtonBgr = (_a = glitter.share.globalValue['theme_color.0.solid-button-bg']) !== null && _a !== void 0 ? _a : '#dddddd';
+        const solidButtonText = (_b = glitter.share.globalValue['theme_color.0.solid-button-text']) !== null && _b !== void 0 ? _b : '#000000';
+        obj.gvc.glitter.innerDialog((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 === null || variant === void 0 ? void 0 : 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: () => {
+                    var _a, _b;
+                    const v = prod.variants.find((variant) => PdClass.ObjCompare(variant.spec, vm.specs, true));
+                    if (!v)
+                        return '錯誤';
+                    const comparePrice = parseInt(`${(_a = v.compare_price) !== null && _a !== void 0 ? _a : 0}`, 10);
+                    const originPrice = parseInt(`${(_b = v.origin_price) !== null && _b !== void 0 ? _b : 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: `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) => {
-                var _a;
-                if (getRes.result && getRes.response.data) {
-                    if (getRes.response.data.find((item) => `${item.id}` === `${prod.id}`)) {
-                        ApiShop.deleteWishList(`${prod.id}`).then(() => __awaiter(this, void 0, void 0, function* () {
-                            PdClass.jumpAlert({
-                                gvc,
-                                text: '刪除成功',
-                                justify: 'top',
-                                align: 'center',
+                    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[Language.getLanguage()]) || spec.title}
+                            </h5>
+                            <div class="d-flex gap-2 flex-wrap">
+                                ${gvc.map(spec.option.map((opt) => {
+                        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) => {
+                                option.classList.remove('selected-option');
                             });
-                            vm.wishStatus = false;
-                            gvc.notifyDataChange(ids.wishStatus);
-                        }));
-                    }
-                    else {
-                        const variant = (_a = prod.variants.find((item) => PdClass.ObjCompare(item.spec, vm.specs, true))) !== null && _a !== void 0 ? _a : prod.variants[0];
-                        Ad.gtagEvent('add_to_wishlist', {
+                            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 === null || v === void 0 ? void 0 : 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[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: [
@@ -798,55 +1150,216 @@ export class PdClass {
                                 },
                             ],
                         });
-                        Ad.fbqEvent('AddToWishlist', {
-                            content_ids: [prod.id],
-                            contents: [
-                                {
-                                    id: prod.id,
-                                    quantity: 1,
-                                },
-                            ],
+                        Ad.fbqEvent('ViewContent', {
+                            content_ids: [variant.sku || prod.id],
+                            content_type: 'product',
                             value: variant.sale_price,
                             currency: 'TWD',
                         });
-                        ApiShop.postWishList(`${prod.id}`).then(() => __awaiter(this, void 0, void 0, function* () {
-                            PdClass.jumpAlert({
-                                gvc,
-                                text: '新增成功',
-                                justify: 'top',
-                                align: 'center',
-                            });
-                            vm.wishStatus = true;
-                            gvc.notifyDataChange(ids.wishStatus);
+                        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();
+                                }
+                            })}"
+                                    >
+                                        ${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 `,
+                                },
+                            };
                         }));
-                    }
-                }
-            });
-        })}"
-                        >
-                            ${gvc.bindView({
-            bind: ids.wishStatus,
-            view: () => {
-                if (window.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>
-        `;
+                        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();
+                                }
+                                gvc.closeDialog();
+                            })}"
+                                    >
+                                        ${Language.text('add_to_cart')}
+                                    </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"
+                                    }
+                                });
+                            })}"
+                                    >
+                                        ${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() {
         return document.body.clientWidth < 768;