Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Thomsen 113 posts 336 karma points
    May 12, 2016 @ 19:08
    Thomsen
    0

    Problem with variants - the add to basket button remains disabled

    Hi

    I have used the starter kit and have not changed any logic in the product.cshtml page. When I add variants to my product it shows up fine as it should on the product details page, bit when I choose among the variants in the dropdown(s) and enter a digit for quantity, the "Add to basket" button remains disabled. (I can see the class disabled is on the button in the source".

    I have changed the product variant property alieas to "variants" as in the instructions for setting up the starter kit, but I can't get it working like in the online starter kit demo, where e.g. "summer yacht" has variants, and enables the buy button when variants are selected.

    Is there some criteria which should be fulfilled and that I am overseeing when when adding variants to a product? (sku, name, stock etc.) or maybe there is a guide or a screenshot on properly variants settings in the backend - or am I completely missing something?

    Best regards.

    Copy Link
  • Rune Grønkjær 1372 posts 3103 karma points
    May 13, 2016 @ 06:32
    Rune Grønkjær
    0

    Hi Thomsen,

    Does your browser console display any errors? If the frontend shows the variants, they should be set up correctly.

    /Rune

    Copy Link
  • Thomsen 113 posts 336 karma points
    May 13, 2016 @ 11:45
    Thomsen
    0

    Hi Rune,

    There is no errors or warnings in the console. And it looks like the variants output JSon is generated as it should, but the button keeps the class "disabled" when choices are selected. Do I need to reference any extra JS-files?

    Here is my form:

     <form method="post" action="/base/TC/FormPost.aspx" class="ajaxForm" data-product-id="1173">
        <script type="text/javascript">
            var _products = {"1173":{"5355d11f-1214-1015-0b78-89076c9240ce":{"combinations":[1174,1090],"productIdentifier":"1173_5355d11f-1214-1015-0b78-89076c9240ce"},"7278e3b1-4032-7f02-4080-78d1001ad5e7":{"combinations":[1175,1090],"productIdentifier":"1173_7278e3b1-4032-7f02-4080-78d1001ad5e7"},"65c91a04-2ca5-ee63-3281-4ff783b56353":{"combinations":[1176,1090],"productIdentifier":"1173_65c91a04-2ca5-ee63-3281-4ff783b56353"},"bc5ba80b-898b-d0b9-7bb2-5f352cf41f9a":{"combinations":[1547,1090],"productIdentifier":"1173_bc5ba80b-898b-d0b9-7bb2-5f352cf41f9a"}}};
        </script>
        <input name="AddOrUpdateOrderLine" value="productIdentifier, quantity" type="hidden" />
        <input name="productIdentifier" value="" type="hidden" />
        <input name="storeId" value="1" type="hidden" />
        <div class="well">
            <h1 class="page-header">ROK Halsb&#229;nd Neon</h1>

            <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Farve</label>
                        <div class="col-sm-9">
                            <select class="form-control" data-attribute-group="1085">
                                <option value="">Vælg Farve</option>
                                    <option value="1174">Gr&#248;n/Sort</option>
                                    <option value="1175">Orange/Sort</option>
                                    <option value="1176">Pink/Sort</option>
                                    <option value="1547">Bl&#229;/sort</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">St&#248;rrelse</label>
                        <div class="col-sm-9">
                            <select class="form-control" data-attribute-group="1089">
                                <option value="">Vælg St&#248;rrelse</option>
                                    <option value="1090">Small</option>
                            </select>
                        </div>
                    </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">Antal</label>
                    <div class="col-sm-9">
                        <input class="form-control" name="quantity" value="1" type="text" />
                    </div>
                </div>
            </div>
            <input class="btn btn-primary btn-block disabled" value="Add to basket" type="submit" />

        </div>
    </form>
    Copy Link
  • Rune Grønkjær 1372 posts 3103 karma points
    May 13, 2016 @ 13:37
    Rune Grønkjær
    100

    Hi Thomsen

    I would really like to help, but this sounds like a bit of looking into the javascript and markup. From the data you have provided it's hard for me to address the problem.

    What I would do was to try and debug the javascript to see where something is going wrong. Try to remove some variables and maybe make it more simple. And check out our demo.teacommerce.net, to maybe find out what is different in your setup.

    If you want someone to look into your code and help you, Tea Commerce provides the confidence program: https://teacommerce.net/products/confidence/

    /Rune

    Copy Link
  • Thomsen 113 posts 336 karma points
    May 14, 2016 @ 23:24
    Thomsen
    0

    Hi Rune

    Thanks for your reply. Your suggestion "try and debug the javascript" made me checkup on my .js references, and I realized that the product.js is not referenced in the Start Kit by default. So after adding:

    <script src="/Scripts/product.js"></script>

    to my master, it worked :-)

    I noticed that some of the other js references also needs to be included manually.

    Please note:

    This .js file is referenced in the online Starter Kit demo:

    <script src="/Scripts/cart.js"></script>

    but it throws a 404 - File or directory not found error. - Don't know if it does anything important regarding the cart functionality? No console errors here as far as I can see.

    Best regards.

    Copy Link
  • Rune Grønkjær 1372 posts 3103 karma points
    May 17, 2016 @ 14:07
    Rune Grønkjær
    0

    Cool. Thanks for the heads up. We will have a look at it.

    /Rune

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft