Announcement

Collapse
No announcement yet.

Something changed when the upgrade to 10.01.02

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Something changed when the upgrade to 10.01.02

    Something broke the swatch function after the site updated to version 10.01.02. The "is--active" class stays stuck on the first color and the add to cart button stays grayed out until an attribute is clicked - even if there is only one attribute.

    "is--active" class example

    only one attribute example

    Is there still a way to have a "Select One" as part of each attribute so the customer will know to do something?

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    Yes, there was a change made in Miva 10.01.00 that could cause this. You will have to modify Attribute Machine to remove the inventory check:
    Code:
    AttributeMachine.prototype.Generate_Discount = function (discount) {
    var discount_div;
    
    discount_div = document.createElement('div');
    discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;
    
    return discount_div;
    };
    
    AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
    var swatch = document.createElement('li'),
    img = document.createElement('img');
    
    img.src = option.image;
    img.setAttribute('alt', option.prompt);
    img.setAttribute('title', option.prompt);
    swatch.setAttribute('data-code', option.code);
    swatch.setAttribute('data-color', option.prompt);
    swatch.appendChild(img);
    return swatch;
    };
    
    AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
    var i,
    swatchNameElement = document.querySelector('[data-hook="swatch-name"]');
    
    for (i = 0; i < input.select.options.length; i++) {
    if (input.select.options[i].value === option.code) {
    input.select.selectedIndex = i;
    }
    }
    
    this.Attribute_Changed(input);
    swatchNameElement.innerHTML = option.prompt;
    };
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      Yes, there was a change made in Miva 10.01.00 that could cause this. You will have to modify Attribute Machine to remove the inventory check:
      Thank you! That fixed 2 problems. How do I get the "select one" to display in the drop down lists?


      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Hi Leslie,

        Do you have attribute machine set to look for a "Select One"?
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          Do you have attribute machine set to look for a "Select One"?
          Yes, but I discovered that there is also a hard coded <option>Select One</option>
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Originally posted by lesliekirk View Post

            Yes, but I discovered that there is also a hard coded <option>Select One</option>
            Which I should note, doesn't seem to want to work all the time.

            Here's the Product Attribute Template code:

            Code:
            <mvt:foreach iterator="attribute" array="attributes">
            <mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code)" />
            <input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;" data-attribute-type="&mvte:attribute:type;" />
            <mvt:if expr="l.settings:attribute:template_code NE 0">
            <input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:template_code" value="&mvte:attribute:template_code;" />
            </mvt:if>
            <mvt:if expr="l.settings:attribute:type EQ 'text'">
            <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
            <mvt:else>
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
            </mvt:if>
            <input type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
            </div>
            <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
            <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
            <mvt:else>
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
            </mvt:if>
            <textarea name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="">&mvte:attribute:value;</textarea>
            </div>
            <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
            <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
            <legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="h-nm required">&mvte:attribute:prompt;</legend>
            <mvt:else>
            <legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="h-nm font--regular">&mvte:attribute:prompt;</legend>
            </mvt:if>
            <mvt:foreach iterator="option" array="attribute:options">
            <mvt:assign name="l.settings:optionID" value="'l-' $ tolower(l.settings:option:code)" />
            <label for="&mvt:optionID;" title="&mvt:option:prompt;" class="show">
            <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
            <input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" checked />
            <mvt:else>
            <input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" />
            </mvt:if>
            <mvt:if expr="l.settings:option:image">
            <img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
            <mvt:else>
            &mvte:option:prompt;
            <mvt:if expr="l.settings:option:price">
            <mvt:if expr="l.settings:option:price GT 0">
            &nbsp;<mvt:eval expr="'+ $' $ rnd(l.settings:option:price, 2)" />
            <mvt:else>
            &nbsp;<mvt:eval expr="'- $' $ rnd(l.settings:option:price, 2)" />
            </mvt:if>
            </mvt:if>
            </mvt:if>
            </label>
            </mvt:foreach>
            </div>
            <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
            <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
            <label for="&mvt:attributeID;" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt;</label>
            <mvt:else>
            <label for="&mvt:attributeID;" title="&mvt:attribute:prompt;">&mvt:attribute:prompt;</label>
            </mvt:if>
            <select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;">
            <option value="Select One">Select One</option>
            <mvt:foreach iterator="option" array="attribute:options">
            <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
            &mvte:option:prompt;
            </option>
            <mvt:else>
            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
            &mvte:option:prompt;
            </option>
            </mvt:if>
            </mvt:foreach>
            </select>
            </div>
            <mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
            <div class="form-row cmp-product-purchase__swatch-attribute">
            <mvt:if expr="l.settings:attribute:required">
            <label for="l-swatch-select" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt; <span class="font--light" data-hook="swatch-name">&nbsp;</span></label>
            <mvt:else>
            <label for="l-swatch-select" title="&mvt:attribute:prompt;">&mvt:attribute:prom pt; <span class="font--light" data-hook="swatch-name">&nbsp;</span></label>
            </mvt:if>
            <select id="l-swatch-select" class="h-all-hidden" data-attribute="&mvte:attribute:code;" data-hook="swatch-select" name="Product_Attributes[&mvt:attribute:index;]:value">
            <mvt:foreach iterator="option" array="attribute:options">
            <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
            &mvte:option:prompt;
            <mvt:if expr="l.settings:option:price">
            <mvt:if expr="l.settings:option:price GT 0">
            &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
            <mvt:else>
            &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
            </mvt:if>
            </mvt:if>
            </option>
            <mvt:else>
            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
            &mvte:option:prompt;
            <mvt:if expr="l.settings:option:price">
            <mvt:if expr="l.settings:option:price GT 0">
            &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
            <mvt:else>
            &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
            </mvt:if>
            </mvt:if>
            </option>
            </mvt:if>
            </mvt:foreach>
            </select>
            <div id="js-swatches" class="cmp-product-list__swatches" data-hook="product-details__swatches"></div>
            </div>
            <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
            <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">
            <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
            <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
            <mvt:else>
            <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
            </mvt:if>
            <mvt:if expr="l.settings:attribute:image">
            <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
            <mvt:else>
            &mvte:attribute:prompt;
            <mvt:if expr="l.settings:attribute:price">
            <mvt:if expr="l.settings:attribute:price GT 0">
            &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
            <mvt:else>
            &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
            </mvt:if>
            </mvt:if>
            </mvt:if>
            </label>
            <mvt:else>
            <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">
            <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
            <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
            <mvt:else>
            <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
            </mvt:if>
            <mvt:if expr="l.settings:attribute:image">
            <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
            <mvt:else>
            &mvte:attribute:prompt;
            <mvt:if expr="l.settings:attribute:price">
            <mvt:if expr="l.settings:attribute:price GT 0">
            &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
            <mvt:else>
            &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
            </mvt:if>
            </mvt:if>
            </mvt:if>
            </label>
            </mvt:if>
            </div>
            </mvt:if>
            </mvt:foreach>
            <mvt:if expr="l.settings:subscription:enabled AND l.settings:subscription:term_count">
            <div class="form-row">
            <mvt:if expr="l.settings:subscription:mandatory">
            <label for="l-subscription" title="Subscribe" class="required">Select Subscription</label>
            <select id="l-subscription" class="border--gray" name="Product_Subscription_Term_ID">
            <mvt:foreach iterator="term" array="subscription:terms">
            <option value="&mvte:term:id;">&mvte:term:descrip;</option>
            </mvt:foreach>
            </select>
            <mvt:else>
            <div class="cmp-flex-tabs">
            <input id="l-tab-one-time" data-flex-tab type="radio" name="flex-tab" checked>
            <label class="cmp-flex-tabs__tab font--uppercase" for="l-tab-one-time">One Time Purchase</label>
            <input id="l-tab-subscribe" data-flex-tab type="radio" name="flex-tab">
            <label class="cmp-flex-tabs__tab font--uppercase" for="l-tab-subscribe">Subscribe</label>
            <div class="cmp-flex-tabs__content">
            <select id="l-subscription" class="border--gray" name="Product_Subscription_Term_ID">
            <mvt:if expr="NOT l.settings:subscription:mandatory">
            <option value="0">Select Subscription</option>
            </mvt:if>
            <mvt:foreach iterator="term" array="subscription:terms">
            <option value="&mvte:term:id;">&mvte:term:descrip;</option>
            </mvt:foreach>
            </select>
            </div>
            </div>
            </mvt:if>
            </div>
            </mvt:if>
            <input data-hook="product-attribute__count" type="hidden" name="Product_Attribute_Count" value="<mvt:eval expr="miva_array_elements(l.settings:attributes)" />" />
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7
              Hi Leslie,

              For the "Select One" option, I would suggest something like this:
              Code:
              <option value="">Select One</option>
              Matt Zimmermann
              Front-End Development Director / Miva, Inc.

              Comment

              Working...
              X