Samples of Custom Code for BigCommerce

With some custom coding, you can limit Partially on your BigCommerce store. Below are examples of various scripts to customize the Partially button on your cart page.

Limit by Price

{{#gt cart.grand_total.value 1000 }}

<div id="partiallyCartButtonContainer"></div>
<script>
document.partiallyButtonConfig = {
     offer: 'OFFER-ID-HERE',
     amount: '{{cart.grand_total.value}}',
     returnUrl: '{{settings.secure_base_url}}/cart.php',

     cssButton: true,
     cssButtonText: 'Purchase with',

     cssButtonShowLogo: true,
     cssButtonLogoType: 'full',
     cssButtonLogoPlacement: 'after',

     renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: {{{json cart.items}}}
   };
   (function() {
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = 'https://partial.ly/js/partially-checkout-button.js';
     script.async = true;
     document.head.appendChild(script);
   })();
</script>

{{/gt}}

Limit by Product ID

<div id="partiallyCartButtonContainer"></div>
<script>

var items = {{{json cart.items}}};

var eligibleProductIds = [120, 121, 122, 123];

var eligibleItemExists = items.some(item =>
  eligibleProductIds.includes(item.product_id)
);

if (eligibleItemExists) {
  document.partiallyButtonConfig = {
    offer: 'OFFER-ID',  
    amount: '{{cart.grand_total.value}}',
    returnUrl: '{{settings.secure_base_url}}/cart.php',

    cssButton: true,
    cssButtonText: 'Purchase with',
    cssButtonShowLogo: true,
    cssButtonLogoType: 'full',
    cssButtonLogoPlacement: 'after',

    renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: items
  };

  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://partial.ly/js/partially-checkout-button.js';
    script.async = true;
    document.head.appendChild(script);
  })();

} else {
  var container = document.getElementById('partiallyCartButtonContainer');
  if (container) container.style.display = 'none';
}
</script>

Limit Product ID to Specific Offer, All Other Products Have a Default Offer

<div id="partiallyCartButtonContainer"></div>
<script>

var offerId = 'DEFAULT-OFFER-ID';

{{#any cart.items product_id=PRODUCT-ID}}
offerId = 'PRODUCT-OFFER-ID';
{{/any}}

document.partiallyButtonConfig = {
     offer: offerId,
     amount: '{{cart.grand_total.value}}',
     returnUrl: '{{settings.secure_base_url}}/cart.php',

     cssButton: true,
     cssButtonText: 'Purchase with',

     cssButtonShowLogo: true,
     cssButtonLogoType: 'full',
     cssButtonLogoPlacement: 'after',

     renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: {{{json cart.items}}}
};
(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://partial.ly/js/partially-checkout-button.js';
  script.async = true;
  document.head.appendChild(script);
})();
</script>

Limit by Custom Field

<div id="partiallyCartButtonContainer"></div>
<script>

var items = {{{json cart.items}}};
var targetFieldName  = "CUSTOM-FIELD-NAME";
var targetFieldValue = "CUSTOM-FIELD-VALUE";

var eligibleItemExists = items.some(item =>
  (item.custom_fields || []).some(field =>
    field.name === targetFieldName &&
    field.value === targetFieldValue
  )
);

if (eligibleItemExists) {
  document.partiallyButtonConfig = {
    offer: 'OFFER-ID',
    amount: '{{cart.grand_total.value}}',
    returnUrl: '{{settings.secure_base_url}}/cart.php',

    cssButton: true,
    cssButtonText: 'Purchase with',
    cssButtonShowLogo: true,
    cssButtonLogoType: 'full',
    cssButtonLogoPlacement: 'after',

    renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: items
  };

  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://partial.ly/js/partially-checkout-button.js';
    script.async = true;
    document.head.appendChild(script);
  })();

} else {
  var c = document.getElementById('partiallyCartButtonContainer');
  if (c) c.style.display = 'none';
}

</script>

Limit Custom Field to Specific Offer, All Other Products Have a Default Offer

<div id="partiallyCartButtonContainer"></div>
<script>

var offerId = 'DEFAULT-OFFER-ID';
var items = {{{json cart.items}}};

if (items.some(item =>
  item.custom_fields &&
  item.custom_fields.some(f => f.name === 'CUSTOM-FIELD-NAME' && f.value === 'CUSTOM-FIELD-VALUE')
)) {
  offerId = 'CUSTOM-FIELD-OFFER-ID';
}

document.partiallyButtonConfig = {
  offer: offerId,
  amount: '{{cart.grand_total.value}}',
  returnUrl: '{{settings.secure_base_url}}/cart.php',

  cssButton: true,
  cssButtonText: 'Purchase with',

  cssButtonShowLogo: true,
  cssButtonLogoType: 'full',
  cssButtonLogoPlacement: 'after',

  renderSelector: '#partiallyCartButtonContainer',

  bigcommerceCartItems: items
};

(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://partial.ly/js/partially-checkout-button.js';
  script.async = true;
  document.head.appendChild(script);
})();
</script>

Limit by SKU

<div id="partiallyCartButtonContainer"></div>
<script>

var items = {{{json cart.items}}};

var eligibleSKUs = ['SKU123', 'SKU456', 'SKU789'];

var eligibleItemExists = items.some(item => eligibleSKUs.includes(item.sku));

if (eligibleItemExists) {
  var offerId = 'SKU-OFFER-ID';

  document.partiallyButtonConfig = {
    offer: offerId,
    amount: '{{cart.grand_total.value}}',
    returnUrl: '{{settings.secure_base_url}}/cart.php',

    cssButton: true,
    cssButtonText: 'Purchase with',

    cssButtonShowLogo: true,
    cssButtonLogoType: 'full',
    cssButtonLogoPlacement: 'after',

    renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: items
  };

  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://partial.ly/js/partially-checkout-button.js';
    script.async = true;
    document.head.appendChild(script);
  })();
} else {
  var container = document.getElementById('partiallyCartButtonContainer');
  if (container) container.style.display = 'none';
}
</script>