115 lines
6.3 KiB
PHP
115 lines
6.3 KiB
PHP
<div id="product-variables-table" class="wpcfto_generic_field wpcfto_generic_field_html">
|
|
<div class="wpcfto-field-content">
|
|
<table class="wpcfto-table formipay-variations-table">
|
|
<thead>
|
|
<tr>
|
|
<th data-cell="toggle">{{ product_details.variation_table.th_toggle }}</th>
|
|
<th data-cell="name">{{ product_details.variation_table.th_name }}</th>
|
|
<th data-cell="stock">{{ product_details.variation_table.th_stock }}</th>
|
|
|
|
<th data-cell="weight" v-if="isPhysical">{{ product_details.variation_table.th_weight }}</th>
|
|
|
|
<th v-if="showFlatPricing" data-cell="price">{{ product_details.variation_table.th_price }}</th>
|
|
<th v-if="showFlatPricing" data-cell="sale">{{ product_details.variation_table.th_sale }}</th>
|
|
<th v-else data-cell="prices">{{ product_details.variation_table.th_prices_overall }}</th>
|
|
<th class="toggle-column" v-if="!showFlatPricing"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-if="tableRows.length > 0">
|
|
<template v-for="(row, idx) in tableRows">
|
|
<tr :key="row.key" :class="['wpcfto-repeater-single', { 'variation-inactive': !row.active }]">
|
|
|
|
<td data-cell="toggle" style="text-align:center;">
|
|
<label class="switch">
|
|
<input type="checkbox" v-model="row.active" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
|
|
<td data-cell="name">
|
|
<input type="text" v-model="row.name" class="wpcfto-admin-input" readonly :disabled="!row.active" />
|
|
</td>
|
|
|
|
<td data-cell="stock">
|
|
<input type="number" v-model.number="row.stock" class="wpcfto-admin-input" min="0" :placeholder="'∞'" style="width:100%;text-align:right;" :disabled="!row.active" />
|
|
</td>
|
|
|
|
<td v-if="isPhysical" data-cell="weight">
|
|
<input type="number" v-model.number="row.weight" step="0.01" style="width:100%; text-align:right;" :disabled="!row.active" />
|
|
</td>
|
|
|
|
<td v-if="showFlatPricing" data-cell="price">
|
|
<price-input
|
|
:value="defaultEntry(row).regular_price"
|
|
@input="defaultEntry(row).regular_price = $event"
|
|
:currency-symbol="defaultEntry(row).currency.split(':::')[2] || defaultEntry(row).currency.split(':::')[0]"
|
|
:currency-decimal-digits="parseInt(defaultEntry(row).currency_decimal_digits)"
|
|
:disabled="!row.active"
|
|
/>
|
|
</td>
|
|
<td v-if="showFlatPricing" data-cell="sale">
|
|
<price-input
|
|
:value="defaultEntry(row).sale_price"
|
|
@input="defaultEntry(row).sale_price = $event"
|
|
:currency-symbol="defaultEntry(row).currency.split(':::')[2] || defaultEntry(row).currency.split(':::')[0]"
|
|
:currency-decimal-digits="parseInt(defaultEntry(row).currency_decimal_digits)"
|
|
:disabled="!row.active"
|
|
/>
|
|
</td>
|
|
|
|
<td v-else data-cell="prices" style="text-align:center;">
|
|
<span @click="row.expanded = !row.expanded">{{ product_details.variation_table.manual_price_hint }}</span>
|
|
</td>
|
|
<td class="toggle-column" style="text-align:center;" v-if="!showFlatPricing">
|
|
<button v-if="row.prices.length > 0" @click="row.expanded = !row.expanded" class="button-link child-row-toggle" :class="row.expanded ? 'active' : ''" type="button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M15 12.915S12.79 15.5 12 15.5s-3-2.585-3-2.585M15 8.5s-2.21 2.585-3 2.585S9 8.5 9 8.5" />
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-if="!showFlatPricing && row.expanded" :key="row.key + '-details'" class="variation-details-row">
|
|
<td :colspan="isPhysical ? 7 : 6">
|
|
<div class="variation-details-content">
|
|
<table class="wpcfto-table inner-table" v-if="row.prices.length > 0">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ product_details.variation_table.child_th_currency }}</th>
|
|
<th>{{ product_details.variation_table.child_th_regular }}</th>
|
|
<th>{{ product_details.variation_table.child_th_sale }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(priceEntry, p_idx) in row.prices" :key="p_idx">
|
|
<td>{{ priceEntry.currency.split(':::')[1] }} ({{ priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0] }})</td>
|
|
<td>
|
|
<price-input :value="priceEntry.regular_price" @input="priceEntry.regular_price = $event" :currency-symbol="priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0]" :currency-decimal-digits="parseInt(priceEntry.currency_decimal_digits)" :disabled="!row.active" />
|
|
</td>
|
|
<td>
|
|
<price-input :value="priceEntry.sale_price" @input="priceEntry.sale_price = $event" :currency-symbol="priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0]" :currency-decimal-digits="parseInt(priceEntry.currency_decimal_digits)" :disabled="!row.active" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p v-else style="padding: 10px; text-align:center;">{{ product_details.variation_table.no_currencies }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
|
|
<tbody v-else>
|
|
<tr>
|
|
<td :colspan="isPhysical ? 7 : 6" style="text-align:center;color:#8c99a5;">
|
|
{{ product_details.variation_table.no_variations }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<input type="hidden" name="product_variables" v-model="jsonValue" />
|
|
</div>
|
|
</div> |