Custom Options

This option is used to allow Nibble to calculate the price of a product based on its custom options. If your store does not use products (Simple or Configurable) with Custom Options that can affect the Price or Sku then you can leave it as False.

A/B Testing

If you want to show/hide the Nibble Button based on external requirements (e.g. you want to track visibily in Google Tag Manager for A/B testing) you can activate these options

  • A/B Test Trigger (PDP) : Nibble Button on Product Detail Page
  • A/B Test Trigger (Cart) : Nibble Button on Cart page

If these options are set to True, the button will not be visible, unless a javascript event is fired

PDP:

document.dispatchEvent(new Event('nibble-button-show'));


Cart:

document.dispatchEvent(new Event('nibble-cart-button-show'));
document.body.dispatchEvent(new Event('nibble_cart_update'));


You can use this option to manage the visibility of the Nibble button according to your frontend logic, if needed.

Please take careful note of the cart code. The cart update event is fired on body not on document.

Signposting and AOV Rules

If an AOV rule is enabled in Nibble Admin Panel, Nibble will recommend products based on the products in the current cart. The suggested products will be chosen between the ones defined as CROSS-SELL products for the products in the cart. Like those that are usually visible under the cart page table.

Important: Only Simple products can be used as “recommendations”. Any other type will be ignored.

If no valid products are set as “cross-sell”, the system will use a specific product as a fallback solution, the product does not need to be enabled or saleable. As only the cross-sell products defined for it will be used by Nibble.

So, if you want to set site-wide recommendations, just add them as cross-sell products for a specific product and add the Product ID to the configuration page using the “Fallback product ID” field.

Bespoke Themes

Nibble is based on the Luma Theme’s structure and attribute naming conventions.

To accommodate bespoke themes, it is possible to customize some of the selectors used by the Nibble Extension. The purpose of the selectors is to show the Nibble button and allow negotiation only if the selected values are valid. There are two customization methods available.

Selector Customization

To customize the selectors used by the script, just add the nibbleSelectors object to the DOM of the page using a custom module, configuration/theme design page or custom blocks in the Magento backend, if your theme allows it. If a selector value is not defined, the default one will be used.

// a simple code like this to customize swatches selectors
var window.nibbleSelectors = {
    swatches_attribute: '[custom-data-attribute-id]', // swatches selector
    swatches_attribute_id: 'custom-data-attribute-id', // swatches attribute id
    swatches_attribute_code: 'custom-data-attribute-code', // swatches attribute code
		// ...
}

Check the file view/frontend/web/js/main.js for a list of customizable selectors

Validator customization

You can also redefine the three functions used to validate custom attributes and options, in case they are too different from the default Luma’s.

To customize one of the three functions ( nibbleSwatchesCheck, nibbleDropdownsCheck and nibbleOptionsCheck ) used to validate the input fields, you need to redefine them in any script or custom module. Please check the file view/frontend/web/js/main.js for the expected function results (e.g. selected variant ID for configurable products).