|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /proc/self/root/var/www/kamariallee.com/public_html/application/views/ |
Upload File : |
<div class=" w-full relative">
<!-- hero -->
<div class="mb-0">
<div class="px-8 md:px-0 container mx-auto my-2">
<div class="py-4">
<a href="<?= base_url() . 'category/collection'; ?>" class="font-custom text-secondary">Customize /</a>
<a href="#" class="font-custom text-primary"> Customize Detail</a>
</div>
</div>
<!-- mobile carousel -->
<div id="default-carousel" class="relative w-full block md:hidden" data-carousel="slide">
<!-- Carousel wrapper -->
<div class="relative">
<div class="relative h-96b md:h-[50vh] overflow-hidden">
<?php if (!empty($product['image1'])) : ?>
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
</div>
<?php endif; ?>
<?php if (!empty($product['image2'])) : ?>
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="<?= base_url() . 'uploads/product/' . $product['image2']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
</div>
<?php endif; ?>
<?php if (!empty($product['image3'])) : ?>
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="<?= base_url() . 'uploads/product/' . $product['image3']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
</div>
<?php endif; ?>
<?php if (!empty($product['image4'])) : ?>
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="<?= base_url() . 'uploads/product/' . $product['image4']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
</div>
<?php endif; ?>
<?php if (!empty($product['image5'])) : ?>
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="<?= base_url() . 'uploads/product/' . $product['image5']; ?>" class="xs:h-96b md:h-[50vh] w-full xs:object-cover">
</div>
<?php endif; ?>
</div>
<div class="relative flex space-x-3 top-5 justify-center mt-[-60px]" style="z-index: 999;">
<?php if (!empty($product['image1'])) : ?>
<button type="button" class="w-10 h-2" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<?php endif; ?>
<?php if (!empty($product['image2'])) : ?>
<button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<?php endif; ?>
<?php if (!empty($product['image3'])) : ?>
<button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<?php endif; ?>
<?php if (!empty($product['image4'])) : ?>
<button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<?php endif; ?>
<?php if (!empty($product['image5'])) : ?>
<button type="button" class="w-10 h-2" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
<?php endif; ?>
</div>
</div>
</div>
<div class="px-8 md:px-0 container mx-auto my-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Kolom 1 -->
<div class="text-center md:pr-4">
<div class="hidden md:block">
<?php if (!empty($product['image1'])) : ?>
<img src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" class="xs:h-96b md:h-[800px] w-full xs:object-cover" id="mainImage">
<?php endif; ?>
</div>
</div>
<!-- Kolom 2 (2 kolom tumpuk) -->
<div class="flex md:space-x-4 border-l-0 md:border-l md:border-l-primary/90 xs:pl-0 md:pl-4 xs:mt-24 md:mt-0">
<div class="hidden md:block mx-4">
<?php if (!empty($product['image1'])) : ?>
<img id="thumbnail1" src="<?= base_url() . 'uploads/product/' . $product['image1']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
<?php endif; ?>
<?php if (!empty($product['image2'])) : ?>
<img id="thumbnail2" src="<?= base_url() . 'uploads/product/' . $product['image2']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
<?php endif; ?>
<?php if (!empty($product['image3'])) : ?>
<img id="thumbnail3" src="<?= base_url() . 'uploads/product/' . $product['image3']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
<?php endif; ?>
<?php if (!empty($product['image4'])) : ?>
<img id="thumbnail4" src="<?= base_url() . 'uploads/product/' . $product['image4']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
<?php endif; ?>
<?php if (!empty($product['image5'])) : ?>
<img id="thumbnail5" src="<?= base_url() . 'uploads/product/' . $product['image5']; ?>" alt="" class="h-20 mb-2 cursor-pointer" />
<?php endif; ?>
</div>
<div class="w-full" id="productDetailDesc" style="margin-top:3rem">
<h1 class="font-custom text-primary class text-3xl"><?= strtoupper($product['title']); ?></h1>
<div id="pricing_block">
<?php if (isset($product_detail['price'])) : ?>
<?php if ($product_detail['discounted_price'] != 0) : ?>
<p class="font-custom text-primary text-lg">Rp <?= number_format($product_detail['discounted_price']); ?> <span style="font-size:15px"><span style="text-decoration: line-through">Rp <?= number_format($product_detail['price']); ?></span></span></p>
<?php else : ?>
<p class="font-custom text-primary text-lg">Rp <?= number_format($product_detail['price']); ?></p>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- descriptions -->
<div class="mb-4">
<div class="flex items-center justify-between py-2 cursor-pointer border-b border-b-primary" onclick="toggleAccordion('accordion_desc', 'arrow1')">
<span class="text-lg text-primary font-custom">Descriptions</span>
<svg class="w-6 h-6 transition-transform transform" id="arrow1" fill="none" stroke="#514A45" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion_desc" class="hidden mt-2">
<div class="font-custom text-primary text-left">
<?= ucfirst($product['description']); ?>
</div>
</div>
</div>
<!-- Detail -->
<div class="mb-4">
<div class="flex items-center justify-between py-2 cursor-pointer border-b border-b-primary" onclick="toggleAccordion('accordion_detail', 'arrow2')">
<span class="text-lg text-primary font-custom">Details</span>
<svg class="w-6 h-6 transition-transform transform" id="arrow2" fill="none" stroke="#514A45" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div id="accordion_detail" class="hidden mt-2">
<div class="font-custom text-primary text-left">
<?= ucfirst($product['long_description']); ?>
</div>
</div>
</div>
<!-- STEP 1 COLOR & SIZE -->
<div id="colorSize" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Color & Size</span>
<span class="italic font-tinosItalic font-light text-xs">(step 1 of 5)</span>
</div>
<div id="colorSizeColor" class="grid grid-cols-2 gap-4">
<div class="mb-4">
<div id="accordion_color" class="mt-2">
<div style="width:200px">
<?php foreach ($available_colors as $color) : ?>
<a class="colorIcon" data-colortext="<?= $color['color_text']; ?>" href="#" title="<?= $color['color_text']; ?>">
<div class="color-icon" style="background:<?= $color['color_code']; ?>;"></div>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<div id="colorSizeSize">
<div class="flex justify-between items-center">
<p>Size</p>
<div id="sizing_block" class=" flex items-center space-x-2">
<?php foreach ($all_sizes as $size) : ?>
<?php if (in_array($size, $available_sizes)) : ?>
<a href="#" class="sizeIcon" data-size="<?= $size; ?>">
<p class="p-2 font-custom border
<?php if ($size == $initial_size) : ?>
border-primary
<?php else : ?>
border-secondary
<?php endif; ?>
mt-2 w-6 h-6 flex justify-center items-center chosenSize"><span><?= $size; ?></span></p>
</a>
<?php else : ?>
<div class="w-6 h-6 relative overflow-hidden bg-transparent mt-2">
<div class="w-10 h-10 absolute top-0 bottom-0 left-0 right-2 transform -rotate-45 origin-top-left border border-secondary">
</div>
<p class="font-custom border border-secondary w-6 h-6 flex justify-center items-center"><span><?= $size; ?></span></p>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<a href="<?= base_url() . 'uploads/size-chart.jpg'; ?>" data-lightbox="size-chart"><small class="text-secondary text-xs font-tinosItalic italic float-right mt-1"><u>Size Guide</u></small></a>
</div>
<div style="clear:both"></div>
<div id="colorSizeSummary" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Color & Size</span>
</div>
<div id="colorSizeSummary2" class=" mt-2 flex items-center justify-between space-x-2">
<p id="colorSizeText" class="font-custom text-primary text-sm italic"></p>
<a id="editColorSize" href="#">
<span class="italic font-tinosItalic font-light text-sm text-secondary">(edit)</span>
</a>
</div>
<!-- STEP 2 HEELS TYPE -->
<div id="heelsType" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Choose your Heels Type</span>
<span class="italic font-tinosItalic font-light text-xs">(step 2 of 5)</span>
</div>
<div id="heelsTypeOption" class="grid grid-cols-2 gap-4">
<div class="mb-4">
<div id="accordion_heelsType" class="mt-2" style="display: flex; ">
<?php foreach ($heels_types as $heeltype) : ?>
<div style="text-align:center; margin-right:10px;">
<a class="heelsTypeIcon" data-heelstypeaddprice="<?= $heeltype['additional_price']; ?>" data-heelstypeid="<?= $heeltype['id_attribute']; ?>" data-heelstype="<?= $heeltype['product_attributes']; ?>" href="#" title="<?= $heeltype['product_attributes']; ?>">
<img class="heelsTypeIconImg" style="width:60px; border-radius:50%;" src="<?= base_url() . 'uploads/sizes/' . $heeltype['image']; ?>" alt="<?= $heeltype['product_attributes']; ?>" />
<br><span style="font-size:11px; position:relative; bottom:25px;"><?= $heeltype['product_attributes']; ?></span>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="heelsTypeSummary" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Choose your Heels Type</span>
</div>
<div id="heelsTypeSummary2" class=" mt-2 flex items-center justify-between space-x-2">
<p id="heelsTypeText" class="font-custom text-primary text-sm italic"></p>
<a id="editHeelsType" href="#">
<span class="italic font-tinosItalic font-light text-sm text-secondary">(edit)</span>
</a>
</div>
<!-- STEP 3 HEELS HEIGHT -->
<div id="heelsHeight" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Choose your Heels Height</span>
<span class="italic font-tinosItalic font-light text-xs">(step 3 of 5)</span>
</div>
<div id="heelsHeightOption" class="grid grid-cols-2 gap-4">
<div class="mb-4">
<div id="accordion_heelsHeight" class="mt-2" style="display: flex; ">
<?php foreach ($heels_height as $heelheight) : ?>
<div style="text-align:center; margin-right:10px;">
<a class="heelsHeightIcon" data-heelsheightaddprice="<?= $heelheight['additional_price']; ?>" data-heelsheightid="<?= $heelheight['id_attribute']; ?>" data-heelsheight="<?= $heelheight['product_attributes']; ?>" href="#" title="<?= $heelheight['product_attributes']; ?>">
<img class="heelsHeightIconImg" style="width:60px; border-radius:50%" src="<?= base_url() . 'uploads/sizes/' . $heelheight['image']; ?>" alt="<?= $heelheight['product_attributes']; ?>" />
<br><span style="font-size:11px; position:relative; bottom:25px;"><?= $heelheight['product_attributes']; ?></span>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="heelsHeightSummary" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Choose your Heels Height</span>
</div>
<div id="heelsHeightSummary2" class=" mt-2 flex items-center justify-between space-x-2">
<p id="heelsHeightText" class="font-custom text-primary text-sm italic"></p>
<a id="editHeelsHeight" href="#">
<span class="italic font-tinosItalic font-light text-sm text-secondary">(edit)</span>
</a>
</div>
<!-- STEP 4 PLATFORM STYLE & HEIGHT -->
<div id="platform" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Platform Option</span>
<span class="italic font-tinosItalic font-light text-xs">(step 4 of 5)</span>
</div>
<div id="platformSelectOption" class="mt-2 flex items-center space-x-2">
<div class="w-full flex items-center justify-between">
<div class="flex items-start">
<input type="radio" name="platform_option" value="option1" class="hidden">
<label id="radioWithoutPlatform" for="option2" class="flex items-center cursor-pointer">
<span class="w-6 h-6 border border-primary bg-white rounded-full mr-2"></span>
</label>
<p class="font-custom text-primary ml-2">Without Platform</p>
</div>
<div class="flex items-start">
<input type="radio" name="platform_option" value="option2" class="hidden">
<label id="radioWithPlatform" for="option2" class="flex items-center cursor-pointer">
<span class="w-6 h-6 border border-primary bg-white rounded-full mr-2"></span>
</label>
<p class="font-custom text-primary ml-2">With Platform</p>
</div>
</div>
</div>
<div id="platformDetails" style="display:flex; justify-content:space-between">
<div id="platformStyleOption">
<p class="font-custom text-primary mt-2">Style</p>
<div class="mb-4">
<div id="accordion_platformStyle" class="mt-2" style="display: flex; ">
<?php foreach ($platform_style as $platformstyle) : ?>
<div style="text-align:center; margin-right:10px;">
<a class="platformStyleIcon" data-platformstyleaddprice="<?= $platformstyle['additional_price']; ?>" data-platformstyleid="<?= $platformstyle['id_attribute']; ?>" data-platformstyle="<?= $platformstyle['product_attributes']; ?>" href="#" title="<?= $platformstyle['product_attributes']; ?>">
<img class="platformStyleIconImg" style="width:50px; border-radius:50%" src="<?= base_url() . 'uploads/sizes/' . $platformstyle['image']; ?>" alt="<?= $platformstyle['product_attributes']; ?>" />
<br><span style="font-size:11px; text-align:center; position:relative; bottom:25px;"><?= $platformstyle['product_attributes']; ?></span>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div id="platformHeightOption">
<p class="font-custom text-primary mt-2">Height</p>
<div class="mb-4">
<div id="accordion_platformHeight" class="mt-2" style="display: flex; ">
<?php foreach ($platform_height as $platformheight) : ?>
<div style="text-align:center; margin-right:10px;">
<a class="platformHeightIcon" data-platformheightaddprice="<?= $platformheight['additional_price']; ?>" data-platformheightid="<?= $platformheight['id_attribute']; ?>" data-platformheight="<?= $platformheight['product_attributes']; ?>" href="#" title="<?= $platformheight['product_attributes']; ?>">
<img class="platformHeightIconImg" style="width:50px; border-radius:50%" src="<?= base_url() . 'uploads/sizes/' . $platformheight['image']; ?>" alt="<?= $platformheight['product_attributes']; ?>" />
<br><span style="font-size:11px; text-align:center; position:relative; bottom:25px;"><?= $platformheight['product_attributes']; ?></span>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="platformSummary" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Platform Option</span>
</div>
<div id="platformSummary2" class=" mt-2 flex items-center justify-between space-x-2">
<p id="withoutPlatformText" class="font-custom text-primary text-sm italic"></p>
<p id="platformStyleText" class="font-custom text-primary text-sm italic"></p>
<p id="platformHeightText" class="font-custom text-primary text-sm italic"></p>
<a id="editPlatform" href="#">
<span class="italic font-tinosItalic font-light text-sm text-secondary">(edit)</span>
</a>
</div>
<!-- STEP 5 INITIAL ENGRAVED -->
<div id="initialEngrave" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Engrave Option</span>
<span class="italic font-tinosItalic font-light text-xs">(step 5 of 5)</span>
</div>
<div id="initialEngraveOption">
<div class="mt-2 flex items-center space-x-2">
<div class="w-full flex items-center justify-between">
<div class="flex items-start">
<input type="radio" name="radio_option" value="option1" class="hidden">
<label id="initialLetters1" for="option2" class="flex items-center cursor-pointer">
<span class="w-6 h-6 border border-primary bg-white rounded-full mr-2"></span>
</label>
<p class="font-custom text-primary ml-2">Without Engrave</p>
</div>
<div class="flex items-start">
<input type="radio" name="radio_option" value="option2" class="hidden">
<label id="initialLetters2" for="option2" class="flex items-center cursor-pointer">
<span class="w-6 h-6 border border-primary bg-white rounded-full mr-2"></span>
</label>
<p class="font-custom text-primary ml-2">With Engrave</p>
</div>
</div>
</div>
<input id="initialLettersInput" type="text" placeholder="Type in the engraved content" class="w-full italic font-tinosItalic mt-8">
<div id="initialLettersImages">
<p class="font-custom text-primary mt-3 mb-2">Choose Design</p>
<div style="display:flex; justify-content:space-between;">
<?php if($initialname_images['image']) : ?>
<img id="initialLetterImg1" style="width:30%; display:inline; cursor:pointer" src="<?= base_url() . 'uploads/sizes/' . $initialname_images['image'] ?>" alt="" />
<?php endif; ?>
<?php if($initialname_images['image2']) : ?>
<img id="initialLetterImg2" style="width:30%; display:inline; cursor:pointer" src="<?= base_url() . 'uploads/sizes/' . $initialname_images['image2'] ?>" alt="" />
<?php endif; ?>
<?php if($initialname_images['image3']) : ?>
<img id="initialLetterImg3" style="width:30%; display:inline; cursor:pointer" src="<?= base_url() . 'uploads/sizes/' . $initialname_images['image3'] ?>" alt="" />
<?php endif; ?>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="initialEngraveSummary" class="flex items-center justify-between py-2 cursor-pointer border-b border-b-secondary" onclick="toggleAccordion('accordion_detail')">
<span class="text-lg text-primary font-custom">Engrave Option</span>
</div>
<div id="initialEngraveSummary2" class=" mt-2 flex items-center justify-between space-x-2">
<p class="font-custom text-primary text-sm">Engrave Option</p>
<a href="#">
<span class="italic font-tinosItalic font-light text-sm text-secondary">(edit)</span>
</a>
</div>
<!-- NEXT BUTTON 1-->
<a id="nextButtonHeelsType" href="#">
<button class="flex justify-center items-center bg-secondary p-2 mt-4 w-28">
<p class="font-custom text-white">Next <i class="fas fa-chevron-right text-xs"></i></p>
</button>
</a>
<!-- NEXT BUTTON 2-->
<a id="nextButtonHeelsHeight" href="#">
<button class="flex justify-center items-center bg-secondary p-2 mt-4 w-28">
<p class="font-custom text-white">Next <i class="fas fa-chevron-right text-xs"></i></p>
</button>
</a>
<!-- NEXT BUTTON 3-->
<a id="nextButtonPlatformHeight" href="#">
<button class="flex justify-center items-center bg-secondary p-2 mt-4 w-28">
<p class="font-custom text-white">Next <i class="fas fa-chevron-right text-xs"></i></p>
</button>
</a>
<!-- NEXT BUTTON 4-->
<a id="nextButtonInitialEngraved" href="#">
<button class="flex justify-center items-center bg-secondary p-2 mt-4 w-28">
<p class="font-custom text-white">Next <i class="fas fa-chevron-right text-xs"></i></p>
</button>
</a>
<!-- GREETING CARD -->
<div class=" mt-8" id="greetingCardBlock">
<div class="flex justify-between items-center">
<p class="font-custom">+<?= number_format($greetingcard_price, 0, ',', '.'); ?> IDR for greeting card</p>
<div id="greetingcardBtn" class="w-3 h-3 rounded-full mr-1" style="border:1px solid rgb(194 181 150); cursor:pointer"></div>
</div>
<textarea id="greetingcardText" name="" cols="30" rows="3" placeholder="Max. 50 words" class="italic font-tinosItalic bg-transparent border border-primary w-full displayOff"></textarea>
</div>
<!-- ADD TO BAG -->
<button id="addToCart" class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
<p class="font-custom text-white">Add to Bag</p>
</button>
<p id="errorMessage2" class="font-custom"></p>
</div>
</div>
</div>
<!-- recomendation -->
<div class="mt-8">
<p class="text-secondary font-custom">YOU MAY ALSO LIKE</p>
<div class="grid grid-cols-3 gap-4 mt-4">
<?php foreach ($similar_products as $similar) : ?>
<?php if(!empty($similar['image1'])) : ?>
<div>
<a href="<?= base_url() . 'productcustom/' . strtolower(remove_accents($similar['alias'])); ?>">
<img src="<?= base_url() . 'uploads/product/' . $similar['image1']; ?>" class="xs:w-40 md:h-100 w-full">
</a>
</div>
<?php endif ?>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- sidebar -->
<div id="sidebar" class="xs:w-full md:w-1/4 h-full right-0 transition-transform duration-300 -mt-16 hidden" style="z-index: 999; overflow-y:scroll">
<div class="flex justify-center">
<div class="my-4 relative">
<img src="<?= base_url() . 'uploads/chart.svg'; ?>" alt="">
<div class="w-4 h-4 flex justify-center items-center bg-secondary rounded-full absolute bottom-0">
<span class="text-white text-xs">2</span>
</div>
</div>
<div>
<i id="cartCloseIcon" class="fas fa-times absolute left-8 text-secondary cursor-pointer block md:hidden" style="top:2.5rem"></i>
</div>
</div>
<div class="bg-primary/90 h-full px-8">
<p id="cartMessage" class="font-custom text-white text-center pt-4"></p>
<div class="grid grid-cols-2 gap-2 mt-4">
<div id="cartImage"></div>
<div class="w-full">
<h1 class="font-custom text-white" id="cartTitle"></h1>
<p class="font-custom text-white" id="cartPrice"></p>
<h1 class="font-custom text-white" id="cartGreeting"></h1>
<div class="border-b-2 border-b-secondary my-4"></div>
<div class="flex justify-between items-center ">
<p class="font-custom text-white" id="cartColor"></p>
<p class="font-custom text-white" id="cartSize"></p>
</div>
<div id="cartQtyDelete" class="flex justify-between items-center">
<div class="flex items-center" style="display:none">
<button id="buttonRemove" class="text-white font-custom" style="font-size:30px">-</button>
<span id="qtyInput" class="px-2 text-white font-custom" style="border-bottom:1px solid white">1</span>
<button id="buttonAdd" class="text-white font-custom">+</button>
</div>
<p class="font-custom text-secondary italic font-tinosItalic" id="removeFromCart" style="cursor:pointer">Delete</p>
</div>
<p id="errorMessage" class="font-custom text-white"></p>
</div>
<h1 class="font-custom text-white" id="cartHeelsType">Heels Type:</h1>
<p class="font-custom text-white" id="cartHeelsTypePrice"></p>
<h1 class="font-custom text-white" id="cartHeelsHeight">Heels Height:</h1>
<p class="font-custom text-white" id="cartHeelsHeightPrice"></p>
<h1 class="font-custom text-white" id="cartPlatformStyle">Platform Style:</h1>
<p class="font-custom text-white" id="cartPlatformStylePrice"></p>
<h1 class="font-custom text-white" id="cartPlatformHeight">Platform Height:</h1>
<p class="font-custom text-white" id="cartPlatformHeightPrice"></p>
<h1 class="font-custom text-white" id="cartInitialEngraved">Engrave Option:</h1>
<p class="font-custom text-white" id="cartInitialEngravedPrice"></p>
<h1 class="font-custom text-white" id="cartTotalPrice">TOTAL:</h1>
<p class="font-custom text-white" id="cartTotalPriceText"></p>
</div>
<!-- action -->
<a href="<?= base_url('cart'); ?>">
<button class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
<p class="font-custom text-white">Check Out</p>
</button>
</a>
<a href="#">
<button id="btnContinueShopping" class="flex justify-center items-center bg-secondary p-2 mt-4 w-full">
<p class="font-custom text-white">Continue Shopping</p>
</button>
</a>
</div>
</div>
<!-- end sidebar -->
<script>
var productId = <?= $product['id_products']; ?>;
<?php if (isset($initial_colorname) && isset($initial_size)) : ?>
var chosenColor = '<?= $initial_colorname; ?>';
var chosenSize = <?= $initial_size; ?>;
var chosenInitialLettersPrice = <?= $initialname_price; ?>;
<?php else : ?>
var chosenColor;
var chosenSize;
var chosenInitialLettersPrice = 0;
<?php endif; ?>
var chosenHeelsType;
var chosenHeelsTypeId;
var chosenHeelsTypePrice;
var chosenHeelsHeight;
var chosenHeelsHeightId;
var chosenHeelsHeighPrice;
var isChosenPlatform = false;
var chosenPlatformStyle;
var chosenPlatformStyleId;
var chosenPlatformStylePrice;
var chosenPlatformHeight;
var chosenPlatformHeightId;
var chosenPlatformHeighPrice;
var isChosenInitialLetters = false;
var chosenInitialLetters;
var chosenInitialLettersImage;
var greetingText;
$(document).ready(function() {
//initial state
$('#addToCart').hide();
$('#greetingCardBlock').hide();
$('#colorSizeSummary').hide();
$('#colorSizeSummary2').hide();
$('#heelsType').hide();
$('#heelsTypeOption').hide();
$('#heelsTypeSummary').hide();
$('#heelsTypeSummary2').hide();
$('#heelsHeight').hide();
$('#heelsHeightOption').hide();
$('#heelsHeightSummary').hide();
$('#heelsHeightSummary2').hide();
$('#platformSelectOption').hide();
$('#platformDetails').hide();
$('#platform').hide();
$('#platformStyleOption').hide();
$('#platformHeightOption').hide();
$('#platformStyleSummary').hide();
$('#platformStyleSummary2').hide();
$('#platformSummary').hide();
$('#platformSummary2').hide();
$('#initialEngrave').hide();
$('#initialEngraveOption').hide();
$('#initialEngraveSummary').hide();
$('#initialEngraveSummary2').hide();
$('#nextButtonHeelsHeight').hide();
$('#nextButtonPlatformHeight').hide();
$('#nextButtonInitialEngraved').hide();
$('#initialLettersInput').hide();
$('#initialLettersImages').hide();
$('#colorSizeText').text(chosenColor + ', ' + chosenSize);
$('.color-icon').on('click', function() {
var index = $('.color-icon').index(this);
$(`.color-icon:eq(${index})`).css('border', '2px solid rgb(81 74 69 / 1)');
$('.color-icon').not(`:eq(${index})`).css('border', '0px solid black');
});
$('.heelsTypeIconImg').on('click', function() {
var index = $('.heelsTypeIconImg').index(this);
$(`.heelsTypeIconImg:eq(${index})`).css('border', '2px solid rgb(81 74 69 / 1)');
$('.heelsTypeIconImg').not(`:eq(${index})`).css('border', '0px solid black');
});
$('.heelsHeightIconImg').on('click', function() {
var index = $('.heelsHeightIconImg').index(this);
$(`.heelsHeightIconImg:eq(${index})`).css('border', '2px solid rgb(81 74 69 / 1)');
$('.heelsHeightIconImg').not(`:eq(${index})`).css('border', '0px solid black');
});
$('.platformStyleIconImg').on('click', function() {
var index = $('.platformStyleIconImg').index(this);
$(`.platformStyleIconImg:eq(${index})`).css('border', '2px solid rgb(81 74 69 / 1)');
$('.platformStyleIconImg').not(`:eq(${index})`).css('border', '0px solid black');
});
$('.platformHeightIconImg').on('click', function() {
var index = $('.platformHeightIconImg').index(this);
$(`.platformHeightIconImg:eq(${index})`).css('border', '2px solid rgb(81 74 69 / 1)');
$('.platformHeightIconImg').not(`:eq(${index})`).css('border', '0px solid black');
});
//get choosen heels type
$('a.heelsTypeIcon').on('click', function(e) {
e.preventDefault();
chosenHeelsType = $(this).data('heelstype');
chosenHeelsTypeId = $(this).data('heelstypeid');
chosenHeelsTypePrice = $(this).data('heelstypeaddprice');
$('#heelsTypeText').text(chosenHeelsType);
});
//get choosen heels height
$('a.heelsHeightIcon').on('click', function(e) {
e.preventDefault();
chosenHeelsHeight = $(this).data('heelsheight');
chosenHeelsHeightId = $(this).data('heelsheightid');
chosenHeelsHeightPrice = $(this).data('heelsheightaddprice');
$('#heelsHeightText').text(chosenHeelsHeight);
});
//get radioWithoutPlatform chosen
$('#radioWithoutPlatform').on('click', function(e) {
e.preventDefault();
isChosenPlatform = false;
chosenPlatformStyle = false;
chosenPlatformStyleId = false;
chosenPlatformStylePrice = false;
chosenPlatformHeight = false;
chosenPlatformHeightId = false;
chosenPlatformHeighPrice = false;
$('#radioWithoutPlatform span').removeClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#radioWithoutPlatform span').addClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#radioWithPlatform span').removeClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#radioWithPlatform span').addClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#platformDetails').hide();
$('#withoutPlatformText').show();
$('#withoutPlatformText').text('Without Platform');
$('#platformStyleText').text('');
$('#platformHeightText').text('');
$('.platformStyleIconImg').css('border', '0px solid black');
$('.platformHeightIconImg').css('border', '0px solid black');
});
//get radioWithPlatform chosen
$('#radioWithPlatform').on('click', function(e) {
e.preventDefault();
isChosenPlatform = true;
chosenPlatformStyle = false;
chosenPlatformStyleId = false;
chosenPlatformStylePrice = false;
chosenPlatformHeight = false;
chosenPlatformHeightId = false;
chosenPlatformHeighPrice = false;
$('#radioWithPlatform span').removeClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#radioWithPlatform span').addClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#radioWithoutPlatform span').removeClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#radioWithoutPlatform span').addClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#platformDetails').show();
$('#withoutPlatformText').text('');
$('#withoutPlatformText').hide();
$('.platformStyleIconImg').css('border', '0px solid black');
$('.platformHeightIconImg').css('border', '0px solid black');
});
//get choosen platform style
$('a.platformStyleIcon').on('click', function(e) {
e.preventDefault();
chosenPlatformStyle = $(this).data('platformstyle');
chosenPlatformStyleId = $(this).data('platformstyleid');
chosenPlatformStylePrice = $(this).data('platformstyleaddprice');
$('#platformStyleText').text(chosenPlatformStyle);
});
//get choosen platform height
$('a.platformHeightIcon').on('click', function(e) {
e.preventDefault();
chosenPlatformHeight = $(this).data('platformheight');
chosenPlatformHeightId = $(this).data('platformheightid');
chosenPlatformHeightPrice = $(this).data('platformheightaddprice');
$('#platformHeightText').text(chosenPlatformHeight);
});
//get initial Letters chosen
$('#initialLetters1').on('click', function(e) {
e.preventDefault();
isChosenInitialLetters = false;
chosenInitialLetters = null;
chosenInitialLettersImage = null;
$('#initialLettersInput').hide();
$('#initialLettersImages').hide();
$('#initialLetters1 span').removeClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#initialLetters1 span').addClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#initialLetters2 span').removeClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#initialLetters2 span').addClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#initialLettersInput').val('');
$('#initialLetterImg1').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg2').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg3').css('border', '0px solid rgb(81 74 69 / 1)');
});
$('#initialLetters2').on('click', function(e) {
e.preventDefault();
isChosenInitialLetters = true;
chosenInitialLetters = null;
chosenInitialLettersImage = null;
$('#initialLettersInput').show();
$('#initialLettersImages').show();
$('#initialLetters2 span').removeClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#initialLetters2 span').addClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#initialLetters1 span').removeClass('w-6 h-6 border border-primary bg-secondary rounded-full mr-2');
$('#initialLetters1 span').addClass('w-6 h-6 border border-primary bg-white rounded-full mr-2');
$('#initialLettersInput').val('');
$('#initialLetterImg1').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg2').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg3').css('border', '0px solid rgb(81 74 69 / 1)');
});
$('#initialLettersInput').keyup(function(e) {
chosenInitialLetters = $(this).val();
if (chosenInitialLetters) {
isChosenInitialLetters = true
}
});
//choose initial lettes image
$('#initialLetterImg1').on('click', function() {
chosenInitialLettersImage = 'Image 1';
$(this).css('border', '2px solid rgb(81 74 69 / 1)');
$('#initialLetterImg2').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg3').css('border', '0px solid rgb(81 74 69 / 1)');
});
$('#initialLetterImg2').on('click', function() {
chosenInitialLettersImage = 'Image 2';
$(this).css('border', '2px solid rgb(81 74 69 / 1)');
$('#initialLetterImg1').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg3').css('border', '0px solid rgb(81 74 69 / 1)');
});
$('#initialLetterImg3').on('click', function() {
chosenInitialLettersImage = 'Image 3';
$(this).css('border', '2px solid rgb(81 74 69 / 1)');
$('#initialLetterImg1').css('border', '0px solid rgb(81 74 69 / 1)');
$('#initialLetterImg2').css('border', '0px solid rgb(81 74 69 / 1)');
});
//get product details based on color
$('a.colorIcon').on('click', function(e) {
e.preventDefault();
ajaxGetProductDetailByColor($(this).data('colortext'));
});
//get product detail based on size
$('a.sizeIcon').on('click', function(e) {
e.preventDefault();
ajaxGetProductDetailBySize($(this).data('size'), chosenColor);
});
//change thumbnails
for (let i = 1; i <= 5; i++) {
$(`#thumbnail${i}`).on('click', function(e) {
e.preventDefault();
let imageUrl;
switch (i) {
case 1:
imageUrl = '<?= base_url() . 'uploads/product/' . $product['image1']; ?>';
break;
case 2:
imageUrl = '<?= base_url() . 'uploads/product/' . $product['image2']; ?>';
break;
case 3:
imageUrl = '<?= base_url() . 'uploads/product/' . $product['image3']; ?>';
break;
case 4:
imageUrl = '<?= base_url() . 'uploads/product/' . $product['image4']; ?>';
break;
case 5:
imageUrl = '<?= base_url() . 'uploads/product/' . $product['image5']; ?>';
break;
default:
break;
}
$('#mainImage').attr('src', imageUrl);
});
}
//toggle greeting card button
$('#greetingcardBtn').on('click', function() {
$(this).toggleClass("bg-secondary");
$('#greetingcardText').toggle();
});
//choose a size
$('.chosenSize').on('click', function(e) {
e.preventDefault();
chosenSize = $(this).data('size');
});
//add to cart
$('#addToCart').on('click', function() {
if (!chosenSize) {
alert('Please choose size');
return;
}
if(isChosenInitialLetters) {
if(!chosenInitialLetters || !chosenInitialLettersImage) {
alert('Please fill in initial letters and choose design');
return;
}
}
const cartData = {
chosenSize,
chosenColor,
productId
};
ajaxAddToCart(cartData);
});
//remove from cart
$('#removeFromCart').on('click', function() {
const cartData = {
productId
};
ajaxRemoveFromCart(cartData);
});
//close cart
$('#btnContinueShopping').on('click', function(e) {
e.preventDefault();
$('#sidebar').hide();
})
$('#cartCloseIcon').on('click', function(e) {
e.preventDefault();
$('#sidebar').hide();
})
//cart add quantity
$('#buttonAdd').on('click', function(e) {
e.preventDefault();
ajaxAddQuantity();
})
//cart remove quantity
$('#buttonRemove').on('click', function(e) {
e.preventDefault();
ajaxRemoveQuantity();
})
//Next icons clicked
$('#nextButtonHeelsType').on('click', function(e) {
e.preventDefault();
if (!chosenColor || !chosenSize) {
alert('Please choose color and size.');
return false;
}
$('#colorSize').hide();
$('#colorSizeColor').hide();
$('#colorSizeSize').hide();
$('#colorSizeSummary').show();
$('#colorSizeSummary2').show();
$('#nextButtonHeelsType').hide();
$('#heelsType').show();
$('#heelsTypeOption').show();
$('#nextButtonHeelsHeight').show();
});
$('#nextButtonHeelsHeight').on('click', function(e) {
e.preventDefault();
if (!chosenHeelsType) {
alert('Please choose heels type.');
return false;
}
$('#heelsType').hide();
$('#heelsTypeOption').hide();
$('#heelsTypeSummary').show();
$('#heelsTypeSummary2').show();
$('#nextButtonHeelsHeight').hide();
$('#heelsHeight').show();
$('#heelsHeightOption').show();
$('#nextButtonPlatformHeight').show();
});
$('#nextButtonPlatformHeight').on('click', function(e) {
e.preventDefault();
if (!chosenHeelsHeight) {
alert('Please choose heels height.');
return false;
}
$('#heelsHeight').hide();
$('#heelsHeightOption').hide();
$('#heelsHeightSummary').show();
$('#heelsHeightSummary2').show();
$('#nextButtonPlatformHeight').hide();
$('#platformSelectOption').show();
$('#platform').show();
$('#platformStyleOption').show();
$('#platformHeightOption').show();
$('#nextButtonInitialEngraved').show();
});
$('#nextButtonInitialEngraved').on('click', function(e) {
e.preventDefault();
if (isChosenPlatform && !chosenPlatformStyle) {
alert('Please contact DM Instagram @kamari.allee for Platform Option');
return false;
}
if (isChosenPlatform && !chosenPlatformHeight) {
alert('Please choose platform height.');
return false;
}
$('#platformSelectOption').hide();
$('#platform').hide();
$('#platformStyleOption').hide();
$('#platformHeightOption').hide();
$('#platformStyleSummary').show();
$('#platformStyleSummary2').show();
$('#platformSummary').show();
$('#platformSummary2').show();
$('#nextButtonInitialEngraved').hide();
$('#initialEngrave').show();
$('#initialEngraveOption').show();
$('#addToCart').show();
$('#greetingCardBlock').show();
});
$('#editColorSize').on('click', function(e) {
e.preventDefault();
$('#colorSize').toggle();
$('#colorSizeColor').toggle();
$('#colorSizeSize').toggle();
})
$('#editHeelsType').on('click', function(e) {
e.preventDefault();
$('#heelsType').toggle();
$('#heelsTypeOption').toggle();
})
$('#editHeelsHeight').on('click', function(e) {
e.preventDefault();
$('#heelsHeight').toggle();
$('#heelsHeightOption').toggle();
})
$('#editPlatform').on('click', function(e) {
e.preventDefault();
$('#platformSelectOption').toggle();
$('#platform').toggle();
$('#platformStyleOption').toggle();
$('#platformHeightOption').toggle();
})
});
function ajaxGetProductDetailByColor(color_text) {
$.ajax({
'url': '<?= base_url('productcustom/ajax_get_productdetailbycolor'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'color_text': color_text,
'product_id': <?= $product['id_products']; ?>,
},
'success': function(data) {
$('#initial_colorcode').css("background", data.initial_colorcode);
$('#initial_colorname').text(data.initial_colorname);
$('#pricing_block').html(data.product_prices_html);
$('#sizing_block').html(data.product_sizes_html);
chosenSize = data.initial_size;
chosenColor = data.initial_colorname;
$('#mainImage').attr('src', data.chosen_image);
$('#errorMessage2').text(``);
$('#colorSizeText').text(chosenColor + ', ' + chosenSize);
}
});
}
function ajaxGetProductDetailBySize(size, color_text) {
$.ajax({
'url': '<?= base_url('productcustom/ajax_get_productdetailbysize'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'size': size,
'color_text': color_text,
'product_id': <?= $product['id_products']; ?>,
},
'success': function(data) {
$('#initial_colorcode').css("background", data.initial_colorcode);
$('#initial_colorname').text(data.initial_colorname);
$('#pricing_block').html(data.product_prices_html);
$('#sizing_block').html(data.product_sizes_html);
$('#errorMessage2').text(``);
chosenSize = data.initial_size;
chosenColor = data.initial_colorname;
$('#colorSizeText').text(chosenColor + ', ' + chosenSize);
}
});
}
function ajaxAddToCart(cartData) {
$.ajax({
'url': '<?= base_url('cart/ajax_addtocart_customize'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'chosen_color': chosenColor,
'chosen_size': chosenSize,
'product_id': productId,
'chosenHeelsTypeId': chosenHeelsTypeId,
'chosenHeelsHeightId': chosenHeelsHeightId,
'chosenPlatformStyleId': chosenPlatformStyleId,
'chosenPlatformHeightId': chosenPlatformHeightId,
'isChosenInitialLetters': isChosenInitialLetters,
'chosenInitialLetters': chosenInitialLetters,
'chosenInitialLetters': chosenInitialLetters,
'chosenInitialLettersPrice': chosenInitialLettersPrice,
'chosenInitialLettersImage': chosenInitialLettersImage,
'greetingcard_text': $('textarea#greetingcardText').val()
},
'success': function(data) {
// console.log('cart data..', data);
//open cart sidebar
$('#cartMessage').text(`${data.data_cart.name} added to your shopping bag`);
$('#cartTitle').text(`${data.data_cart.name}`);
$('#cartPrice').text(`Rp ${Intl.NumberFormat('id-ID').format(data.data_cart.price)}`);
$('#cartTotalPriceText').text(`Rp ${Intl.NumberFormat('id-ID').format(data.data_cart.subtotals)}`);
$('#cartColor').text(`${data.data_cart.options.color}`);
$('#cartSize').text(`Size ${data.data_cart.options.size}`);
$('#cartImage').html(`<img src="${data.data_cart.options.image}" alt="">`);
$('#cartHeelsTypePrice').text(`${data.data_cart.options.chosenHeelsType}`);
$('#cartHeelsHeightPrice').text(`${data.data_cart.options.chosenHeelsHeight}`);
$('#cartPlatformStylePrice').text(`${data.data_cart.options.chosenPlatformStyle}`);
$('#cartPlatformHeightPrice').text(`${data.data_cart.options.chosenPlatformHeight}`);
if (data.data_cart.options.chosenInitialEngraved) {
$('#cartInitialEngravedPrice').text(`${data.data_cart.options.chosenInitialEngraved} - ${data.data_cart.options.chosenInitialEngravedImage}`);
} else {
$('#cartInitialEngravedPrice').text(`none`);
}
if (data.data_cart.options.greetingcard_text) {
$('#cartGreeting').text(`Greeting card:\n${data.data_cart.options.greetingcard_text}`);
}
$('#removeFromCart').attr('data-rowId', data.data_cart.cart_rowid);
$('#qtyInput').text(data.data_cart.qty);
$('#errorMessage2').text(``);
//show sidebar
$('#sidebar').show();
},
'error': function(data) {
$('#errorMessage2').text(data.responseJSON.error);
}
});
}
function ajaxRemoveFromCart(cartData) {
$.ajax({
'url': '<?= base_url('cart/ajax_removefromcart'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'cart_rowid': $('#removeFromCart').data('rowid')
},
'success': function(data) {
$('#cartMessage').text(`Product removed from your shopping bag`);
$('#cartTitle').text(``);
$('#cartPrice').text(``);
$('#cartColor').text(``);
$('#cartSize').text(``);
$('#cartImage').html(``);
$('#cartQtyDelete').html(``);
$('#cartHeelsType').html(``);
$('#cartHeelsTypePrice').html(``);
$('#cartHeelsHeight').html(``);
$('#cartHeelsHeightPrice').html(``);
$('#cartPlatformStyle').html(``);
$('#cartPlatformStylePrice').html(``);
$('#cartPlatformHeight').html(``);
$('#cartPlatformHeightPrice').html(``);
$('#cartInitialEngraved').html(``);
$('#cartInitialEngravedPrice').html(``);
//show sidebar
$('#sidebar').show();
}
});
}
function ajaxAddQuantity() {
$.ajax({
'url': '<?= base_url('cart/ajax_addquantity_customize'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'cart_rowid': $('#removeFromCart').data('rowid')
},
'success': function(data) {
$('#qtyInput').text(data.qty);
},
'error': function(data) {
$('#errorMessage').text(data.responseJSON.error);
}
});
}
function ajaxRemoveQuantity() {
$.ajax({
'url': '<?= base_url('cart/ajax_removequantity_customize'); ?>',
'type': 'POST',
'data': {
'<?= $this->security->get_csrf_token_name(); ?>': '<?= $this->security->get_csrf_hash(); ?>',
'cart_rowid': $('#removeFromCart').data('rowid')
},
'success': function(data) {
if (data.qty == 0) {
$('#cartMessage').text(`Product removed from your shopping bag`);
$('#cartTitle').text(``);
$('#cartPrice').text(``);
$('#cartColor').text(``);
$('#cartSize').text(``);
$('#cartImage').html(``);
$('#cartQtyDelete').html(``);
$('#cartGreeting').text(``);
$('#cartHeelsType').html(``);
$('#cartHeelsTypePrice').html(``);
$('#cartHeelsHeight').html(``);
$('#cartHeelsHeightPrice').html(``);
$('#cartPlatformStyle').html(``);
$('#cartPlatformStylePrice').html(``);
$('#cartPlatformHeight').html(``);
$('#cartPlatformHeightPrice').html(``);
$('#cartInitialEngraved').html(``);
$('#cartInitialEngravedPrice').html(``);
} else {
$('#qtyInput').text(data.qty);
}
$('#errorMessage').text(``);
}
});
}
</script>