Recharge Subscriptions + Debut Theme + Properties + Cart Popup Fix

Highlighted
New Member
3 0 1


Screen Shot 2020-05-08 at 5.20.00 PM.png

 

I'm dropping this code here because it doesn't seem to exist anywhere. This makes property items in cart popup widget pretty. 

 

Before:

subscription_id: 12345

shipping_interval_unit_type: 15
shipping_interval_frequency: Days
 
After:
Recurring delivery every 15 Days
 
Directions:
1. Open up theme.js
2. Find _getPropertyList: function, around line 6736
3. Replace that function with the following code. 
 
_getPropertyList: function(properties) {
      var propertyListHTML = '';
      var propertiesArray = Object.entries(properties);

      // Recharge vars
      var rechargePropSubId = '';
      var rechargePropIntervalUnit = '';
      var rechargePropIntervalFrequency = '';

      propertiesArray.forEach(function(property) {
        // Line item properties prefixed with an underscore are not to be displayed
        if (property[0].charAt(0) === '_') return;

        // if the property value has a length of 0 (empty), don't display it
        if (property[1].length === 0) return;

        // Recharge edit for cart popup
        if ( property[0] == 'subscription_id' || 
             property[0] == 'shipping_interval_unit_type' || 
             property[0] == 'shipping_interval_frequency' ) {

                switch (property[0]) {
                    case 'subscription_id':
                        rechargePropSubId = property[1];
                        break;
                    case 'shipping_interval_unit_type':
                        rechargePropIntervalUnit = property[1];
                        break;
                    case 'shipping_interval_frequency':
                        if (property[1] == "1") { 
                            if (rechargePropIntervalUnit == 'Days') {
                                rechargePropIntervalUnit = 'Day';
                            } else if (rechargePropIntervalUnit == 'Weeks') {
                                rechargePropIntervalUnit = 'Week';
                            } else if (rechargePropIntervalUnit == 'Months') {
                                rechargePropIntervalUnit = 'Month';
                            }
                        }

                        rechargePropIntervalFrequency = property[1];
                        break;
                }

                // Display only if we have all three recharge vars set after all the looping
                if (rechargePropSubId != '' && rechargePropIntervalUnit != '' && rechargePropIntervalFrequency != '') {
                    propertyListHTML = 
                    propertyListHTML + 
                    '<li class="cart-subscription-details">Recurring delivery <strong>every ' +
                    rechargePropIntervalFrequency + ' ' +  rechargePropIntervalUnit
                    '</strong>.<br>Change or cancel anytime</li>';
                }

        } else {

            propertyListHTML =
            propertyListHTML +
            '<li class="product-details__item product-details__item--property">' +
            '<span class="product-details__property-label">' +
            property[0] +
            ': </span>' +
            property[1];
            ': ' + '</li>';
        }
      });

      return propertyListHTML;
    },
1 Like
Highlighted
New Member
1 0 0

Hi -

I'm having this issue but your code didn't fix it! See example here:

https://www.littleritualskids.com/products/elderberry-super-immunity-vitamins

What am I doing wrong?

0 Likes
New Member
1 0 0

Here is my solution for the Boundless theme.

1. theme.liquid. Find "ajaxcart__product-meta" code and add attributes.
Result:

{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta" data-key-cart="{{@key}}" data-val-cart="{{this}}">{{ @key }}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}

2. theme.js.liquid. Find cartCallback(cart); line. and paste after that following code.

$('[data-key-cart="shipping_interval_frequency"]').each(function(){
var frequencyShipping = $(this).attr("data-val-cart"),
$unitTypeShipping = $(this).parent('.ajaxcart__product-name-wrapper').find('[data-key-cart="shipping_interval_unit_type"]'),
unitTypeShipping = $unitTypeShipping.attr("data-val-cart");

$unitTypeShipping.hide();
$(this).text('Recurring Delivery every '+frequencyShipping +' '+ unitTypeShipping+'. Change or cancel anytime');
});
Shopify and Squarespace dev.
0 Likes
Highlighted
New Member
1 0 0

I am having the exact same problem! I am using the Venue theme purchased through Shopify.  All I want to do is remove the Recharge label code:

shipping_interval_unit_type: Weeks

shipping_interval_frequency: 2

Any ideas on how to replace with = "Recurring delivery every 2 weeks."

 

I appreciate any help.  This has been driving me crazy since I purchased through Shopify.

Thanks!

0 Likes