Каждые выходные я планирую писать несколько фрагментов кода с открытым исходным кодом для платформы Shopify. Сегодня я покажу, как создать продукт для пожертвований в shopify, у которого будет возможность добавить желаемую сумму пожертвования. Для этого мы создадим продукт для пожертвований с разными вариантами (с одной опцией «Сумма»), каждый вариант будет иметь разную цену. И мы создадим шаблон продукта product.donation.liquid и назначим этот шаблон только что созданному продукту. и мы внесем небольшие изменения в шаблон страницы корзины (чтобы скрыть селектор количества и вариант цены для варианта).

Вот этапы реализации.

Шаг 1. Создайте продукт для пожертвований с различными вариантами. См. рисунок ниже:

Шаг 2. Создайте новый шаблон продукта (product.donation.liquid), а затем назначьте его вновь созданному продукту.

Шаг 3. Например, я использую деревянный каркас. Откройте шаблон продукта и попытайтесь найти этот код.

<label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label> <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector"> <button type="submit" name="add" id="AddToCart" class="btn"> <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> </button>

а затем замените приведенный выше код этим.

<!-- End: Donation Product Starts --> <div id="other-amount" style="display:none;"> <label for="OtherAmount">Enter Amount:</label> <input type="text" id="OtherAmount" /> </div> <input type="hidden" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" /> <div id="addto-cart-wrap"> <button type="submit" name="add" id="AddToCart" class="btn"> <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span> </button> </div> <!-- End: Donation Product Code -->

Шаг 4. Теперь попробуйте найти функцию обратного вызова OptionSelectors. Что выглядит так:

var selectCallback = function(variant, selector) { timber.productPage({ money_format: "{{ shop.money_format }}", variant: variant, selector: selector }); }; // selectCallback Ends

и замените его на этот:

var selectCallback = function(variant, selector) { timber.productPage({ money_format: "{{ shop.money_format }}", variant: variant, selector: selector }); // Donation Product Code Starts variantName = (variant.title).toLowerCase(); if(variantName == 'other'){ $('#other-amount').show(0); $('#OtherAmount').prop('required', true).val(''); $('#ProductPrice').hide(0); } else { $('#other-amount').hide(0); $('#OtherAmount').prop('required', false).val(''); $('#Quantity').val(1) $('#ProductPrice').show(0); } // Donation Product Code Ends }; // selectCallback Ends

Приведенный выше код будет пытаться сопоставить «другой» вариант каждый раз, когда вариант изменяется. И если он будет найден, появится текстовое поле для ввода нужной суммы.

Шаг 5. Теперь поместите этот код js в функцию готовности документа. Этот код обновит поле цены и количества. «Другой вариант» имеет цену 1. Поэтому, когда кто-то введет желаемую сумму, мы обновим количество продукта, а также покажем цену.

// Donation Product Code Starts $('#OtherAmount').keyup(function(){ console.log($(this).val()); otherAmountValue = $(this).val(); if(otherAmountValue == 0){ alert('Please enter some value'); $(this).val(''); return false; } AmountPriceFormat = '$'+otherAmountValue; $('#Quantity').val(otherAmountValue); $('#ProductPrice').show(0).text(AmountPriceFormat); }); // Donation Product Code Ends

Шаг 6 (необязательно).Если вы хотите скрыть количество и цену пожертвованного продукта на странице корзины, выполните этот шаг. Попробуйте найти этот код в шаблоне cart.liquid.

<td data-label="{{ 'cart.label.price' | t }}"> <span class="h3"> {{ item.price | money }} </span> </td> <td data-label="{{ 'cart.label.quantity' | t }}"> <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0"> </td>

и замените его на этот:

<!-- Donation Products Code Stars --> {% if item.url contains 'donation-product' %} <td data-label="{{ 'cart.label.price' | t }}"></td> <td data-label="{{ 'cart.label.quantity' | t }}"></td> {% else %} <td data-label="{{ 'cart.label.price' | t }}"> <span class="h3"> {{ item.price | money }} </span> </td> <td data-label="{{ 'cart.label.quantity' | t }}"> <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" /> </td> {% endif %} <!-- Donation Products Code Ends -->

И это все. Теперь вы можете протестировать. Если вы обнаружите какую-либо проблему, пожалуйста, оставьте комментарий.

Вы также можете проверить окончательные файлы кода на github: https://github.com/amandeepsinghvirdi/donation-product-shopify