Блог

https://prnt.sc/vo986i — это выпадающее меню выбора по умолчанию, предоставляемое WHMCS.

https://prnt.sc/vo98m5 — это дизайн, который я сделал в Figma.

Я не часто работаю с WHMCS, я хочу сохранить функциональность и просто сделать его выбором из нескольких блоков, а не выпадающим списком.

 {if $pricing.type eq "recurring"}
    <div class="field-container">
        <div class="form-group">
            <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>
            <select name="billingcycle" id="inputBillingcycle" class="form-control select-inline" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
            {if $pricing.monthly}
                <option value="monthly"{if $billingcycle eq "monthly"} selected{/if}>
                    {$pricing.monthly}
                </option>
            {/if}
            {if $pricing.quarterly}
                <option value="quarterly"{if $billingcycle eq "quarterly"} selected{/if}>
                   {$pricing.quarterly}
                </option>
            {/if}
            {if $pricing.semiannually}
                <option value="semiannually"{if $billingcycle eq "semiannually"} selected{/if}>
                    {$pricing.semiannually}
                </option>
             {/if}
             {if $pricing.annually}
                 <option value="annually"{if $billingcycle eq "annually"} selected{/if}>
                     {$pricing.annually}
                 </option>
             {/if}
             {if $pricing.biennially}
                 <option value="biennially"{if $billingcycle eq "biennially"} selected{/if}>
                     {$pricing.biennially}
                 </option>
             {/if}
             {if $pricing.triennially}
                 <option value="triennially"{if $billingcycle eq "triennially"} selected{/if}>
                     {$pricing.triennially}
                 </option>
             {/if}
             </select>
         </div>
    </div>
{/if}
 

Это код, который WHMCS предоставляет для выбора цикла выставления счетов по умолчанию.

Спасибо

Попробуйте, это должно сработать, изменили значения параметров на переключатели и убрали поле выбора.

Вам нужно будет добавить свои собственные классы для дизайна.

     <div class="field-container">
        <div class="form-group">
            <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label>

            {if $pricing.monthly}
 <input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="monthly" name="billingcycle" value="monthly"> {$pricing.monthly}
                
            {/if}
            {if $pricing.quarterly}
 <input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="quarterly" name="billingcycle" value="quarterly"> {$pricing.quarterly}
                
            {/if}
            {if $pricing.semiannually}
<input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="semiannually" name="billingcycle" value="semiannually"> {$pricing.semiannually}
                
             {/if}
             {if $pricing.annually}
             <input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="annually" name="billingcycle" value="annually">  {$pricing.annually}
             {/if}
             {if $pricing.biennially}
                 <input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="biennially" name="billingcycle" value="biennially"> {$pricing.biennially}
                 
             {/if}
             {if $pricing.triennially}
                 <input onclick="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}" type="radio" id="biennially" name="billingcycle" value="biennially"> {$pricing.triennially}
             {/if}

         </div>
    </div>
{/if}```