Storyteller Dynamic Pricing

[lesliekirk]

Thanks Matt! Updating the javascript file fixed the issue.

[Matt Zimmermann]

Hi Leslie,

Sure thing.

[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?

[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]

HI Leslie,

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

I can PM you the access.

[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.

[Matt Zimmermann]

HI Leslie,

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

[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,

Sure

[lesliekirk]

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

[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]

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,

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]

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

[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.