Storyteller Dynamic Pricing

[lesliekirk]

Are there any specific settings that need to be configured to trigger it? It looks like it works with all attribute types. I've tried radio buttons and drop down select but the product price doesn't change with either one. I'm not seeing any javascript errors. I'm wondering about the settings in the Attribute Machine? The Displayed Price and the Additional Price Display.

Another question or perhaps a point of clarification - when you said

where a product is using inventory variants and non-variant attributes

that only applies to the individual product? There are a couple of other products that have had the Inventory Variants assigned. But I'm trying to test this with one that doesn't have any Inventory Variants.

[Matt Zimmermann]

Hi Leslie,

For the function to run, the product has to have attributes and attribute machine has to be undefined.

[lesliekirk]

Hi Leslie,

For the function to run, the product has to have attributes and attribute machine has to be undefined.

Do I have to create a new PROD Page template for this? When you say "undefined" does that mean I un-assign the item?

Yes, the product has attributes, they do not have the "I" assigned.

[lesliekirk]

Do I have to create a new PROD Page template for this? When you say "undefined" does that mean I un-assign the item?

Yes, the product has attributes, they do not have the "I" assigned.

FYI - it doesn't work on the demo site:

https://storyteller-readytheme.mivam...e-getaway.html

[Matt Zimmermann]

Hi Leslie,

You shouldn't have to create a new template, unless you want to have a specific design for those products. As for the demonstration site, that product uses variants.

[lesliekirk]

Hi Leslie,

You shouldn't have to create a new template, unless you want to have a specific design for those products. As for the demonstration site, that product uses variants.

Okay, I don't need to create a new template. I am not using Inventory Variants. The javascript pricing updating is not working. I'm not following what you mean by

and attribute machine has to be undefined.

How do I undefine the attribute machine? I tried unchecking the "Enabled" checkbox and that didn't seem to work (after I updated).

Could using an Attribute Template instead of building the attributes in the product be the problem?

[Matt Zimmermann]

Hi Leslie,

Attribute Machine, as a JavaScript function, is defined once you set an attribute to track inventory...whether or not you have created variants.

[lesliekirk]

Since my issue is a Storyteller issue, should I move my questions there?

[Matt Zimmermann]

Hi Leslie,

Sure

[lesliekirk]

Hi Leslie,

Attribute Machine, as a JavaScript function, is defined once you set an attribute to track inventory...whether or not you have created variants.

I have created a new product, it doesn't have the track inventory checked. I have even disabled the Attribute Machine in the PROD Page template. The javascript dynamic price still isn't updating.

[Matt Zimmermann]

HI Leslie,

Are you seeing any JavaScript errors and/or can you post a link?

[lesliekirk]

HI Leslie,

Are you seeing any JavaScript errors and/or can you post a link?

I'm not seeing any javascript errors and I can't post a link, it's behind a wall.

[lesliekirk]

HI Leslie,

Are you seeing any JavaScript errors and/or can you post a link?

I can PM you the access.

[Matt Zimmermann]

Hi Leslie,

Seems to be working on the demonstration site here: https://storyteller-readytheme.mivam...ravel-kit.html

Check that the JavaScript in your scripts.js file matches this:

                if (typeof attrMachCall === 'undefined' && $.hook('product-attribute__count').val() > 0) {
                    var baseProductPrice = Number($.hook('product-details__price').attr('content')),
                        regularProductPrice = Number(),
                        productAttributeCount = Number($.hook('product-attribute__count').val() + 1),
                        productAttributes = $.hook('cmp-product-purchase').find(':input'),
                        attributeType = [''];

                    for (var i = 0; i < productAttributes.length; i++) {
                        var tagName = productAttributes[i].tagName.toLowerCase(),
                            elementType = productAttributes[i].type,
                            type = productAttributes[i].getAttribute('data-attribute-type'),
                            name = productAttributes[i].name;

                        if (elementType === 'hidden' && type != null) {
                            attributeType.push(type);
                        }

                        // Update product display price on any attribute value change
                        productAttributes[i].onchange =  function () {
                            updateProductDisplayPrice();
                        };
                    }

                    // Update product display price based on the total of selected options
                    function updateProductDisplayPrice() {
                        var availableAttributes,
                            selectedOption,
                            selectedOptionData,
                            totalAdjustedProductPrice = baseProductPrice,
                            totalRegularProductPrice = regularProductPrice,
                            totalQuantity;

                        for (var attributeIndex = 1; attributeIndex < productAttributeCount; attributeIndex++) {
                            availableAttributes = document.getElementsByName('Product_Attributes[' + attributeIndex + ']:value');

                            if (attributeType[attributeIndex] === 'select') {
                                for (var optionIndex = 0; optionIndex < availableAttributes.length; optionIndex++) {
                                    selectedOption = availableAttributes.item(optionIndex);
                                    selectedOptionData = selectedOption.options.item(selectedOption.selectedIndex);
                                    totalAdjustedProductPrice += Number(selectedOptionData.getAttribute('data-option-price'));
                                    totalRegularProductPrice += Number(selectedOptionData.getAttribute('data-regular-price'));
                                }
                            }
                            else if (attributeType[attributeIndex] === 'radio' || attributeType[attributeIndex] === 'checkbox') {
                                for (var radioOptionIndex = 0; radioOptionIndex < availableAttributes.length; radioOptionIndex++) {
                                    selectedOption = availableAttributes.item(radioOptionIndex);

                                    if (selectedOption.checked) {
                                        totalAdjustedProductPrice += Number(selectedOption.getAttribute('data-option-price'));
                                        totalRegularProductPrice += Number(selectedOption.getAttribute('data-regular-price'));
                                    }
                                }
                            }
                            else if (attributeType[attributeIndex] === 'text' || attributeType[attributeIndex] === 'memo') {
                                selectedOption = availableAttributes.item(0);

                                if (selectedOption.value) {
                                    totalAdjustedProductPrice += Number(selectedOption.getAttribute('data-option-price'));
                                    totalRegularProductPrice += Number(selectedOption.getAttribute('data-regular-price'));
                                }
                            }
                        }

                        totalQuantity = document.getElementsByName('Quantity');
                        totalAdjustedProductPrice = totalAdjustedProductPrice * Number(totalQuantity.item(0).value);
                        totalRegularProductPrice = totalRegularProductPrice * Number(totalQuantity.item(0).value);
                        $.hook('product-details__price').html(formatCurrency(totalAdjustedProductPrice));
                    }

                    // Format for US currency
                    function formatCurrency(total) {
                        var neg = false;

                        if (total < 0) {
                            neg = true;
                            total = Math.abs(total);
                        }
                        return (neg ? '-$' : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').toString();
                    }

                    // Update product display price based on default attributes on page load
                    updateProductDisplayPrice();
                }

[lesliekirk]

Although it looks like I had that code, I went ahead and change the code to this. It didn't make a difference. The console is not showing any javascript errors. I wonder if using a linked Attribute Template could be the issue?

Would you like me to PM you with access to view the page?