# Examples

### Show/Hide Section Based on Field Value

This is a basic example of how to toggle the visibility of elements on your checkout based on the value of a field.

```html
<script>

    // Declare a constant `sectionToToggle` which contains a CSS selector for the section that will be toggled.
    // This points to the HTML element with the ID 'section-91735'.
    const sectionToToggle = '#section-91735';
    
    // Declare a constant `customFieldName` which specifies the name of the custom field we're interested in monitoring.
    // This is named "24_occupancy_options" in this case.
    const customFieldName = "24_occupancy_options";
    
    // Declare a constant `fieldValueToShow` that holds the value the custom field must have for the section to be visible.
    // In this instance, the section will be shown when the field's value is "double-occupancy".
    const fieldValueToShow = "double-occupancy";

    // The `checkout.ready()` function ensures the code inside runs once the Spiffy checkout system is fully initialized.
    checkout.ready(() => {
        
        // Add an event listener to monitor any changes in checkout fields.
        // The callback function runs whenever a checkout field value changes.
        checkout.on('change:field', (fields) => {
            
            // Initially hide the specified section by setting its CSS 'display' property to 'none'.
            document.querySelector(sectionToToggle).style.display = 'none';
            
            // Filter the `fields` array to find the custom field of interest by its name.
            // The filter function returns an array, but we're only interested in the first item ([0]),
            // as field names should be unique.
            let field = fields.filter(f => f.name == customFieldName)[0];
            
            // Check if the field's value matches `fieldValueToShow`.
            if (field && field.value == fieldValueToShow) {
                
                // If the value matches, make the specified section visible again by resetting its 'display' property.
                document.querySelector(sectionToToggle).style.display = null;
            }
        });
    });

</script>

```

### Charge Flat-Rate Shipping by Country

This is a basic example of how to select/deselect checkout items based on the value of a field. This can be expanded to include all sorts of logic for determining items active on the checkout

```html
<script>
// Declare a variable `shippingBlockId` that contains the ID of a block (or item) related to shipping.
var shippingBlockId = 377;

// The code inside `checkout.ready()` will execute once the checkout is fully initialized and ready for interactions.
checkout.ready(() => {
    
    // Add an event listener to monitor changes in any checkout field.
    // When any field value changes, this listener will be triggered.
    checkout.on('change:field', (value) => {
        
        // Extract the changed field from the event's value.
        const field = value.filter(f => f.name == 'billing_country')[0];
        
        // Check if the changed field's name is 'billing_country'.
        if (field.name == 'billing_country') {
            
            // If the new value of 'billing_country' is 'US'...
            if (field.value == 'US') {
                
                // Set the shipping block's quantity to 0, essentially deselecting or disabling it.
                checkout.set('item', shippingBlockId, 0);
            } else {
                
                // If the 'billing_country' is any other value than 'US'...
                // Set the shipping block's quantity to 1, essentially selecting or enabling it.
                checkout.set('item', shippingBlockId, 1);
            }
        }
    });
})
</script>
<style>#section-319 { display: none !important; }</style>
```

### Subscription Option Specific Discounts

This is an example of how to automatically swap between promo codes depending on which subscription option is selected

```html
<script>
// These suffix's map to the order of your subscription options.
// eg, the first suffix in the list below will be used to change
// the promo code (if any) that is used on the checkout.
// You'll need to add all these promo codes/discounts to your checkout
// in order for this to work properly. Eg, TESTX4F5 and TESTG7DK should
// be valid promo codes. You can add as many sets of promo codes as you
// like and you can should add as many suffixes as you have subscription
// options
const PROMO_SUFFIX = [
  'X4F5',
  'G7DK',
]

checkout.ready(() => {
  // Find a subscription block
  const blockEl = document.querySelector("[id*=basicSubscription-]")
  const BLOCK_ID = blockEl.getAttribute('id').replace('basicSubscription-', '')
  let selected = 0 // store selected in global scope
  
  // Handle subscription plan changes
  checkout.on('change:item', ev => {
    const item = ev.items[0]
    if (ev.block == BLOCK_ID) {
      selected = ev.selected[0]
      setPromo()
    }
  })
  
  // Handle promo code changes
  checkout.on('change:discount', setPromo)
  
  function setPromo () {
    // No promo applied
    if (!checkout.data.promo) return
    
    // Handle removing existing suffix and adding new one
    let code = checkout.data.promo
    PROMO_SUFFIX.forEach(suf => {
      if (code.lastIndexOf(suf) !== -1) {
        code = code.substring(0, code.lastIndexOf(suf))
      }
    })
    
    // Dont update it if we dont need to
    if (code + PROMO_SUFFIX[selected] === checkout.data.promo) return
    
    // Set the discount
    checkout.set('discount', code + PROMO_SUFFIX[selected])
  }
})
</script>
```

### Hide/Show Payment Plans based on Field Value

This is a basic example of how to hide/show payment plan options based on the value of a field.&#x20;

```markup
<script>
// Declare a variable `fieldName` that is a string of the custom field name
// that we should be looking at the values of.
var fieldName = 'event_dates';

// Declare a variable `onlySinglePay` containing an array of custom field values 
// that should only allow single payments.
// Right now, the array contains only one value: 'october'. 
// More values can be added to this array if required.
var onlySinglePay = ['october'];

// Declare a variable `payplanSectionId` that contains the ID of a section 
// that has the payment plan block. This section might be hidden or shown based on conditions.
var payplanSectionId = 123456;

// Initially hide the payment plan section using its ID.
// This uses a template literal to construct the CSS selector based on the provided section ID.
document.querySelector(`#section-${payplanSectionId}`).style.display = 'none';

// The code inside `checkout.ready()` will execute when the checkout is fully loaded and ready.
checkout.ready(() => {
    
    // Check if the event_date from the checkout data matches any of the dates in `onlySinglePay`.
    if (onlySinglePay.includes(checkout.data.fields.event_date)) {
        
        // If it matches, then set the 'payplan' to null. This might mean disabling a payment plan option.
        checkout.set('payplan', null);
        
        // Also hide the section associated with the payment plan using its ID.
        checkout.hide('section', payplanSectionId);
    }

    // Add an event listener to monitor changes in the checkout fields.
    // When a field changes, this listener will be triggered.
    checkout.on('change:field', (value) => {
        
        // Extract the changed field from the event's value.
        const field = value[0];
        
        // Check if the changed field's name is 'event_date'.
        if (field.name == fieldName) {
            
            // If the new value of 'event_date' is in the `onlySinglePay` array...
            if (onlySinglePay.includes(field.value)) {
                
                // Set 'payplan' to null and hide the payment plan section.
                checkout.set('payplan', null);
                checkout.hide('section', payplanSectionId);
            } else {
                
                // If the new value of 'event_date' is not in the `onlySinglePay` array...
                // Show the payment plan section.
                checkout.show('section', payplanSectionId);
            }
        }
    });
})
</script>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.spiffy.co/js-api/examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.