Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Feb 10

Two columns of products on mobile view

Is it possible to view your products in two columns rather than a single product in mobile view?

1 answer0 replies
1

Using the inbuilt stores app & the product page it creates for you it is not currently possible to do this, however if you're familiar with Velo code & the wix-stores api it is possible to do this using a repeater populated by the data in the product catalogue (which is an available dataset -> "Stores/Products")

This would then allow you to fetch all products & apply them to a dataset (this would all be velo code, which I'll attach in an additional answer) - my example will use query & will be limited to 100 items for now, however it is not difficult to work around this by adding a load more button in a different section & attaching it to query more items and append it to the data in your repeater. (If this is needed contact me & I will partner your site and do the work for you :)) ) I hope my answer helps :) Screenshot of my workaround (this is not perfect and a proper solution would be far more elegant!



Here's my code!


import wixData from 'wix-data'; import wixLocation from 'wix-location';

$w.onReady(async function () {
 let products = await wixData.query("Stores/Products").find().then((results)=>{return results.items})
    console.log(products);
    $w('#repeater1').data = products;
    $w('#repeater1').onItemReady(($item, data, index)=>{
        $item("#productImage").src = data.mainMedia;
        $item("#productTitle").text = data.name;
        $item('#productPrice').html = "£"+data.price.toString();
 if (data.discount.type!=="NONE"){
            $item('#sale').show();
            $item('#productPrice').html = "<s>£"+data.price.toString()+"</s> £"+data.discountedPrice.toString();
        }
    })
    $w('#box1').onClick((event)=>{
 const itemId = event.context.itemId; 
 const data = $w('#repeater1').data; 
 const itemData = data.find((item) => item._id===itemId);
        wixLocation.to(itemData.productPageUrl);
    })
});

Editor X

Design your boldest creations.