Add to Cart button on CTGY Page

[aarcmedia]

Matt, I've seen that. For this project and the other I'm working on, this feature on CTGY get's chalked up as a "they aren't paying for me to go that far, so since it will require too much manual labor, it will have to wait" haha.

Once I have time to sit down and whip something up I will, or, I'll wait for you all to build it into the readytheme if you get to it before I am forced to sit down and figure out.

Not laziness I say. It's a matter of "eye on the prize" haha.

[lesliekirk]

aarcmedia Take a look at my post under Shadows for a starting point: https://www.miva.com/forums/forum/de...ax-add-to-cart

I saw that post but the only thing that exploded was my brain. I reached out to the Miva Design Team but they are so backed up that it will be another week before they can even look at my request.

[Matt Zimmermann]

aarcmedia Take a look at my post under Shadows for a starting point: https://www.miva.com/forums/forum/de...ax-add-to-cart

[aarcmedia]

Leslie, I'm with you haha. I have two sites I'm trying to get the ajax add to cart working on the category page. On one I do have it set so it's firing for the FIRST product on the category page, but it isn't changing for the rest of them on the page.

The issue here is it's just a pain trying to sift through everything to figure out where everything that needs to be modified lives.

Miva, you don't have something for this ReadyTheme that can be posted here for the Colossus theme to make this one thing easier?

Can't be mad at me for fishing. I will certainly figure it out eventually, but it's going to take a while haha.

[lesliekirk]

It used to be you could just change the body ID to make this "work" now I am finally seeing this is no longer the way to go. I had previously asked if there were other factors a play when it comes to controlling the Add to Cart. I've taken the time to take a close look at the source code after Matt's reply.

The category page that I'm trying to make work has this

 <script data-resource-group="footer_js" data-resource-code="settings">theme_path = 'themes/colossus/'; (function (mivaJS) {
mivaJS.ReadyThemeVersion = '1.0.2';
mivaJS.Store_Code = 'mivaleslie';
mivaJS.Product_Code = 'leslie-test-product';
mivaJS.Category_Code = 'leslie-test';
mivaJS.Customer_Login = '';
mivaJS.Page = 'CTGY_SUB_SUB';
mivaJS.Screen = 'CTGY';
}(window.mivaJS || (window.mivaJS = {})));</script>

while the PROD page has this

 <script data-resource-group="footer_js" data-resource-code="settings">theme_path = 'themes/colossus/'; (function (mivaJS) {
mivaJS.ReadyThemeVersion = '1.0.2';
mivaJS.Store_Code = 'mivaleslie';
mivaJS.Product_Code = 'leslie-test-product';
mivaJS.Category_Code = 'leslie-test-child-child';
mivaJS.Customer_Login = '';
mivaJS.Page = 'PROD';
mivaJS.Screen = 'PROD';
}(window.mivaJS || (window.mivaJS = {})));</script>

I changed the ID back to use the token to generate it. I tried adding the code Matt suggested (I probably added it incorrectly) and it didn't make any difference.


The bottom line of my adventure is while changing the body ID to js-PROD didn't break the page, it didn't do anything either.

I've seen what a couple other people have done with the Add to Cart from the category page but it seems to involve have to create a new mini-basket. Since I don't know enough about this, it just leaves me wondering why can't it be coded to add to the existing mini basket? I am soooo confused.

[Matt Zimmermann]

Hi Leslie,

Since you have given the page the product page ID, it is trying to load all the functions for the product page. This is causing an error since MivaEvents is not defined on the page. I would recommend either creating a custom page and adding a new page function to the theme.js file or changing the ID back to the default category page and adding this to the category page function in theme.js:

$.loadScript(theme_path + 'extensions/product-layout/ajax-add-to-cart.js');

[lesliekirk]

Hi Leslie,

Yes, if you are loading the script onto the category page, in your theme.js file, and you have one product on the page it should work.

So my confusion continues. I've moved the code to a "public" dev site to make it easier to review:

https://lesliekirk.mivamerchantdev.com/leslie-test.html

There is only one product on this page but it still goes to the BASK screen.

[Matt Zimmermann]

Hi Leslie,

Yes, if you are loading the script onto the category page, in your theme.js file, and you have one product on the page it should work.

[lesliekirk]

Hi Leslie,

The ajax-add-to-cart function is designed to be used on a page with a single product add form which has the action of ADPR. You would need to create a custom version of the file to work on all add to cart forms/buttons on the page and change the action value accordingly.

Ahhhh, I think a lightbulb might be flickering, maybe. Do I need to have some sort of specific hidden tag for each form? Every button on the page has to have it's own "call"? At this point, I'm not even trying to attempt any sort of multi-add - I just want to get the add to cart to stay on the category page. So if the category only had one product, it would work?

[Matt Zimmermann]

Hi Leslie,

The ajax-add-to-cart function is designed to be used on a page with a single product add form which has the action of ADPR. You would need to create a custom version of the file to work on all add to cart forms/buttons on the page and change the action value accordingly.

[lesliekirk]

I have come full circle on this little "take a peek" adventure. The jsPROD: function() fires off the ajax-add-to-cart.js

/**
         * Load and initialize the AJAX Add to Cart extension
         */
        $.loadScript(theme_path + 'extensions/product-layout/ajax-add-to-cart.js');

Sooooo...why wouldn't work if I change the body ID to js-PROD? Before I can begin to understand the AJAX involved I need if there might be something in the compiled code that is telling this not to work.

ps...I took a peek at the JavaScript Resources and looked to see what Pages the themes/colossus/extensions/product-layout/ajax-add-to-cart.js is assigned to - it's not assigned to any page, including the PROD Page. (But then it also isn't clicked as Global or Active here). So I'm thinking it's just the call from the theme.js that fires it off.

[lesliekirk]

The ajax-add-to-cart.js has the data-hook="purchase" in it. It also has this comment:

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

I might be getting warmer. I need to still figure out what is being checked to determine what is the "default page code" (which would be PROD).

[lesliekirk]

I've been trying to follow the data hook trail - I think that's the key.

[Bruce - PhosphorMedia]

Not sure I understand to context here, but there shouldn't be a 'masquerade' going on, just a 'man behind the curtain'. Have you tried searching the obvious scripts for "ajax". Sorry, just never got around to playing with the new themes.

Also, while its not as simple to roll this functionality into the current ReadyThemes, perhaps you could 'bother' miva to come up with at least a code page for adding this...it wouldn't take them as long cause they know where the bodies are.

[lesliekirk]

Is the page is masquerading as the PROD Page, wouldn't the javascript/AJAX be fooled into behaving as such? I came to this "conclusion" based on other javascript within other template coding doesn't work until you change the body ID (this comes up when others are creating an Alternate Page Template and things don't quite work as expected, the first thing suggested is to change the body ID).

With that said. Here is the PROD Page Add to Cart form

    <form class="o-layout__item x-product-layout-purchase u-width-12 u-width-6--l u-width-5--w" data-hook="purchase" action="&mvte:urls:BASK:auto;" method="post" name="add">
                <input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
                <input type="hidden" name="Action" value="ADPR" />
                <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
                <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />

                    <legend>Purchase &mvt:product:name;</legend>
                    <ul class="c-form-list">
                        <li class="c-form-list__item c-form-list__item--full u-hidden u-block--l">
                            <h1 class="x-product-layout-purchase__name">
                                <span class="x-product-layout-purchase__sku">
                                    <mvt:if expr="NOT ISNULL l.settings:product:sku">
                                        SKU: &mvt:product:sku;
                                    <mvt:else>
                                        SKU: &mvt:product:code;
                                    </mvt:if>
                                </span>
                                <span itemprop="name">&mvt:product:name;</span>
                            </h1>
                        </li>
                        <li class="c-form-list__item c-form-list__item--full">
                            <p class="x-product-layout-purchase__pricing">
                                <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                                </mvt:if>
                                <span class="x-product-layout-purchase__pricing-current">
                                    <span id="price-value" itemprop="price" content="&mvt:product:price;">&mvt:product:formatted_price;</span>
                                </span>
                                <span class="x-product-layout-purchase__pricing-original">
                                    <span id="price-value-additional" data-prompt="regular:"></span>
                                </span>
                            </p>
                            <div id="product-discounts" class="x-product-layout-purchase__product-discounts u-font-small">
                                <mvt:foreach iterator="discount" array="product:discounts">
                                    <p class="x-product-layout-purchase__product-discounts">
                                        &mvt:discount:descrip;: <strong>&mvt:discount:formatted_discount;</strong>
                                    </p>
                                </mvt:foreach>
                            </div>



                            <mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
                                <link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
                            </mvt:if>
                            <div id="inventory-message" class="x-product-layout-purchase__inventory-message"><mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">&mvt:product:inv_long;</mvt:if></div>


                        </li>
                        <mvt:item name="discount_volume" param="product:id" />
                        <li class="o-layout c-form-list__item x-product-layout-purchase__options">
                            <mvt:item name="product_attributes" param="product:id" />
                        </li>
                        <li class="c-form-list__item c-form-list__item--full x-product-layout-purchase__cta">
                            <div class="x-product-layout-purchase__message" data-hook="purchase-message"></div>
                            <div class="o-layout">
                                <mvt:if expr="l.settings:subscription:enabled AND l.settings:subscription:mandatory">
                                    <mvt:if expr="l.settings:product:inv_level NE 'out'">
                                        <div class="o-layout__item c-control-group x-product-layout-purchase__options-quantity">
                                            <div class="c-control-group__field t-product-layout-purchase__quantity">
                                                <label class="c-form-label u-text-bold u-font-small u-color-gray-40 is-required" for="l-quantity">qty</label>
                                                <input id="l-quantity" class="c-form-input u-text-center u-color-gray-40" type="tel" name="Quantity" value="1">
                                            </div>
                                            <span class="t-product-layout-purchase__add-to-cart" onclick="document.forms.add.action = '&mvtj:urls:BASK:auto;'; document.forms.add.elements.Action.value = 'ADPR';">
                                                <mvt:item name="buttons" param="AddToBasket"/>
                                            </span>
                                        </div>
                                    </mvt:if>
                                <mvt:else>
                                    <div class="o-layout__item c-control-group x-product-layout-purchase__options-quantity">
                                        <div class="c-control-group__field t-product-layout-purchase__quantity">
                                            <label class="c-form-label u-text-bold u-font-small u-color-gray-50 is-required" for="l-quantity">qty</label>
                                            <input id="l-quantity" class="c-form-input u-text-center u-color-gray-50" type="tel" name="Quantity" value="1">
                                        </div>
                                        <mvt:if expr="l.settings:product:inv_level NE 'out'">
                                            <span class="t-product-layout-purchase__add-to-cart" onclick="document.forms.add.action = '&mvtj:urls:BASK:auto;'; document.forms.add.elements.Action.value = 'ADPR';">
                                                <mvt:item name="buttons" param="AddToBasket"/>
                                            </span>
                                        </mvt:if>
                                        <span class="t-product-layout-purchase__add-to-wish" data-mmnodisable="true">
                                            <span onclick="document.forms.add.action = '&mvtj:urls:WISH:secure;'; document.forms.add.elements.Action.value = 'ATWL';">
                                                <mvt:item name="buttons" param="AddToWishList"/>
                                            </span>
                                        </span>
                                    </div>
                                </mvt:if>
                            </div>
                        </li>
                    </ul>

            </form>

Here is the Add to Cart form code that I placed on my category page

 <form class="o-layout__item x-product-layout-purchase u-width-12 u-width-6--l u-width-5--w" data-hook="purchase" action="&mvte:urls:BASK:auto;" method="post" name="add">
                <input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
                <input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
                <input type="hidden" name="Action" value="ADPR" />
                <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
                <input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
                <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />

                    <legend>Purchase &mvt:product:name;</legend>
                    <ul class="c-form-list">
                        <li class="c-form-list__item c-form-list__item--full u-hidden u-block--l">
                            <h1 class="x-product-layout-purchase__name">
                                <span class="x-product-layout-purchase__sku">
                                    <mvt:if expr="NOT ISNULL l.settings:product:sku">
                                        SKU: &mvt:product:sku;
                                    <mvt:else>
                                        SKU: &mvt:product:code;
                                    </mvt:if>
                                </span>
                                <span itemprop="name">&mvt:product:name;</span>
                            </h1>
                        </li>
                        <li class="c-form-list__item c-form-list__item--full">
                            <p class="x-product-layout-purchase__pricing">
                                <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                                </mvt:if>
                                <span class="x-product-layout-purchase__pricing-current">
                                    <span id="price-value" itemprop="price" content="&mvt:product:price;">&mvt:product:formatted_price;</span>
                                </span>
                                <span class="x-product-layout-purchase__pricing-original">
                                    <span id="price-value-additional" data-prompt="regular:"></span>
                                </span>
                            </p>

                            <mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
                                <link itemprop="availability" href="http://schema.org/&mvt:product:inv_short;">
                            </mvt:if>
                            <div id="inventory-message" class="x-product-layout-purchase__inventory-message"><mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">&mvt:product:inv_long;</mvt:if></div>



                        </li>
                        <mvt:item name="discount_volume" param="product:id" />
                        <li class="o-layout c-form-list__item x-product-layout-purchase__options">
                            <mvt:item name="product_attributes" param="product:id" />
                        </li>
                        <li class="c-form-list__item c-form-list__item--full x-product-layout-purchase__cta">
                            <div class="x-product-layout-purchase__message" data-hook="purchase-message"></div>
                            <div class="o-layout">
                                <mvt:if expr="l.settings:subscription:enabled AND l.settings:subscription:mandatory">
                                    <mvt:if expr="l.settings:product:inv_level NE 'out'">
                                        <div class="o-layout__item c-control-group x-product-layout-purchase__options-quantity">
                                            <div class="c-control-group__field t-product-layout-purchase__quantity">
                                                <label class="c-form-label u-text-bold u-font-small u-color-gray-40 is-required" for="l-quantity">qty</label>
                                                <input id="l-quantity" class="c-form-input u-text-center u-color-gray-40" type="tel" name="Quantity" value="1">
                                            </div>
                                            <span class="t-product-layout-purchase__add-to-cart" onclick="document.forms.add.action = '&mvtj:urls:BASK:auto;'; document.forms.add.elements.Action.value = 'ADPR';">
                                                <mvt:item name="buttons" param="AddToBasket"/>
                                            </span>
                                        </div>
                                    </mvt:if>
                                <mvt:else>
                                    <div class="o-layout__item c-control-group x-product-layout-purchase__options-quantity">
                                        <div class="c-control-group__field t-product-layout-purchase__quantity">
                                            <label class="c-form-label u-text-bold u-font-small u-color-gray-50 is-required" for="l-quantity">qty</label>
                                            <input id="l-quantity" class="c-form-input u-text-center u-color-gray-50" type="tel" name="Quantity" value="1">
                                        </div>
                                        <mvt:if expr="l.settings:product:inv_level NE 'out'">
                                            <span class="t-product-layout-purchase__add-to-cart" onclick="document.forms.add.action = '&mvtj:urls:BASK:auto;'; document.forms.add.elements.Action.value = 'ADPR';">
                                                <mvt:item name="buttons" param="AddToBasket"/>
                                            </span>
                                        </mvt:if>


                                    </div>
                                </mvt:if>
                            </div>
                        </li>
                    </ul>

            </form>

The AddToBasket button item is the same for both

<input class="c-button c-button--full c-button--huge c-control-group__button u-bg-primary u-color-black u-text-bold u-font-small u-text-uppercase" data-action="&mvte:urls:BASK:auto_sep;ajax=1" data-hook="add-to-cart" data-value="Add To Cart" type="submit" value="Add To Cart">

I've been digging to understand which js files are used for the Add To Cart. I think if I knew which files are being used it might help me to better understand why this won't fire on the category page. I'm suspecting that there might be a Page Code embedded somewhere and that change the body ID may only be "part" of the puzzle.