Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Привязать кнопки +/- к полю количества (https://javascript.ru/forum/dom-window/63952-privyazat-knopki-k-polyu-kolichestva.html)

Igorsrt 10.07.2016 23:04

Привязать кнопки +/- к полю количества
 
Здравствуйте!
Сайт на Prestashop. Нужно добавить возможность выбирать количество товара на страницу витрины. Само поле ввода input добавить удалось (с помощью Googla конечно) - и оно работает.. Кнопки тоже вставить получилось (скопировал код из другого модуля сайта) - но вот заставить их работать не получается (js пока никак не могу осилить :( ).
Код кнопок и инпута:
<div class="button-container">
                            {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
                                {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                    {capture}add=1&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
                                    <a class="ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
                                        <span>{l s='Add to cart'}</span>
                                    </a>	

<input type="text" name="qty" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{$product.minimal_quantity}{/if}" size="2" maxlength="3" />									
                                {else}
                                    <span class="ajax_add_to_cart_button btn btn-default disabled">
                                        <span>{l s='Add to cart'}</span>
                                    </span>
                                {/if}
                            {/if}
                            <a href="#" data-field-qty="quantity_wanted_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_down">
                                                <span>
                                                    <i class="fa fa-minus"></i>
                                                </span>
                                            </a>
							<a href="#" data-field-qty="quantity_wanted_{$product.id_product|intval}" class="btn btn-default button-plus product_quantity_up">
                                                <span>
                                                    <i class="fa fa-plus"></i>
                                                 </span>
                                            </a>				
                        
						</div>

Попытался скопировать также скрипт из модуля, в котором эти кнопки работают:
// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
	if (!allowBuyWhenOutOfStock && quantityAvailable > 0)
		quantityAvailableT = quantityAvailable;
	else
		quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(quantityAvailableT);
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal) && currentVal > 1)
        $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

if (typeof minimalQuantity != 'undefined' && minimalQuantity)
{
	checkMinimalQuantity();
	$(document).on('keyup', 'input[name=qty]', function(e){
		checkMinimalQuantity(minimalQuantity);
	});
}

function arrayUnique(a)
{
    return a.reduce(function(p, c){
        if (p.indexOf(c) < 0)
			p.push(c);
        return p;
    }, []);
};
//check if a function exists
function function_exists(function_name)
{
	if (typeof function_name === 'string')
		function_name = this.window[function_name];
	return typeof function_name === 'function';
}

...догадываюсь, что ошибка вероятно где-то здесь - но разобраться пока не получается

warren buffet 10.07.2016 23:34

Для одной кнопки такого количества кода быть не может.

Igorsrt 10.07.2016 23:59

Цитата:

Сообщение от warren buffet (Сообщение 421746)
Для одной кнопки такого количества кода быть не может.

Согласен с Вами - наверняка что-то лишнее "прихватил" (или вообще это не тот код).
В JS не силен (это мягко сказано). Поэтому и прошу помощи: Как мне эти +/- "заставить" работать? Подскажите скрипт пожалуйста ;)

Vlasenko Fedor 11.07.2016 00:48

jQuery счетчик цифр -> https://jsfiddle.net/vlasenkofedor/chKLh/
Vanilla js счетчик цифр -> https://jsfiddle.net/vlasenkofedor/uRj7c/

Igorsrt 11.07.2016 09:36

Цитата:

Сообщение от Poznakomlus (Сообщение 421753)
jQuery счетчик цифр -> https://jsfiddle.net/vlasenkofedor/chKLh/
Vanilla js счетчик цифр -> https://jsfiddle.net/vlasenkofedor/uRj7c/

Не получается почему-то.. :-? Вроде бы и код весь понятен (даже js) - но не работает

Царь Леонид 11.07.2016 11:00

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

Igorsrt 11.07.2016 11:33

попробовал исправить свой код
html в браузере выглядит:
<p class="quantity_wanted_p" style="display: inline;">
<input type="text" name="ajax_qty_to_add_to_cart[78]" id="quantity_wanted_78" class="text" value="1" size="2" maxlength="3">									

 <a href="#" data-field-qty="ajax_qty_to_add_to_cart[78]" class="btn btn-default button-minus product_quantity_down">
                                                <span>
                                                    <i class="fa fa-minus"></i>
                                                </span>
                                            </a>
<a href="#" data-field-qty="ajax_qty_to_add_to_cart[78]" class="btn btn-default button-plus product_quantity_up">
                                                <span>
                                                    <i class="fa fa-plus"></i>
                                                 </span>
                                            </a>				
 </p>

js:
// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
	if (!allowBuyWhenOutOfStock && quantityAvailable > 0)
		quantityAvailableT = quantityAvailable;
	else
		quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(quantityAvailableT);
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal) && currentVal > 1)
        $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

Что не так? :-E

Igorsrt 11.07.2016 12:25

Цитата:

Сообщение от Царь Леонид (Сообщение 421778)
Я так понимаю, тут маловато будет просто счетчика, нужен запрос, который отправлялся бы на сервер и проверял наличие товара и добавлял его в корзину

Само поле ввода работает - отправляет и проверяет (я его на другом форуме "скоммунизмил")... Получается, что нужно только именно кнопки +/- к нему привязать...
Подозреваю, что дело в условиях с переменными, которые стоят в моем скрипте - наверное он их просто "не знает и не понимает".
Можно ли как-то упростить скрипт - что бы "плюс" просто прибавлял, а "минус" убавлял (если конечно в результате не меньше единицы получается")? убрать эти переменные.

warren buffet 12.07.2016 18:32

Цитата:

Сообщение от Igorsrt
и проверял наличие товара

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

warren buffet 12.07.2016 18:34

Капец блин, а вот так сделать вообще религия запрещает? - http://javascript.ru/forum/events/63...tml#post421625

Цитата:

что бы "плюс" просто прибавлял, а "минус" убавлял
ЗЫ Нажимай ссылку выше и увидишь как плюс прибавляет а минус "убавляет", село блин )))


Часовой пояс GMT +3, время: 02:37.