Samples of Custom Code for Bigcommerce

Limit by Price

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

<div id="partiallyCartButtonContainer"></div>
<script>
document.partiallyButtonConfig = {
     offer: 'REPLACE-WITH-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: {{{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 SKU

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

<script>
var items = {{{json cart.items}}};

// List of SKUs that should trigger the offer
var eligibleSKUs = ['REPLACE-WITH-SKU'];

// Check if any cart item has an eligible SKU
var eligibleItemExists = items.some(item => eligibleSKUs.includes(item.sku));

if (eligibleItemExists) {
  var offerId = 'REPLACE-WITH-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: {{{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);
  })();
} else {
  // No eligible SKUs; hide the button
  var container = document.getElementById('partiallyCartButtonContainer');
  if (container) container.style.display = 'none';
}
</script>

Limit Some Products to Specific Offers, While All Other Products have a Default Offer

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

  var offerId = 'REPLACE-WITH-DEFAULT-OFFER';

  {{#any cart.items product_id=REPLACE-WITH-PRODUCT-ID}}
  // product_id is in the empty_cart
  offerId = 'REPLACE-WITH-OFFER-FOR-THIS-PRODUCT';
  {{/any}}

  {{#any cart.items product_id=REPLACE-WITH-PRODUCT-ID}}
  // product_id is in the empty_cart
  offerId = 'REPLACE-WITH-OFFER-FOR-THIS-PRODUCT';
  {{/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>

Have More Questions?

Email us at support@partial.ly.