import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixLocation from 'wix-location'; $w.onReady(()=>{ $w("dynamicDataset").onReady(()=>{ //first we need to get the fingerprint of the browser's current width wixWindow.getBoundingRect() .then( (windowSizeInfo) => { let windowWidth = windowSizeInfo.window.width; //if you need to change sizes for many things at once such as large images and wide repeaters, use this to redirect people to a copied narrow version of the same page that you can design manually let thisData = $w("dynamicDataset").getCurrentItem(); let wideUrl = thisData['link-wide-dynamic']; let narrowUrl = thisData['link-narrow-dynamic']; //if window width is greater than or equal to 1280 pixels on desktop site, direct here if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop")) { wixLocation.to(wideUrl); } //or if window width is less than 1280 pixels on desktop site, direct here else if ((windowWidth < 1280) && (wixWindow.formFactor === "Desktop")) { wixLocation.to (narrowUrl); } } ); } ); } ); //or else if you need only minor tweaks you can choose to 1.show/expand and hide/collapse elements based on the windowWidth property and/or 2.alter the .html properties of text like so let textValue = $w("dynamicDataset").getCurrentItem().mytext; if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop")) { $w('#textElement').html = `${textValue}`; $w('#largeElement').expand(); } else if ((windowWidth < 1280) && (wixWindow.formFactor === "Desktop")) { $w('#textElement').html = `${textValue}`; $w('#largeElement").collapse(); } //optimally you can modify solution 1 to link pages through code like this //we'll use a repeater on a static page with links to dynamic pages as an example $w('#repeaterDataset').onReady(() => { $w('#repeater').onItemReady( ($item, itemData, index) => { $item('#repeaterText').text = itemData.mytext; $item('#repeaterText').onClick(() => { //if the desktop window is greater than or equal to 1280 pixels wide or if you are on the mobile site, direct to the standard wide page (you don't need two different layouts on Mobile) if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop") || (wixWindow.formFactor === "Mobile")) { wixLocation.to(itemData["link-wide-dynamic"]); } //if the desktop window is less than 1280 pixels wide and is not on Mobile, direct to the narrow layout page (the not equal to !== is just to show you can use different condition indicators if you need to) else if ((windowWidth < 1280) && (wixWindow.formFactor !== "Mobile")) { wixLocation.to(itemData["link-narrow-dynamic"]); } }); }); });
top of page
IMG-20210110-WA0368.jpg

Gallery

bottom of page