hi there,
i’m new to webflow and im trying to replace a constant in my script (in tha page custom script) with a cms value.
how can i grab a value of a field in webflow ?
From the perspective of client-side code, the only access to CMS data you have is through HTML you’ve published on the page, and collection field embeds.
Let’s assume that BASIC_BATTERY is the constant you want to set, from a numeric CMS field. Let’s further assume that this script is going on the CMS template page for that collection.
You can put this script into the custom code are of that page, under page settings, then use the +Add field option to embed the field you want for your constant value.
For any other situation, it depends on where the script is running from, and what data it’s trying to access.
Ok i found out that you can do it in a cms page. but then the issue is that i can oly grab price.
the idea was to have a collection with 5 items. all of them have a price and specs. and i need to get the different prices. now i can only grab a price. in this part of the code i make a calulation for a pricing page. the user can slide 2 sliders and then a price will be calculated through the code.
Funny timing but it happens that I’m building exactly what you need right now.
You’re not familiar with Webflow but are you comfortable with Javascript in general?
Yes, ultimately it’s just about putting your collection list data in the DOM, and then accessing it. This is a need we have often so I’ve just designed a data format that easily translates collection list items into JavaScript objects.
So much easier to use than processes I’ve used in the past, but it required a bunch of infrastructure work in my plug in libraries.
If you run into this again, have a look here for some tools that may help you with more complex situations. It’s designed to build accessible data sources from Collection List data and make it easy to access for special coding requirements like lookup tables, etc.
Main library;
Collection list → data source loading;
New SA5 Data syntax designed today to make the setup far simpler.
It feels a little bit above my league. So there is no other alternative the get an items data? Or maybe I need to rethink what I want to achieve. I just need to conver the input of the user, do some if else statements. And the. Show the data of a specific item to the users
@memetican is it possible to grab it more easily through the API of webflow?
another solution is to put it all in code, but if i would be able to grab the code from the cms then that would be the best solution.
i you have an example code of your solution, can you share that with me?
in the current example, the icon, text,titles & features comes directly from the code, but I want that it coming from the databsase. so i can setup 3 basic prices with features and if the value for the slide is more then 1 we increase the price with the “added price” value in the database and also add a the number of for example batteries that will be supported with this subscription.
It won’t matter what you’re building; if the ingredients involve a set of data from the CMS that you need in your JS code, SA5 Data will make accessing that trivial.
The rest looks like form fields, sliders, some internal values, easy to grab point value stuff. Then do whatever calcs you need to and you’re all set.
It sounds like, separate from the calculations, you might have questions on how to display a set of calculation-determined collection items?
I couldn’t guess without seeing an actual prototype and/or some specs.
If you’re stuck and needing help building this you can DM me and I can send you my dev rates, but I think you know what you’re doing on the dev site. In terms of finding hidden collection list items to display, there is nothing magical about the DOM manipulations. However look into CMS-bound custom attributes, they’re a very convenient way to support your element selectors.
hi @memetican
i tried your code and i see my database in my consol log, but still get errors,
probably because of my javascript skills, (newbe). i tought i could grab it when i would place subscriptionitmes in the calculation function. but no it does not.
<script src="https://refreshless.com/nouislider/dist/nouislider.js?v=1550"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://refreshless.com/nouislider/documentation/assets/wNumb.js"></script>
<script>
$(function () {
// THIS IS FOR THE FIRST SINGLE SLIDER
let idOfSlider1 = 'slider-single-battery';
let idOfSliderValue1 = 'slider-total-value';
$('#' + idOfSlider1).css('display', 'none');
$("<div></div>").insertAfter('#' + idOfSlider1);
var single1 = $('#' + idOfSlider1).next()[0];
noUiSlider.create(single1, {
start: [1],
range: {
'min': 0,
'max': 5
},
step: 1,
tooltips: [
wNumb({ decimals: 0, prefix: '' }),
],
});
var valueSingle1 = document.getElementById(idOfSlider1);
single1.noUiSlider.on('update', function (values) {
let batteryValue = parseFloat(values[0]);
let evValue = parseFloat($('#slider-single-ev').val());
let totalValue = calculateTotalValue(batteryValue, evValue);
$('#' + idOfSlider1).val(values);
$('#' + idOfSliderValue1).text(totalValue);
});
$('[data-tooltip-pos]').next().children().find('.noUi-tooltip').addClass('bottom');
// THIS IS FOR THE SECOND SINGLE SLIDER (slider-single-ev)
let idOfSlider2 = 'slider-single-ev';
let idOfSliderValue2 = 'slider-total-value';
$('#' + idOfSlider2).css('display', 'none');
$("<div></div>").insertAfter('#' + idOfSlider2);
var single2 = $('#' + idOfSlider2).next()[0];
noUiSlider.create(single2, {
start: [0],
range: {
'min': 0,
'max': 5
},
step: 1,
tooltips: [
wNumb({ decimals: 0, prefix: '' }),
],
});
var valueSingle2 = document.getElementById(idOfSlider2);
single2.noUiSlider.on('update', function (values) {
let batteryValue = parseFloat($('#slider-single-battery').val());
let evValue = parseFloat(values[0]);
let totalValue = calculateTotalValue(batteryValue, evValue);
$('#' + idOfSlider2).val(values);
$('#' + idOfSliderValue2).text(totalValue);
});
function calculateTotalValue(batteryValue, evValue, subscriptionItems) {
let totalValue = 0;
if (batteryValue === 1 && evValue === 0) {
totalValue = subscriptionItems[0].price;
} else if (batteryValue === 0 && evValue === 1) {
totalValue = subscriptionItems[1].price;
} else if (batteryValue === 1 && evValue === 1) {
totalValue = subscriptionItems[3].price;
} else if (batteryValue >= 1 && evValue < 1) {
totalValue = subscriptionItems[0].price + (batteryValue - 1) * subscriptionItems[4].price;
} else if (batteryValue < 1 && evValue >= 1) {
totalValue = subscriptionItems[1].price + (evValue - 1) * subscriptionItems[5].price;
} else if (batteryValue >= 1 && evValue >= 1) {
totalValue = subscriptionItems[3].price + (evValue - 1) * subscriptionItems[5].price + (batteryValue - 1) * subscriptionItems[4].price;
}
return totalValue;
}
window.sa5 = window.sa5 || [];
window.sa5.push(['datastoreLoaded', (ds) => {
console.log("DATASTORE LOADED", ds.store['subscriptions'].data);
// Initialize an array to store subscription items
let subscriptionItems = [];
// Retrieve the array of subscription data objects from the database
let items = ds.store['subscriptions'].data;
// Iterate through the subscription items and store their values
items.forEach(item => {
// Extract values from the current subscription item
let name = item.name;
let subtitle = item.subtitle;
let information = item.information;
let price = parseFloat(item.price); // Convert the price string to a number
let icon = item.icon;
// Create an object to store the values of the current subscription item
let subscriptionItem = {
name: name,
subtitle: subtitle,
information: information,
price: price,
icon: icon
};
// Add the subscription item object to the array
subscriptionItems.push(subscriptionItem);
});
});
</script>
I can’t help much without access to the project, the ability to run the code, see the console, etc.
DM me if you need a dev to help and I’ll send you my rates.
However at a glance, I don’t see where the SA5 libraries are included, and you apparently have two jQuery libraries loading, which can create problems.
the top price card does exactly what i need, but i do not want to see the others, is there a way to hide them? i tried limit items, but then the data from the cms is also reduced to 1.
Normally your filtering code should take care of deciding which elements to show and which to hide. But if you’re just trying to show the first item in a CMS collection list you can do that with custom CSS.
/* Hide all .w-dyn-item elements */
div.w-dyn-list > div.w-dyn-items > .w-dyn-item {
display: none;
}
/* Show only the first .w-dyn-item element */
div.w-dyn-list > div.w-dyn-items > .w-dyn-item:first-child {
display: block;
}
is it possible that a rich text field is not recognized? when I’m using the html embed and what to get a field with the type “rich text field” it does not show up in the dropdown list.
