Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2016, 23:04
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Привязать кнопки +/- к полю количества
Здравствуйте!
Сайт на 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';
}

...догадываюсь, что ошибка вероятно где-то здесь - но разобраться пока не получается
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2016, 23:34
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Для одной кнопки такого количества кода быть не может.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2016, 23:59
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от warren buffet Посмотреть сообщение
Для одной кнопки такого количества кода быть не может.
Согласен с Вами - наверняка что-то лишнее "прихватил" (или вообще это не тот код).
В JS не силен (это мягко сказано). Поэтому и прошу помощи: Как мне эти +/- "заставить" работать? Подскажите скрипт пожалуйста
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2016, 00:48
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

jQuery счетчик цифр -> https://jsfiddle.net/vlasenkofedor/chKLh/
Vanilla js счетчик цифр -> https://jsfiddle.net/vlasenkofedor/uRj7c/
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2016, 09:36
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от Poznakomlus Посмотреть сообщение
jQuery счетчик цифр -> https://jsfiddle.net/vlasenkofedor/chKLh/
Vanilla js счетчик цифр -> https://jsfiddle.net/vlasenkofedor/uRj7c/
Не получается почему-то.. Вроде бы и код весь понятен (даже js) - но не работает
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2016, 11:00
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Я так понимаю, тут маловато будет просто счетчика, нужен запрос, который отправлялся бы на сервер и проверял наличие товара и добавлял его в корзину
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2016, 11:33
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

попробовал исправить свой код
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);
});

Что не так?
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2016, 12:25
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от Царь Леонид Посмотреть сообщение
Я так понимаю, тут маловато будет просто счетчика, нужен запрос, который отправлялся бы на сервер и проверял наличие товара и добавлял его в корзину
Само поле ввода работает - отправляет и проверяет (я его на другом форуме "скоммунизмил")... Получается, что нужно только именно кнопки +/- к нему привязать...
Подозреваю, что дело в условиях с переменными, которые стоят в моем скрипте - наверное он их просто "не знает и не понимает".
Можно ли как-то упростить скрипт - что бы "плюс" просто прибавлял, а "минус" убавлял (если конечно в результате не меньше единицы получается")? убрать эти переменные.
Ответить с цитированием
  #9 (permalink)  
Старый 12.07.2016, 18:32
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от Igorsrt
и проверял наличие товара
Инженеры, чо, проверять наличие собираются. Да всем посрать на наличие, лишь бы заказ получить, а там уже найдут и наврут.
Ответить с цитированием
  #10 (permalink)  
Старый 12.07.2016, 18:34
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Капец блин, а вот так сделать вообще религия запрещает? - при клике изменить значение следующего input

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Определение "Больше" или "Меньше" после нажатия кнопки JFloyd Общие вопросы Javascript 1 01.12.2014 17:27
Нужно привязать событие для кнопки на javascript maraf0n Элементы интерфейса 1 18.04.2013 11:53
Как добавить кнопки к каждому полю формы SaltoMortale ExtJS 2 07.08.2012 12:22
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30