Add to cart on custom dynamic product page

Ask the community
, ,
1

Hi , I am trying to set up an “store” (really an art gallery show) so that viewers can click on a gallery image to go to a product page where they can see the artwork in fullscreen and also add to cart and buy online.
I used the store product page and created a dynamic page from there. On the new dynamic page I added a single image pro gallery so I could have both horizontal and vertical images fit without cropping. I was able to custom code a text button that would replace the any artwork prices as $0.00 to show Not for Sale instead and I was able to create a sold image for any artwork whose inventory gets changed to “out of stock” All that works fine and changes dynamically when I switch products.
I then added a “add to cart button” from the wix store but it will not change based on the dynamic page . I have to manually set it for a particular product. I thought I would just do that after trying many coding solutions but it only will remember the product I last linked the button too so I cannot seem to manually set each product either.
Is there a way to code the add to cart button to add the correct price to the cart based on the product that is selected ? I also tried creating a generic button and tried to link the data but there was nowhere to link to . I copied some code examples but they didnt work and I kept getting .addToCart is not a valid function or is not a part of $w element.
Here is my code:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
// TODO: write your page related code here…
$w( “#dynamicDataset” ).onReady(() => {
let items = $w( “#dynamicDataset” ).getCurrentItem();
console.log (items[ “formattedPrice” ]);
if (items[ “formattedPrice” ]=== “$0.00” ) { $w( “#text7” ).show(); $w( “#text6” ).hide() }
else $w( “#text7” ).hide();
});
$w( “#dynamicDataset” ).onReady(() => {
let stock = $w( “#dynamicDataset” ).getCurrentItem();
if (stock[ “inStock” ]=== false ) { $w( ‘#vectorImage1’ ).show();}
else $w( ‘#vectorImage1’ ).hide();
});

});
This code works although any suggestions welcome .I deleted the parts I tryed with the add to cart button as none of them worked and I was not sure where to add it.

1195×562 73.1 KB

Any help would be greatly appreciated !
Thank You

2

Hi everyone, I figure out the problem. I did not also add a shopping cart icon to the page . Once I did that , it all seems to work.
Still if anyone has any better suggestions on how to write this better then I would be happy to learn !
$w.onReady( function () {
// TODO: write your page related code here…
$w( “#dynamicDataset” ).onReady(() => {
let items = $w( “#dynamicDataset” ).getCurrentItem();
console.log (items[ “formattedPrice” ]);
if (items[ “formattedPrice” ]=== “$0.00” ) { $w( “#text7” ).show(); $w( “#text6” ).hide() }
else $w( “#text7” ).hide();
});
$w( “#dynamicDataset” ).onReady(() => {
let stock = $w( “#dynamicDataset” ).getCurrentItem();
if (stock[ “inStock” ]=== false ) { $w( ‘#vectorImage1’ ).show();}
else $w( ‘#vectorImage1’ ).hide();
});

});

export function button3_click(event) {
// Add your code for this event here: export function addToCartBtn_click(event, $w) {
const productId = $w( ‘#dynamicDataset’ ).getCurrentItem()._id;
$w( “#shoppingCartIcon1” ).addToCart(productId);
}