Создайте пользовательское поле количества в Woocommerce

Question

Создайте пользовательское поле количества в Woocommerce

В настоящее время я работаю над сайтом электронной коммерции, используя WordPress, пытаясь изменить вид счетчика кол-во на странице корзины. Я отредактировал файл шаблона amount-input.php с помощью следующего кода:

if ( $max_value && $min_value === $max_value ) {
?>
<div class="quantity hidden">
<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
</div>
<?php
} else {
?>
<div class="quantity">
<div class="quantity-button quantity-up">+</div>
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
<input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<div class="quantity-button quantity-down">-</div>
</div>
<?php

и скрипт, прикрепленный к странице:

$('.quantity-up').html('<span>+</span>');
$('.quantity-down').html('<span>-</span>');
$('.quantity').each(function() {
var spinner = $(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');

btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});

Когда я запускаю это, кажется, работает только btnDown, а не btnUp, я понятия не имею, что я делаю неправильно

оуу ксс:

.quantity {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 32px;
border: solid 1px red;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}

input[type=number]{
-moz-appearance: textfield;
}

.quantity input {
width: 35px;
height: 32px;
line-height: 1.65;
display: block;
padding: 0;
margin: 0;
border: none;
}

.quantity input:focus {
outline: 0;
}

.quantity-button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 35px;
height: 100%;
text-align: center;
color: #fff;
line-height: 1.7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-color: rgba(0,0,0,0.7);
border: solid 1px red;
}
.quantity-button span{
font-size: 1.2em;
font-weight: 900;
}

.quantity-button.quantity-up {
}

.quantity-button.quantity-down {
}

Скриншот

1

jquery php product-quantity woocommerce wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я сделал несколько легких изменений в PHP и CSS и переписал в основном jQuery.

Код PHP / HTML:

<?php // Begin "Just For testing" (to be removed)

$min_value = 0;
$max_value = -1;
$input_value = 1;
$step = 1;
$pattern = '';
$inputmode = 'numeric';
$input_id = 'quantity-custom';
$input_name = 'quantity';

// -- End of "Just For testing"
## -- -- -- -- Real code start here below -- -- -- -- ## ?>

<div class="quantity">
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
<div class="quantity-button minus"><span>-</span></div>
<input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>"value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<div class="quantity-button plus"><span>+</span></div>
</div>

Код JQuery:

(function($){
$('.quantity').on('click', '.quantity-button.minus',
function(e) {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 0) {
$input.val( val - step ).change();
}
});
$('.quantity').on('click', '.quantity-button.plus', function(e) {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
});
})(jQuery);

CSS только изменения:

.quantity-button span {
font-size: 1.2em;
font-weight: 900;
color: white;
}

.quantity-button.plus {}

.quantity-button.minus {}

Код помещается в файл function.php вашей активной дочерней темы (или темы).

Проверено и работает.

1