Express Theme issue with custom item properties

Highlighted

Hi,

 

First, I would like to congrats to the Express theme (https://themes.shopify.com/themes/express) developers for creating a  amazing theme. It looks really nice and I see that the merchants like to use it.

 

However, we noticed that the Express Theme has an option to show the products in a neat little popup directly on the homepage.

 

As with many quick view apps, these popups can present an issue if the merchant wants to use any app which adds some custom properties to the products in their shop. For example custom product options or subscription line item properties.

 

The first issue is of course that the theme doesn't trigger any event to let the apps know that the popup is displayed.

This could be solved by adding the last 4 lines of code from my sample to the _showProductModal method:

 

_showProductModal(t) {
this.product = new rt(t),
this.productPopup = this.productPopup || window.popups.find(t => 'product-modal' === t.name),
window.Shopify && Shopify.PaymentButton && Shopify.PaymentButton.init(),
this.productPopup.openPopup({
currentTarget: this.productCard
});

// Prepare the event to notify apps that the product modal is now displayed.
var event = new Event('product_modal_displayed');
// Dispatch the event.
window.dispatchEvent(event);
}

 

The second issue with this theme is that when the product modal is displayed.

The theme adds the products to the cart with an Ajax request (JavaScript). However, it does this differently than the default HTML form submit action would do it.

The default HTML form submit action submits all input, select, textarea and other elements to the /cart/add endpoint.
But this Express theme's JavaScript doesn't submit all inputs from the form. It just submits the ones which were there when the page was loaded.

It ignores all elements which were added to the form after that.

 

To resolve this issue, a single line of code has to be added to the A.prototype.properties method in the theme's JavaScript. Here is the modified function with the added function call marked in bold.

 

A.prototype.properties = function () {


// Workaround to make sure that the list of properties is updated with any newly added properties
this.propertyInputs = this._initInputs(Z.propertyInput, n.onPropertyChange);


var t = x(this.propertyInputs, function (t) {
return /(?:^(properties\[))(.*?)(?:\])/.exec(t)[2]
});
return 0 === Object.entries(t).length ? null : t
}

 

This modification will get the currently displayed properties in the product modal and add include them in the add to cart action.

 

I am posting this here in hopes that this changes can be added to the original theme JavaScript file (assets/theme.min.js). I believe that these changes will make the theme a lot more useful for merchants and will reduce the number of support request for theme and app developers.

 

Thanks.

 

 

1 Like
Highlighted
New Member
1 0 0

Hi, 

 

Thanks for posting this, but after adding your code to my Express theme code base, I don't see anything changed.

I am trying to use the Infinite Product Options app with this Express theme, but the quick view isn't able to load up the custom options.

 

Any help will be appreciated.

 

Thanks!

0 Likes
Highlighted

Hi,

 

I think that the problem is that your app for product options isn't yet compatible with your theme. The app has to listen to the event which is triggered when the quick view popup is displayed. Our Seal Subscriptions app is actively listening to this event and will add the properties to the quick view popup, but other apps are probably not there yet.

So I think it might be best to contact the support team for your app and ask them if they can make the app compatible with this event and with the theme ;)

0 Likes