elegance/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl

90 lines
5.0 KiB
Smarty
Executable File

<input type="hidden" id="product-additional-info-product-id" value="{$productId}">
<input type="hidden" id="product-additional-info-category-id" value="{$categoryId}">
<input type="hidden" id="product-additional-info-product-attribute-id" value="{$productAttributeId}">
<input type="hidden" id="product-additional-info-access-code" value="{$accessCode}">
<a href="#" class="product-set-measurements-btn" id="set-measurements-button" data-toggle="modal" data-target="#measurements-modal">
Set Measurements
</a>
<!-- Modal -->
<div class="">
<div class="modal modal-set-measurements lg:w-[600px] mainBody pop-up" id="measurements-modal" tabindex="-1" role="dialog" >
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Custom</label>
<div class="tab-content my-12">
{if isset($currentForm)}
<h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
<section class="form-fields">
{foreach from=json_decode($currentForm.attributes, true) item=$attribute}
<div class="mb-4 flex flex-row form-group ">
<div class="w-24 pr-8">
<label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
</div>
<div class=" js-input-column">
<input
type="text"
id="{$attribute.id}"
name="{$attribute.id}"
class=" block appearance-none md:w-56 w-24 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
pattern="[0-9]+"
title="Please enter a positive number"
required
{if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
value="{$customerMeasurements[$attribute.id]}"
{/if}>
</div>
<div class="md:w-1/4 pr-4 pl-4 form-control-comment w-24">
<small class="block mt-1 text-gray-700 ">{$attribute.unit}</small>
</div>
</div>
{/foreach}
<input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
<input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
</section>
<button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
{else}
<p>No form data available.</p>
{/if}
<button type="button" class="hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light" id="closebutton" data-dismiss="modal">Close</button>
</div>
</div>
<div class="tab mb-8">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Mirror</label>
<div class="tab-content gap-mb-8">
<div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
{if $qrCode}
<img src="{$qrCode}" alt="Mirror Size QR Code" class="mx-auto max-w-full h-64">
<p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
<p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
<button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
<button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2 bg-gray-700 text-white text-base font-light " id="closemirrorbutton" data-dismiss="modal">Close</button>
{/if}
</div>
</div>
</div>
</div>
</div>
</div>
</div>