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.
Announcement
Collapse
No announcement yet.
Add to Cart button on CTGY Page
Collapse
X
-
Originally posted by Matt Zimmermann View Postaarcmedia Take a look at my post under Shadows for a starting point: https://www.miva.com/forums/forum/de...ax-add-to-cart
Leave a comment:
-
aarcmedia Take a look at my post under Shadows for a starting point: https://www.miva.com/forums/forum/de...ax-add-to-cart
Leave a comment:
-
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.
Leave a comment:
-
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
Code:<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>
Code:<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>
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.
Leave a comment:
-
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:
Code:$.loadScript(theme_path + 'extensions/product-layout/ajax-add-to-cart.js');
Leave a comment:
-
Originally posted by Matt Zimmermann View PostHi 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.
https://lesliekirk.mivamerchantdev.com/leslie-test.html
There is only one product on this page but it still goes to the BASK screen.
Leave a comment:
-
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.
Leave a comment:
-
Originally posted by Matt Zimmermann View PostHi 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.
Leave a comment:
-
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.
Leave a comment:
-
I have come full circle on this little "take a peek" adventure. The jsPROD: function() fires off the ajax-add-to-cart.js
Code:/** * Load and initialize the AJAX Add to Cart extension */ $.loadScript(theme_path + 'extensions/product-layout/ajax-add-to-cart.js');
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.
Leave a comment:
-
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.
Leave a comment:
-
I've been trying to follow the data hook trail - I think that's the key.
Leave a comment:
-
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.
Leave a comment:
-
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
Code:<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
Code:<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
Code:<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">
Leave a comment:
Leave a comment: