We already have an up and running Roomle integration on https://flashfox.ch/usm-haller-konfigurator/
Since there's a new version of the API we tried to upgrade. We used the documentation from https://docs.roomle.com/web/embedding/#getting-started
We don't use npm, so we tried the following code:
<body>
<div id="configurator-container"></div>
<script src="./roomle-configurator-api.es.min.js" type="module"></script>
<script type="module">
import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';
(async ()=> {
const options = {
id: 'usm:frame',
};
const configurator = await RoomleConfiguratorApi.create(
'demoConfigurator',
document.getElementById('configurator-container'),
options,
);
})();
</script>
</body>
The path ./roomle-configurator-api.es.min.js obviously doesn't work. What would be the correct Path to the .js of the latest version?
In case it helps, this is part of the code we currently run:
<script src="https://www.roomle.com/t/embedding/roomle-configurator-api.js"></script>
<script>
var wfPartsList;
var flashfoxImg;
var PartsMailer;
function startPartsMailer() {
PartsMailer = '...html...';
}
function endPartsMailer() {
PartsMailer += '...html...';
};
document.addEventListener('DOMContentLoaded', async function () {
try {
RoomleConfigurator.addChangeListener((parts) => {
(async function () {
const {perspectiveImage} = await RoomleConfigurator.requestAddToCart();
console.log(perspectiveImage);
flashfoxImg = perspectiveImage;
}())
startPartsMailer()
var i = 1;
wfPartsList = parts.partList;
parts.partList.forEach((part)=> {
var style = '';
if (i % 2 == 0) {
style = 'background-color: #ececec';
}
PartsMailer += '... html ...';
++i;
part.parameters.forEach((param)=> {
});
});
});
await RoomleConfigurator.init('«name»', 'configurator-container', 'usm:«name»', {
skin: {
'color-on-secondary': 'white',
'brand-logo': 'https://path...'
}
});
} catch(error) {
console.error(error);
}
});
</script>
