시간과 공간 그리고 진실의 방

Create product add-ons using Gravity Forms

With the Gravity Forms Product Add-Ons extension, advanced product configuration forms can be built and linked to any product in WooCommerce. Forms that contain conditional logic, pricing fields, user input prices, conditional-pricing fields, conditional submit button logic can all be created for your products.

Additionally, any product that contains a Gravity Form is tracked in the cart to ensure, no matter how complex your product form, only unique configurations are added to the cart and duplicates are incremented in quantity.

Gravity Forms Product Add-Ons gives you full control over the display of prices in the store. You can use the default price displays provided by WooCommerce, or set the price to ‘As Low as $1000’ in the case of a configurable product containing pricing fields.

You also have control over when the built-in automatic price calculation is displayed, if at all, and can configure each label individually.

This extension requires the Gravity Forms plugin.

Setup and Configuration

Required Configuration
The plugin does not require any manual configuration after activation.

Optional Configuration
A setting you might change is how HTML is formatted from specific Gravity Forms field types. A common request is to have HTML from the List type field show as HTML and not as a CSV list of data. To do this, you can use a filter to turn off HTML stripping in the plugin.

To turn off HTML stripping, add the following to the functions.php file in your theme:

view raw
functions.php
hosted with 

 by GitHub

Getting Started

Build a Gravity Form that contains any of the supported field types. Be sure to leave the Confirmation settings as default text with an empty message. Configure any conditional logic, and optionally submit button logic.

Gravity Forms Product Add Ons does not change or add anything to the actual configuration of the form itself.  The extension will use the form you have already built using the standard method to build a Gravity Form.

To configure the form, do so as though you were creating a form with no connection to WooCommerce.

• I recommend adding the form to a temporary post or page, or using the Form Preview to get it working properly.
• Make sure that you submit an entry so you can validate that a regular Gravity Forms submission creates the entry with the correct information
• Once you have the form configured as required, and after it is attached to a product it will be displayed as you require.

If you need additional assistance with setting up the Gravity Form itself you could check the Gravity Forms Documentation or contact their support team for further assistance on that part.

In the example below, the form is configured to use pricing fields. When using pricing fields, Gravity Forms requires a product and total field. Typically you add a hidden product field to the form and set its price to the price at which you require customizations.

Add a Product field (from the Pricing Fields section) to the form in order to configure the base customization price and set it to $0.00:

Gravity Forms Product Add-On requires that at least one Total field (from the Pricing Fields section) be present on the form. Add a total field to the form. In this example, we are using the built-in dynamic price calculations on our single product page. To prevent the customizations total from being displayed twice on the single product page (once in the dynamically calculated price area and once in the gravity form itself), add a class of “hidden-total” to CSS Class Name under the Appearance tab in the field configuration:

To add options to your form, use the Option field type from Gravity Forms.  You can use other controls, such as the standard dropdown, but you must use the option field if your option has a cost associated.

Note: If you have options that have a cost associated, you must use the Product Option field type, not standard drop-down fields, radio buttons, checkboxes, etc.  This is standard for how Gravity Forms works. If you have trouble creating the product form, Gravity Forms documentation has several good examples.

Once you have built your form and are satisfied with the functionality, create or edit an existing WooCommerce product. Please note that in order for the form to display on the front end, you will need to have either a price or a 0 in the Regular Price field (for more information, see FAQ below).

Select the form you wish to use.

With Gravity Forms Add-On enabled, you have options for linking the form, displaying the Gravity Form title and description, and displaying alternative price titles throughout the store. You also have the ability to control how the dynamically calculated price is displayed on the single product page.

Price Labels

Remove WooCommerce Price

This will remove the price html from the store when viewing the product.  Use this option if you are doing all calculations in the form and do not want 0 or Free to display as the products regular price.

Price Before

A label which can be added before the price.  Useful for adding information to the price section on the product letting your customers know the price is the base price, and additional form options will add to the total cost.

Price After

A label to display after the regular price in your store.

Total Calculations

Enable Dynamic Pricing

This option will be visible if you have the WooCommerce Dynamic Pricing plugin active.  By setting this to Yes, the price visible to your customers will automatically update based on pricing rules and the cost of the customers selected options.

Disable Calculations

To completely remove the Subtotal, Options Total and Grand Total section from your products.  Useful if you are not performing any calculations and have no fields on your form which add to the products cost.

Disable Subtotal

Will remove the Subtotal line from the totals section on your product page.

Subtotal Label

The label to display for the Subtotal line item.

Disable Options Total

Will remove the Options total, the price added to the product by your form options, line from the totals section on your product page.

Options Label

The label to display for the Options line item.

Disable Total Label

Will remove the Total, the price of your product plus the price added to the product by your form options, line from the totals section on your product page.

Total Label

The label to display for the Total line item.

Entries and Notifications

Keep Cart Entries

As of Gravity Forms 3.3, entries are only created when the order is placed.  In previous versions entries were created as a side effect of creating the cart item.  These entries are now removed by default automatically.  If you would like to track both the entries created when someone is adding an item to their cart check Keep Cart Entries.

Note, normally this is not very useful since you have no link between the entry and the cart to which it was added.

The entries created during the actual checkout process are properly linked to their associated order items.

Update Payment and Transaction Details

Check this box to enable the transactional data link between the Gravity Form entry and the WooCommerce order.  When enabled transaction information, such as payment status and order details, will be linked to the entry automatically.  The information will update as the order and payment status change in WooCommerce.

Send Notifications

Gravity Forms Product Addons automatically disables any notifications from being sent when items are ordered and entries are created.

If you would like to process your notifications, enable this option.   When orders are created you will receive the notifications you have configured for each cart item which has a form attached to it.

Advanced Options

Enable Cart Edit

Enable this to allow users to edit items they have added to their cart.  The default would be the user would need to fill out a form and add it to the cart, and manually remove any items on which they want to change.  If you enable cart edit users can click on the item in the cart to be taken back to the product page with their details pre-filled out.

Replace Modified Items

Choose to Replace the edited item or to add a new item to the cart.  Normally you would want to replace the modified item, since the user is editing it, however the option now exists to append the modified item.

Quantity / Stock Options

If your form has the right type of fields you can enable the form to be linked to either the Cart Quantity or the final Order Item Quantity.  This could be useful if you have quantity fields on your form itself and want to use that value when the customer adds the item to the cart.

If you would just like to reduce the stock quantity of your WooCommerce product based on a field on the form, choose Order Item Quantity.  The cart quantity will remain 1 but when the order is placed the stock quantity of the product will be reduced by the value of the field you choose.

After your options have been configured, publish or update your product. Navigate to the product in the store and see how your form has been linked to the product:

When a customer purchases a product linked to a Gravity Form, here is how the add-on information displays:

Cart View

Order Confirmation

Admin Email – New Order Notification

WooCommerce Order Information

Gravity Forms Product Addons 3.3 now links each order item to the Gravity Form entry created during the checkout process.  Once the order is placed you can quickly jump from the WooCommerce order to the associated entry.

Gravity Form Entry Information

Gravity Forms Product Addons 3.3 adds additional information to the entries inside of Gravity Forms itself.   This allows you to quickly see the associated WooCommerce order information.

Each cart item ordered will have a 1-1 relationship to it’s entry.

The entries themselves will have additional data provided by the parent WooCommerce order.

Gravity Form Entry Transaction Information

The entries are linked to their respective WooCommerce order item and will update it’s status and transaction information as the order proceeds through the order and payment process.  This is useful if you want to export your entries and only work with items with a specific order status.

Supported Gravity Form Fields and Features

Standard Fields

• Single Line Text
• Drop Down
• Number
• Radio Buttons
• HTML
• Paragraph Text
• Multi Select
• Checkboxes
• Hidden
• Section Break

Advanced Fields

• Name
• Time
• Address
• Email
• Date
• Phone
• Website
• File Upload
• List ( Partial support, the column values are stored in WooCommerce as a CSV list of data, not the raw HTML )

Pricing Fields

• Product
• Option – Drop Down
• Option – Check-boxes
• Option – Radio buttons
• Total
• Quantity
• Shipping

Forms that are AJAX-enabled are not currently supported with Gravity Forms Product Add-Ons

Quick Tips

• Any license level of Gravity Forms will work with this extension.
• If you are having trouble with a form, calculations or conditional logic, ensure that the form works as expected on a regular post or page.  Often times, calculated fields or conditional logic is not configured as expected and it’s easier to track this down when using the gravity form alone and without an attached product.
• Ensure that you avoid using custom confirmation settings on the form.  Leave the default confirmation set to text with an empty message.

FAQ

What is the best way to use these forms while keeping my website fast?

Make each individual product into a separate Gravity Form Page. Using conditional logic on each separate product page (rather than providing every variable possible on one page) will keep your website fast. Each field that has conditional logic requires an AJAX post back, so there will be only five rather than 25 fields with conditional logic. Using the multipage approach should take care of lag issues.

Why are duplicate entries created?

Gravity Form Add-Ons no longer creates duplicate entries.  Entries are created during the add to cart process, however they are automatically removed.   Once the actual order is completed an entry will be created and will be linked to the ordered item.   When viewing the order you will see a link to the entry and when viewing the entry you will see a link to the WooCommerce Order.

Why won’t Gravity Forms show on the front end?

Products that have an empty ‘price’ field won’t display Gravity Forms Add-Ons. Enter a value as shown:

The Gravity Form will also not display if you have any fatal JavaScript errors on your site caused by your theme or other plugins.  Gravity Forms itself uses JavaScript to display the form, and if there is a fatal script error before the form is completely rendered it won’t be displayed.    You can check for this condition by using Google Chrome Developer Tools and checking the Console to see if there are any errors.   If there are you should contact the Theme or Plugin Author to help resolve those.

Can I use Gravity Forms Add-Ons to send emails?

Gravity Forms will not send notifications you have configured once the order is completed.  This is a recent change as of version 3.3.   If you want to receive Admin Notifications you can enable those when configuring the form options on your WooCommerce product.

Why do my forms redirect to a page URL that ends with /:/?

Ensure that you are running the latest version of Gravity Forms and Gravity Forms Product Add-Ons. If this is still an issue, delete the problematic form and create it again from scratch. Use the new form.

Why are my Options and Totals not correctly adding costs?

There are a few possibilities. The first is that you must check that you are assigning each option field to a product field. Next ensure that you have Disable quantity field checked for the product field if this option is not used.

Why doesn’t this work with the Gravity Forms Partial Entries add-on?

Partial Entries is a 3rd party add-on for Gravity Forms, which collects data for partially completed, but not submitted, forms. Since the actual form entries for Gravity Forms are not important to the WooCommerce cart / order process (see FAQ re: duplicate entries), this add-on is not compatible with our Gravity Forms Product Add-ons extension.

Why are my calculations not showing?

In some cases it may be due Ajax being disabled. It may also be a plugin/theme conflict. More at: WooCommerce Self-Service Guide.

Can I use the form fields to change the product’s featured image like I do with product variations?

No, Gravity Forms does not allow to link fields and their values with product variations.

Where can I see Gravity Forms Product Add-Ons in action?

There is a demo showing:

• Pizza Builder
• Donations – choose an amount
• Books of different sizes

Questions & Support

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with the developer via the Help Desk.

docs.woocommerce.com/document/woocommerce-gravity-forms-product-addons/

What I'm trying to achieve is to create one module that contains multiple functions in it.

The problem I have is that the firstParam is an object type and the secondParam is a URL string, but when I have that it always complains that the type is wrong.

How can I declare multiple module.exports in this case?

stackoverflow.com/questions/16631064/declare-multiple-module-exports-in-node-js

• Downloading the Gravity PDF Add-On
• Exporting Entries as PDF
• Questions & Support

Many users find it helpful to export their Gravity Forms entries as a PDF for better ability to print them as well as attach them within an email. In this article, we will show you how to use a 3rd party plugin to easily export your Gravity Forms entries as a PDF.

Downloading the Gravity PDF Add-On

While Gravity Forms does not have the ability to natively export entries as a PDF, another developer has developed a solution that works quite well.

1. First, log into your WordPress admin dashboard.

2. 

   Next, hover over Plugins and click on Add New.

3. 

   On the top right of the page, search for Gravity PDF.

4. 

   Upon searching, your first result should be Gravity PDF from Blue Liquid Designs. Simply click the Install Now button.

5. 

   WordPress will now handle the download and installation of the Gravity PDF plugin for you. Be sure to activate the plugin once complete.

Exporting Entries as PDF

1. 

   First, click on Forms on the left side menu.

2. 

   Next, hover over the form that you want to view entries for. Upon doing so, you will see additional options appear. Click on Entries.

3. 

   You should now be looking at a list of your entries. Hover over your desired entry, and click on View PDF.

4. 

   You will now be presented with a PDF of your Gravity Forms entry.

Questions & Support

The Gravity PDF Add-On is created by a third-party developer and as such is not supported by our team, please contact the plugin developer if you have any questions about its features or require support for any issues.

• Gravity PDF at WordPress.org
• Gravity PDF official site

이 글은 ‘JavaScript — The Conditional (Ternary) Operator Explained by Brandon Morelli’ 를 번역한 글입니다.

기본부터 시작하다 — if 문

if 문처럼 조건부(conditional)를 사용한다면, 특정 조건이 충족되면 특정 블록의 코드가 실행되어야 되는 것을 허락합니다.

다음 예시를 봅시다:

우리는 driver, name, age 라는 프로퍼티(property)를 가진 person 객체(object)를 예시로 봅시다.

let person = {
name: 'tony',
age: 20,
driver: null
};

우리는 person 나이가 16보다 크거나 같은지 실험을 해보고 싶습니다. 만약 해당 실험이 참이라면, 사람은 운전 가능한 나이고 driver 은 ‘yes’ 라고 할 것입니다. 만약 해당 정보가 거짓이면 driver 은 ‘No’를 반환할 것입니다.

해당 실험은 if 문으로 작성할 수 있습니다:

if (person.age >= 16) {
person.driver = 'Yes';
} else {
person.driver = 'No';
}

그러나 우리가 위에 완성된 if 문을 한 줄의 코드로 작성할 수 있습니다. 자, 여기있습니다:

person.driver = person.age >=16 ? 'Yes' : 'No';

이 짧은 코드는 우리에게 동일한 person.driver = ‘Yes’; 의 결과를 산출합니다.

The Conditional (Ternary) Operator (조건부 삼항 연산자)

우선, 우리는 정형적인 if 문법을 보겠습니다:

if ( condition ) {
value if true;
} else {
value if false;
}

자, 이제 ternary operator(조건부 삼항 연산자) 로 바꿔볼까요?:

condition ? value if true : value if false

당신이 알아야할 것은 다음과 같습니다:

1. condition(조건) 이 당신이 실험하고 있는 것이다. 당신의 condition(조건)의 결과는 진실 또는 거짓입니다. 아니면 적어도 boolean 값은 일치해야한다.
2. A ? 는 우리의 conditional(조건부)과 true value 값을 구분합니다. ? 와 : 사이에 있는 모든 condition(조건)은 true(참)이면 실행된다.
3. 마지막으로 : 은 조건의 상태가 거짓으로 평가되면 : 이후에 나오는 코드는 실행된다.

예시 — Driver(운전자)의 나이

다시 처음 예시를 살펴보자:

let person = {
name: 'tony',
age: 20,
driver: null
};person.driver = person.age >=16 ? 'Yes' : 'No';

가장 중요한 것은 operations(연산자) 순서이다. 코드를 실행하는 순서를 시각화하는데 도움이 되는 parenthesis(괄호)를 추가해보자.

person.driver = ((person.age >=16) ? 'Yes' : 'No';)

시각화하면, 우리의 conditional(조건부) 가 person.age > = 16 값이 참인지 거짓인지 처음으로 확인한다.

20은 16보다 크기 때문에 true(참)으로 평가한다. 지금 우리는 여기까지 왔다:

person.driver = (true ? 'Yes' : 'No';)

우리의 conditional(조건부)의 condition(조건) 이 true 이므로, ? 와 : 사이에 있는 값이 리턴된다. 해당 예시같은 경우에는 ‘Yes’ 결과 값이 나온다.

리턴 값이 있기에 마지막으로 해야할 일은 변수와 동일하게 설정하는 것이다.

person.driver = 'Yes';

축하합니다! 이제 좀더 복잡한 예시를 살펴봅시다.

예시 — 학생할인

해당 예시에서 우리가 영화관을 위해 코딩을 한다고 합시다. 영화관은 두 가지의 표 가격을 제시합니다: 일반인은 $12 그리고 학생은 $8 으로 가격을 제시합니다.

구매하는 사람이 학생인지 아닌지의 여부를 추적할 변수를 생성합시다:

let isStudent = true;

해당 변수를 통해 우리는 ternary operator( 삼항 연산자) 를 사용하여 가격을 변동할 수 있습니다.

let price = isStudent ? 8 : 12
console.log(price);
// 8

isStudent boolean 이 true(참) 이므로, 8 값이 다중 삼항(ternary)으로부터 price 변수로 리턴됩니다.

예시 — Nested Ternary

하지만, 만약 영화관에서 학생과 노인에게 할인을 한다면 어떻게 할까요?

우리는 다양한 조건을 실험하기 위해서 nest(네스트) 된 ternary operator( 삼항 연산자) 사용할 수 있습니다.

해당 시나리오를 확인하면 티켓은 : 일반인은 $12, 학생은 $8 그리고 노인은 $6 입니다.

노인인구를 추정하는 코드는 다음과 같습니다:

let isStudent = false;
let isSenior = true;let price = isStudent ? 8 : isSenior ? 6 : 10console.log(price);
// 6

해당 예시는 복잡합니다. 그러니 이를 짧게 나누어봅시다.

1. 우선, 우리는 티켓 구매자가 학생인지 알아봐야합니다. isStudent 가 false(거짓) 이므로, 첫 번째 : 이후의 코드만 실행합니다. : 이후에는 새로운 조건부가 있습니다.
2. 두번째 조건부는 isSenior 를 확인해봅니다. — 이가 true(참) 이기 때문에 ? 이후 : 이전의 코드만 실행합니다.
3. price 는 6의 값이 할당된다.

예시- Multiple operations (다수의 조건)

Multiple operations(다수의 조건) 를 ternary 안에 실행할 수 있습니다. 이를 위해, 우리는 쉼표로 조건을 나누어야 합니다. 또한, 추가적으로 괄호를 사용하여 코드를 그룹화 할 수 있습니다.

let isStudent = true;
let price = 12;isStudent ? (
price = 8,
alert('Please check for student ID')
) : (
alert('Enjoy the movie')
);

위의 예시에서 우리의 영화 price (가격) 는 이미 $12 로 지정되어 있습니다. 만약 isStudent 가 true(참) 이면 , 우리는 price 를 $8로 조정하고 판매자에게 학생증 확인하는 alert (경고)를 보냅니다. 만약 isStudent 가 false(거짓) 이면, 위의 코드는 생략하고, 영화를 즐기라는 경고가 나옵니다.

medium.com/@saerombang11/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%82%BC%ED%95%AD-%EC%97%B0%EC%82%B0%EC%9E%90-conditional-operator-%EC%84%A4%EB%AA%85%ED%95%98%EB%8B%A4-ac8afdb294ab