Update Cores Selection with options to disable the slider and show a message instead.

Author: writeonlycode

content/plans-purchase/_index.md

@@ -74,18 +74,24 @@ product:
         - name: "4"
           priceModifier: 60.00
 
+      disabled: false
+      disabledText: "AMD CPUs aren't currently available, but they will be back in stock soon!"
+
     - name: "ARM CPU Cores"
       type: "dropdown"
       value: "0"
       options:
         - name: "0"
           priceModifier: 0.00
 
-        - name: "1"
-          priceModifier: 5.00
+        #- name: "1"
+        #  priceModifier: 5.00
 
-        - name: "2"
-          priceModifier: 10.00
+        #- name: "2"
+        #  priceModifier: 10.00
+
+      disabled: true
+      disabledText: "ARM CPUs aren't currently available, but they will be back in stock soon!"
 
     - name: "Extra: Minecraft Servers"
       type: "dropdown"

themes/mc-server-theme-amp/assets/scss/_utilities.scss

@@ -151,6 +151,7 @@
 .color-aqua { color: #00EAFF; }
 .color-whisper { color: #EDEDED; }
 .color-pastel-green { color: #66D677; }
+.color-amaranth { color: #dc3545; }
 
 .background-color-swamp { background-color: #2A2B2B; }
 .background-color-dodger-blue { background-color: #0068FF; }

themes/mc-server-theme-amp/layouts/partials/section/plans-custom-purchase.html

@@ -100,18 +100,23 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <div class="slider-container padding-32">
               <div class="display-flex align-items-center justify-content-center padding-bottom-16">
                 <p class="font-size-20 font-weight-bold text-align-center">AMD CPU</p>
-                <!-- <input type="checkbox" name="" id=""> -->
               </div>
               {{ range where $data.Params.product.customFields ".name" "AMD CPU Cores" }}
                 {{ $index := 0 }}
                 {{ $value := .value }}
                 {{ range $i, $e := .options }} {{ if (eq $e.name $value) }}{{ $index = $i }}{{ end }} {{ end }}
+                {{ if .disabled }}
+                  <div class="text-align-center color-amaranth">
+                    {{ .disabledText }}
+                  </div>
+                {{ else }}
                 <input id="amdRange" type="range" min="0" max="{{ sub (len .options) 1 }}" value="{{ $index }}" step='1' class="slider styled-slider slider-progress" list='amd-tickmarks'>
                 <div class="tickmarks" id="amd-tickmarks">
                   {{ range .options }}
                     <p>{{ .name }}</p>
                   {{ end }}
                 </div>
+                {{ end }}
               {{ end }}
             </div>
           </div>
@@ -121,18 +126,23 @@ <h3 class="font-size-20 font-weight-bold text-align-center padding-y-64">Select
             <div class="slider-container padding-32">
               <div class="display-flex align-items-center justify-content-center padding-bottom-16">
                 <p class="font-size-20 font-weight-bold text-align-center">ARM CPU</p>
-                <!-- <input type="checkbox" name="" id=""> -->
               </div>
               {{ range where $data.Params.product.customFields ".name" "ARM CPU Cores" }}
                 {{ $index := 0 }}
                 {{ $value := .value }}
                 {{ range $i, $e := .options }} {{ if (eq $e.name $value) }}{{ $index = $i }}{{ end }} {{ end }}
-                <input id="armRange" type="range" min="0" max="{{ sub (len .options) 1 }}" value="{{ $index }}" step='1' class="slider styled-slider slider-progress" list='arm-tickmarks'>
-                <div class="tickmarks" id="arm-tickmarks">
-                  {{ range .options }}
-                    <p>{{ .name }}</p>
-                  {{ end }}
-                </div>
+                {{ if .disabled }}
+                  <div class="text-align-center color-amaranth">
+                    {{ .disabledText }}
+                  </div>
+                {{ else }}
+                  <input id="armRange" type="range" min="0" max="{{ sub (len .options) 1 }}" value="{{ $index }}" step='1' class="slider styled-slider slider-progress" list='arm-tickmarks'>
+                  <div class="tickmarks" id="arm-tickmarks">
+                    {{ range .options }}
+                      <p>{{ .name }}</p>
+                    {{ end }}
+                  </div>
+                {{ end }}
               {{ end }}
             </div>
           </div>