Feedback on Shadows

[fastees]

So I jumped on the opp to have all these new miva functions included in one Readytheme. Awesome! Here's the site:

fastees.com

Here's my feedback:

It's a learning process to transition from earlier themes. The responsive divisions are quite different. Other than that it's an amazing starting point. All the rich stuff is there. Facets work like a charm. The image machine is all I've expected for many years, Thanx Miva! The customer account area is amazing! Way to go on the one page idea. The discounts and pricing is so much more fluent through the whole process.. Another "Way To Go Miva". Al I can say is that this is a great place to start for the perfect Miva Store. 5 stars.

Here are my issues or bugs:

If you add to cart from the prod page and continue shop or close the fly in cart, it does not update the mini cart. This is a big issue!

Can't seem to figure out how to limit the category display on the facets. It seems to be a complete category tree or nothing.

An easy style include to align center. ea levels class="align-center"

What happened to the form on the CTUS?

Google Recaptcha in other places but checkout. Contact for instance.

Not many issues.

I have Google API include my reviews and lazy image working and some other stuff to share here.

[lesliekirk]

I'm thinking perhaps your feedback should be moved to the Shadows Forum https://www.miva.com/forums/forum/de...ows-readytheme - would you like me to move it there?

[fastees]

Please do.

[Zinbar]

Congrats on Shadows Ready Theme, I have a few observations on mobile - tested on iPhone 6 and 7 Plus

1) You can not see more than 1 related product, there is no slider to cycle through.

2) Checkout steps causing screen to zoom, this cuts off the buttons and totals. You can pinch it back down but it continues to happen with the next trigger.

Examples. On the first page of checkout hit the down arrow after entering the Zip Code, moves to the add promo code box with screen zoomed.
On the credit card entry form, screen zooms on touch. Both for the card number and again for Exp Date.

Also seeing the same issue with the mini basket as noted in this thread by fastees.

[Matt Zimmermann]

fastees

• If you add to cart from the prod page and continue shop or close the fly in cart, it does not update the mini cart. This is a big issue!
  • I will check into this.
• Can't seem to figure out how to limit the category display on the facets. It seems to be a complete category tree or nothing.
  • On the category page, if there are subcategories, the full category tree with display; if there are products, then you will see the facets as well as the category tree. You would have to create some custom code to limit the category tree display, depending on what you wanted the final result to be. There will be a future extension which will allow for a collapsing category structure for the category tree, however this is several months off.
• An easy style include to align center. ea levels class="align-center"
  • Are you looking to center text? If so, there is a class for that, u-text-center
• What happened to the form on the CTUS?
  • Due to ongoing issues with the existing PHP script and the lack of integration in Miva, we decided to remove this feature at this time. We are working on options for either inclusion into the software or a more maintainable extension.
• Google Recaptcha in other places but checkout. Contact for instance.
  • I believe this can be done, however there is nothing built into the Elements Framework or the Shadows ReadyTheme to facilitate this in an automatic way.

Zinbar

• You can not see more than 1 related product, there is no slider to cycle through.
  • The Apple line can cause issues with carousels as they allow for swipping of pages...which can interfere with the carousel swipe. A work-around would be to add the following to the `theme-styles.css` file:
    

    		.x-carousel__button {
    		    display: inline-block;
    		    padding: 0;
    		    position: absolute;
    		    top: 50%;
    		    font-size: 3rem;
    		    background-color: rgba(255, 255, 255, 0);
    		    border: 0 none;
    		    opacity: 0.25;
    		    -webkit-transform: translateY(-50%);
    		    -ms-transform: translateY(-50%);
    		    transform: translateY(-50%);
    		    transition: ease-in-out 0.3s;
    		    z-index: 50;
    		}
    
    		.x-carousel__button-right {
    		    right: 0;
    		}
    
    		.x-carousel__button:hover {
    		    background-color: rgba(255, 255, 255, 0.25);
    		    opacity: 1;
    		}

• Checkout steps causing screen to zoom, this cuts off the buttons and totals. You can pinch it back down but it continues to happen with the next trigger.
  • I will check into this. This was a concern early on in development, however I thought it had been corrected before the final release.

[slabar]

Google Recaptcha in other places but checkout. Contact for instance.

I included how to easily add ReCaptcha to your contact us page in this thread. https://www.miva.com/forums/forum/de...g-on-ctus-page

[Matt Zimmermann]

fastees

• If you add to cart from the prod page and continue shop or close the fly in cart, it does not update the mini cart. This is a big issue!
  • I was able to track this down. This issue was introduced with the addition of the off-canvas menu and the fasten header; both contain mini-basket count elements. I have updated the add-to-cart.js file to accommodate for this; it affects both Elements and Shadows. New packages will be uploaded to the app store later this week as well as being pushed to the GitHub repositories.
    If you would like to perform the update on an existing store before the push, replace the contents of your ajax-add-to-cart extension, located within User Interface -> JavaScript Resources -> ajax-add-to-cart, with the following:

/**
 * When called from a `theme.js` file on a product page, this extension will
 * work with the default page code to add a product to the cart utilizing an
 * AJAX call to the form processor.
 *
 * The function contains internal error checking as well as a check to see which
 * page was reached and displaying messages accordingly. If the store is also
 * utilizing the `mini-basket` extension, said extension will be triggered for
 * display upon successfully adding a product to the cart.
 */
(function (window, document, undefined) {
    'use strict';

    var purchaseButton = document.querySelector('[data-hook="add-to-cart"]');
    var purchaseButtonText = purchaseButton.textContent;
    var purchaseForm = document.querySelector('[data-hook="purchase"]');
    var purchaseFormActionInput = purchaseForm.querySelector('input[name="Action"]');
    var responseMessage = document.querySelector('[data-hook="purchase-message"]');
    var miniBasketCount = document.querySelectorAll('[data-hook~="mini-basket-count"]');
    var miniBasketAmount = document.querySelectorAll('[data-hook~="mini-basket-amount"]');

    purchaseButton.addEventListener('click', function (evt) {
        evt.preventDefault();
        evt.stopImmediatePropagation();

        purchaseForm.action = purchaseButton.getAttribute('data-action');
        purchaseFormActionInput.value = 'ADPR';

        var data = new FormData(purchaseForm);
        var request = new XMLHttpRequest(); // Set up our HTTP request

        purchaseForm.setAttribute('data-status', 'idle');

        if (purchaseForm.getAttribute('data-status') !== 'submitting') {
            purchaseForm.setAttribute('data-status', 'submitting');
            purchaseButton.setAttribute('disabled', 'disabled');
            purchaseButton.textContent = 'Processing...';
            responseMessage.innerHTML = '';

            // Setup our listener to process completed requests
            request.onreadystatechange = function () {
                // Only run if the request is complete
                if (request.readyState !== 4) {
                    return;
                }

                // Process our return data
                if (request.status === 200) {
                    // What do when the request is successful
                    var response = request.response;

                    if (response.body.id === 'js-BASK') {
                        var basketData = response.querySelector('[data-hook="basket"]');
                        var basketCount = basketData.getAttribute('data-item-count');
                        var basketSubtotal = basketData.getAttribute('data-subtotal');

                        if (miniBasketCount) {
                            for (var mbcID = 0; mbcID < miniBasketCount.length; mbcID++) {
                                miniBasketCount[mbcID].textContent = basketCount; // Update mini-basket quantity (display only)
                            }
                        }

                        if (miniBasketAmount) {
                            for (var mbaID = 0; mbaID < miniBasketCount.length; mbaID++) {
                                miniBasketAmount[mbaID].textContent = basketSubtotal; // Update mini-basket subtotal (display only)
                            }
                        }

                        if (typeof miniBasket !== 'undefined') {
                            document.querySelector('[data-hook="mini-basket"]').innerHTML = response.querySelector('[data-hook="mini-basket"]').innerHTML;

                            setTimeout(function () {
                                document.querySelector('[data-hook="open-mini-basket"]').click();
                            }, 100);
                        }
                        else {
                            responseMessage.innerHTML = '<div class="x-messages x-messages--success"><span class="u-icon-check"></span> Added to cart.</div>';
                        }

                        // Re-Initialize Attribute Machine (if it is active)
                        if (typeof attrMachCall !== 'undefined') {
                            attrMachCall.Initialize();
                        }
                    }
                    else if(response.body.id === 'js-PATR') {
                        var findRequired = purchaseForm.querySelectorAll('.is-required');
                        var missingAttributes = [];

                        for (var id = 0; id < findRequired.length; id++) {
                            missingAttributes.push(' ' + findRequired[id].title);
                        }

                        responseMessage.innerHTML = '<div class="x-messages x-messages--warning">All <em class="u-color-red">Required</em> options have not been selected.<br />Please review the following options: <span class="u-color-red">' + missingAttributes + '</span>.</div>';
                    }
                    else if(response.body.id === 'js-PLMT') {
                        responseMessage.innerHTML = '<div class="x-messages x-messages--warning">We do not have enough of the combination you have selected.<br />Please adjust your quantity.</div>';
                    }
                    else if(response.body.id === 'js-POUT') {
                        responseMessage.innerHTML = '<div class="x-messages x-messages--warning">The combination you have selected is out of stock.<br />Please review your options or check back later.</div>';
                    }
                    else {
                        responseMessage.innerHTML = '<div class="x-messages x-messages--warning">Please review your selection.</div>';
                    }

                    // Reset button text and form status
                    purchaseButton.removeAttribute('disabled');
                    purchaseButton.textContent = purchaseButtonText;
                    purchaseForm.setAttribute('data-status', 'idle');
                }
                else {
                    // What do when the request fails
                    console.log('The request failed!');
                    purchaseForm.setAttribute('data-status', 'idle');
                }
            };

            /**
             * Create and send a request
             * The first argument is the post type (GET, POST, PUT, DELETE, etc.)
             * The second argument is the endpoint URL
             */
            request.open(purchaseForm.method, purchaseForm.action);
            request.responseType = 'document';
            request.send(data);
        }
    }, false);

})(window, document);

[fastees]

That did not work. It will add to cart and the mini basket does update but the slide out does not work and if you try to add another without refreshing it will not.

[fastees]

Nobody wants to chime in on this? Kind of a big deal!

[Zinbar]

It looks to be working fine now on the Shadows live demo site. I think Matt is going to upload a new version later this week that will address this issue along with the IE11 category pages and IPhone zoom during checkout.

[lesliekirk]

I noticed that the enlarged product image "lightbox" doesn't display the additional large images. I have to close the popup. then click the swatch to swap out the main image, then I can view the enlarged image.

[Matt Zimmermann]

Hi Leslie,

That is correct. Shadows does not implement a product image carousel as some older ReadyThemes have. This will be a new extension created in a future ReadyTheme, most likely Colossus.

[Zinbar]

Hi Leslie, I asked Matt about the "lightbox" and he said it was not designed that way. Hopefully they will reconsider and add that into the theme. I hope your family enjoyed the hamburgers.

[fastees]

Is there a known issue with the estimate shipping on the cart page. I have this on 2 sites and neither is working correctly.

[Matt Zimmermann]

fastees There was an issue in the core which has been corrected. The fix is at the end of this thread.