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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    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

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        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

              Miva Web Developer
              Alchemy Web Development
              https://www.alchemywebdev.com
              Site Development - Maintenance - Consultation

              Miva Certified Developer
              Miva Professional Developer

              https://www.dev4web.net | Twitter

              Comment

              Working...
              X