Add to cart button for dynamic pages for digital products

I am new to coding and web design. I use Wix Editor for my site. I have digital products (MIDI backtracks) which I want to sell on line. Wix’s add to cart button in elements behaves oddly in dynamic pages. On a list page, one must insert an add to cart button into every repeater, then manually assign each button to the appropriate product. On the item page, the button keeps the same product assigned to all products (ie, I insert an add to cart button on a page with a song “Blue suede shoes”; I go to the next product page and assign that button to the song “Shake rattle and roll”; I now go back to the the “Blue suede shoes” page and check that button’s assignation - it is also “Shake rattle and roll”.

I approached WixWiz for help. They were really helpful. So far, we have gotten the button to work, but there are two issues:

The only way the button would function was when we switched the product type to PHYSICAL. The problem here is that it obviously won’t send a download link to the customer, for them to download their file. I could do this manually every time, but it is rather time-consuming, and, quite frankly amateurish. With a digital product, the file is automatically sent as a link the minute the customer pays.

I can work so long with the Wix static item page to sell from, but this is just temporary while I try to find a solution to this problem.

If anybody has an idea how I can fix this, it would be highly appreciated.

The code on my .js page is as follows:
import wixData from ‘wix-data’;

export const getCatalogItems = async (options, context) => {

const { catalogReferences } = options;

console.log("catalog references", catalogReferences);



let catalogItems = \[\];



for (let reference of catalogReferences) {

    const { catalogReference } = reference;

    console.log("reference", reference);

    const customProductsQueryResult = await wixData.query("MIDIFiles").eq("\_id", catalogReference.catalogItemId).find({ suppressAuth: true });

    console.log("query result", customProductsQueryResult);

    const catalogItem = customProductsQueryResult.items\[0\];

    const data = {

        productName: {

            original: catalogItem.title_fld

        },

        itemType: {

            preset: "PHYSICAL" //"DIGITAL"

        },

        price: catalogItem.price.toString(),

        media: catalogItem.image_fld,

    }



    catalogItems.push({ catalogReference, data });

}

console.log("catalog items", catalogItems);

return { catalogItems };

};

First, really cool for WixWiz to help out.

I do feel you could use the CMS for displaying your products on a dynamic page without the need of code. From your description, I believe you might have been trying to link the buttons to the product using the Add to Cart button in the shop section; you can use a Themed Button instead to connect to the CMS.

I did an example you can test here and below is the setup of how the button should look in the list and item page.

Thanks, Rob

Wix support gave me similar advice. Got it working.

Much appreciated.

1 Like