Untitled

 avatar
unknown
plain_text
2 years ago
26 kB
6
Indexable
<tbody class="">
                     <tr class="cart-item">
                        <td>
                            <button><img src="./img/trash.svg" alt=""></button>
                        </td>

                        <td class="w-[50%]">
                            <div class="flex gap-3 items-start">
                                <img src="./img/check-1.png" alt="">
                                <!-- product -->
                                <div class="flex flex-col justify-start">
                                    <h1 class="font-primary font-medium wk-text18 text-mainblack">ORIJEN 渴望 6種魚乾狗糧</h1>
                                    <p class="font-primary  wk-text16">重量 :
     <span class="text-grey">4 kg</span>
    

</p>

                                    


<div class="promotion-popup">
    <div class="mt-5">

        <button id="purchasOptionsButton" class="open-modal-btn flex gap-4 px-[12px] py-[6px] items-center font-bold font-primary wk-text16 text-white bg-mainbrown border border-mainbrown rounded-[6px] hover:bg-white hover:text-mainbrown text-center">
            <p>特定產品優惠
                </p><div><svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path id="Vector" d="M13.8364 13.5122L10.3573 10.0332C11.3054 8.87364 11.7716 7.39406 11.6593 5.90048C11.5471 4.4069 10.8651 3.01358 9.75441 2.00874C8.64371 1.00389 7.18928 0.464388 5.69195 0.501826C4.19463 0.539264 2.76897 1.15078 1.70987 2.20987C0.650776 3.26897 0.0392636 4.69463 0.00182585 6.19195C-0.0356119 7.68928 0.503889 9.14371 1.50874 10.2544C2.51358 11.3651 3.9069 12.0471 5.40048 12.1593C6.89406 12.2716 8.37364 11.8054 9.53317 10.8573L13.0122 14.3364C13.1222 14.4426 13.2694 14.5013 13.4222 14.5C13.575 14.4987 13.7212 14.4374 13.8293 14.3293C13.9374 14.2212 13.9987 14.075 14 13.9222C14.0013 13.7694 13.9426 13.6222 13.8364 13.5122ZM5.8472 11.01C4.92498 11.01 4.02347 10.7366 3.25667 10.2242C2.48987 9.71185 1.89222 8.98361 1.5393 8.13159C1.18638 7.27957 1.09404 6.34203 1.27396 5.43753C1.45388 4.53302 1.89797 3.70219 2.55008 3.05008C3.20219 2.39797 4.03302 1.95388 4.93753 1.77396C5.84203 1.59404 6.77957 1.68638 7.63159 2.0393C8.48361 2.39222 9.21185 2.98987 9.72421 3.75667C10.2366 4.52347 10.51 5.42498 10.51 6.3472C10.5086 7.58343 10.0169 8.76864 9.14279 9.64279C8.26864 10.5169 7.08343 11.0086 5.8472 11.01Z" fill="#ffffff"></path>
                </svg></div>
        </button>
    </div>
    <!-- <button class="open-modal-btn">Open Modal</button> -->
    <div class="modal-overlay">
      <div class="modal">
        <span class="close-modal-btn">×</span>
        <h2>Enter your information</h2>
        <div class="flex">
            <div component-name="wk-relatedproductslide" class="pt-60">
    <h5 class="pb-4 border-b border-lightergrey font-primary font-medium wk-text24 text-mainblack">相關產品</h5>
    <div id="productrelated-slide" class="pt-5 slick-initialized slick-slider"><button class="slick-prev slick-arrow slick-disabled" aria-label="Previous" type="button" aria-disabled="true" style="">Previous</button>
        
            <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"><div class="pb-8 group product-cardcontainer slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item9.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                
                
                    <p class="new_appearance py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">新登場</p>
                

                
                    <p class="hot_product py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">熱賣產品</p>
                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item3.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-50%</p>
                
                
                

                
                    <p class="hot_product py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">熱賣產品</p>
                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item6.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-88%</p>
                
                
                
                    <p class="new_appearance py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">新登場</p>
                

                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item3.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-88%</p>
                
                
                
                    <p class="new_appearance py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">新登場</p>
                

                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item1.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-88%</p>
                
                
                
                    <p class="new_appearance py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">新登場</p>
                

                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide slick-active" data-slick-index="5" aria-hidden="false" tabindex="0" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item3.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-88%</p>
                
                
                

                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="0">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="0">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="0">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="0">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div><div class="pb-8 group product-cardcontainer slick-slide" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 0px;">
    <div class="relative h-[380px] md:h-auto">
        <img src="./img/pet-item1.png" alt="item image" class="w-full object-cover h-full md:h-auto">
        <div class="flex justify-between absolute top-1 left-0 w-full px-3 pt-2">
            <div>
                
                    <p class="bg-lightestred py-1 px-2 text-whitez text-center rounded-full wk-text12">-50%</p>
                
                
                
                    <p class="new_appearance py-1 px-2 text-whitez text-center rounded-full mt-1 wk-text12">新登場</p>
                

                
            </div>

            <div>
                <button type="button" class="hidden group-hover:block" onclick="openAddCart()" tabindex="-1">
                    <img src="./img/product-plusicon.svg" alt="plus icon" id="product-plusicon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleFavouriteIcon(this)" tabindex="-1">
                    <img src="./img/favourite-icon.svg" alt="favourite icon">
                </button>
                <button type="button" class="hidden group-hover:block pt-3" onclick="handleShareIcon()" tabindex="-1">
                    <img src="./img/share.svg" alt="share icon" id="product-shareicon">
                </button>
            </div>
        </div>
        <button type="button" class="btn-quickview w-full bg-lightestgreen text-whitez font-primary font-medium wk-text14 absolute left-0 bottom-0" onclick="openPreviewModal(this)" tabindex="-1">
            快速預覽
        </button>
        <img src="./img/loading.svg" alt="loading" class="absolute left-1/2 top-1/2 hidden" id="product-loading">
    </div>
    <div>
        <p class="font-primary font-medium text-mainblack wk-text20 productcard-title pt-4">ORIJEN 渴望 6種魚乾狗糧 2kg/6kg/11.4kg</p>
        <p class="font-primary font-medium text-mainbrown flex items-center wk-text20 pt-2">
            $296.00
            <span class="pl-3 text-mainlightgrey wk-text14 line-through">
                $368.00
            </span>
        </p>
    </div>
</div></div></div>
        
            
        
            
        
            
        
            
        
            
        
            
        
    <button class="slick-next slick-arrow" aria-label="Next" type="button" style="" aria-disabled="false">Next</button></div>
</div>
        </div>
       
        <button class="submit-btn">Submit</button>
      </div>
    </div>
</div>






                                    



                                        
                                    <p class="text-lightestred mt-5">買滿3件平均$72/件, 買滿6件平均$68/件, 買滿9件平均$64/件, 買滿12件平均$60/件!</p>
                                    
                                </div>


                            </div>

                        </td>

                        <td class="text-center"><span class="cart-item-price">$ 296.29</span></td>

                        <td class="text-center">
                            <div class="inline-block items-center cart-inputcontainer">
    <button type="button" data-action="decrease">-</button>
    <input type="text" min="1" value="1" disabled="" class="w-5 text-center input-cart-qty">
    <button type="button" data-action="increase">+</button>
</div>
<p class="text-lightestred text-14">再買多1件,再便宜3%
                        </p></td>

                        <td class="text-end">
                           <span class="cart-input-qty-total">$ 384.29</span>
                        </td>
                        </tr>

                        <!-- promotion item -->
                        


    
        <tr>
            <td>  
            </td>
            <td>
                <div class="flex gap-2 items-center">
                    <button>
                        <img src="./img/trash.svg" alt="">
                    </button>
                    <img src="./img/check-offer-1.png" class="w-[40px]" alt="">
                    <span class="bg-lightestyellow inline-block rounded-lg whitespace-nowrap px-[12px] py-1">換購</span>
                    <span class="text-maindarkgrey text-14">CANAGAN 原之選 吞拿魚伴大蝦配方貓罐頭</span>
                </div>
            </td>
            <td class="text-center">
                    <div class="inline-block text-center">
                        <p class="text-18 text-maindarkgrey"> $ 88
                        </p><p class="text-mainlightgrey line-through text-12">$ 120
                    </p></div>
            </td>
            <td></td>
            <td></td>
        </tr>
    
   


   

                         <tr class="cart-item">
                        <td>
                            <button><img src="./img/trash.svg" alt=""></button>
                        </td>

                        <td class="w-[50%]">
                            <div class="flex gap-3 items-start">
                                <img src="./img/check-2.png" alt="">
                                <!-- product -->
                                <div class="flex flex-col justify-start">
                                    <h1 class="font-primary font-medium wk-text18 text-mainblack">ORIJEN 渴望 6種魚乾狗糧(24罐/箱)</h1>
                                    <p class="font-primary  wk-text16">重量 :
    

</p>

                                    




                                    

    <div class="">
        
            <div class="text-lightgrey flex w-full gap-5">
                <span class="w-[50%]">吞拿</span>
                <span class="w-[50%]"> x 8</span>
            </div>
        
            <div class="text-lightgrey flex w-full gap-5">
                <span class="w-[50%]">吞拿配雞</span>
                <span class="w-[50%]"> x 2</span>
            </div>
        
            <div class="text-lightgrey flex w-full gap-5">
                <span class="w-[50%]">吞拿配蝦</span>
                <span class="w-[50%]"> x 4</span>
            </div>
        
            <div class="text-lightgrey flex w-full gap-5">
                <span class="w-[50%]">雞配鱸魚</span>
                <span class="w-[50%]"> x 10</span>
            </div>
        
    </div>
   



                                        
                                    <p class="text-lightestred mt-5"></p>
                                    
                                </div>


                            </div>

                        </td>

                        <td class="text-center"><span class="cart-item-price">$ 296.29</span></td>

                        <td class="text-center">
                            <div class="inline-block items-center cart-inputcontainer">
    <button type="button" data-action="decrease">-</button>
    <input type="text" min="1" value="0" class="w-5 text-center input-cart-qty">
    <button type="button" data-action="increase">+</button>
</div>
<p class="text-lightestred text-14">
                        </p></td>

                        <td class="text-end">
                           <span class="cart-input-qty-total">$ 384.29</span>
                        </td>
                        </tr>

                        <!-- promotion item -->
                        

   

                         <tr class="cart-item">
                        <td>
                            <button><img src="./img/trash.svg" alt=""></button>
                        </td>

                        <td class="w-[50%]">
                            <div class="flex gap-3 items-start">
                                <img src="./img/check-2.png" alt="">
                                <!-- product -->
                                <div class="flex flex-col justify-start">
                                    <h1 class="font-primary font-medium wk-text18 text-mainblack">ORIJEN 渴望 6種魚乾狗糧</h1>
                                    <p class="font-primary  wk-text16">重量 :
     <span class="text-grey">4 kg</span>
    

</p>

                                    




                                    



                                        
                                    <p class="text-lightestred mt-5">買滿3件平均$72/件, 買滿6件平均$68/件, 買滿9件平均$64/件, 買滿12件平均$60/件!</p>
                                    
                                </div>


                            </div>

                        </td>

                        <td class="text-center"><span class="cart-item-price">$ 296.29</span></td>

                        <td class="text-center">
                            <div class="inline-block items-center cart-inputcontainer">
    <button type="button" data-action="decrease">-</button>
    <input type="text" min="1" value="1" disabled="" class="w-5 text-center input-cart-qty">
    <button type="button" data-action="increase">+</button>
</div>
<p class="text-lightestred text-14">再買多1件,再便宜3%
                        </p></td>

                        <td class="text-end">
                           <span class="cart-input-qty-total">$ 384.29</span>
                        </td>
                        </tr>

                        <!-- promotion item -->
                        

   

                        

                </tbody>
Editor is loading...
Leave a Comment