Add to Cart button on CTGY Page

[lesliekirk]

I had started an attempt to build a Multi-Product Add to Cart Button that stayed on the category page and would trigger the mini-basket for a Bootstrap (Base) ReadyTheme. I switched to the Colossus ReadyTheme but had continued to post questions/comments regarding my attempts https://www.miva.com/forums/forum/de...n-reloads-page I was even sent some very nifty AJAX for it, that's when I realized I needed to move my questions/comments to the appropriate Forum. (Note, this is also part of my sub-sub category Alternate Page Template - which is looking very good thanks to the group effort of the Forums)

Matt had said

In Colossus, if you changed the body ID for the category page the page would die a horrible death, many errors would be thrown, and mayhem would ensue. Since I have not released a quick-view or multi-Ajax-add extension for the new ReadyThemes, you would have to develop your own code for controlling the form. Those extensions are in the queue, however they won't be worked on until next year.

The desire to break something got the best of me, so I changed the body ID to js-PROD, changed the Add to Cart button to display per product (instead of a multi-add), clicked save and went to view the page. Everything still looked good. I should note that I reverted back to the per-product add to cart as a starting point. My thinking is that if I can get the single add to cart buttons to work as I want, I might be able to get the multi-add going.

The page didn't break but the Add to Cart went to the BASK screen. I think since this project is behind a wall I should set this up in a public dev site so my futile attempts can be scrutinized.

[Bruce - PhosphorMedia]

I think having a 'picture' of how this works will help. So, and its still early for me, but here's my attempt.

Normally, (as you know--but spelling everything out for everyone else) when you click a 'form button' (or its equivalent), the system sends a request to the system much like just clicking a hyperlink.

This request usually has a bunch of 'variables' including a 'directive' (action) to the system on what to do: in this case, Add Something to the Cart.

It also includes a 'what' and in the Add to Basket case, the product and quantity.

Finally, it has to have a 'where' (like a hyperlink) indicating where the user should be when the process is complete.

What about Ajaxing?

Here's the secrete. Ajax is basically no different than a normal Form post. All of the above still pertains--just that the page doesn't 'reload'.

You still need the Action, the What AND the WHERE. Typically, the where is a miva template with ONLY the code needed to perform the action requested (since its never shown). It also needs to create any information that will be displayed to the user. For example, "yea, you added X to your basket".

The information is returned by the Ajax function itself, but its display has to be controlled at the "document" level using javascript or jQuery. In its simplistic form, You define an empty div like

<div id="ajaxMesssage"></div>

And then have a little jQuery like

$("#ajaxMessage").append(ajaxResponse);

The ajaxResponse is a variable created in the Ajax function itself. The Ajax Response is EVERYTHING that would be seen as if you just called the template. So, if you had that template produce "Hello Miva", the 'ajaxRespons' variable would contain the words "Hello World". It would also contain any HTML markup.

Here's a good place to get even more background. I recommend spending at least 15 minutes playing around as I think it will make your eventual task MUCH easier

HTH

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

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

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

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

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

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,

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,

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,

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]

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.

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

[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