Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/Alpine-state.html

Created September 9, 2020 21:28
Show Gist options
  • Save javedbaloch4/6c2371d9309052257a0c66d2e8fbcabb to your computer and use it in GitHub Desktop.
Save javedbaloch4/6c2371d9309052257a0c66d2e8fbcabb to your computer and use it in GitHub Desktop.
Download ZIP
AlpineJS states.
Raw
Alpine-state.html
<div x-id="state" x-data="{
arch: '',
type: '',
}"></div>
<div class="addingPrices"
x-data="{package_type: 0, online_implant_meeting: 0, digital_setup_articulation: 0, printed_carrier_guide: 0, printed_surgical_guide: 0, finishing_of_cases: 0 }"
id="addingPrices">
<div class="p-10">
<div class="grid sm:grid-cols-2">
<div>
<input type="radio" name="case_type" x-data
@click="$component('state').arch = $component('state').arch === 'single' ? '' : 'single'"
:class="{
'bg-blue-300': $component('state').arch === 'single',
'bg-blue-500': $component('state').arch !== 'single'
}" class="py-1 px-3 text-white rounded">Single</input>
<input type="radio" name="case_type" x-data
@click="$component('state').arch = $component('state').arch === 'double' ? '' : 'double'"
:class="{
'bg-blue-300': $component('state').arch === 'double',
'bg-blue-500': $component('state').arch !== 'double'
}" class="py-1 px-3 text-white rounded"> Double</input>
</div>
<div>
<input type="radio" name="package_type" x-data
@click="$component('state').type = $component('state').type === 'lite' ? '' : 'lite'" :class="{
'bg-blue-300': $component('state').type === 'lite',
'bg-blue-500': $component('state').type !== 'lite'
}" class="ml-6 py-1 px-3 text-white rounded"> Lite</input>
<input type="radio" name="package_type" x-data
@click="$component('state').type = $component('state').type === 'standard' ? '' : 'standard'"
:class="{
'bg-blue-300': $component('state').type === 'standard',
'bg-blue-500': $component('state').type !== 'standard'
}" class="py-1 px-3 text-white rounded">Standard</input>
<input type="radio" name="package_type" x-data
@click="$component('state').type = $component('state').type === 'extended' ? '' : 'extended'">
extended </input>
<input type="radio" name="package_type" x-data
@click="$component('state').type = $component('state').type === 'fullservice' ? '' : 'fullservice'">
Full Service </input>
</div>
</div>
<!-- Items -->
<div x-data x-cloak>
<div x-data x-show="$component('state').arch === '' && $component('state').type == ''">
</div>
<!-- Single and Lite -->
<div x-data x-show="$component('state').arch === 'single' && $component('state').type == 'lite'">
<label for=""><span class="text-sm font-extrabold">Single Lite Package Addons</span> </label> <br>
<input type="checkbox" name="online_implant_meeting" value="150"
x-model.number="$component('addingPrices').online_implant_meeting"> <label for=""> Online
Implant Planning
meeting with Dr
and Lab: single arch, $150.00 </label> <br>
<input type="checkbox" name="digital_setup_articulation" value="89.00"
x-model.number="$component('addingPrices').digital_setup_articulation"> <label for=""> Digital
setup and
articulation: single arch -
single arch, $89.00 </label> <br>
<input type="checkbox" name="printed_carrier_guide" value="99.00"
x-model.number="$component('addingPrices').printed_carrier_guide"> <label for=""> Printed
Carrier Guide, Pin Guide
and models:
single arch - $99.00
</label> <br>
<input type="checkbox" name="printed_surgical_guide" value="199.00"
x-model.number="$component('addingPrices').printed_surgical_guide"> <label for=""> Printed
surgical prosthetic:
single arch -
$199.00
</label> <br>
<input type="checkbox" name="finishing_of_cases" value="380.00"
x-model.number="$component('addingPrices').finishing_of_cases"> <label for="">Full
assembly, colored and finished surgical prosthetic: single arch - $380.00
</div>
<!-- Double and Lite -->
<div x-data x-show="$component('state').arch === 'double' && $component('state').type == 'lite'">
<label for=""><span class="text-sm font-extrabold">Double Lite Package Addons</span> </label> <br>
<input type="checkbox" name="online_implant_meeting" value="300.00"
x-model.number="$component('addingPrices').online_implant_meeting"> <label for=""> Online
Implant Planning
meeting with Dr and Lab: double arch, $300.00 </label> <br>
<input type="checkbox" name="digital_setup_articulation" value="178"
x-model.number="$component('addingPrices').digital_setup_articulation"> <label for="">Digital
setup and articulation: double arch $178.00 </label> <br>
<input type="checkbox" name="printed_carrier_guide" value="198"
x-model.number="$component('addingPrices').printed_carrier_guide"> <label for=""> Printed
Carrier Guide, Pin Guide
and models: double arch - $198.00
</label> <br>
<input type="checkbox" name="printed_surgical_guide" value="398"
x-model.number="$component('addingPrices').printed_surgical_guide"> <label for=""> Printed
surgical prosthetic:
double arch - $398.00
</label> <br>
<input type="checkbox" name="finishing_of_cases" value="760"
x-model.number="$component('addingPrices').finishing_of_cases"> <label for="">Full
assembly, colored and finished surgical prosthetic: double arch - $760.00
</div>
<!-- Single + Standard -->
<div x-data x-show="$component('state').arch === 'single' && $component('state').type == 'standard'">
<label for=""><span class="text-sm font-extrabold">Standard Service Package Addons</span> </label>
<br>
<input type="checkbox" name="online_implant_meeting" value="150"
x-model.number="$component('addingPrices').online_implant_meeting"> <label for=""> Online
Implant Planning
meeting with Dr
and Lab: single arch, $150.00 </label> <br>
<input type="checkbox" name="digital_setup_articulation" value="89.00"
x-model.number="$component('addingPrices').digital_setup_articulation"> <label for=""> Digital
setup and
articulation: single arch -
single arch, $89.00 </label> <br>
<input type="checkbox" name="printed_carrier_guide" value="99.00"
x-model.number="$component('addingPrices').printed_carrier_guide"> <label for=""> Printed
Carrier Guide, Pin Guide
and models:
single arch - $99.00
</label> <br>
<input type="checkbox" name="printed_surgical_guide" value="199.00"
x-model.number="$component('addingPrices').printed_surgical_guide"> <label for=""> Printed
surgical prosthetic:
single arch -
$199.00
</label> <br>
<input type="checkbox" name="finishing_of_cases" value="380.00"
x-model.number="$component('addingPrices').finishing_of_cases"> <label for="">Full
assembly, colored and finished surgical prosthetic: single arch - $380.00
</div>
<!-- Double and Standard -->
<div x-data x-show="$component('state').arch === 'double' && $component('state').type == 'standard'">
<label for=""><span class="text-sm font-extrabold">Double Standard Package Addons</span> </label>
<br>
<input type="checkbox" name="online_implant_meeting" value="300.00"
x-model.number="$component('addingPrices').online_implant_meeting"> <label for=""> Online
Implant Planning
meeting with Dr and Lab: double arch, $300.00 </label> <br>
<input type="checkbox" name="digital_setup_articulation" value="178"
x-model.number="$component('addingPrices').digital_setup_articulation"> <label for="">Digital
setup and articulation: double arch $178.00 </label> <br>
<input type="checkbox" name="printed_carrier_guide" value="198"
x-model.number="$component('addingPrices').printed_carrier_guide"> <label for=""> Printed
Carrier Guide, Pin Guide
and models: double arch - $198.00
</label> <br>
<input type="checkbox" name="printed_surgical_guide" value="398"
x-model.number="$component('addingPrices').printed_surgical_guide"> <label for=""> Printed
surgical prosthetic:
double arch - $398.00
</label> <br>
<input type="checkbox" name="finishing_of_cases" value="760"
x-model.number="$component('addingPrices').finishing_of_cases"> <label for="">Full
assembly, colored and finished surgical prosthetic: double arch - $760.00
</div>
<div x-data x-show="$component('state').arch === '' && $component('state').type == 'extended'">
</div>
<div x-data x-show="$component('state').arch === 'single' && $component('state').type == 'extended'">
</div>
<div x-data x-show="$component('state').arch === 'double' && $component('state').type == 'extended'">
</div>
<div x-data x-show="$component('state').arch === '' && $component('state').type == 'fullservice'">
</div>
<div x-data x-show="$component('state').arch === 'single' && $component('state').type == 'fullservice'">
</div>
<div x-data x-show="$component('state').arch === 'double' && $component('state').type == 'fullservice'">
</div>
</div>
<!-- Adding all values here -->
<div class="m-auto w-full py-3 px-2 text-left ">
<h2> PACKAGE SELECTION COST (USD) </h2> <span class="text-left text-blue-900 font-bold text-2xl">
$
<span class="text-left text-blue-900 font-bold text-2xl"> </span> <span
x-text.toFixed(2)="package_type + online_implant_meeting + digital_setup_articulation + printed_carrier_guide + printed_surgical_guide + finishing_of_cases "></span></span>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment